/* ==========================================================================
   SITE — public-website typography and editorial primitives
   (design-system §5.5, §5.7, §6.1, §9.1). Editorial, warm, architectural:
   Newsreader headings on warm ivory, Inter body at 17–18px, crisp 2px corners,
   generous section rhythm, thin decorative gold rules, charcoal bands via
   data-theme="dark" on a section.

   Everything is scoped to [data-product="site"] so a public preview inside the
   CRM (e.g. the styleguide) renders exactly like the public site. W1 builds the
   header/footer markup (templates/layouts/public.html) on these classes.
   ========================================================================== */

/* Element defaults for the public scope live in the base layer, so every
   component class (a card title, a property address) still wins over them. */
@layer base {
  [data-product="site"] :is(h1, h2, h3, h4) {
    font-family: var(--font-family-display);
    font-weight: var(--font-weight-display);
    letter-spacing: var(--tracking-heading);
    line-height: var(--leading-heading);
  }

  [data-product="site"] h1 {
    font-size: var(--text-4xl);
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-display);
  }

  [data-product="site"] h2 { font-size: var(--text-3xl); }
  [data-product="site"] h3 { font-size: var(--text-2xl); }
  [data-product="site"] h4 { font-size: var(--text-xl); }

  [data-product="site"] :is(p, li) {
    line-height: var(--leading-body);
  }
}

@layer site {

  .display {
    font-family: var(--font-family-display);
    font-size: var(--text-5xl);
    font-weight: var(--font-weight-display);
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-display);
    text-wrap: balance;
  }

  .lead {
    color: var(--color-text-secondary);
    font-size: var(--text-lg);
    line-height: var(--leading-body);
  }

  .prose {
    max-width: var(--measure-prose);
  }

  .prose > * + * {
    margin-top: 1em;
  }

  .prose :is(h2, h3) {
    margin-top: 1.6em;
  }

  .pull-quote {
    max-width: 36ch;
    padding-left: var(--space-5);
    border-left: var(--border-width) solid var(--color-rule-decorative);
    font-family: var(--font-family-display);
    font-size: var(--text-2xl);
    font-style: italic;
    font-weight: var(--font-weight-regular);
    line-height: var(--leading-heading);
  }

  .legal {
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
  }

  /* ---- Layout ---- */
  .container {
    width: 100%;
    max-width: calc(var(--container-max) + 2 * var(--page-gutter));
    margin-inline: auto;
    padding-inline: var(--page-gutter);
  }

  .container--wide {
    max-width: calc(var(--container-wide) + 2 * var(--page-gutter));
  }

  .container--prose {
    max-width: calc(var(--container-prose) + 2 * var(--page-gutter));
  }

  .section {
    padding-block: var(--section-space);
  }

  .section--sm {
    padding-block: var(--section-space-sm);
  }

  .section--alt {
    background-color: var(--color-bg-subtle);
  }

  .section__header {
    display: grid;
    gap: var(--space-3);
    max-width: var(--measure-prose);
    margin-bottom: var(--stack-lg);
  }

  /* Thin gold rule: decorative only on light surfaces (never text). */
  .rule-accent {
    width: 4rem;
    height: 0;
    border: 0;
    border-top: var(--border-width) solid var(--color-rule-decorative);
  }

  /* Numbered steps on a charcoal band ("How it works"). */
  .steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: var(--space-8);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
  }

  .steps__item {
    display: grid;
    gap: var(--space-2);
    padding-top: var(--space-4);
    border-top: var(--border-width) solid var(--color-rule-decorative);
    counter-increment: step;
  }

  .steps__item::before {
    content: counter(step, decimal-leading-zero);
    color: var(--color-text-accent);
    font-family: var(--font-family-display);
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-display);
    line-height: 1;
  }

  .steps__title {
    font-family: var(--font-family-sans);
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0;
  }

  .steps__text {
    color: var(--color-text-secondary);
  }

  /* ---- Public header, nav and footer primitives (markup: W1) ---- */
  .review-banner {
    padding: var(--space-2) var(--page-gutter);
    border-bottom: var(--border-width) solid var(--color-warning-border);
    background-color: var(--color-warning-bg);
    color: var(--color-text);
    font-size: var(--text-sm);
    text-align: center;
  }

  .site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background-color: var(--color-bg);
  }

  .site-header.is-scrolled {
    border-bottom: var(--border-width) solid var(--color-border-subtle);
  }

  .site-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-6);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Nav links drop the underline but show one on hover/focus; current page
     gets a 2px gold-600 (non-text, >= 3:1) underline. Text stays ink. */
  .site-nav a {
    display: inline-flex;
    align-items: center;
    min-height: var(--control-height);
    color: var(--color-text);
    font-size: var(--text-md);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    text-underline-offset: 0.35em;
  }

  .site-nav a:hover,
  .site-nav a:focus-visible {
    color: var(--color-text);
    text-decoration-line: underline;
    text-decoration-thickness: var(--border-width);
  }

  .site-nav a[aria-current="page"] {
    text-decoration-line: underline;
    text-decoration-color: var(--color-border-accent);
    text-decoration-thickness: var(--border-width-strong);
  }

  .wordmark {
    display: grid;
    color: var(--color-text);
    text-decoration: none;
  }

  .wordmark__name {
    font-family: var(--font-family-display);
    font-size: var(--text-xl);
    font-weight: var(--font-weight-display);
    letter-spacing: var(--tracking-heading);
    line-height: 1.1;
  }

  .wordmark__sub {
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }

  .site-footer {
    padding-block: var(--section-space-sm);
    font-size: var(--text-xs);
  }

  /* Footer legal links (TREC IABS / CPN) are 16px (design-system §0). */
  .site-footer .legal-links a,
  .legal-links a {
    font-size: var(--text-md);
  }

  .legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .site-cta-bar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: var(--z-sticky);
    display: flex;
    gap: var(--space-2);
    padding: var(--space-2) var(--page-gutter) calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
    border-top: var(--border-width) solid var(--color-border);
    background-color: var(--color-bg);
  }

  .site-cta-bar > * {
    flex: 1 1 0;
  }

  @media (min-width: 64em) {
    .site-cta-bar {
      display: none;
    }
  }

  /* Photo with text protection (the only permitted gradient-like overlay). */
  .scrim {
    background-color: var(--color-scrim);
    color: var(--color-text-inverse);
  }

  /* Photos: crisp corners on the public site. */
  .media {
    overflow: hidden;
    border-radius: var(--radius-media);
    background-color: var(--color-surface-sunken);
  }

  .media--portrait { aspect-ratio: 4 / 5; }
  .media--landscape { aspect-ratio: 3 / 2; }
  .media--hero { aspect-ratio: 16 / 10; }

  .media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Landing scroll reveal: once per page load, a 56px rise + fade
     (--motion-distance-reveal; the reference sites move about this far — 12px
     reads as nothing). Only sections still below the fold are hidden (JS marks
     them .is-pending), so nothing flashes and content is visible without JS.
     It runs for every visitor, Reduce Motion included — an owner decision
     (2026-10-01); see the note on --motion-duration-landing-reveal in tokens.css. */
  /* The transition sits on the visible state only: a transition uses the style being changed TO, so
     becoming pending (hiding a section below the fold) is instant and only the reveal animates. */
  .reveal:not(.is-pending) {
    transition: opacity var(--motion-duration-landing-reveal) var(--motion-ease-enter),
      transform var(--motion-duration-landing-reveal) var(--motion-ease-enter);
  }

  .reveal.is-pending {
    opacity: 0;
    transform: translateY(var(--motion-distance-reveal));
  }

  /* Landing hero intro, once on page load: the photo fades in first, then the
     lettering rises in one line after another — eyebrow, headline, lead, buttons,
     caption, then the goals bar. Pure CSS (fill-mode both), so it plays without JS
     and always ends fully visible. Runs under Reduce Motion too, by the same owner
     decision as the section reveal (see tokens.css). These classes exist only on the
     modern landing page. */
  @keyframes landing-photo-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes landing-rise-in {
    from {
      opacity: 0;
      transform: translateY(var(--motion-distance-landing-intro));
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  .modern-hero__image {
    animation: landing-photo-in var(--motion-duration-landing-photo) var(--motion-ease-enter) both;
  }

  .modern-hero__content > *,
  .modern-hero__caption,
  .modern-intents {
    animation: landing-rise-in var(--motion-duration-landing-intro) var(--motion-ease-enter)
      calc(var(--motion-landing-intro-start) + var(--motion-landing-intro-step) * var(--landing-intro-order, 0)) both;
  }

  .modern-hero__content > h1 { --landing-intro-order: 1; }
  .modern-hero__content > .modern-hero__lead { --landing-intro-order: 2; }
  .modern-hero__content > .modern-hero__actions { --landing-intro-order: 3; }
  .modern-hero__caption { --landing-intro-order: 4; }
  .modern-intents { --landing-intro-order: 5; }

  /* Piece-by-piece reveal (.reveal--stagger): the section itself never hides; each .reveal__item
     inside it is its own target (page.js). Pieces that arrive together come in one after another —
     page.js sets --reveal-delay from --motion-landing-stagger-step — rising like the hero lettering. */
  .reveal__item {
    --reveal-delay: 0ms;
  }

  .reveal--stagger .reveal__item.is-pending {
    opacity: 0;
    transform: translateY(var(--motion-distance-landing-intro));
  }

  .reveal--stagger .reveal__item:not(.is-pending) {
    transition: opacity var(--motion-duration-landing-intro) var(--motion-ease-enter) var(--reveal-delay),
      transform var(--motion-duration-landing-intro) var(--motion-ease-enter) var(--reveal-delay);
  }

  /* Hover zoom: house photos (featured and sold) and portraits (landing team, profile page, the
     profile cards on /about/ and /team/ — public site only, via data-product) grow slowly inside their
     frame, which clips them. Keyboard focus on a card's link does the same. Runs under Reduce Motion too (owner
     decision, see tokens.css). */
  .modern-property__photo,
  .modern-sold__photo img,
  .modern-person__photo img,
  .website-profile__photo img,
  [data-product="site"] .profile-card__photo img {
    transition: transform var(--motion-duration-hover-zoom) var(--motion-ease-standard);
  }

  .modern-property:focus-within .modern-property__photo,
  .modern-sold__card:focus-within .modern-sold__photo img {
    transform: scale(var(--motion-scale-hover));
  }

  @media (hover: hover) {
    .modern-property:hover .modern-property__photo,
    .modern-sold__card:hover .modern-sold__photo img,
    .modern-person__photo:hover img,
    .website-profile__photo:hover img,
    [data-product="site"] .profile-card__photo:hover img {
      transform: scale(var(--motion-scale-hover));
    }
  }

  /* A page printed before it was scrolled keeps every section. */
  @media print {
    .reveal.is-pending {
      opacity: 1;
      transform: none;
      transition: none;
    }

    .modern-hero__image,
    .modern-hero__content > *,
    .modern-hero__caption,
    .modern-intents {
      animation: none;
    }

    .reveal--stagger .reveal__item.is-pending {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }
}