/* ============================================================================
   214 Proximity — System (base + layout + components)
   Depends on tokens.css. No hard-coded values here — reference tokens.
   Progressive enhancement: content is fully visible with no JS and with
   prefers-reduced-motion. JS only *enhances* (reveals, nav, lightbox).
   ============================================================================ */

/* ---- Reset / base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--step-body);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
img { background: var(--color-surface-sunken); }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--color-accent-hover); }
::selection { background: var(--214-gold); color: var(--214-paper); }

/* ---- Focus (visible, token-driven, works on light + dark scopes) -------- */
:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* ---- Skip link ---------------------------------------------------------- */
.skip-link {
  position: absolute; left: var(--space-16); top: -4rem;
  background: var(--color-text); color: var(--color-bg);
  padding: var(--space-8) var(--space-16); z-index: var(--z-overlay);
  transition: top var(--dur-ui) var(--ease-standard);
}
.skip-link:focus { top: var(--space-16); color: var(--color-bg); }

/* ---- Typography classes ------------------------------------------------- */
.display-xl, .display, .h1 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  text-wrap: balance;
}
.display-xl { font-size: var(--step-display-xl); max-width: var(--measure-display); }
.display    { font-size: var(--step-display); line-height: 1.05; max-width: 24ch; }
.h1         { font-size: var(--step-h1); line-height: var(--leading-snug); }
.h2 {
  font-family: var(--font-body); font-weight: 600; font-size: var(--step-h2);
  line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); text-wrap: balance;
}
.h3 {
  font-family: var(--font-body); font-weight: 600; font-size: var(--step-h3);
  line-height: 1.2; letter-spacing: var(--tracking-tight);
}
.body-lg { font-size: var(--step-body-lg); line-height: var(--leading-relaxed); max-width: var(--measure-lg); }
.prose   { max-width: var(--measure); }
.prose p + p { margin-top: var(--space-20); }
.caption {
  font-size: var(--step-caption); line-height: var(--leading-snug);
  color: var(--color-text-muted); letter-spacing: var(--tracking-normal);
}
.fact-label {
  font-size: var(--step-fact); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--tracking-fact); color: var(--color-text-muted);
}
.muted { color: var(--color-text-muted); }
.accent { color: var(--color-accent); }

/* ---- Layout primitives -------------------------------------------------- */
.container      { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }
.container-wide { width: 100%; max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--gutter); }
.container-text { width: 100%; max-width: var(--container-text); margin-inline: auto; padding-inline: var(--gutter); }
.section        { padding-block: var(--section-y); }
.section-tight  { padding-block: var(--section-y-tight); }

.grid { display: grid; grid-template-columns: repeat(var(--grid-cols), 1fr); gap: var(--grid-gap); }
/* span helpers */
.col-2{grid-column:span 2}.col-3{grid-column:span 3}.col-4{grid-column:span 4}
.col-5{grid-column:span 5}.col-6{grid-column:span 6}.col-7{grid-column:span 7}
.col-8{grid-column:span 8}.col-9{grid-column:span 9}.col-12{grid-column:span 12}
.start-2{grid-column-start:2}.start-3{grid-column-start:3}.start-7{grid-column-start:7}.start-8{grid-column-start:8}

/* full-bleed escape from a centered container */
.bleed { width: 100vw; margin-left: 50%; transform: translateX(-50%); }

.stack > * + * { margin-top: var(--space-16); }
.stack-lg > * + * { margin-top: var(--space-32); }

/* ---- Image slots (placeholder in the guide; real <img> in production) --- */
.img {
  width: 100%; height: auto; object-fit: cover; background: var(--color-surface-sunken);
}
.ar-hero{aspect-ratio:var(--ar-hero)}.ar-land{aspect-ratio:var(--ar-landscape)}
.ar-port{aspect-ratio:var(--ar-portrait)}.ar-sq{aspect-ratio:var(--ar-square)}
.ar-pano{aspect-ratio:var(--ar-pano)}
.img-slot {
  display: grid; place-content: center; text-align: center; width: 100%;
  color: var(--214-olive);
  background:
    linear-gradient(135deg, var(--214-concrete), var(--214-bone) 60%, var(--214-stone));
  border: 1px solid var(--color-line);
  overflow: hidden; position: relative;
}
.img-slot::after {
  content: attr(data-label);
  font-size: var(--step-fact); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--tracking-fact); color: rgba(17,17,15,0.42);
  padding: var(--space-8) var(--space-12);
}
.on-dark .img-slot { background: linear-gradient(135deg,#26241d,#1c1b17 60%,#33302a); color: var(--214-stone); }

/* ============================================================================
   COMPONENTS
   ============================================================================ */

/* 01 — Address mark ------------------------------------------------------- */
.address-mark { display: inline-flex; align-items: baseline; gap: var(--space-8); text-decoration: none; color: inherit; }
.address-mark__num { font-family: var(--font-display); font-size: 1.35em; line-height: 1; letter-spacing: -0.01em; }
.address-mark__word { font-weight: 600; letter-spacing: var(--tracking-nav); font-size: 0.95em; }
.address-mark--stacked { flex-direction: column; gap: 0; }
.address-mark--lg .address-mark__num { font-size: 2.4em; }

/* 02 — Global navigation -------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: saturate(1.1) blur(8px);
  border-bottom: 1px solid var(--color-line);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-24);
  min-height: 64px; }
.nav__links { display: flex; align-items: center; gap: var(--space-24); list-style: none; }
.nav__link {
  font-size: var(--step-nav); font-weight: 500; letter-spacing: var(--tracking-nav);
  color: var(--color-text); text-decoration: none; padding-block: var(--space-8);
  position: relative;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
  background: var(--color-accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-micro) var(--ease-standard);
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__cta { margin-left: var(--space-8); }
.nav__toggle { display: none; }

/* 03 — Mobile navigation -------------------------------------------------- */
.nav__toggle {
  align-items: center; justify-content: center; width: 44px; height: 44px;
  background: none; border: 1px solid var(--color-line); border-radius: var(--radius-sm);
}
.nav__toggle-bar, .nav__toggle-bar::before, .nav__toggle-bar::after {
  content: ""; display: block; width: 18px; height: 1.5px; background: var(--color-text);
  transition: transform var(--dur-ui) var(--ease-standard), opacity var(--dur-micro) linear;
}
.nav__toggle-bar::before { transform: translateY(-6px); }
.nav__toggle-bar::after  { transform: translateY(4.5px); }
.nav__panel {
  position: fixed; inset: 64px 0 auto 0; background: var(--color-bg);
  border-bottom: 1px solid var(--color-line); padding: var(--space-24) var(--gutter) var(--space-32);
  display: grid; gap: var(--space-16); z-index: var(--z-nav);
}
.nav__panel[hidden] { display: none; } /* display:grid must not defeat the hidden attribute */
@media (max-width: 820px) {
  .nav__links, .nav > .nav__cta { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav__panel .nav__link { font-size: 1.25rem; }
  .nav[data-open="true"] .nav__toggle-bar { background: transparent; }
  .nav[data-open="true"] .nav__toggle-bar::before { transform: rotate(45deg); }
  .nav[data-open="true"] .nav__toggle-bar::after  { transform: rotate(-45deg); }
}
@media (min-width: 821px) { .nav__panel { display: none !important; } }

/* 04 — Hero composition --------------------------------------------------- */
.hero { position: relative; }
/* aspect-ratio + min-height live on the block CONTAINER so height can grow
   without the ratio ever driving width past the viewport (mobile-safe). The
   media fills it absolutely. */
.hero__media { position: relative; width: 100%; aspect-ratio: var(--ar-hero); min-height: min(60vh, 78vw); overflow: hidden; }
.hero__media > .img, .hero__media > .img-slot { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__overlay {
  position: absolute; inset: auto 0 0 0; padding: var(--space-48) var(--gutter);
  display: grid; gap: var(--space-16);
  background: linear-gradient(0deg, rgba(17,17,15,0.62), rgba(17,17,15,0.18) 55%, transparent);
  color: var(--214-bone);
}
.hero__overlay .display-xl { color: var(--214-bone); }
.hero__eyebrow { color: var(--214-concrete); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-12); margin-top: var(--space-8); }
/* editorial variant: text beside media, no overlay */
.hero--split { display: grid; gap: var(--space-32); align-items: end; }
@media (min-width: 821px) { .hero--split { grid-template-columns: 1.3fr 1fr; } }

/* 05 — Property fact rail ------------------------------------------------- */
.fact-rail {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: var(--space-24) var(--space-32);
  border-block: 1px solid var(--color-line); padding-block: var(--space-24);
}
.fact { display: grid; gap: var(--space-4); }
.fact__value { font-family: var(--font-display); font-size: var(--step-h3); line-height: 1; }
.fact__value--unverified { color: var(--color-text-muted); }
.fact__label { /* uses .fact-label */ }

/* 06 — Editorial introduction --------------------------------------------- */
.editorial-intro { display: grid; gap: var(--space-24); }
.editorial-intro .body-lg { color: var(--color-text); }
.editorial-intro__lead::first-letter { /* subtle, optional */ }

/* 07 — Full-bleed image --------------------------------------------------- */
.bleed-image { margin-block: var(--section-y-tight); }
.bleed-image .img, .bleed-image .img-slot { width: 100%; }
.bleed-image__caption { margin-top: var(--space-12); }

/* 08 — Offset image + copy spread ----------------------------------------- */
.spread { display: grid; gap: var(--space-32); align-items: center; }
@media (min-width: 821px) {
  .spread--offset { grid-template-columns: 7fr 5fr; }
  .spread--offset.spread--flip { grid-template-columns: 5fr 7fr; }
  .spread--offset.spread--flip .spread__media { order: 2; }
}
.spread__body { display: grid; gap: var(--space-16); align-content: center; }

/* 09 — Double-image spread ------------------------------------------------ */
.double { display: grid; gap: var(--grid-gap); }
@media (min-width: 641px) { .double { grid-template-columns: 1fr 1fr; align-items: start; }
  .double--offset > :nth-child(2) { margin-top: var(--space-64); } }

/* 10 — Image sequence ----------------------------------------------------- */
.sequence { display: grid; gap: var(--grid-gap); }
.sequence--3 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 821px) {
  .sequence--3 { grid-template-columns: 1.5fr 1fr 1fr; grid-auto-rows: 1fr; }
  .sequence--3 > :first-child { grid-row: span 2; }
}

/* 11 — Caption system ----------------------------------------------------- */
figure { display: grid; gap: var(--space-12); }
figure > figcaption { /* uses .caption */ }
.caption--index { display: inline-flex; gap: var(--space-8); align-items: baseline; }
.caption--index b { font-family: var(--font-display); font-weight: 400; color: var(--color-text); }

/* 12 — Room / space introduction ------------------------------------------ */
.room-intro { display: grid; gap: var(--space-12); padding-block: var(--space-16); }
.room-intro__index { font-family: var(--font-display); font-size: var(--step-h2); color: var(--color-text-muted); line-height: 1; }
.room-intro__title { /* .h2 */ }

/* 13 — Material / detail callout ------------------------------------------ */
.callout {
  display: grid; gap: var(--space-8); padding: var(--space-24);
  border-left: 2px solid var(--color-accent); background: var(--color-surface);
}
.callout__label { /* .fact-label */ }
.callout__body { max-width: 40ch; }

/* 14 — Floor-plan treatment ----------------------------------------------- */
.floorplan { display: grid; gap: var(--space-24); }
@media (min-width: 821px) { .floorplan { grid-template-columns: 1.6fr 1fr; align-items: start; } }
.floorplan__figure { background: var(--color-surface); border: 1px solid var(--color-line); padding: var(--space-24); }
.floorplan__figure .img-slot { aspect-ratio: 4/3; }
.floorplan__legend { display: grid; gap: var(--space-12); }
.floorplan__legend dt { font-weight: 600; }
.floorplan__legend dd { color: var(--color-text-muted); }

/* 15 — Neighborhood / location section ------------------------------------ */
.neighborhood { display: grid; gap: var(--space-32); }
@media (min-width: 821px) { .neighborhood { grid-template-columns: 1fr 1.2fr; } }
.poi-list { list-style: none; display: grid; gap: var(--space-16); }
.poi { display: grid; grid-template-columns: 1fr auto; gap: var(--space-16);
  padding-block: var(--space-12); border-bottom: 1px solid var(--color-line); align-items: baseline; }
.poi__name { font-weight: 500; }
.poi__meta { color: var(--color-text-muted); font-size: var(--step-caption); text-align: right; }

/* 16 — Map treatment ------------------------------------------------------ */
.map { position: relative; background: var(--color-surface-sunken); border: 1px solid var(--color-line); }
.map .img-slot { aspect-ratio: var(--ar-landscape); }
.map__pin {
  position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; border-radius: var(--radius-pill);
  background: var(--color-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 30%, transparent);
  transform: translate(-50%,-50%);
}
.map__note { padding: var(--space-12) var(--space-16); font-size: var(--step-caption); color: var(--color-text-muted); background: var(--color-bg); }

/* 17 — Gallery launcher --------------------------------------------------- */
.gallery-launch { position: relative; display: block; text-decoration: none; color: inherit; }
.gallery-launch .img-slot, .gallery-launch .img { transition: transform var(--dur-ui) var(--ease-out); }
.gallery-launch:hover .img-slot, .gallery-launch:hover .img { transform: scale(var(--img-scale-max)); }
.gallery-launch__label {
  position: absolute; left: var(--space-16); bottom: var(--space-16);
  background: color-mix(in srgb, var(--214-ink) 82%, transparent); color: var(--214-bone);
  padding: var(--space-8) var(--space-16); display: inline-flex; gap: var(--space-8); align-items: center;
  font-size: var(--step-nav);
}
.gallery-launch__count { color: var(--214-concrete); }

/* 18 — Inquiry CTA (banner) ----------------------------------------------- */
.inquiry { display: grid; gap: var(--space-16); padding: var(--space-48) var(--gutter);
  background: var(--color-surface); border: 1px solid var(--color-line); }
.inquiry--dark { background: var(--214-ink); }
.inquiry__actions { display: flex; flex-wrap: wrap; gap: var(--space-12); }

/* Buttons ----------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8);
  min-height: 44px; padding: var(--space-12) var(--space-24);
  font-size: var(--step-nav); font-weight: 600; letter-spacing: var(--tracking-nav);
  text-decoration: none; border: 1px solid transparent; border-radius: var(--radius-sm);
  transition: background var(--dur-micro) var(--ease-standard),
              color var(--dur-micro) var(--ease-standard),
              border-color var(--dur-micro) var(--ease-standard),
              transform var(--dur-micro) var(--ease-standard);
}
.btn--primary { background: var(--color-accent); color: var(--214-paper); }
.btn--primary:hover { background: var(--color-accent-hover); color: var(--214-paper); }
.btn--primary:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--color-text); border-color: var(--color-line-strong); }
.btn--ghost:hover { border-color: var(--color-text); color: var(--color-text); }
.btn--text { min-height: 0; padding: var(--space-4) 0; background: none; color: var(--color-accent);
  border-radius: 0; }
.btn--text:hover { color: var(--color-accent-hover); }
.on-dark .btn--primary { background: var(--color-accent); color: var(--214-ink); }

/* 19 — Showing form ------------------------------------------------------- */
.form { display: grid; gap: var(--space-20); max-width: 34rem; }
.field { display: grid; gap: var(--space-8); }
.field > label { font-size: var(--step-caption); font-weight: 600; letter-spacing: var(--tracking-nav); }
.field .req { color: var(--color-accent); }
.field input, .field textarea, .field select {
  width: 100%; padding: var(--space-12) var(--space-16); background: var(--color-bg);
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm);
  min-height: 44px; transition: border-color var(--dur-micro) var(--ease-standard);
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--color-accent); }
.field textarea { min-height: 6rem; resize: vertical; }
.field__hint { font-size: var(--step-caption); color: var(--color-text-muted); }
.form__row { display: grid; gap: var(--space-20); }
@media (min-width: 641px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }

/* 20 — Agent / contact block ---------------------------------------------- */
.agent { display: grid; gap: var(--space-16); grid-template-columns: auto 1fr; align-items: center; }
.agent__photo { width: 72px; height: 72px; border-radius: var(--radius-pill); overflow: hidden; background: var(--color-surface-sunken); }
.agent__name { font-weight: 600; }
.agent__meta { color: var(--color-text-muted); font-size: var(--step-caption); }
.agent__dre { font-size: var(--step-caption); color: var(--color-text-muted); }

/* 21 — Disclosure block --------------------------------------------------- */
.disclosure { font-size: var(--step-caption); line-height: var(--leading-snug); color: var(--color-text-muted);
  border-top: 1px solid var(--color-line); padding-top: var(--space-16); max-width: var(--measure); }
.disclosure strong { color: var(--color-text); font-weight: 600; }

/* 22 — Footer ------------------------------------------------------------- */
.site-footer { background: var(--214-ink); color: var(--214-bone); }
.site-footer a { color: var(--214-concrete); }
.site-footer a:hover { color: var(--214-paper); }
.site-footer__grid { display: grid; gap: var(--space-32); padding-block: var(--space-64); }
@media (min-width: 641px) { .site-footer__grid { grid-template-columns: 2fr 1fr 1fr; } }
.site-footer__legal { border-top: 1px solid var(--214-line-dark); padding-block: var(--space-24);
  font-size: var(--step-caption); color: var(--214-stone); display: flex; flex-wrap: wrap; gap: var(--space-16); justify-content: space-between; }

/* 23 — Sticky mobile showing CTA ------------------------------------------ */
.sticky-cta {
  position: fixed; inset: auto 0 0 0; z-index: var(--z-sticky);
  display: none; gap: var(--space-12); align-items: center; justify-content: space-between;
  padding: var(--space-12) var(--gutter); background: var(--color-bg);
  box-shadow: var(--shadow-sticky); padding-bottom: calc(var(--space-12) + env(safe-area-inset-bottom));
}
.sticky-cta__price { font-family: var(--font-display); font-size: var(--step-h3); line-height: 1; }
.sticky-cta__price small { font-size: var(--step-caption); color: var(--color-text-muted); font-family: var(--font-body); }
@media (max-width: 820px) { .sticky-cta { display: flex; } body.has-sticky-cta { padding-bottom: 84px; } }

/* 24 — Paid-search landing header ----------------------------------------- */
.campaign-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-16);
  min-height: 60px; border-bottom: 1px solid var(--color-line);
}
.campaign-header__phone { font-weight: 600; text-decoration: none; color: var(--color-text); }

/* 25 — Reduced-navigation campaign shell ---------------------------------- */
.campaign-shell { --grid-cols: 12; }
.campaign-shell .site-header__nav-extra { display: none; }
.campaign-hero { display: grid; gap: var(--space-24); }
@media (min-width: 821px) { .campaign-hero { grid-template-columns: 1.1fr 0.9fr; align-items: center; } }
.trust-row { display: flex; flex-wrap: wrap; gap: var(--space-16) var(--space-24); align-items: center;
  color: var(--color-text-muted); font-size: var(--step-caption); }
.trust-row__item { display: inline-flex; gap: var(--space-8); align-items: center; }

/* ============================================================================
   MOTION — enhancement only. Content starts visible; JS opts in via html.js.
   ============================================================================ */
.reveal { opacity: 1; transform: none; }
html.js .reveal {
  opacity: 0; transform: translateY(var(--reveal-shift, 16px));
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
  will-change: opacity, transform;
}
html.js .reveal.is-visible { opacity: 1; transform: none; }
html.js .reveal--img { clip-path: inset(0 0 12% 0); transition: clip-path var(--dur-reveal) var(--ease-out), opacity var(--dur-reveal) var(--ease-out); }
html.js .reveal--img.is-visible { clip-path: inset(0 0 0 0); }
.stagger > * { --reveal-shift: 12px; }
html.js .stagger.is-visible > * { transition-delay: calc(var(--i, 0) * 60ms); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
  html.js .reveal, html.js .reveal--img { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .gallery-launch:hover .img, .gallery-launch:hover .img-slot { transform: none; }
}