/* KARAKTER design system: page layer.
   Spec: docs/DESIGN.md. Adoption guide: docs/DESIGN-SYSTEM.md.

   Linked only by pages that have adopted the design system (<html data-ds>).
   Tokens come from ds-core.css, which the server links on every page. This file
   owns element defaults, the type scale, layout, and the shared components.
   Page-specific sections go in their own ds-<page>.css. */

/* ── BASE ── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html[data-ds] {
  background: var(--ds-bg);
  color: var(--ds-fg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html[data-ds] body {
  margin: 0;
  background: var(--ds-bg);
  color: var(--ds-fg);
  font-family: var(--ds-font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Element defaults sit inside :where() so any class beats them. */
:where(html[data-ds]) :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote) {
  margin: 0;
}

:where(html[data-ds]) :where(img, picture, svg, video) {
  display: block;
  max-width: 100%;
}

:where(html[data-ds]) :where(a) {
  color: inherit;
}

:where(html[data-ds]) :where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
}

:where(html[data-ds]) :focus-visible {
  outline: 2px solid var(--ds-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  html[data-ds] {
    scroll-behavior: smooth;
  }
}

.ds-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── LAYOUT ── */
.ds-container {
  width: 100%;
  max-width: calc(var(--ds-max) + 2 * var(--ds-gutter));
  margin: 0 auto;
  padding: 0 var(--ds-gutter);
}

.ds-section {
  padding: var(--ds-space-9) 0;
  background: var(--ds-bg);
}

.ds-section--surface {
  background: var(--ds-surface);
}

.ds-section--rule {
  border-top: 1px solid var(--ds-border);
}

/* A scoped dark (or light) panel paints its own ground. */
.ds-section[data-theme] {
  background: var(--ds-bg);
}

.ds-section-head {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
  max-width: 760px;
  margin-bottom: var(--ds-space-7);
}

.ds-section-head--center {
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.ds-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
}

.ds-stack--lg {
  gap: var(--ds-space-5);
}

.ds-measure {
  max-width: 640px;
}

.ds-section-head--center .ds-measure {
  margin-left: auto;
  margin-right: auto;
}

/* ── WATERMARK ──
   The KARAKTER mark, very faint, centred behind a section's content. It follows
   the theme of the section it sits in (black mark on light, white on dark) and
   sits under the content without touching its stacking. */
.ds-watermark {
  position: relative;
  isolation: isolate;
}

.ds-watermark::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--ds-watermark);
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto min(60%, 520px);
  opacity: var(--ds-watermark-opacity);
  pointer-events: none;
}

@media (max-width: 639px) {
  .ds-watermark::before {
    background-size: 90% auto;
  }
}

/* ── TYPE ── */
.ds-display-xl,
.ds-display-lg,
.ds-display-md {
  font-family: var(--ds-font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  /* Even line lengths: no lone word ("IT.") on the last line. */
  text-wrap: balance;
}

.ds-display-xl { font-size: 112px; line-height: 0.9; }
.ds-display-lg { font-size: 80px; line-height: 0.92; }
.ds-display-md { font-size: 56px; line-height: 0.95; }

/* The accent serif: a short italic lead-in inside a display heading
   ("Real estate with CHARACTER."). It inherits the heading's size. */
.ds-display-xl em,
.ds-display-lg em,
.ds-display-md em,
.ds-accent {
  font-family: var(--ds-font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* The lead-in takes its own line(s) at a serif's line height. Display caps are
   set at 0.9 to 0.95, which leaves no room for the descenders of g, p and y:
   on a shared line they hung into the capitals below. */
.ds-display-xl em,
.ds-display-lg em,
.ds-display-md em {
  display: block;
  line-height: 1.22;
  margin-bottom: 0.14em;
}

.ds-h1,
.ds-h2,
.ds-h3 {
  font-family: var(--ds-font-sans);
  text-transform: none;
}

.ds-h1 { font-size: 40px; line-height: 1.1; font-weight: 700; letter-spacing: -0.01em; }
.ds-h2 { font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -0.005em; }
.ds-h3 { font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: 0; }

.ds-body-lg { font-size: 19px; line-height: 1.6; }
.ds-body { font-size: 17px; line-height: 1.6; }
.ds-body-sm { font-size: 15px; line-height: 1.5; }

.ds-label,
.ds-eyebrow {
  font-family: var(--ds-font-sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.ds-eyebrow {
  color: var(--ds-accent-fg);
}

.ds-muted {
  color: var(--ds-fg-muted);
}

.ds-prose a,
.ds-link {
  color: var(--ds-fg);
  text-decoration: underline;
  text-decoration-color: var(--ds-accent-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--ds-fast) var(--ds-ease);
}

.ds-prose a:hover,
.ds-link:hover {
  color: var(--ds-accent-fg);
  text-decoration-thickness: 2px;
}

@media (max-width: 639px) {
  .ds-display-xl { font-size: 64px; }
  .ds-display-lg { font-size: 52px; }
  .ds-display-md { font-size: 40px; }
}

/* ── ICONS ── */
.ds-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.ds-icon--lg {
  width: 32px;
  height: 32px;
}

/* ── BUTTONS ── 48px, square, button type. */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  min-height: var(--ds-target);
  padding: 0 var(--ds-space-5);
  border: 1px solid transparent;
  border-radius: var(--ds-radius-sm);
  font-family: var(--ds-font-sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.16em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--ds-fast) var(--ds-ease), border-color var(--ds-fast) var(--ds-ease), color var(--ds-fast) var(--ds-ease);
}

.ds-btn--primary {
  background: var(--ds-inverse);
  border-color: var(--ds-inverse);
  color: var(--ds-on-inverse);
}

.ds-btn--primary:hover {
  background: var(--ds-inverse-hover);
  border-color: var(--ds-inverse-hover);
}

/* Reserved for the single most valuable action on a screen. */
.ds-btn--accent {
  background: var(--ds-accent);
  border-color: var(--ds-accent);
  color: var(--ds-on-accent);
}

.ds-btn--accent:hover {
  background: var(--ds-accent-hover);
  border-color: var(--ds-accent-hover);
}

.ds-btn--secondary {
  background: transparent;
  border-color: var(--ds-border-strong);
  color: var(--ds-fg);
}

.ds-btn--secondary:hover {
  background: var(--ds-surface-alt);
}

/* Link button: gold text, ends in an arrow. */
.ds-btn--link {
  min-height: var(--ds-target);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ds-accent-fg);
  line-height: 1.4;
  text-align: left;
}

.ds-btn--link::after {
  content: '\2192';
  letter-spacing: 0;
  transition: transform var(--ds-fast) var(--ds-ease);
}

.ds-btn--link:hover::after {
  transform: translateX(3px);
}

.ds-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-3) var(--ds-space-5);
}

.ds-actions--center {
  justify-content: center;
}

@media (max-width: 639px) {
  .ds-actions--stack-sm {
    flex-direction: column;
    align-items: stretch;
  }

  .ds-actions--stack-sm .ds-btn--link {
    justify-content: center;
  }
}

/* ── TAGS ── Max three per card. */
.ds-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: var(--ds-radius-sm);
  background: var(--ds-accent-subtle);
  color: var(--ds-fg);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.ds-tag--solid {
  background: var(--ds-inverse);
  color: var(--ds-on-inverse);
}

/* ── CARDS ── Hairline frame, no shadow until it lifts on hover. */
.ds-card {
  position: relative;
  padding: var(--ds-space-5);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  transition: box-shadow var(--ds-fast) var(--ds-ease), border-color var(--ds-fast) var(--ds-ease);
}

a.ds-card,
.ds-card--lift {
  text-decoration: none;
}

a.ds-card:hover,
.ds-card--lift:hover {
  border-color: var(--ds-border-strong);
  box-shadow: var(--ds-shadow-1);
}

/* ── FORM FIELDS ── 48px, label above, helper below. */
.ds-field {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
}

.ds-field-label {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ds-fg);
}

.ds-input {
  width: 100%;
  min-height: var(--ds-target);
  padding: 0 var(--ds-space-4);
  border: 1px solid var(--ds-control-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface);
  color: var(--ds-fg);
  font-size: 17px;
  line-height: 1.4;
  outline: 0;
  transition: border-color var(--ds-fast) var(--ds-ease), box-shadow var(--ds-fast) var(--ds-ease);
}

.ds-input:focus {
  border-color: var(--ds-focus);
  box-shadow: inset 0 0 0 1px var(--ds-focus);
}

.ds-help {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ds-fg-muted);
}

.ds-error {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ds-danger);
}

/* ── BREADCRUMB ── body-sm, slash separators. */
.ds-breadcrumb {
  padding: var(--ds-space-3) 0;
  border-bottom: 1px solid var(--ds-border);
  background: var(--ds-bg);
}

.ds-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ds-fg-muted);
}

.ds-breadcrumb li + li::before {
  content: '/';
  margin-right: var(--ds-space-2);
  color: var(--ds-fg-muted);
}

.ds-breadcrumb a {
  color: var(--ds-fg-muted);
}

.ds-breadcrumb [aria-current] {
  color: var(--ds-fg);
}

/* ── SERVED CALLOUTS ──
   The server's answer-engine blocks (Quick Answer, Key takeaways, byline,
   "Updated" stamp, Related) emit these classes on a design-system page in place
   of their legacy inline styles. Each owns its surface and every text colour,
   so the page's own `p { color }` cannot wash it out. */
.ds-callout {
  max-width: 820px;
  text-align: left;
  margin: 0 auto var(--ds-space-7);
  padding: var(--ds-space-5);
  border-left: 2px solid var(--ds-accent);
  border-radius: var(--ds-radius-md);
  background: var(--ds-accent-subtle);
  color: var(--ds-fg);
}

.ds-callout-label {
  display: block;
  margin: 0 0 var(--ds-space-2);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ds-accent-fg);
}

.ds-callout p,
.ds-callout li {
  color: var(--ds-fg);
  font-size: 17px;
  line-height: 1.6;
}

.ds-callout ul {
  margin: 0;
  padding-left: var(--ds-space-5);
}

.ds-callout li + li {
  margin-top: var(--ds-space-2);
}

.ds-byline,
.ds-freshness {
  max-width: 820px;
  text-align: left;
  margin: 0 auto var(--ds-space-6);
  padding: var(--ds-space-3) 0;
  border-top: 1px solid var(--ds-border);
  border-bottom: 1px solid var(--ds-border);
  background: transparent;
  color: var(--ds-fg-muted);
  font-size: 15px;
  line-height: 1.5;
}

.ds-byline strong,
.ds-byline a {
  color: var(--ds-fg);
  font-weight: 600;
}

.ds-freshness {
  margin-top: var(--ds-space-6);
  text-align: right;
}

.ds-related {
  max-width: 820px;
  margin: var(--ds-space-7) auto var(--ds-space-6);
  padding: var(--ds-space-5);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
  color: var(--ds-fg-muted);
  font-size: 15px;
  line-height: 1.6;
}

.ds-related nav {
  display: block;
  position: static;
  height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.ds-related a {
  color: var(--ds-fg);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ds-related a:hover {
  color: var(--ds-accent-fg);
}

.ds-related-sep {
  margin: 0 var(--ds-space-2);
  color: var(--ds-fg-muted);
}

.ds-related-sources {
  margin: var(--ds-space-3) 0 0;
  color: var(--ds-fg-muted);
}

/* ── REVEAL ── Sections ease in once, at the slow tempo. karakter.js adds
   .js-ready to <body> and .visible as each .reveal scrolls in. */
.js-ready .reveal {
  opacity: 0;
  transform: translateY(16px);
}

.reveal {
  transition: opacity var(--ds-slow) var(--ds-ease), transform var(--ds-slow) var(--ds-ease);
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

.reveal--d1 { transition-delay: 80ms; }
.reveal--d2 { transition-delay: 160ms; }
.reveal--d3 { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  .js-ready .reveal,
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html[data-ds] *,
  html[data-ds] *::before,
  html[data-ds] *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 899px) {
  .ds-section {
    padding: var(--ds-space-8) 0;
  }

  .ds-section-head {
    margin-bottom: var(--ds-space-6);
  }
}

@media (max-width: 639px) {
  .ds-container {
    padding: 0 var(--ds-space-4);
  }
}

/* ── Toast (portal/assets/portal-public.js) ──
   A short confirmation, such as "Saved", on the inverse panel at the foot of
   the screen. It takes clicks only while shown, for its optional action link. */
.kr-toast {
  position: fixed;
  bottom: var(--ds-space-6);
  left: 50%;
  z-index: 9999;
  max-width: calc(100vw - 2 * var(--ds-space-4));
  padding: var(--ds-space-3) var(--ds-space-5);
  border: 1px solid var(--ds-accent);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-inverse);
  color: var(--ds-on-inverse);
  box-shadow: var(--ds-shadow-2);
  font-family: var(--ds-font-sans);
  font-size: 15px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity var(--ds-base) var(--ds-ease);
}

.kr-toast.is-shown {
  opacity: 1;
  pointer-events: auto;
}

.kr-toast-action {
  margin-left: var(--ds-space-2);
  color: var(--ds-on-inverse);
  text-decoration: underline;
  text-decoration-color: var(--ds-accent);
  text-underline-offset: 3px;
}

/* Page scroll locked while a dialog or the photo viewer is open
   (assets/js/report-request.js, listing-gallery.js). */
html.ds-scroll-lock,
html.ds-scroll-lock body {
  overflow: hidden;
}

/* Hyperlocal briefing (admin/backend/lib/hyperlocal-content.js), a callout
   with its two links side by side. */
.hyperlocal-briefing-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2) var(--ds-space-5);
}