/* ===========================================================
   The Joske Report - May 2026 - Website Styles
   Brand palette matches the JOSKE Report deck.
   =========================================================== */

:root {
  --amber:     #D97706;
  --amber-soft:#FBA94A;
  --charcoal:  #1A1A1A;
  --dark:      #333333;
  --gray:      #666666;
  --light:     #999999;
  --pale:      #F5F5F5;
  --offwhite:  #FAFAFA;
  --card:      #FFFFFF;
  --green:     #059669;
  --red:       #C0392B;
  --blue:      #2563EB;
  --teal:      #0D9488;

  --font-serif:    Georgia, 'Times New Roman', serif;
  --font-sans:     -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:     'SF Mono', Menlo, Consolas, monospace;

  --max-w: 1140px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--charcoal);
  background: var(--card);
  -webkit-font-smoothing: antialiased;
}

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }

/* ============ NAV ============ */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--card);
  border-bottom: 1px solid var(--pale);
  border-top: 4px solid var(--amber);
}
.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.nav-brand { text-decoration: none; color: var(--charcoal); display: flex; flex-direction: column; }
.nav-tag {
  font-size: 9.5px; font-weight: 700; letter-spacing: 2px;
  color: var(--amber); line-height: 1.2;
}
.nav-cycle {
  font-family: var(--font-serif); font-weight: 700;
  font-size: 18px; line-height: 1.1;
}
.nav-links {
  list-style: none; display: flex; gap: 26px; align-items: center;
}
.nav-links a {
  text-decoration: none; color: var(--dark);
  font-size: 14px; font-weight: 500;
}
.nav-links a:hover { color: var(--amber); }
.nav-cta {
  padding: 8px 16px; border: 1.5px solid var(--amber); border-radius: 4px;
  color: var(--amber) !important; font-weight: 600;
}
.nav-cta:hover { background: var(--amber); color: var(--card) !important; }

@media (max-width: 720px) {
  /* On narrow screens, hide all nav links except the Contact CTA */
  .nav-links li:not(:last-child) { display: none; }
  .nav-links { gap: 0; }
}

/* ============ HERO ============ */
.hero {
  padding: 90px 0 70px;
  background: linear-gradient(180deg, var(--offwhite) 0%, var(--card) 100%);
}
.hero-tag {
  font-size: 10px; font-weight: 700; letter-spacing: 3px;
  color: var(--amber); margin-bottom: 20px;
}
.hero-title {
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(36px, 5.5vw, 56px); line-height: 1.05;
  color: var(--charcoal); margin-bottom: 18px;
  max-width: 880px;
}
.hero-sub {
  font-size: 17px; line-height: 1.55; color: var(--gray);
  font-style: italic; max-width: 720px; margin-bottom: 40px;
}

.hero-anchors {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 18px; margin-bottom: 36px;
}
@media (max-width: 720px) {
  .hero-anchors { grid-template-columns: repeat(2, 1fr); }
}
.anchor {
  background: var(--card); border: 1px solid var(--pale); border-radius: 8px;
  padding: 22px 18px; display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.anchor-num {
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(28px, 4vw, 40px); line-height: 1;
}
.anchor-num.red   { color: var(--red); }
.anchor-num.amber { color: var(--amber); }
.anchor-num.blue  { color: var(--blue); }
.anchor-num.teal  { color: var(--teal); }
.anchor-lbl {
  font-size: 12px; font-weight: 600; color: var(--gray); line-height: 1.3;
}

.hero-story {
  font-size: 16px; line-height: 1.65; color: var(--dark);
  max-width: 820px;
  padding-left: 16px; border-left: 3px solid var(--amber);
}

/* ============ SECTIONS ============ */
.section { padding: 80px 0; }
.section-light { background: var(--card); }
.section-light + .section-light { border-top: 1px solid var(--pale); }
.section-dark { background: var(--charcoal); color: var(--card); }

.section-tag {
  font-size: 10px; font-weight: 700; letter-spacing: 3px;
  color: var(--amber); margin-bottom: 14px;
}
.section-tag.amber-on-dark { color: var(--amber-soft); }

.section-title {
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(28px, 4vw, 38px); line-height: 1.15;
  color: var(--charcoal); margin-bottom: 16px; max-width: 880px;
}
.section-title-dark { color: var(--card); }

.section-sub {
  font-size: 16px; line-height: 1.55; color: var(--gray);
  max-width: 720px; margin-bottom: 40px;
}
.section-sub-dark { color: var(--light); }

.section-foot {
  margin-top: 32px; font-size: 15px; line-height: 1.6; color: var(--dark);
  max-width: 820px;
  padding-left: 16px; border-left: 3px solid var(--amber);
}

/* ============ STATUS CARDS ============ */
.status-cards {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px; margin-top: 28px;
}
@media (max-width: 720px) { .status-cards { grid-template-columns: repeat(2, 1fr); } }

.status-card {
  background: var(--card); border: 1px solid var(--pale); border-radius: 8px;
  padding: 22px 20px;
  border-left: 4px solid var(--amber);
}
.status-label {
  font-size: 10px; font-weight: 700; letter-spacing: 2px;
  color: var(--gray); margin-bottom: 12px;
}
.status-num {
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(40px, 5vw, 52px); line-height: 1; color: var(--charcoal);
  margin-bottom: 10px;
}
.status-sub {
  font-size: 12.5px; line-height: 1.45; color: var(--gray);
}
.status-sub em { font-style: italic; color: var(--light); }
.good { color: var(--green); }
.bad  { color: var(--red); }

/* ============ HEAT MAP ============ */
.amber { color: var(--amber); }
.amber-text { color: var(--amber); font-weight: 700; }
.heat-wrap { overflow-x: auto; padding-bottom: 8px; }
.heat {
  width: 100%; border-collapse: separate; border-spacing: 4px;
  min-width: 700px;
}
.heat th {
  font-family: var(--font-sans); font-weight: 700;
  font-size: 11px; padding: 12px 8px;
  background: rgba(255,255,255,0.06); color: var(--card);
  text-align: center;
}
.heat-corner { text-align: left !important; color: var(--light) !important; background: transparent !important; }
.heat-rowhead {
  text-align: left !important; padding-left: 14px !important;
  font-size: 11px !important; font-weight: 700 !important;
  background: rgba(255,255,255,0.06) !important;
  min-width: 130px;
}
.heat-rowhead.heat-sfh { color: #93C5FD !important; }
.heat-rowhead.heat-cth { color: #5EEAD4 !important; }

.heat-cell {
  text-align: center; padding: 16px 6px;
  min-width: 90px; border-radius: 6px;
  background: var(--dark); color: var(--card);
}
.heat-cell .sp {
  font-family: var(--font-serif); font-weight: 700;
  font-size: 22px; line-height: 1.1; margin-bottom: 4px;
}
.heat-cell .meta { font-size: 10.5px; color: rgba(255,255,255,0.7); }

/* Color shading by SP/LP value */
.heat-cell[data-sp="100"] { background: #C7D2FE; color: #1E293B; }
.heat-cell[data-sp="100"] .meta { color: rgba(30,41,59,0.7); }
.heat-cell[data-sp="102"] { background: #FCE7E3; color: #1A1A1A; }
.heat-cell[data-sp="102"] .meta { color: rgba(0,0,0,0.6); }
.heat-cell[data-sp="103"] { background: #FCDBC9; color: #1A1A1A; }
.heat-cell[data-sp="103"] .meta { color: rgba(0,0,0,0.6); }
.heat-cell[data-sp="106"] { background: #F5C49F; color: #1A1A1A; }
.heat-cell[data-sp="106"] .meta { color: rgba(0,0,0,0.65); }
.heat-cell[data-sp="113"] { background: #F4A574; color: #1A1A1A; }
.heat-cell[data-sp="113"] .meta { color: rgba(0,0,0,0.7); }
.heat-cell[data-sp="121"] { background: #ED8459; color: var(--card); }
.heat-cell[data-sp="122"] { background: #EA7A4F; color: var(--card); }
.heat-cell[data-sp="127"] { background: #E36843; color: var(--card); }
.heat-cell[data-sp="134"] { background: #DC5739; color: var(--card); }
.heat-cell[data-sp="137"] { background: #D54B30; color: var(--card); }

.heat-legend {
  margin-top: 20px; font-size: 12.5px; color: var(--light); font-style: italic;
}

/* ============ MARKET / CHARTS ============ */
.charts-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 32px; margin-top: 28px;
}
@media (max-width: 760px) { .charts-grid { grid-template-columns: 1fr; } }
.chart {
  background: var(--card); border: 1px solid var(--pale); border-radius: 8px;
  padding: 20px;
}
.chart img { width: 100%; height: auto; display: block; margin-bottom: 14px; }
.chart figcaption {
  font-size: 14px; line-height: 1.55; color: var(--dark);
}

/* ============ DISTRICT CARDS ============ */
.districts-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 24px; margin-top: 32px;
}
.district-card {
  background: var(--card); border: 1px solid var(--pale); border-radius: 10px;
  overflow: hidden;
  display: flex; flex-direction: column;
  border-top: 4px solid var(--accent);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.district-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
}
.district-photo {
  width: 100%; height: 200px; object-fit: cover; display: block;
  order: 2;   /* photo flips to BOTTOM of the card (flex order) */
  border-top: 1px solid var(--pale);
}
.district-body {
  padding: 22px 20px 24px;
  order: 1;   /* body content sits ABOVE the photo */
}
.district-num {
  font-size: 10px; font-weight: 700; letter-spacing: 2px;
  color: var(--accent); margin-bottom: 6px;
}
.district-name {
  font-family: var(--font-serif); font-weight: 700;
  font-size: 22px; line-height: 1.15; color: var(--charcoal);
  margin-bottom: 6px;
}
.district-sub {
  font-size: 12.5px; line-height: 1.45; color: var(--gray);
  font-style: italic; margin-bottom: 18px;
}
.district-stats {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px 16px; margin-bottom: 16px;
}
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat-num {
  font-family: var(--font-serif); font-weight: 700;
  font-size: 19px; line-height: 1.1; color: var(--charcoal);
}
.stat-num.blue { color: var(--blue); }
.stat-num.teal { color: var(--teal); }
.stat-num.hot  { color: var(--red); }
.stat-lbl {
  font-size: 11.5px; color: var(--gray); line-height: 1.35;
}
.district-top {
  font-size: 13px; color: var(--dark); padding-top: 14px;
  border-top: 1px solid var(--pale);
}
.top-line { margin-bottom: 10px; }
.top-pills {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
@media (max-width: 460px) {
  .top-pills { grid-template-columns: repeat(3, 1fr); }
}
.pill {
  display: flex; flex-direction: column; gap: 1px;
  padding: 6px 4px; border-radius: 4px;
  background: var(--offwhite); text-align: center;
  border: 1px solid var(--pale);
}
.pill-lbl {
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.6px;
  color: var(--gray); text-transform: uppercase;
}
.pill-val {
  font-size: 11.5px; font-weight: 700; color: var(--charcoal);
  font-variant-numeric: tabular-nums;
}
.pill-val.good { color: var(--green); }
.pill-val.bad  { color: var(--red); }

/* Data criteria block (Market Competition section) */
.data-criteria {
  background: var(--offwhite); border-left: 3px solid var(--amber);
  padding: 16px 20px; margin-top: 8px; margin-bottom: 24px;
  border-radius: 4px;
}
.data-criteria strong { font-size: 13px; color: var(--charcoal); }
.data-criteria ul {
  list-style: none; margin-top: 8px; padding: 0;
}
.data-criteria li {
  font-size: 13.5px; color: var(--dark); line-height: 1.55;
  padding: 3px 0 3px 16px; position: relative;
}
.data-criteria li::before {
  content: "·"; position: absolute; left: 4px; color: var(--amber); font-weight: 700;
}

/* Heat map thin asterisk marker */
.heat-cell .sp .thin {
  font-size: 12px; font-weight: 400; opacity: 0.7; vertical-align: super;
  margin-left: 1px;
}

/* ============ CONTACT ============ */
.contact { text-align: center; padding: 96px 0; }
.contact-title {
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(28px, 4vw, 40px); line-height: 1.2;
  color: var(--card); margin-bottom: 16px;
}
.contact-sub {
  font-size: 17px; line-height: 1.6; color: var(--light);
  max-width: 640px; margin: 0 auto 40px;
}
.contact-card {
  display: inline-flex; flex-direction: column; gap: 8px;
  background: var(--dark); border: 1px solid var(--amber); border-radius: 10px;
  padding: 28px 40px;
}
.contact-name {
  font-family: var(--font-serif); font-weight: 700;
  font-size: 28px; color: var(--card);
}
.contact-role {
  font-size: 13px; color: var(--light); font-style: italic; margin-bottom: 8px;
}
.contact-links { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }
.contact-link {
  color: var(--amber); text-decoration: none; font-weight: 700;
  font-size: 17px;
}
.contact-link:hover { color: var(--amber-soft); text-decoration: underline; }

/* ============ FOOTER ============ */
.footer {
  background: var(--charcoal); color: var(--light);
  padding: 24px 0 32px; border-top: 1px solid var(--dark);
}
.footer p { font-size: 12px; line-height: 1.5; }
.footer-fine { margin-top: 8px; color: var(--gray); font-style: italic; }

/* ============ KEY INSIGHTS panel (mirrors deck cover) ============ */
.key-insights {
  margin-top: 32px;
  background: #FAF6EE;
  border: 1px solid var(--amber);
  border-left: 4px solid var(--amber);
  border-radius: 8px;
  padding: 18px 22px;
}
.ki-tag {
  font-family: var(--font-tag); font-weight: 700;
  font-size: 11px; letter-spacing: 0.10em;
  color: var(--amber); margin-bottom: 12px;
}
.ki-row { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.ki-row:last-child { margin-bottom: 0; }
.ki-type {
  font-family: var(--font-tag); font-weight: 700;
  font-size: 13px; letter-spacing: 0.05em;
}
.ki-line {
  font-size: 14.5px; line-height: 1.5;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline;
}
.ki-sep { color: var(--gray); padding: 0 2px; }

.blue-text { color: var(--blue); }
.teal-text { color: var(--teal); }
.amber-text { color: var(--amber); }
.neutral   { color: var(--gray); font-weight: 600; }

/* ============ HEAT MAP additions ============ */
.heat-n {
  display: block; font-size: 10px; font-weight: 400;
  letter-spacing: 0.05em; opacity: 0.7; margin-top: 2px;
}
.heat-cell .ppsf {
  font-size: 11px; font-weight: 700;
  margin-top: 4px;
  opacity: 0.95;
}
.heat-takeaway {
  margin: 18px 0 8px;
  background: rgba(217, 119, 6, 0.10);
  border-left: 3px solid var(--amber);
  padding: 12px 16px;
  font-size: 14.5px; line-height: 1.55;
  color: rgba(255,255,255,0.92);
  border-radius: 4px;
}
.heat-takeaway .amber { font-weight: 700; }

/* District-section foot note */
.district-foot {
  margin-top: 24px;
  font-size: 12px; line-height: 1.6;
  color: var(--gray); font-style: italic;
  max-width: 900px;
}

/* Mobile compaction for stats labels */
@media (max-width: 640px) {
  .ki-line { font-size: 13px; gap: 4px; }
  .ki-sep { display: none; }
}

/* ============ HERO BYLINE ============ */
.hero-byline {
  margin-top: 12px;
  font-size: 13px; color: var(--light); font-style: italic;
  letter-spacing: 0.01em;
}
.byline-link {
  color: var(--amber); font-weight: 700; text-decoration: none;
  border-bottom: 1px dotted rgba(217, 119, 6, 0.5);
}
.byline-link:hover { color: var(--amber-soft); border-bottom-color: var(--amber); }

/* ============ METHODOLOGY / COLOPHON ============ */
.methodology {
  padding-top: 56px; padding-bottom: 56px;
  border-top: 1px solid #E5E7EB;
}
.method-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 24px; margin-top: 28px;
}
.method-card {
  background: var(--card); border: 1px solid #E5E7EB;
  border-radius: 8px; padding: 24px 26px;
}
.method-tag {
  font-family: var(--font-tag); font-weight: 700;
  font-size: 11px; letter-spacing: 0.10em;
  margin-bottom: 6px;
}
.method-h {
  font-family: var(--font-serif); font-weight: 700;
  font-size: 22px; color: var(--dark); margin: 0 0 10px;
}
.method-body {
  font-size: 14.5px; line-height: 1.65; color: #374151;
  margin: 0 0 12px;
}
.method-body em { color: var(--amber); font-style: italic; font-weight: 600; }
.method-meta {
  font-size: 12px; color: var(--gray); font-style: italic; margin: 0;
}
.method-fine {
  margin-top: 24px; font-size: 12.5px; line-height: 1.6;
  color: var(--gray); max-width: 900px;
}
@media (max-width: 760px) {
  .method-grid { grid-template-columns: 1fr; }
}

/* Inline credit under chart how-to-read */
.data-credit {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed #D1D5DB;
  font-size: 12.5px; font-style: italic; color: var(--gray);
}

/* Senior / Mentee role pill next to the name */
.role-pill {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  font-family: var(--font-tag);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray);
  background: #F3F4F6;
  border: 1px solid #E5E7EB;
  border-radius: 999px;
  vertical-align: middle;
}

/* Subdistrict tag next to the top-sale address */
.top-subd {
  color: var(--gray);
  font-style: italic;
  font-weight: 400;
  font-size: 0.92em;
  margin-left: 4px;
}

/* Subtle cross-link under Paulo's methodology card */
.method-link-line {
  margin-top: -4px;
  font-size: 13.5px;
  color: var(--gray);
}
.method-link {
  color: var(--amber);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dotted rgba(217, 119, 6, 0.5);
}
.method-link:hover {
  color: var(--amber-soft);
  border-bottom-color: var(--amber);
}

/* District card title link to companion site */
.district-link {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  transition: color 0.15s ease;
}
.district-link:hover {
  color: var(--amber);
}
.district-link .ext-arrow {
  font-size: 0.65em;
  color: var(--light);
  transition: color 0.15s ease, transform 0.15s ease;
  display: inline-block;
}
.district-link:hover .ext-arrow {
  color: var(--amber);
  transform: translate(2px, -2px);
}

/* District N is now the card title (was just a small tag). Promote visual weight. */
.district-num {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.5px;
  color: var(--accent);
  margin-bottom: 4px;
  line-height: 1.1;
}

/* "Property details by district" link line, sits where the h3 used to */
.district-details-link {
  margin: 0 0 14px 0;
  font-size: 13.5px;
}
.district-details-link .district-link {
  color: var(--amber);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  border-bottom: 1px dotted rgba(217, 119, 6, 0.5);
}
.district-details-link .district-link:hover {
  color: var(--amber-soft);
  border-bottom-color: var(--amber);
}