/* STARCHASE ESTATE - 2026 teaser landing page */
:root { color-scheme: dark; --base: #323332; --text: #eeeae4; --muted: #d4d3cf; --footer: #bebeb9; }
*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body {
  min-height: 100%; margin: 0;
  background-color: #303231;
  background-image: radial-gradient(ellipse 78% 72% at 50% 46%,
    #3b3c39 0%, #373835 34%, #333432 69%, #303231 100%);
  color: var(--text);
  font-family: 'Century Gothic', 'Avenir Next', 'Futura', 'Lato', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.site-frame { isolation: isolate; }
.site-frame::before {
  content: '';
  position: fixed;
  z-index: 0;
  inset: -10%;
  pointer-events: none;
  background: radial-gradient(ellipse 51% 48% at 50% 47%,
      rgba(203, 192, 163, .052), rgba(175, 171, 157, .023) 52%, transparent 86%);
  opacity: .62;
}
.landing-main, .legal-main, .subpage-header, .site-footer { position: relative; z-index: 1; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid #f1cf89; outline-offset: 5px; }
.site-frame { position: relative; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.site-header { position: absolute; z-index: 10; top: 0; right: 0; display: flex; justify-content: flex-end; padding: 48px 4.6vw; }
.menu-toggle { align-items: center; justify-content: center; flex-direction: column; gap: 8px; width: 52px; height: 34px; padding: 0; color: #f1f0eb; background: none; border: 0; cursor: pointer; }
.menu-toggle span { display: block; width: 47px; height: 1px; background-color: currentColor; }
.menu-toggle[hidden] { display: none !important; }
.landing-main { display: flex; flex: 1; align-items: center; justify-content: center; padding: 135px 30px 78px; }
.hero { display: flex; flex-direction: column; align-items: center; width: 100%; text-align: center; }
.hero-wordmark { display: block; width: min(100%, 465px); height: auto; }
.hero-copy { margin-top: clamp(57px, 6.8vh, 84px); max-width: 920px; }
.keep-together { white-space: nowrap; }
.hero-copy p { margin: 0; color: #dfdcda; font-size: clamp(16px, 1.48vw, 21px); font-weight: 300; line-height: 1.6; letter-spacing: .007em; }
.hero-copy p + p { margin-top: 25px; }
.copy-line { display: block; }
.copy-line + .copy-line { margin-top: 16px; }
.cta {
  position: relative; isolation: isolate; display: inline-flex; overflow: hidden;
  align-items: center; justify-content: center; min-height: 47px;
  margin-top: clamp(72px, 9.4vh, 106px); padding: 13px 20px;
  border: 1px solid rgba(255, 224, 152, .28); border-radius: 11px;
  background: linear-gradient(105deg, #e5b756 0%, #f6dfa2 34%, #b9832d 70%, #edbc65 100%);
  background-size: 180% 100%; background-position: 0% center;
  color: #3c3325; box-shadow: 0 3px 11px rgba(0, 0, 0, .12);
  font-size: 14px; font-weight: 400; line-height: 1; letter-spacing: .015em;
  text-decoration: none; text-transform: uppercase;
  transition: background-position .38s ease, transform .28s ease, box-shadow .28s ease;
}
.cta::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, transparent 25%, rgba(255,255,255,.17) 48%, transparent 70%); transform: translateX(-120%); transition: transform .5s ease; }
.cta:hover { transform: translateY(-3px); background-position: 100% center; box-shadow: 0 10px 24px rgba(222, 174, 87, .24), 0 3px 9px rgba(0,0,0,.15); }
.cta:hover::after { transform: translateX(120%); }
.cta:active { transform: translateY(-1px); }
.site-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px 30px; min-height: 70px; padding: 20px clamp(25px, 4.5vw, 70px) 25px; color: var(--footer); font-size: 11px; font-weight: 400; line-height: 1.5; letter-spacing: .105em; text-transform: uppercase; }
.site-footer p { margin: 0; }
.footer-links { display: flex; gap: clamp(20px, 2.4vw, 37px); align-items: center; flex-wrap: wrap; }
.footer-links a { text-decoration: none; transition: color .2s ease; }
.footer-links a:hover { color: #f7deb0; }
.subpage-header { display: flex; align-items: center; padding: 36px clamp(25px, 5.5vw, 80px); }
.subpage-header img { display: block; width: 210px; max-width: 65vw; height: auto; }
.legal-main { flex: 1; width: 100%; max-width: 830px; margin: 0 auto; padding: 65px 28px 95px; }
.legal-main h1 { margin: 0 0 16px; font-size: clamp(27px, 4vw, 37px); font-weight: 300; letter-spacing: .065em; text-transform: uppercase; }
.legal-date { margin: 0 0 45px; color: #bfbdb8; font-size: 12px; line-height: 1.5; letter-spacing: .09em; text-transform: uppercase; }
.legal-main h2 { margin: 32px 0 10px; color: #f6f2ec; font-size: 18px; font-weight: 400; letter-spacing: .02em; }
.legal-main p { margin: 0 0 18px; color: #d6d5d1; font-size: 16px; font-weight: 300; line-height: 1.8; }
.legal-main a { text-decoration-color: #c8aa71; text-underline-offset: 4px; }
.legal-main a:hover { color: #f6d899; }
@media (max-width: 680px) {
  .site-header { padding: 28px 27px; }
  .landing-main { padding: 124px 25px 95px; }
  .hero-wordmark { width: min(100%, 360px); }
  .hero-copy { margin-top: 63px; }
  .hero-copy { width: 100%; max-width: 470px; }
  .hero-copy p { font-size: 16px; line-height: 1.7; letter-spacing: .002em; text-wrap: balance; }
  .hero-copy p + p { margin-top: 29px; }
  .copy-line { display: inline; }
  .copy-line + .copy-line { margin-top: 0; }
  .cta { margin-top: 76px; min-height: 48px; font-size: 13px; }
  .site-footer { flex-direction: column; justify-content: center; gap: 16px; padding: 24px 20px 28px; font-size: 10px; text-align: center; }
  .footer-links { justify-content: center; gap: 25px; }
  .subpage-header { padding: 30px 28px; }
  .subpage-header img { width: min(72vw, 278px); max-width: 100%; }
  .legal-main { padding: 52px 27px 65px; }
  .legal-main p { font-size: 15px; }
}
@media (max-width: 390px) {
  .landing-main { padding-top: 110px; padding-bottom: 70px; }
  .hero-copy { margin-top: 48px; }
  .hero-copy p { font-size: 15px; }
  .cta { margin-top: 58px; }
  .site-footer p { font-size: 9px; letter-spacing: .055em; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cta, .cta::after, .footer-links a { transition: none; }
}

@keyframes starchase-ambient {
  from { transform: translate3d(-.7%, -.6%, 0) scale(1); opacity: .50; }
  to   { transform: translate3d(.7%, .6%, 0) scale(1.045); opacity: .68; }
}
@keyframes starchase-reveal {
  from { opacity: 0; transform: translate3d(0, 11px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes starchase-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .site-frame::before { animation: starchase-ambient 18s ease-in-out infinite alternate; }
  .landing-main .hero-wordmark {
    animation: starchase-reveal .95s cubic-bezier(.22, 1, .36, 1) .20s backwards;
  }
  .landing-main .hero-copy p:first-child {
    animation: starchase-reveal .90s cubic-bezier(.22, 1, .36, 1) .82s backwards;
  }
  .landing-main .hero-copy p:nth-child(2) {
    animation: starchase-reveal .90s cubic-bezier(.22, 1, .36, 1) 1.20s backwards;
  }
  .landing-main .cta {
    animation: starchase-reveal .85s cubic-bezier(.22, 1, .36, 1) 1.80s backwards;
  }
  .landing-main + .site-footer {
    animation: starchase-fade .85s ease 2.45s backwards;
  }
}