/* ─────────────────────────────────────────────────────────────
   Refined Surfaces — Token Overlay
   ─────────────────────────────────────────────────────────────
   Companion to refined-dashboard.css. Applies Refined tokens
   (Fraunces / Inter / Source Serif / clay-soft / brand-soft / etc.)
   to the other major read surfaces of vostego.com:

     - Article         (.article-page)
     - Job detail      (.job-page)
     - News detail     (.news-detail-page)
     - News index      (.news-page-wrapper)
     - Author          (author surfaces inside .dashboard-container)
     - Subscribe       (.support-page)

   Every rule is scoped to one of those roots so this file is inert
   on every other page. Loaded site-wide from default.html.

   Rollback = remove the <link> tag in default.html.
   ───────────────────────────────────────────────────────────── */

/* ═════════════════════════════════════════════════════════════
   ARTICLE — long-form editorial treatment
   Bundle note: "Long-form gets real serif body, drop cap, pull
   quote, reading-progress bar. Partner Content disclosed at top,
   sponsored slot lives quietly in right rail, inline upgrade
   nudge appears once mid-article."
   ═════════════════════════════════════════════════════════════ */

.article-page {
  background: var(--paper-0);
  color: var(--ink-1);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

.article-page h1,
.article-page h2,
.article-page h3,
.article-page h4 {
  font-family: var(--font-display);
  color: var(--ink-0);
  letter-spacing: -0.02em;
  font-weight: 500;
}

.article-page h1 { font-weight: 500; }

/* Article body text is Source Serif for readable long-form */
.article-page .article-content p,
.article-page .article-body p,
.article-page article p {
  font-family: var(--font-serif);
  color: var(--ink-1);
  line-height: 1.65;
}

/* Drop cap on the first paragraph */
.article-page .article-content > p:first-of-type::first-letter,
.article-page .article-body > p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-size: 3.6em;
  line-height: 0.9;
  float: left;
  margin: 0.05em 0.08em 0 0;
  color: var(--ink-0);
  font-weight: 500;
}

/* Pull-quote treatment */
.article-page blockquote,
.article-page .pull-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5em;
  line-height: 1.35;
  color: var(--ink-0);
  border-left: 3px solid var(--clay);
  padding: 0.25em 0 0.25em 1em;
  margin: 1.5em 0;
  letter-spacing: -0.01em;
  font-weight: 500;
}

/* Eyebrow / category labels */
.article-page .article-category,
.article-page .article-kicker,
.article-page .article-meta-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* Byline + meta */
.article-page .article-meta,
.article-page .byline,
.article-page .article-date {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-2);
}

/* Reading progress bar — clay accent */
.reading-progress-container {
  background: var(--paper-2);
}
.reading-progress-bar {
  background: var(--clay);
}

/* Partner Content / sponsored disclosure */
.article-page .partner-content,
.article-page .sponsored-banner,
.article-page [class*="partner-content"] {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--paper-1);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 10px 1var(--space-1);
}

/* Inline upgrade nudge */
.article-page .upgrade-nudge,
.article-page .inline-upsell {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--clay);
  border-radius: var(--r-md);
  padding: 1var(--space-2) var(--space-5);
  margin: 2em 0;
}
.article-page .upgrade-nudge h3,
.article-page .inline-upsell h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.1em;
}
.article-page .upgrade-nudge p,
.article-page .inline-upsell p {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-2);
}

/* ═════════════════════════════════════════════════════════════
   JOB DETAIL — coach handoff + match score
   Bundle note: "Dark coach-handoff banner is the editorial hook;
   match score lists strengths AND gaps; comp band shows where this
   role sits in the playbook; Vostego Take is the editorial reason
   to be here."
   ═════════════════════════════════════════════════════════════ */

.job-page {
  background: var(--paper-0);
  color: var(--ink-1);
  font-family: var(--font-sans);
}

.job-page h1,
.job-page h2,
.job-page h3 {
  font-family: var(--font-display);
  color: var(--ink-0);
  letter-spacing: -0.02em;
  font-weight: 500;
}

.job-page .job-title,
.job-page .job-header h1 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink-0);
}

.job-page .company-name,
.job-page .job-company {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-2);
}

.job-page .job-meta,
.job-page .job-location,
.job-page .job-comp,
.job-page [class*="match-score"] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

/* Coach handoff banner — dark editorial card */
.job-page .coach-handoff,
.job-page .coach-banner,
.job-page [class*="coach-handoff"] {
  background: var(--panel-dark);
  color: var(--on-ink);
  border-radius: var(--r-lg);
  padding: var(--space-5) var(--space-6);
}
.job-page .coach-handoff h2,
.job-page .coach-handoff h3,
.job-page .coach-banner h2,
.job-page .coach-banner h3 {
  color: var(--on-ink);
  font-family: var(--font-display);
}

/* Vostego Take callout */
.job-page .vostego-take,
.job-page [class*="vostego-take"] {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--clay);
  border-radius: var(--r-md);
  padding: 1var(--space-2) var(--space-5);
}
.job-page .vostego-take h3 {
  font-family: var(--font-display);
  font-weight: 500;
}
.job-page .vostego-take p {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-1);
}

/* Match strengths/gaps */
.job-page .match-strength,
.job-page .match-gap {
  font-family: var(--font-sans);
  color: var(--ink-1);
}
.job-page .match-strength::before { color: #2c6d54; }
.job-page .match-gap::before { color: #b25b3a; }

/* ═════════════════════════════════════════════════════════════
   NEWS DETAIL — journalism page
   ═════════════════════════════════════════════════════════════ */

.news-detail-page {
  font-family: var(--font-sans);
  color: var(--ink-1);
}

.news-detail-page h1,
.news-detail-page h2,
.news-detail-page h3 {
  font-family: var(--font-display);
  color: var(--ink-0);
  letter-spacing: -0.02em;
  font-weight: 500;
}

.news-detail-page .article-content p,
.news-detail-page article p {
  font-family: var(--font-serif);
  line-height: 1.65;
  color: var(--ink-1);
}

.news-detail-page .news-meta,
.news-detail-page .news-date,
.news-detail-page .breadcrumbs {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-2);
}

.news-detail-page blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.4em;
  color: var(--ink-0);
  border-left: 3px solid var(--clay);
  padding-left: 1em;
}

/* ═════════════════════════════════════════════════════════════
   NEWS INDEX — listing
   ═════════════════════════════════════════════════════════════ */

.news-page-wrapper {
  font-family: var(--font-sans);
}

.news-page-wrapper .page-title {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink-0);
}

.news-page-wrapper .news-card,
.news-page-wrapper .news-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.news-page-wrapper .news-card:hover,
.news-page-wrapper .news-item:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-sm);
}
.news-page-wrapper .news-title,
.news-page-wrapper .news-card-title {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink-0);
  letter-spacing: -0.01em;
}
.news-page-wrapper .news-meta,
.news-page-wrapper .news-date {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}

/* ═════════════════════════════════════════════════════════════
   AUTHOR — editorial face
   Bundle note: "Author page is editorial real estate — big italic
   typographic treatment, portrait at 4:5 ratio, stats as type not
   chips. Articles laid out as journal index."
   The layout uses .dashboard-container as the root, so we scope
   via the .author-* descendants which are unique to author pages.
   ═════════════════════════════════════════════════════════════ */

.dashboard-container:has(.author-image) {
  background: var(--paper-0);
  color: var(--ink-1);
}

.dashboard-container .author-image,
.dashboard-container .author-avatar-placeholder {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper-1);
}

.dashboard-container .author-image img,
.dashboard-container .author-avatar-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dashboard-container:has(.author-image) .dashboard-header-wrapper h1,
.dashboard-container:has(.author-avatar-placeholder) h1.author-name,
.author-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  letter-spacing: -0.02em;
  color: var(--ink-0);
  font-style: italic;
}

.dashboard-container .author-bio,
.dashboard-container .author-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink-2);
}

.dashboard-container .author-stats,
.dashboard-container .author-stat {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}
.dashboard-container .author-stat-value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.6rem;
  color: var(--ink-0);
  letter-spacing: -0.02em;
}

.dashboard-container .author-articles-list .article-row,
.dashboard-container .author-articles-list li {
  border-bottom: 1px solid var(--line);
}
.dashboard-container .author-articles-list .article-row a,
.dashboard-container .author-articles-list li a {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink-0);
  letter-spacing: -0.01em;
}

/* ═════════════════════════════════════════════════════════════
   SUBSCRIBE — monetization
   Bundle note: "Four real tiers (Supporter / Builder / Advocate /
   Founder), monthly · quarterly · annual toggle, Advocate has the
   variable-billing slider, every tier has 'send as a gift.' Trust
   strip is factual, not glossy."
   ═════════════════════════════════════════════════════════════ */

.support-page {
  background: var(--paper-0);
  color: var(--ink-1);
  font-family: var(--font-sans);
}

.support-page h1,
.support-page h2,
.support-page h3 {
  font-family: var(--font-display);
  color: var(--ink-0);
  letter-spacing: -0.02em;
  font-weight: 500;
}

.support-page .support-intro,
.support-page .calm-callout {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-1);
  font-size: 1.05rem;
  line-height: 1.6;
}

.support-page .tier-card,
.support-page [class*="tier"],
.support-page .pricing-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.support-page .tier-card.featured,
.support-page .pricing-card.featured,
.support-page .pricing-card.recommended {
  border-color: var(--clay);
  box-shadow: var(--shadow-md);
}

.support-page .tier-name,
.support-page .pricing-tier-name {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-0);
}

.support-page .tier-price,
.support-page .pricing-price {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--ink-0);
  letter-spacing: -0.02em;
}

.support-page .tier-period,
.support-page .pricing-period {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  text-transform: uppercase;
}

.support-page .billing-toggle,
.support-page [class*="billing-toggle"] {
  background: var(--paper-1);
  border-radius: var(--radius-full);
  padding: var(--space-1);
  display: inline-flex;
  gap: 2px;
}
.support-page .billing-toggle button {
  border: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--space-3);
  font-weight: 500;
  padding: 6px var(--space-3);
  border-radius: var(--radius-full);
  color: var(--ink-2);
  cursor: pointer;
}
.support-page .billing-toggle button.active,
.support-page .billing-toggle button.on {
  background: var(--card);
  color: var(--ink-0);
  box-shadow: var(--shadow-sm);
}

.support-page .gift-cta,
.support-page [class*="gift"] {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-2);
}

.support-page .trust-strip,
.support-page [class*="trust"] {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  text-transform: uppercase;
}

.support-page .glossary-term {
  border-bottom: 1px dotted var(--ink-3);
  color: var(--ink-1);
}