/* ————————————————————————————————
   18 Meadow Rise — listing mini-site
   Editorial, image-first. Type stays small and quiet.
———————————————————————————————— */

:root{
  --paper:#fbfaf7;
  --ink:#211f1b;
  --muted:#8b877d;
  --hairline:#e3e0d8;
  --serif:"Cormorant Garamond", Georgia, serif;
  --sans:"Archivo", -apple-system, Helvetica, Arial, sans-serif;
  --gutter:clamp(20px, 5vw, 72px);
}

*{margin:0; padding:0; box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{display:block; width:100%; height:auto}
a{color:inherit; text-decoration:none; border-bottom:1px solid var(--hairline); transition:border-color .25s}
a:hover{border-color:var(--ink)}
a:focus-visible{outline:2px solid var(--ink); outline-offset:3px; border-bottom-color:transparent}

/* —— micro-header —— */
.bar{
  position:fixed; top:0; left:0; right:0; z-index:10;
  display:flex; justify-content:space-between; align-items:center;
  padding:14px var(--gutter);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:#fff; transition:background .35s, color .35s, box-shadow .35s;
}
.bar a{border-bottom-color:transparent}
.bar a:hover{border-bottom-color:currentColor}
.bar-solid{background:var(--paper); color:var(--ink); box-shadow:0 1px 0 var(--hairline)}

/* —— hero —— */
.hero{height:92svh; min-height:480px}
.hero img{width:100%; height:100%; object-fit:cover}

/* —— statement —— */
.statement{
  max-width:760px;
  margin:clamp(72px,12vh,140px) auto;
  padding:0 var(--gutter);
  text-align:left;
}
.eyebrow{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-bottom:22px;
}
.statement h1{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(21px, 2.6vw, 27px);   /* deliberately small */
  line-height:1.55;
  letter-spacing:.005em;
}

/* —— facts strip —— */
.facts{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(28px,6vw,88px);
  padding:34px var(--gutter);
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  margin:0 var(--gutter) clamp(72px,10vh,120px);
  text-align:center;
}
.facts .num{
  display:block;
  font-family:var(--serif); font-weight:500;
  font-size:24px; line-height:1.2;
}
.facts .lbl{
  display:block;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-top:6px;
}

/* —— images —— */
figure{position:relative}
figcaption{
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); padding:12px var(--gutter) 0;
}
figcaption::before{content:"— "}

.full{margin:0 0 clamp(72px,10vh,120px)}
.full img{max-height:94vh; object-fit:cover}
.full figcaption{padding-left:var(--gutter)}

.pair{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(16px,3vw,40px);
  padding:0 var(--gutter);
  margin-bottom:clamp(72px,10vh,120px);
}
.pair img{aspect-ratio:4/5; object-fit:cover}
.pair figcaption{padding-left:0}
.pair.offset figure:last-child{transform:translateY(clamp(24px,5vh,64px))}

/* —— copy blocks —— */
.story{
  max-width:560px;
  margin:0 auto clamp(72px,10vh,120px);
  padding:0 var(--gutter);
}
.story p:not(.eyebrow){font-size:15px; color:#3c3a34}

/* —— inquire —— */
.inquire{
  text-align:center;
  padding:clamp(80px,14vh,160px) var(--gutter);
  border-top:1px solid var(--hairline);
}
.inquire h2{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(20px,2.4vw,25px);   /* small, per the brief */
  line-height:1.5; margin-bottom:34px;
}
.contact{font-size:14px; line-height:2}
.brokerage{
  margin-top:30px;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted);
}

/* —— footer —— */
footer{
  padding:26px var(--gutter) 40px;
  border-top:1px solid var(--hairline);
  font-size:11px; color:var(--muted); text-align:center;
}

/* —— motion —— */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .8s ease, transform .8s ease}
.reveal.in{opacity:1; transform:none}
.pair.offset .reveal.in:last-child{transform:translateY(clamp(24px,5vh,64px))}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none}
  html{scroll-behavior:auto}
}

/* —— mobile —— */
@media (max-width:640px){
  .pair{grid-template-columns:1fr}
  .pair.offset figure:last-child{transform:none}
  .pair.offset .reveal.in:last-child{transform:none}
  .hero{height:78svh}
  .bar-left{max-width:55%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
}