/* Domus Paradox — Base element styles & a few helpers.
   Light-touch resets so tokens show through everywhere. */

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--text-strong);
  font-weight: var(--weight-semibold); /* Cormorant reads best at 600 for headings */
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-normal);
  margin: 0 0 0.4em;
  text-wrap: balance;
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); font-family: var(--font-sans); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-normal); }

p { margin: 0 0 1em; text-wrap: pretty; }

a { color: var(--brand-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-soft); }
a:hover { color: var(--brand-strong); }

/* Eyebrow / kicker */
.dp-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--green-600);
}

/* Display heading */
.dp-display {
  font-family: var(--font-serif);
  font-size: var(--text-display);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-normal);
  color: var(--text-strong);
}

/* Arched "window into a garden" frame — signature motif */
.dp-arch {
  border-radius: var(--radius-arch);
  overflow: hidden;
}

::selection { background: var(--green-200); color: var(--green-900); }

/* Responsive correction, August 30, 2026.
   The approved desktop composition remains unchanged. These rules only
   linearize fixed desktop grids and reflow the shared chrome on tablets and
   phones so content cannot overlap or create horizontal page scrolling. */
html, body, #root { max-width: 100%; }

#root img,
#root svg,
#root video,
#root canvas { max-width: 100%; }

#root main,
#root main section,
#root main section > div,
#root main [style*="display: grid"],
#root main [style*="display: flex"] { min-width: 0; }

#root main p,
#root main li,
#root main a,
#root footer a,
#root footer span { overflow-wrap: anywhere; }

.header-cta-short { display: none; }
.site-brand-identity,
.site-menu-toggle,
.site-mobile-menu { display: none; }

@media (max-width: 1100px) {
  :root {
    --section-y: var(--space-16);
    --text-display: 4.25rem;
    --text-h1: 3rem;
  }

  /* Compact, owner-approved mobile/tablet header. Desktop remains unchanged. */
  .site-header-row {
    height: 68px !important;
    min-height: 68px;
    padding: 8px 12px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    gap: 9px !important;
  }

  .site-brand { min-width: 0; transform: none !important; gap: 9px; }
  .site-brand-mark { width: 48px !important; height: 48px !important; border-radius: 13px !important; }
  .site-brand-mark img { height: 41px !important; max-width: 41px; object-fit: contain; }
  .site-brand-identity { display: flex; min-width: 0; flex-direction: column; color: var(--green-900, #300842); }
  .site-brand-identity strong { overflow: hidden; font-family: var(--font-serif); font-size: .85rem; line-height: 1.05; letter-spacing: .03em; text-overflow: ellipsis; white-space: nowrap; }
  .site-brand-identity small { margin-top: 4px; overflow: hidden; color: var(--clay-500, #a77e12); font-size: .56rem; font-weight: 700; letter-spacing: .11em; text-overflow: ellipsis; white-space: nowrap; }
  .site-desktop-nav, .site-houses-link { display: none !important; }
  .site-header-cta { display: inline-flex; }
  .site-header-cta button { min-height: 44px; padding: 8px 12px !important; white-space: nowrap; }
  .site-menu-toggle { display: inline-grid; width: 44px; height: 44px; place-items: center; border: 0; border-radius: 11px; background: #300842; color: white; cursor: pointer; font: 700 1.45rem/1 var(--font-sans); }
  .site-menu-toggle:focus-visible, .site-mobile-menu a:focus-visible, .site-mobile-book:focus-visible { outline: 3px solid var(--clay-400, #d4af47); outline-offset: 3px; }
  .site-mobile-menu { position: absolute; top: 100%; right: 12px; left: 12px; display: block; overflow: hidden; border: 1px solid var(--border-subtle); border-radius: 0 0 18px 18px; background: var(--surface-card, #fff); box-shadow: var(--shadow-lg, 0 18px 40px rgba(48,8,66,.2)); }
  .site-mobile-menu nav { display: grid; padding: 8px 18px 0; }
  .site-mobile-menu nav a { display: flex; min-height: 44px; align-items: center; border-bottom: 1px solid var(--border-subtle); color: #300842; font-weight: 700; text-decoration: none; }
  .site-mobile-menu nav a[aria-current="page"] { color: var(--brand-strong); }
  .site-mobile-book { width: calc(100% - 36px); min-height: 44px; margin: 15px 18px 18px; border: 0; border-radius: var(--radius-pill, 999px); background: #300842; color: #fff8df; cursor: pointer; font-weight: 800; }

  /* Fixed image/text arrangements are the tablet collision point. */
  #root main [style*="grid-template-columns: 360px"],
  #root main [style*="grid-template-columns: 1fr 360px"],
  #root main [style*="grid-template-columns: 1.05fr"],
  #root main [style*="grid-template-columns: 1fr 1.1fr"],
  #root main [style*="grid-template-columns: 0.8fr 1.2fr"],
  #root main [style*="grid-template-columns: minmax(170px"],
  #root main [style*="grid-template-columns: minmax(260px"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #root main section {
    padding-left: var(--space-6) !important;
    padding-right: var(--space-6) !important;
    overflow: clip;
  }

  #root main [style*="transform: translate"] {
    max-width: 100%;
  }
}

@media (max-width: 760px) {
  :root {
    --section-y: var(--space-12);
    --text-display: clamp(3rem, 15vw, 3.75rem);
    --text-h1: clamp(2.5rem, 12vw, 3rem);
    --text-h2: clamp(2rem, 10vw, 2.5rem);
    --text-h3: clamp(1.625rem, 8vw, 1.875rem);
    --text-lead: 1.1875rem;
  }

  /* On phone widths every authored multi-column content grid becomes one
     readable column. This includes cards, fee rows and two-column lists. */
  #root main [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #root main section {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  #root main [style*="display: flex"] {
    flex-wrap: wrap;
  }

  #root main button,
  #root main [role="button"] { max-width: 100%; }

  /* PhotoArch desktop widths are authored in pixels. Keep the arch intact
     while fitting it inside the phone section gutter. */
  #root main [style*="width: 390px"],
  #root main [style*="width: 420px"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Footer columns and the legal row read top-to-bottom on small screens. */
  #root > div > footer > div:not(:last-child) {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-content: stretch !important;
    gap: var(--space-8) !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  #root > div > footer > div:not(:last-child) > div {
    text-align: left !important;
  }

  #root > div > footer > div:not(:last-child) > div > div:last-child {
    align-items: flex-start !important;
  }

  #root > div > footer > div:last-child {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  #root > div > footer > div:last-child > div {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--space-4) !important;
  }

  #root > div > footer > div:last-child > div > span:last-child {
    justify-content: flex-start !important;
    text-align: left !important;
  }
}

@media (max-width: 620px) {
  .header-cta-long { display: none; }
  .header-cta-short { display: inline; }
}

@media (max-width: 365px) {
  .site-header-row { gap: 6px !important; padding-right: 8px !important; padding-left: 8px !important; }
  .site-brand { gap: 6px; }
  .site-brand-mark { width: 44px !important; height: 44px !important; }
  .site-brand-mark img { height: 38px !important; max-width: 38px; }
  .site-brand-identity strong { font-size: .73rem; }
  .site-brand-identity small { font-size: .49rem; letter-spacing: .07em; }
  .site-header-cta button { min-height: 44px; padding: 7px 9px !important; font-size: .72rem !important; }
}