/* =========================================================
   Thomas Galicia Real Estate — content pages (guides, hubs, reports)
   ADDITIVE ONLY. Loaded after css/styles.css on the new pages.
   Uses the existing brand tokens (ink / ivory / gold, Cormorant
   Garamond + Jost). Nothing here overrides homepage rules.
   ========================================================= */

.page-body{ background: var(--ink); }
.page-body .site-header{ background: rgba(11,11,12,0.92); box-shadow: 0 1px 0 var(--hairline); }
.page-body .header-inner{ padding-top: 1.38rem; padding-bottom: 1.38rem; }
.page-body .site-header .brand-mark{ width: 64px; }
.page-body .brand-text strong{ font-size: 1.63rem; }
.page-body .brand-brokerage{ font-size: 1.1rem; }
@media (max-width: 920px){ .page-body .site-header .brand-mark{ width: 55px; } .page-body .brand-brokerage{ font-size: .96rem; } }
@media (max-width: 480px){ .page-body .brand-text strong{ font-size: 1.4rem; } .page-body .brand-brokerage{ font-size: .86rem; } }

/* ---------- page hero ---------- */
.page-hero{
  position: relative;
  padding: calc(150px + 3.5rem) var(--gutter) 3.6rem;
  background:
    radial-gradient(ellipse at 14% 10%, rgba(205,168,94,0.11), transparent 48%),
    linear-gradient(180deg, #0b0b0c 0%, #131315 70%, #0b0b0c 100%);
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
}
@media (max-width: 920px){ .page-hero{ padding-top: calc(120px + 2.5rem); } }
.page-hero-inner{ max-width: var(--max); margin: 0 auto; position: relative; z-index: 2; }
.page-hero h1{
  font-size: clamp(2.3rem, 5.2vw, 3.9rem);
  line-height: 1.08;
  max-width: 900px;
  margin-bottom: .45em;
}
.page-hero .page-lede{ font-size: 1.16rem; color: var(--ivory-dim); max-width: 760px; margin: 0 0 1.6rem; }
.page-byline{
  display:flex; flex-wrap:wrap; gap:.4rem 1.4rem;
  font-size: .78rem; letter-spacing: .08em; color: var(--ivory-faint);
}
.page-byline a{ color: var(--gold); text-decoration: none; }
.page-byline a:hover{ text-decoration: underline; text-underline-offset: 3px; }
.page-hero-art{
  position:absolute; right: -2%; bottom: -6px; width: min(56%, 760px);
  opacity: .22; pointer-events:none; z-index:1;
  -webkit-mask-image: linear-gradient(to left, #000 40%, transparent 100%);
          mask-image: linear-gradient(to left, #000 40%, transparent 100%);
}
.page-hero-art svg{ width:100%; height:auto; display:block; }
@media (max-width: 700px){ .page-hero-art{ width: 90%; opacity: .12; } }

/* ---------- breadcrumbs ---------- */
.breadcrumbs{ margin: 0 0 1.6rem; }
.breadcrumbs ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.3rem .55rem; }
.breadcrumbs li{ font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ivory-faint); }
.breadcrumbs li + li::before{ content:"/"; margin-right:.55rem; color: var(--gold-deep); }
.breadcrumbs a{ color: var(--ivory-dim); text-decoration:none; }
.breadcrumbs a:hover{ color: var(--gold-bright); }

/* ---------- article layout ---------- */
.page-layout{
  max-width: var(--max); margin: 0 auto;
  padding: 4rem var(--gutter) 2rem;
  display:grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 4rem;
  align-items:start;
}
@media (max-width: 980px){ .page-layout{ grid-template-columns: 1fr; gap: 2rem; } .page-aside{ order:-1; } }

.page-aside{ position: sticky; top: 120px; }
@media (max-width: 980px){ .page-aside{ position: static; } }
.toc{
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--ink-2); padding: 1.3rem 1.3rem 1.1rem;
}
.toc-title{ font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin: 0 0 .8rem; }
.toc ol{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; }
.toc a{ font-size: .88rem; color: var(--ivory-dim); text-decoration:none; line-height:1.4; display:block; }
.toc a:hover{ color: var(--gold-bright); }
.aside-cta{
  margin-top: 1rem; border: 1px solid rgba(205,168,94,0.35); border-radius: var(--radius);
  padding: 1.3rem; background: linear-gradient(160deg, #1b1813, #100e0b);
}
.aside-cta p{ font-size: .9rem; color: var(--ivory-dim); margin: 0 0 1rem; line-height: 1.55; }
.aside-cta strong{ display:block; font-family: var(--serif); font-size: 1.2rem; font-weight: 500; color: var(--ivory); margin-bottom: .35rem; }
.aside-cta .btn{ width: 100%; padding: .85em 1em; font-size: .72rem; }

/* ---------- prose ---------- */
.prose{ max-width: 780px; }
.prose h2{
  font-size: clamp(1.7rem, 3.2vw, 2.25rem); line-height: 1.15;
  margin: 3.2rem 0 1rem; scroll-margin-top: 130px;
  padding-top: 2.2rem; border-top: 1px solid var(--hairline);
}
.prose > h2:first-child{ margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3{ font-size: 1.42rem; margin: 2rem 0 .6rem; color: var(--ivory); scroll-margin-top: 130px; }
.prose p, .prose li{ font-size: 1.03rem; line-height: 1.78; color: var(--ivory-dim); }
.prose p{ margin: 0 0 1.1rem; }
.prose ul, .prose ol{ margin: 0 0 1.4rem; padding-left: 1.25rem; }
.prose li{ margin: 0 0 .55rem; }
.prose li::marker{ color: var(--gold-deep); }
.prose strong{ color: var(--ivory); font-weight: 500; }
.prose em{ color: var(--ivory); }
.prose a{ color: var(--gold-bright); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(205,168,94,0.45); }
.prose a:hover{ color: var(--ivory); }
.prose .lead{ font-size: 1.16rem; color: var(--ivory); }

/* Fact vs. opinion — clearly labeled */
.callout{
  margin: 1.8rem 0; padding: 1.3rem 1.4rem 1.2rem;
  border-radius: var(--radius); border: 1px solid var(--hairline);
  background: var(--ink-2);
}
.callout-label{
  display:inline-block; font-size: .64rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 .55rem !important;
}
.callout p:last-child, .callout ul:last-child{ margin-bottom: 0; }
.callout-perspective{ border-left: 2px solid var(--gold); background: linear-gradient(160deg, #1b1813, #121110); }
.callout-perspective p{ color: var(--ivory); font-family: var(--serif); font-size: 1.22rem !important; line-height: 1.55 !important; }
.callout-perspective .callout-label{ font-family: var(--sans); }
.callout-source{ border-left: 2px solid var(--ivory-faint); }
.callout-source p, .callout-source li{ font-size: .88rem !important; line-height: 1.65 !important; }

/* Tables */
.table-wrap{ overflow-x:auto; margin: 1.2rem 0 1.6rem; border: 1px solid var(--hairline); border-radius: var(--radius); }
.data-table{ width:100%; border-collapse: collapse; font-size: .92rem; min-width: 540px; }
.data-table caption{ caption-side: bottom; text-align:left; padding: .8rem 1rem; font-size: .78rem; color: var(--ivory-faint); line-height: 1.6; }
.data-table th, .data-table td{ text-align:left; padding: .8rem 1rem; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.data-table thead th{ font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); font-weight: 500; background: var(--ink-2); }
.data-table tbody th{ font-family: var(--serif); font-size: 1.08rem; font-weight: 500; color: var(--ivory); }
.data-table td{ color: var(--ivory-dim); }
.data-table .pending{ color: var(--ivory-faint); font-style: italic; }

/* Card grid (reuses exchange-card look) */
.card-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.2rem; margin: 1.6rem 0 2rem; }
.card-grid .exchange-card{ padding: 1.6rem 1.5rem; }
.card-grid .exchange-card h3{ margin-top: .3rem; font-size: 1.28rem; }
.card-grid .exchange-card p{ font-size: .93rem; }
a.exchange-card{ text-decoration: none; display:block; color: inherit; }
a.exchange-card .card-go{ display:inline-block; margin-top: .9rem; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
a.exchange-card:hover .card-go{ color: var(--gold-bright); }

/* Related links */
.related{ max-width: var(--max); margin: 0 auto; padding: 1rem var(--gutter) 4rem; }
.related-title{ font-family: var(--serif); font-size: 1.6rem; color: var(--ivory); margin: 0 0 1.1rem; }
.related .county-links{ display:grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: .8rem; }

/* CTA band */
.page-cta{
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  background: var(--ink-2);
}
.page-cta-inner{
  max-width: var(--max); margin: 0 auto; padding: 3.4rem var(--gutter);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap: 1.6rem;
}
.page-cta h2{ font-size: clamp(1.7rem, 3.4vw, 2.3rem); margin: 0 0 .3rem; }
.page-cta p{ margin:0; color: var(--ivory-dim); max-width: 620px; }
.page-cta-actions{ display:flex; flex-wrap:wrap; gap: .8rem; }

.page-disclaimer{ max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) 3rem; }
.page-disclaimer p{ font-size: .78rem; color: var(--ivory-faint); line-height: 1.7; max-width: 940px; margin: 0 0 .6rem; }

/* Footer additions */
.footer-guides{
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) 2rem;
  display:flex; flex-wrap:wrap; gap: .5rem 1.6rem; align-items: baseline;
}
.footer-guides-label{ font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-right: .4rem; }
.footer-guides a{ font-size: .76rem; letter-spacing: .08em; color: var(--ivory-dim); text-decoration: none; }
.footer-guides a:hover{ color: var(--gold-bright); }

/* Testimonials (structure only — populated with genuine, approved reviews) */
.testimonial-empty{
  border: 1px dashed var(--hairline); border-radius: var(--radius);
  padding: 2rem 1.5rem; text-align: center; color: var(--ivory-faint); margin: 1.4rem 0;
}
.testimonial{ margin: 1.4rem 0; padding: 1.5rem 1.6rem; border-left: 2px solid var(--gold-deep); background: var(--ink-2); }
.testimonial blockquote{ margin:0 0 .8rem; font-family: var(--serif); font-size: 1.3rem; line-height: 1.5; color: var(--ivory); }
.testimonial figcaption{ font-size: .8rem; letter-spacing: .06em; color: var(--ivory-faint); }

/* Transactions list (static HTML so non-JS crawlers can read it) */
.txn-list{ list-style:none; padding:0 !important; margin: 1rem 0 1.6rem; display:flex; flex-direction:column; gap:.1rem; }
.txn-list li{ display:grid; grid-template-columns: 1.5fr 1fr .8fr; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--hairline); margin:0 !important; font-size: .94rem !important; }
.txn-list li span:first-child{ color: var(--ivory); font-family: var(--serif); font-size: 1.12rem; }
.txn-list li span:last-child{ color: var(--gold-bright); text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 620px){ .txn-list li{ grid-template-columns: 1fr; gap: .1rem; } .txn-list li span:last-child{ text-align:left; } }

/* ---------- homepage "Areas of Focus" (new section, native card styling) ---------- */
.focus-section .card-grid{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px){ .focus-section .card-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .focus-section .card-grid{ grid-template-columns: 1fr; } }
.focus-section .exchange-card ul{ margin: .7rem 0 0; padding-left: 1.1rem; }
.focus-section .exchange-card li{ font-size: .88rem; color: var(--ivory-dim); margin: 0 0 .25rem; }
.focus-section .exchange-card li::marker{ color: var(--gold-deep); }


/* =========================================================
   FINANCING — weekly change + 24-month bar chart
   ========================================================= */
.rates-change{ margin: 0 0 1.4rem; color: var(--ivory-dim); font-size: .98rem; max-width: 860px; }
.rates-change strong{ color: var(--gold-bright); font-weight: 500; }
.rates-chart{ border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--ink-2); padding: 1.5rem 1.5rem 1.1rem; margin: 0 0 2rem; }
.rates-chart-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap: 1rem; margin-bottom: 1rem; }
.rates-chart-head .rates-more-title{ margin: 0; }
.rates-chart-sub{ margin: .2rem 0 0; font-size: .82rem; color: var(--ivory-faint); }
.rc-toggle{ display:flex; gap:.5rem; }
.rc-toggle .tab-btn{ padding: .55em 1.2em; font-size: .7rem; }
.rc-frame{ position: relative; }
.rc-svg{ display:block; width:100%; height:auto; overflow: visible; }
.rc-grid{ stroke: rgba(245,241,230,0.07); stroke-width: 1; }
.rc-base{ stroke: rgba(245,241,230,0.28); stroke-width: 1; }
.rc-axis{ fill: var(--ivory-faint); font-family: var(--sans); font-size: 11px; letter-spacing: .04em; }
.rc-value{ fill: var(--ivory); font-family: var(--sans); font-size: 12px; font-weight: 500; }
.rc-bar path{ fill: var(--gold); transition: fill .2s ease; }
.rc-bar.is-partial path{ fill: var(--gold-deep); }
.rc-bar.is-hover path, .rc-bar:focus path{ fill: var(--gold-bright); }
.rc-bar:focus{ outline: none; }
.rc-bar:focus-visible path{ stroke: var(--ivory); stroke-width: 1.5; }
.rc-hit{ fill: transparent; }
.rc-tip{
  position:absolute; transform: translate(-50%, -100%); pointer-events:none; z-index: 3;
  background: #0b0b0c; border: 1px solid rgba(205,168,94,0.55); color: var(--ivory);
  font-size: .78rem; line-height: 1.35; padding: .45rem .7rem; border-radius: 6px; white-space: nowrap;
  box-shadow: 0 10px 24px -10px rgba(0,0,0,.8);
}
.rc-table{ margin-top: .6rem; }
.rc-table summary{ cursor:pointer; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ivory-dim); }
.rc-table summary:hover{ color: var(--gold-bright); }
.rc-table .data-table{ min-width: 420px; font-size: .86rem; }
@media (max-width: 600px){ .rates-chart{ padding: 1.1rem .8rem .9rem; } .rc-axis{ font-size: 13px; } .rc-tip{ white-space: normal; width: 200px; } }

/* =========================================================
   BAY AREA PULSE — county map, panel headlines, weekly list
   ========================================================= */
.county-map-col{ display:flex; flex-direction:column; gap: 1rem; }
.county-map{
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: radial-gradient(90% 80% at 50% 45%, rgba(205,168,94,0.07), transparent 70%), linear-gradient(160deg, #15130f, #0d0c0a);
  padding: 1rem 1rem .4rem;
}
.county-map-svg{ display:block; width:100%; max-height: 560px; height:auto; }
.cm-county{
  fill: rgba(205,168,94,0.10); stroke: rgba(243,217,139,0.55); stroke-width: 1.2; stroke-linejoin: round;
  cursor: pointer; transition: fill .25s ease, stroke .25s ease;
}
.cm-county:hover, .cm-county:focus-visible{ fill: rgba(205,168,94,0.30); stroke: var(--gold-bright); outline: none; }
.cm-county.is-active{ fill: rgba(205,168,94,0.48); stroke: var(--gold-bright); stroke-width: 2; }
.cm-label{ fill: var(--ivory); font-family: var(--sans); font-size: 15px; letter-spacing: .06em; pointer-events: none;
  paint-order: stroke; stroke: rgba(11,11,12,0.85); stroke-width: 3px; }
.county-map-credit{ margin: .3rem 0 0; font-size: .66rem; color: var(--ivory-faint); text-align: right; }
.counties .county-grid{ grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.counties .county-tile{ min-height: 0; padding: .7rem .8rem; }
.counties .county-tile-name{ font-size: 1.05rem; }
.counties .county-tile-sub, .counties .county-tile-go{ display:none; }
@media (max-width: 520px){ .counties .county-grid{ grid-template-columns: repeat(2, 1fr); } }

.county-news{ margin: 0 0 1.2rem; }
.county-news-title{ font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin: 0 0 .5rem; }
.county-news-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.county-news-list li{ border-left: 2px solid var(--gold-deep); padding-left: .75rem; }
.county-news-list a{ color: var(--ivory); text-decoration:none; font-size: .92rem; line-height: 1.4; display:block; }
.county-news-list a:hover{ color: var(--gold-bright); text-decoration: underline; text-underline-offset: 3px; }
.county-news-list span{ font-size: .72rem; color: var(--ivory-faint); }
.county-news-empty{ font-size: .86rem; color: var(--ivory-faint); margin: 0; }
.county-news-empty a, .county-news-more{ color: var(--gold); font-size: .78rem; }
.county-news-more{ display:inline-block; margin-top: .6rem; text-decoration: none; }

.pulse-news{ margin-top: 2.4rem; border-top: 1px solid var(--hairline); padding-top: 2rem; }
.pulse-section > .pulse-news{ margin-left:auto; margin-right:auto; }
.pulse-news-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:.5rem 1rem; margin-bottom: 1rem; }
.pulse-news-head .rates-more-title{ margin: 0; }
.pulse-news-sub{ margin:0; font-size: .8rem; color: var(--ivory-faint); }
.pulse-news-sub a{ color: var(--gold); text-decoration:none; }
.pulse-news-list{ list-style:none; margin:0; padding:0 !important; display:grid; grid-template-columns: repeat(2, 1fr); gap: .9rem 2rem; }
@media (max-width: 760px){ .pulse-news-list{ grid-template-columns: 1fr; } }
.pulse-news-list li{ border-left: 2px solid var(--gold-deep); padding-left: .9rem; margin:0 !important; }
.pulse-news-list a{ color: var(--ivory); text-decoration:none; font-size: 1rem; line-height: 1.45; display:block; }
.pulse-news-list a:hover{ color: var(--gold-bright); text-decoration: underline; text-underline-offset: 3px; }
.pulse-news-meta{ display:block; font-size: .74rem !important; color: var(--ivory-faint); margin-top: .2rem; letter-spacing: .02em; }
.pulse-news-empty{ color: var(--ivory-faint); font-size: .92rem; }
.prose .pulse-news-list{ grid-template-columns: 1fr; margin-bottom: 1rem; }

.rc-svg[hidden], .rc-tip[hidden]{ display: none !important; }

/* =========================================================
   PAGE HERO WITH BACKGROUND PORTRAIT (About page)
   Enlarged, washed-out, highly transparent — the text leads.
   Uses the same gold washout as the homepage hero portrait.
   ========================================================= */
.page-hero--photo{ min-height: min(78vh, 760px); display:flex; align-items:flex-end; }
.page-hero--photo .page-hero-inner{ width: 100%; }
.page-hero-photo{
  position:absolute; top:0; bottom:0; right:0; width: min(68%, 980px);
  z-index:1; pointer-events:none; opacity: .26;
  -webkit-mask-image: linear-gradient(to left, #000 35%, rgba(0,0,0,.55) 62%, transparent 92%);
          mask-image: linear-gradient(to left, #000 35%, rgba(0,0,0,.55) 62%, transparent 92%);
}
.page-hero-photo img{
  width:100%; height:100%; display:block;
  object-fit: cover; object-position: 50% 4%;   /* never stretched; keeps the face in frame */
  filter: grayscale(.62) sepia(.5) brightness(.72) contrast(1.06);
  transform-origin: 50% 0; transform: scale(1.04);
}
.page-hero-photo::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(60% 70% at 60% 35%, rgba(205,168,94,0.14), transparent 65%),
    linear-gradient(to top, rgba(11,11,12,0.95), transparent 45%);
}
@media (max-width: 760px){
  .page-hero-photo{ width:100%; opacity:.16;
    -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 40%, transparent 100%); }
  .page-hero--photo{ min-height: 0; }
}

/* start the portrait below the fixed header so the head is never covered */
.page-hero-photo{ top: 118px; }
@media (max-width: 920px){ .page-hero-photo{ top: 96px; } }