/* 373 Los Pinos Way
   High-contrast serif display (Instrument Serif) against a warm paper ground,
   with antique brass as the single accent. Labels are small and wide-tracked;
   the page is paced with whitespace rather than boxes and heavy rules. */

:root {
  --ground:    #FAF8F4;
  --surface:   #FFFFFF;
  --surface-2: #F2EFE8;
  --deep:      #16191D;
  --deep-2:    #1F242A;
  --on-deep:   #F3F1EC;
  --ink:       #16191C;
  --ink-2:     #5E646A;
  --ink-3:     #959A9F;
  --line:      #E4E0D7;
  --hair:      #D6D1C5;
  --brass:     #A08048;
  --brass-2:   #BE9A5C;
  --scrim:     rgba(10, 12, 15, .68);
  --shadow:    0 1px 2px rgba(22,25,28,.04), 0 12px 38px rgba(22,25,28,.08);
  --radius:    4px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:    #101317;
    --surface:   #171B20;
    --surface-2: #1E232A;
    --deep:      #0B0D10;
    --deep-2:    #15191E;
    --on-deep:   #F0EEE9;
    --ink:       #EDEBE6;
    --ink-2:     #A6ABB1;
    --ink-3:     #7B8188;
    --line:      #282D34;
    --hair:      #333941;
    --brass:     #C9A567;
    --brass-2:   #DCBB80;
    --scrim:     rgba(4, 6, 8, .72);
    --shadow:    0 1px 2px rgba(0,0,0,.3), 0 12px 38px rgba(0,0,0,.4);
  }
}

:root[data-theme="dark"] {
  --ground:    #101317;
  --surface:   #171B20;
  --surface-2: #1E232A;
  --deep:      #0B0D10;
  --deep-2:    #15191E;
  --on-deep:   #F0EEE9;
  --ink:       #EDEBE6;
  --ink-2:     #A6ABB1;
  --ink-3:     #7B8188;
  --line:      #282D34;
  --hair:      #333941;
  --brass:     #C9A567;
  --brass-2:   #DCBB80;
  --scrim:     rgba(4, 6, 8, .72);
  --shadow:    0 1px 2px rgba(0,0,0,.3), 0 12px 38px rgba(0,0,0,.4);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 84px;
}
@media (min-width: 760px) { body { padding-bottom: 0; } }

h1, h2, h3, .serif {
  font-family: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -.012em;
  text-wrap: balance;
  margin: 0;
}

img { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

.wrap { width: min(1180px, 100% - 3.5rem); margin-inline: auto; }
@media (max-width: 560px) { .wrap { width: min(1180px, 100% - 2rem); } }

.eyebrow {
  font-size: .66rem; font-weight: 600; letter-spacing: .24em;
  text-transform: uppercase; color: var(--brass); margin: 0;
}
.dot { opacity: .4; padding-inline: .4rem; }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
section { padding-block: clamp(3.2rem, 7vw, 6rem); }

.head { margin-bottom: 2.4rem; }
.head h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.08; margin-top: .6rem; }

/* ---------------- hero ---------------- */
.hero { position: relative; isolation: isolate; }
.hero-img { display: block; width: 100%; height: clamp(440px, 86svh, 860px); object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(8,10,13,.3) 0%, rgba(8,10,13,0) 30%, var(--scrim) 100%);
}
.hero-copy { position: absolute; z-index: 2; inset: auto 0 0 0; padding-block: 2.6rem; color: #F7F5F1; }
.flag {
  display: inline-flex; align-items: center; gap: .9rem;
  font-size: .64rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(255,255,255,.9); padding-bottom: .9rem;
}
.flag::before { content: ""; width: 34px; height: 1px; background: var(--brass-2); display: block; }
.dot-live { display: none; }
.hero h1 {
  font-size: clamp(2.4rem, 7.4vw, 5rem); line-height: 1.0; color: #FFF;
  text-shadow: 0 2px 30px rgba(4,6,10,.4);
}
.hero .city {
  font-size: clamp(.82rem, 1.7vw, .92rem); color: rgba(255,255,255,.82);
  margin: .9rem 0 0; letter-spacing: .13em; text-transform: uppercase; font-weight: 500;
}
.price-row {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem 1.4rem;
  margin-top: 1.6rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.22);
}
.price-row .amount {
  font-family: "Instrument Serif", ui-serif, Georgia, serif; font-weight: 400;
  font-size: clamp(2rem, 5.4vw, 3.1rem); letter-spacing: -.01em; color: #FFF;
  font-variant-numeric: tabular-nums; text-shadow: 0 2px 30px rgba(4,6,10,.4);
}
.price-row .facts {
  font-size: .82rem; color: rgba(255,255,255,.86); font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase;
}
.price-row .facts b { font-weight: 600; }
.price-row .facts .f { white-space: nowrap; }
.hero-note {
  position: absolute; z-index: 2; right: 1.2rem; bottom: .6rem; margin: 0;
  font-size: .62rem; letter-spacing: .09em; color: rgba(255,255,255,.52);
  text-shadow: 0 1px 6px rgba(4,6,10,.6);
}

/* ---------------- open house ---------------- */
.openhouse { background: var(--deep); color: var(--on-deep); }
.openhouse .inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 3rem; padding-block: 1.6rem; }
.oh-label { font-size: .66rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--brass-2); }
.oh-dates { display: flex; flex-wrap: wrap; gap: .6rem 2.6rem; margin: 0; padding: 0; list-style: none; }
.oh-dates li { display: flex; align-items: baseline; gap: .7rem; }
.oh-dates .day { font-family: "Instrument Serif", serif; font-size: 1.22rem; }
.oh-dates .time { font-size: .84rem; opacity: .78; letter-spacing: .08em; font-variant-numeric: tabular-nums; }

/* ---------------- buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 1.15rem 1.3rem;
  font-size: .72rem; font-weight: 600; text-decoration: none;
  letter-spacing: .17em; text-transform: uppercase;
  border: 1px solid var(--hair); border-radius: var(--radius);
  background: transparent; color: var(--ink);
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.btn:hover { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.btn-primary { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.btn-primary:hover { background: var(--brass); border-color: var(--brass); color: #FFF; }
.btn-lg { padding: 1.25rem 2.2rem; font-size: .74rem; white-space: nowrap; }

.actions { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-block: 1px solid var(--line); }
.actions .btn { border: 0; border-right: 1px solid var(--line); border-radius: 0; }
.actions .btn:last-child { border-right: 0; }
.actions .btn:hover { background: var(--surface-2); color: var(--ink); }
@media (max-width: 620px) {
  .actions { grid-template-columns: repeat(2, 1fr); }
  .actions .btn:nth-child(2n) { border-right: 0; }
  .actions .btn:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
}

/* ---------------- specs ---------------- */
.specs { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: 1px solid var(--line); margin: 0; }
.spec { padding: 1.8rem 1.5rem 1.8rem 0; border-right: 1px solid var(--line); }
.spec:last-child { border-right: 0; }
@media (max-width: 620px) {
  .specs { grid-template-columns: repeat(2, 1fr); }
  .spec { padding: 1.3rem 1rem 1.3rem 0; border-bottom: 1px solid var(--line); }
  .spec:nth-child(2n) { border-right: 0; }
}
.spec dt { font-size: .62rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .7rem; }
.spec dd {
  margin: 0; font-family: "Instrument Serif", serif; font-weight: 400;
  font-size: 1.95rem; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.spec dd i {
  font-style: normal; font-size: .62rem; font-weight: 600; color: var(--ink-3);
  letter-spacing: .14em; text-transform: uppercase; margin-left: .35rem;
}

/* ---------------- about ---------------- */
.about { display: grid; gap: clamp(2.4rem, 5vw, 4.5rem); grid-template-columns: 1fr; }
@media (min-width: 900px) { .about { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.hook { font-size: clamp(1.75rem, 3.8vw, 2.6rem); line-height: 1.12; margin: .55rem 0 1.6rem; color: var(--ink); }
.about p { margin: 0 0 1.25rem; max-width: 62ch; color: var(--ink-2); }
.about p:last-child { margin-bottom: 0; }

.card { background: transparent; border: 0; border-top: 1px solid var(--line); padding: 1.8rem 0 0; box-shadow: none; align-self: start; }
.card h3 {
  font-family: "Instrument Sans", sans-serif; font-size: .62rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin-bottom: 1.4rem;
}
.features { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.features li { position: relative; padding-left: 1.45rem; font-size: .9rem; color: var(--ink-2); }
.features li::before { content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 1px; background: var(--brass); }

/* ---------------- gallery ---------------- */
.gallery { display: grid; gap: 10px; grid-auto-flow: dense; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 620px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) {
  .gallery { grid-template-columns: repeat(4, 1fr); }
  /* feature tiles span 2 cols AND 2 rows so the row height set by the standard
     3:2 tiles still resolves and no holes open in the grid */
  .shot.wide { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
}
.shot { margin: 0; position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--surface-2); }
.shot img {
  display: block; width: 100%; height: 100%; object-fit: cover; cursor: zoom-in;
  transition: transform .6s cubic-bezier(.2,.6,.2,1), opacity .2s ease;
}
.shot img:hover { opacity: .94; transform: scale(1.035); }
.shot figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------------- 3D tour ---------------- */
/* Click-to-load facade: the Matterport iframe is heavy, so it only loads when
   someone asks for it. Keeps first paint cheap on cell data. */
.tour { position: relative; overflow: hidden; background: var(--surface-2); aspect-ratio: 16 / 9; }
.tour img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tour::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(8,10,13,.14), rgba(8,10,13,.5)); }
.tour-play {
  position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: .85rem;
  padding: 1.15rem 2rem; cursor: pointer;
  font-family: "Instrument Sans", sans-serif;
  font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  background: rgba(250,248,244,.95); color: var(--ink);
  border: 1px solid rgba(255,255,255,.6); border-radius: var(--radius);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.tour-play:hover { background: var(--brass); color: #FFF; border-color: var(--brass); }
.tour-icon { font-size: .8em; line-height: 1; }
.tour iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tour.is-live::after, .tour.is-live img, .tour.is-live .tour-play { display: none; }

/* ---------------- floor plans ---------------- */
.floors { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .floors { grid-template-columns: 1fr 1fr; } }
.floors figure { margin: 0; background: var(--surface); border: 1px solid var(--line); padding: 1.6rem; }
.floors img { display: block; width: 100%; height: auto; cursor: zoom-in; }
.floors figcaption {
  font-size: .62rem; color: var(--ink-3); margin-top: 1.1rem; text-align: center;
  letter-spacing: .16em; text-transform: uppercase; font-variant-numeric: tabular-nums;
}
.note { font-size: .78rem; color: var(--ink-3); margin: 1.4rem 0 0; }

/* ---------------- location ---------------- */
.map { margin: 0; position: relative; overflow: hidden; background: var(--surface-2); aspect-ratio: 16 / 9; }
@media (max-width: 620px) { .map { aspect-ratio: 4 / 3; } }
.map img { display: block; width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.map figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  padding: 2.4rem 1.4rem 1.1rem; font-size: .66rem; color: #F2F0EC;
  letter-spacing: .15em; text-transform: uppercase;
  background: linear-gradient(to bottom, rgba(8,10,13,0), rgba(8,10,13,.76));
}
.map-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }

/* ---------------- schools ---------------- */
.schools {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 0;
  grid-template-columns: 1fr; border-top: 1px solid var(--line);
}
@media (min-width: 700px) { .schools { grid-template-columns: repeat(3, 1fr); } }
.school { padding: 1.8rem 1.6rem 1.8rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 700px) { .school { border-bottom: 0; border-right: 1px solid var(--line); } .school:last-child { border-right: 0; } }
.school .grade {
  margin: 0 0 .7rem; font-size: .62rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--brass); font-variant-numeric: tabular-nums;
}
.school h3 { font-size: 1.45rem; line-height: 1.15; margin: 0; }
.school .dist { margin: .55rem 0 0; font-size: .82rem; color: var(--ink-3); }

/* ---------------- disclosures ---------------- */
.disclose {
  background: var(--surface); border: 1px solid var(--line); border-left: 2px solid var(--brass);
  padding: clamp(2rem, 4.4vw, 3rem); display: grid; gap: 1.8rem; box-shadow: var(--shadow);
}
@media (min-width: 780px) { .disclose { grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 2.6rem; } }
.disclose h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); margin: .55rem 0 .8rem; }
.disclose p { margin: 0; color: var(--ink-2); font-size: .95rem; max-width: 54ch; }

/* ---------------- agent (full-bleed dark) ---------------- */
.agent-band { background: var(--deep); color: var(--on-deep); padding-block: clamp(3.2rem, 7vw, 5.5rem); }
.agent { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 760px) { .agent { grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); } }
.agent-photo { margin: 0; overflow: hidden; background: var(--deep-2); max-width: 300px; }
.agent-photo img { display: block; width: 100%; height: auto; filter: grayscale(1) contrast(1.04); }
.agent .eyebrow { color: var(--brass-2); }
.agent .name {
  font-family: "Instrument Serif", serif; font-weight: 400;
  font-size: clamp(2rem, 4.6vw, 3rem); line-height: 1.05; letter-spacing: -.01em;
  margin: .7rem 0 .5rem; color: #FFF;
}
.agent .firm { color: rgba(243,241,236,.82); font-size: 1rem; margin: 0; letter-spacing: .03em; }
.agent .lic { color: rgba(243,241,236,.5); font-size: .72rem; margin: .5rem 0 0; letter-spacing: .16em; text-transform: uppercase; }
.agent .addr { color: rgba(243,241,236,.56); font-size: .86rem; margin: 1.1rem 0 0; line-height: 1.6; }
.agent-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.9rem; }
.agent-actions .btn { border-color: rgba(243,241,236,.3); color: var(--on-deep); }
.agent-actions .btn:hover { background: var(--on-deep); color: var(--deep); border-color: var(--on-deep); }
.agent-actions .btn-primary { background: var(--brass); border-color: var(--brass); color: #FFF; }
.agent-actions .btn-primary:hover { background: var(--brass-2); border-color: var(--brass-2); color: var(--deep); }

/* ---------------- footer ---------------- */
footer { border-top: 1px solid var(--line); padding-block: 3rem 4rem; color: var(--ink-3); font-size: .76rem; line-height: 1.7; }
.foot { display: flex; flex-wrap: wrap; gap: 1.2rem 3rem; justify-content: space-between; align-items: flex-start; }
.foot strong { color: var(--ink-2); font-weight: 600; letter-spacing: .04em; }
.dre { display: flex; flex-wrap: wrap; gap: .3rem 1.8rem; letter-spacing: .07em; }
.eho { display: inline-flex; align-items: center; gap: .6rem; margin: 1.8rem 0 0; letter-spacing: .1em; text-transform: uppercase; font-size: .66rem; }
.eho svg { width: 19px; height: 19px; flex: none; opacity: .7; }
.disclaimer { margin-top: 1.3rem; max-width: 92ch; font-size: .7rem; line-height: 1.65; }

/* ---------------- sticky bar ---------------- */
.stickybar {
  position: fixed; z-index: 60; inset: auto 0 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  padding: 0 0 env(safe-area-inset-bottom);
  background: color-mix(in srgb, var(--ground) 94%, transparent);
  backdrop-filter: blur(14px); border-top: 1px solid var(--line);
}
.stickybar .btn { padding: 1.05rem .4rem; font-size: .64rem; border: 0; border-right: 1px solid var(--line); border-radius: 0; }
.stickybar .btn:last-child { border-right: 0; }
@media (min-width: 760px) { .stickybar { display: none; } }

/* ---------------- lightbox ---------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 90; background: rgba(8,10,13,.97);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 1.5rem; touch-action: none; overscroll-behavior: contain;
}
.lb-stage {
  flex: 0 1 auto; display: grid; place-items: center;
  max-width: 100%; width: 100%; touch-action: pan-y;
}
.lightbox img {
  max-width: 100%; max-height: 74vh; object-fit: contain;
  will-change: transform; user-select: none; -webkit-user-drag: none;
}
.lb-cap {
  color: rgba(255,255,255,.72); font-size: .68rem; text-align: center;
  margin: 1.2rem 0 0; min-height: 1.2em; letter-spacing: .16em; text-transform: uppercase;
}
.lb-count {
  color: rgba(255,255,255,.45); font-size: .66rem; text-align: center;
  margin: .5rem 0 0; letter-spacing: .18em; font-variant-numeric: tabular-nums;
}
.lb-btn, .lb-close {
  position: absolute; background: transparent; border: 1px solid rgba(255,255,255,.3);
  color: #fff; cursor: pointer; display: grid; place-items: center; line-height: 1;
  transition: background .16s ease;
}
.lb-btn { top: 50%; transform: translateY(-50%); width: 46px; height: 46px; font-size: 1.3rem; }
.lb-close { top: 1.3rem; right: 1.3rem; width: 42px; height: 42px; font-size: 1.05rem; }
.lb-btn:hover, .lb-close:hover { background: rgba(255,255,255,.14); }
.lb-prev { left: 1.3rem; }
.lb-next { right: 1.3rem; }

/* On a phone the arrows crowd the photo and the gesture is the swipe, so the
   arrows step aside and a hint takes their place. */
@media (max-width: 620px), (pointer: coarse) {
  .lb-btn { display: none; }
  .lb-close { top: .8rem; right: .8rem; }
  .lightbox img { max-height: 68vh; }
  .lb-count::after { content: "   ·   SWIPE"; opacity: .7; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }