/* ============================================================
   MLSListing / Lopez & Lopez — Print Redesign (Codex Spec)
   Matte black · Gold · Purple · Cream
   Brand standards: TYLER_SOUL_CORPUS v4_sections §32
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&family=Inter:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* Core palette — codex spec */
  --ink:       #1C1B1A;   /* codex black */
  --graphite:  #17171A;
  --smoke:     #2A2A2E;
  --ash:       #5A5A60;
  --bone:      #F5EFD9;   /* codex cream */
  --paper:     #FAF6E6;   /* paper — slightly lighter cream */
  --parchment: #EBE4CB;
  --rule:      #1A1A1C;
  --rule-light:#CFC7A8;

  /* Gold — codex primary accent */
  --gold:       #C9A14A;
  --gold-deep:  #9A7630;
  --gold-light: #E0C073;
  --gold-pale:  #F2E3B8;

  /* Purple — codex secondary accent */
  --purple:       #602E86;
  --purple-deep:  #411E5D;
  --purple-light: #8A58AE;

  /* Legacy aliases — safe to keep, point to gold */
  --copper:       var(--gold);
  --copper-deep:  var(--gold-deep);
  --copper-light: var(--gold-light);
  --copper-pale:  var(--gold-pale);

  /* Semantic */
  --fg:           var(--ink);
  --fg-muted:     #4A4843;
  --fg-soft:      #7A7566;
  --accent:       var(--gold);
  --accent-2:     var(--purple);

  /* Type — display unified to Playfair Display per locked design system §3
     (matches 7871 gold standard). Body/UI stays DM Sans. */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* Reset for print pages */
.page * { box-sizing: border-box; margin: 0; padding: 0; }

/* LPR brand watermark — injected via the PageFooter component on every page.
   Sits behind content. Subtle on light pages, screen-blended on dark. */
.lpr-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 420px;
  height: 420px;
  background-image: url(assets/brand/lpr-circle-transparent.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.035;
  pointer-events: none;
  z-index: 0;
}
.page.dark .lpr-watermark {
  opacity: 0.06;
  mix-blend-mode: screen;
}
.page.no-watermark .lpr-watermark { display: none !important; }

/* LPR brand mark — a small corner tag rendered top-left of every page footer. */
.lpr-page-mark {
  position: absolute;
  top: 18px;
  right: 56px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--fg-soft);
  z-index: 5;
  pointer-events: none;
}
.lpr-page-mark img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  opacity: 0.85;
}
.page.dark .lpr-page-mark { color: rgba(245,239,217,0.5); }

/* In-box LPR watermark — sits inside any solid-background card or box.
   Apply via a wrapper div with class .lpr-box-mark inside the box. */
.lpr-box-mark {
  position: absolute;
  bottom: -10px;
  right: -14px;
  width: 92px;
  height: 92px;
  background-image: url(assets/brand/lpr-circle-transparent.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.045;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}

/* LPR signature numeral system — used for 1–10 ordered items.
   A bold display digit with a gold rule above and a tiny LPR circle to the left. */
.lpr-numeral {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.04em;
  line-height: 0.85;
  color: var(--gold);
  position: relative;
}
.lpr-numeral::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url(assets/brand/lpr-circle-transparent.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.85;
  margin-top: 4px;
}
.lpr-numeral .num {
  font-size: inherit;
  position: relative;
  padding-top: 4px;
}
.lpr-numeral .num::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 22px;
  height: 2px;
  background: var(--gold);
}

/* Beautifully designed clickable phone & email links. */
a.tel-link,
a.mail-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: color 0.25s, transform 0.25s cubic-bezier(0.16,1,0.3,1);
}
a.tel-link::before,
a.mail-link::before {
  content: '';
  display: inline-block;
  width: 11px;
  height: 11px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.65;
  flex-shrink: 0;
}
a.tel-link::before {
  /* phone glyph (gold) */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A14A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.72 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.35 1.85.59 2.81.72A2 2 0 0 1 22 16.92z'/></svg>");
}
a.mail-link::before {
  /* mail glyph (gold) */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A14A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><path d='M2 7l10 6 10-6'/></svg>");
}
a.tel-link:hover,
a.mail-link:hover {
  color: var(--gold);
}
a.tel-link:hover::before,
a.mail-link:hover::before { opacity: 1; }
.page.dark a.tel-link,
.page.dark a.mail-link { color: var(--bone); }
.page.dark a.tel-link:hover,
.page.dark a.mail-link:hover { color: var(--gold); }

.page {
  /* US Letter at 96dpi = 816 × 1056 */
  width: 816px;
  height: 1056px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 11pt;
  line-height: 1.5;
  position: relative;
  overflow: hidden;
  font-feature-settings: "ss01","ss02";
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}

.page.dark {
  background: var(--ink);
  color: var(--bone);
}

/* Display type — DM Sans, very tight */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 0.92;
}

.display-xl {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.86;
}

/* Mono — numbers, meta, kickers */
.mono {
  font-family: var(--font-mono);
  /* "ss01" off prevents Space Mono's stylistic set 1 from swapping @ for an a-like
     glyph in email addresses (TeamPage roster, SystemPage contact band, etc).
     "tnum" keeps tabular figures aligned in phone numbers and money. */
  font-feature-settings: "tnum" 1, "ss01" 0, "ss02" 0;
}

/* Email and tel links — always disable Space Mono's confusing stylistic sets,
   regardless of which container they live in. The screenshot bug where
   Rich@MLSListing.net rendered as RichaMLSListing.net came from inherited
   "ss01" on the .page body. */
a[href^="mailto:"],
a.mail-link,
a.tel-link {
  font-feature-settings: "tnum" 1, "ss01" 0, "ss02" 0;
}

/* Kicker — all caps label set in mono, tracked */
.kicker {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--fg-soft);
}

.kicker-gold  { color: var(--gold); }
.kicker-copper{ color: var(--gold); }  /* legacy alias */
.kicker-purple{ color: var(--purple); }

/* Hairline rule */
.rule { height: 1px; background: var(--rule); }
.rule-light  { background: var(--rule-light); }
.rule-copper { background: var(--gold); }
.rule-gold   { background: var(--gold); }
.rule-purple { background: var(--purple); }

/* Corner frame marks */
.corner-marks::before, .corner-marks::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--ink);
  border-style: solid;
  opacity: 0.55;
}
.corner-marks::before { top: 20px; left: 20px; border-width: 1px 0 0 1px; }
.corner-marks::after  { bottom: 20px; right: 20px; border-width: 0 1px 1px 0; }
.page.dark .corner-marks::before,
.page.dark .corner-marks::after { border-color: var(--bone); opacity: 0.35; }

/* Page footer */
.page-footer {
  position: absolute;
  bottom: 32px;
  left: 56px;
  right: 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-soft);
}
.page-footer > :first-child {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-footer > :last-child {
  flex: 0 0 auto;
  white-space: nowrap;
}
.page.dark .page-footer { color: rgba(245,239,217,0.45); }

.page-footer .dot {
  display: inline-block;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--gold);
  margin: 0 8px;
  vertical-align: middle;
}

/* Tagline — paired close style. Needs air around it. */
.tagline-close {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 0.95;
  text-transform: none;
}

/* Stat — number + label */
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat .n {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 42pt;
  line-height: 0.88;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.stat .n sup { font-size: 0.5em; top: -0.7em; position: relative; color: var(--gold); }
.page.dark .stat .n { color: var(--bone); }
.stat .label {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-soft);
  margin-top: 4px;
}

/* Pull-quote — italic serif-feel via DM Sans italic */
.pullquote {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

/* Print */
@media print {
  @page { size: letter; margin: 0; }
  body { margin: 0; }
  .page { break-after: page; page-break-after: always; }
}