/* Hedgerow & Shore — Five Towns estate brokerage
   Palette: hydrangea blue, cedar-shingle taupe, clipped-lawn green, trim white, late-day gold.
   Type: Baskervville (transitional serif, estate-sign) + Archivo expanded (airy wide sans). */

:root{
  --paper:#f7f8f4;
  --ink:#2c3850;          /* deep hydrangea-slate */
  --ink-soft:#55617a;
  --hydrangea:#5f7fb4;
  --hydrangea-deep:#3d5687;
  --taupe:#8b7c68;
  --lawn-ink:#4c6243;
  --gold:#c08a2e;
  --hairline:rgba(44,56,80,.22);
  --hairline-soft:rgba(44,56,80,.12);

  /* daylight channels — overwritten live by site.js */
  --sky-top:#6f9bd2; --sky-mid:#a9c8e4; --sky-low:#e4eef4;
  --water:#86abc6; --glint-o:.25;
  --sun-x:430px; --sun-y:150px; --sun-core:#fff3cf; --sun-glow:#ffe4a8;
  --lawn:#5d7a52; --lawn-far:#6f8c64; --hedge:#4e6549; --tree:#52684c;
  --house:#f4f2ea; --roof:#85796a; --door:#31435f;
  --window:#9db3c4; --window-glow:0;
  --sh-skew:30deg; --sh-len:.85; --sh-o:.16;
  --grade:#dce9f2; --grade-o:.12; --dusk:#31406b; --dusk-o:0;
  --hero-ink:#2c3850;
  --ph-b:1; --ph-s:1; --ph-sep:0;
  --accent-day:#5f7fb4;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Baskervville',Georgia,serif;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--hydrangea-deep);outline-offset:3px;border-radius:2px}

.sans{font-family:'Archivo',system-ui,sans-serif}
.eyebrow{
  font-family:'Archivo',sans-serif;
  font-variation-settings:'wdth' 122;
  font-weight:520;
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent-day);
  transition:color .4s;
}
.wrap{max-width:1180px;margin:0 auto;padding-left:clamp(20px,4.4vw,52px);padding-right:clamp(20px,4.4vw,52px)}

/* ---------- header ---------- */
.site-head{
  position:absolute;inset:0 0 auto 0;z-index:5;
  display:flex;justify-content:space-between;align-items:baseline;
  padding:clamp(18px,2.6vw,30px) clamp(20px,4.4vw,52px);
}
.wordmark{
  font-family:'Baskervville',serif;font-size:1.28rem;letter-spacing:.02em;
  text-decoration:none;color:var(--hero-ink);transition:color .4s;white-space:nowrap;
}
.wordmark em{font-style:italic;color:var(--gold);padding:0 .08em}
.wordmark small{
  display:block;font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 124;
  font-size:.56rem;letter-spacing:.34em;text-transform:uppercase;opacity:.72;margin-top:2px;
}
.site-nav{display:flex;gap:clamp(14px,2.4vw,30px)}
.site-nav a{
  font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 118;font-weight:500;
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  color:var(--hero-ink);transition:color .4s;border-bottom:1px solid transparent;padding-bottom:2px;
}
.site-nav a:hover{border-bottom-color:currentColor}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(94vh,860px);display:flex;flex-direction:column}
.scene-holder{
  position:absolute;inset:0;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,var(--sky-top),var(--sky-mid) 46%,var(--sky-low) 74%,var(--sky-low));
}
.scene{
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:max(100%,980px);aspect-ratio:1440/620;height:auto;display:block;
}
/* daylight grade over the whole scene */
.scene-holder::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:var(--grade);mix-blend-mode:soft-light;opacity:calc(var(--grade-o) * 1.5);
}
.scene-holder::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:var(--dusk);mix-blend-mode:multiply;opacity:var(--dusk-o);
}
.scene .sun-g{transform:translate(calc(var(--sun-x) * var(--sxm,1) + var(--sxb,0px)),var(--sun-y))}
.scene .glint-g{transform:translateX(calc(var(--sun-x) * var(--sxm,1) + var(--sxb,0px)))}
.scene .prop{transform:translateX(150px)}
@media (max-width:720px){
  :root{--sxm:.345;--sxb:475px}
  .scene{width:max(100%,1160px)}
  .scene .prop{transform:translateX(-180px)}
}
.hero-copy{
  position:relative;z-index:3;width:100%;
  padding-top:clamp(108px,15vh,168px);
}
.hero-copy h1{
  font-weight:400;font-size:clamp(2.45rem,5.3vw,4.35rem);line-height:1.06;
  letter-spacing:-.01em;color:var(--hero-ink);transition:color .4s;max-width:12em;
}
.hero-copy h1 em{font-style:italic}
.hero-copy p{
  margin-top:1.15rem;max-width:31rem;font-size:clamp(1rem,1.35vw,1.13rem);
  color:var(--hero-ink);transition:color .4s;opacity:.86;
}
.hero-copy p.eyebrow{max-width:none;margin-top:0}

/* the daylight dial */
.dial-row{position:relative;z-index:4;margin-top:auto;width:100%;padding-bottom:clamp(18px,3.4vh,34px)}
.dial{
  width:min(520px,100%);
  background:rgba(247,248,244,.82);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--hairline);
  border-radius:14px;
  padding:14px 20px 12px;
  box-shadow:0 12px 40px rgba(44,56,80,.16);
}
.dial-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.dial-label{
  font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 122;font-weight:560;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);
}
.dial output,.dial-mini output{
  font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 112;font-weight:620;
  font-size:.92rem;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.dial-ticks{
  display:flex;justify-content:space-between;margin-top:4px;
  font-family:'Archivo',sans-serif;font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);
}
input[type=range].dayrange{
  -webkit-appearance:none;appearance:none;width:100%;height:26px;background:transparent;
  cursor:ew-resize;margin-top:6px;
}
input[type=range].dayrange::-webkit-slider-runnable-track{
  height:3px;border-radius:2px;
  background:linear-gradient(90deg,#f3d9bd,#a9c8e4 30%,#8fb6de 50%,#f2d9a8 76%,#e79a3c);
}
input[type=range].dayrange::-moz-range-track{
  height:3px;border-radius:2px;
  background:linear-gradient(90deg,#f3d9bd,#a9c8e4 30%,#8fb6de 50%,#f2d9a8 76%,#e79a3c);
}
input[type=range].dayrange::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:22px;margin-top:-9.5px;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#fff6da,var(--gold) 72%);
  border:1px solid rgba(44,56,80,.35);
  box-shadow:0 0 0 5px rgba(192,138,46,.16),0 2px 6px rgba(44,56,80,.3);
}
input[type=range].dayrange::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#fff6da,var(--gold) 72%);
  border:1px solid rgba(44,56,80,.35);
  box-shadow:0 0 0 5px rgba(192,138,46,.16),0 2px 6px rgba(44,56,80,.3);
}

/* scene internals driven by the dial */
.scene .cast{
  transform-box:fill-box;transform-origin:50% 100%;
  transform:skewX(var(--sh-skew)) scaleY(calc(-1 * var(--sh-len)));
  fill:#243046;opacity:var(--sh-o);filter:blur(3px);
}
.scene .win{fill:var(--window)}
.scene .win-glow{fill:#ffd98a;opacity:calc(var(--window-glow) * .9)}
.scene .clouds{animation:drift 120s ease-in-out infinite alternate;filter:blur(6px)}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-260px)}}
@media (prefers-reduced-motion:reduce){.scene .clouds{animation:none}}

/* ---------- shared section rhythm ---------- */
section{position:relative}
.band{padding-top:clamp(64px,9vw,120px);padding-bottom:clamp(64px,9vw,120px)}
.band-head{max-width:640px;margin-bottom:clamp(36px,5vw,64px)}
.band-head h2{
  font-weight:400;font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.12;margin-top:.7rem;
}
.band-head h2 em{font-style:italic}
.band-head p{margin-top:.9rem;color:var(--ink-soft);max-width:34rem}

/* reveal */
.rise{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none}}

/* ---------- exhale (stats) ---------- */
.exhale{border-top:1px solid var(--hairline-soft)}
.exhale-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:start}
.exhale-grid h2{font-weight:400;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.14;margin-top:.7rem}
.exhale-grid h2 em{font-style:italic}
.exhale-grid>div>p{margin-top:1rem;color:var(--ink-soft)}
.trade{list-style:none;border-top:1px solid var(--hairline)}
.trade li{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:baseline;gap:14px;padding:1.05rem 0;border-bottom:1px solid var(--hairline-soft);
}
.trade .from{color:var(--ink-soft);font-style:italic}
.trade .arrow{font-family:'Archivo',sans-serif;color:var(--gold);font-size:.9rem}
.trade .to{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 112;font-weight:600;font-size:1.02rem;text-align:right}
.trade .to small{display:block;font-weight:420;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-top:2px}

/* ---------- estate plates ---------- */
.plates{background:linear-gradient(180deg,rgba(95,127,180,.055),rgba(95,127,180,0) 30%)}
.plate-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,28px)}
.plate{
  position:relative;background:#fbfcf9;
  border:1px solid var(--hairline);
  padding:clamp(22px,3vw,34px) clamp(22px,3vw,36px) clamp(18px,2.4vw,28px);
  box-shadow:0 1px 0 rgba(44,56,80,.05);
}
.plate{transition:transform .35s ease,box-shadow .35s ease}
.plate:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(44,56,80,.10)}
.plate::before{content:"";position:absolute;inset:7px;border:1px solid var(--hairline-soft);pointer-events:none;transition:inset .35s ease,border-color .35s ease}
.plate:hover::before{inset:11px;border-color:rgba(192,138,46,.55)}
@media (prefers-reduced-motion:reduce){.plate,.plate::before{transition:none}.plate:hover{transform:none}}
.plate-stop{
  font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 124;font-weight:540;
  font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;color:var(--accent-day);transition:color .4s;
}
.plate h3{font-weight:400;font-size:clamp(1.7rem,2.5vw,2.2rem);margin:.35rem 0 .5rem}
.plate .char{color:var(--ink-soft);font-size:.99rem;min-height:3.2em}
.walktable{margin-top:1.2rem;border-top:1px solid var(--hairline)}
.walktable .row{display:flex;align-items:baseline;gap:10px;padding:.6rem 0;border-bottom:1px solid var(--hairline-soft)}
.walktable .k{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 116;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.walktable .dots{flex:1;border-bottom:1px dotted rgba(44,56,80,.4);transform:translateY(-4px)}
.walktable .v{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 110;font-weight:620;font-size:.9rem;font-variant-numeric:tabular-nums}
.plate-wide{grid-column:1 / -1;background:linear-gradient(180deg,#fbfcf9,#f4f1e6)}
.plate-wide .plate-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px)}

/* ---------- listings ---------- */
.listings .band-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;max-width:none}
.listings .band-head>div{max-width:560px}
.dial-mini{
  min-width:min(300px,100%);border:1px solid var(--hairline);border-radius:12px;
  padding:10px 16px 8px;background:#fbfcf9;
}
.dial-mini .dial-top{margin-bottom:0}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,28px)}
.card{text-decoration:none;display:block}
.relight{position:relative;overflow:hidden;border-radius:3px}
.relight img{
  aspect-ratio:3/2;object-fit:cover;width:100%;
  filter:brightness(var(--ph-b)) saturate(var(--ph-s)) sepia(var(--ph-sep));
  transition:transform .8s cubic-bezier(.2,.6,.2,1);
}
.relight::after{
  content:"";position:absolute;inset:0;background:var(--grade);
  mix-blend-mode:soft-light;opacity:calc(var(--grade-o) * 1.6);pointer-events:none;
}
.relight::before{
  content:"";position:absolute;inset:0;background:var(--dusk);z-index:1;
  mix-blend-mode:multiply;opacity:calc(var(--dusk-o) * .6);pointer-events:none;
}
.card:hover .relight img{transform:scale(1.035)}
@media (prefers-reduced-motion:reduce){.card:hover .relight img{transform:none}}
.card-meta{padding:1rem .1rem 0}
.card-meta .addr{font-size:1.32rem;line-height:1.2}
.card-meta .price-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:.35rem}
.card-meta .price{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 112;font-weight:640;font-size:1rem}
.card-meta .specs{font-family:'Archivo',sans-serif;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.card-meta .note{font-style:italic;color:var(--ink-soft);margin-top:.5rem;font-size:.96rem}

/* ---------- dunes band ---------- */
.dunesband{position:relative;overflow:hidden}
.dunesband .relight{border-radius:0}
.dunesband img{aspect-ratio:auto;height:clamp(380px,58vh,560px);width:100%;object-fit:cover}
.dunes-quote{
  position:absolute;inset:auto 0 0 0;z-index:2;
  padding:clamp(28px,5vw,56px) clamp(20px,4.4vw,52px);
  background:linear-gradient(180deg,rgba(20,26,40,0),rgba(20,26,40,.55));
  color:#f7f4ea;
}
.dunes-quote p{font-size:clamp(1.35rem,2.6vw,2.1rem);line-height:1.25;max-width:34ch;font-style:italic}
.dunes-quote p.eyebrow{
  font-size:.72rem;font-style:normal;color:#e9c987;margin-bottom:.6rem;max-width:none;
}

/* ---------- walk (CTA) ---------- */
.walk{text-align:center}
.walk h2{font-weight:400;font-size:clamp(2.1rem,4vw,3.3rem);line-height:1.1;margin-top:.8rem}
.walk h2 em{font-style:italic}
.walk>.wrap>p{max-width:34rem;margin:1.1rem auto 0;color:var(--ink-soft)}
.walk-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:2.2rem}
.btn{
  font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 116;font-weight:560;
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  padding:.95em 1.9em;border-radius:2px;
}
.btn-solid{background:var(--hydrangea-deep);color:#f7f8f4;border:1px solid var(--hydrangea-deep)}
.btn-solid:hover{background:var(--ink)}
.btn-line{border:1px solid var(--hairline);color:var(--ink)}
.btn-line:hover{border-color:var(--ink)}
.walk-note{font-size:.92rem;font-style:italic;color:var(--ink-soft);margin-top:1.6rem}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--hairline);padding:2.4rem 0 2.8rem;font-size:.85rem;color:var(--ink-soft)}
.foot-grid{display:flex;flex-wrap:wrap;gap:1.4rem 3rem;justify-content:space-between;align-items:baseline}
.foot-grid nav{display:flex;gap:1.4rem;flex-wrap:wrap}
.foot-grid a{text-decoration:none;border-bottom:1px solid var(--hairline-soft)}
.foot-grid a:hover{border-bottom-color:var(--ink-soft)}
.fair{font-family:'Archivo',sans-serif;font-size:.68rem;letter-spacing:.06em;max-width:46ch}

/* ---------- guide page ---------- */
.guide-body{padding-top:clamp(110px,14vh,150px)}
.guide-body .band{padding-top:clamp(36px,5vw,56px);padding-bottom:clamp(36px,5vw,56px)}
.guide-body h2{font-weight:400;font-size:clamp(1.55rem,2.6vw,2.1rem);margin-bottom:.9rem}
.guide-body h2 em{font-style:italic}
.guide-body .band p{max-width:62ch;margin-bottom:.9rem}
.guide-body .band p+h2{margin-top:1.8rem}
.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:1.4rem 0}
.swatch{border:1px solid var(--hairline);background:#fbfcf9}
.swatch .chip{height:74px}
.swatch figcaption{padding:.6rem .8rem;font-family:'Archivo',sans-serif;font-size:.72rem;letter-spacing:.06em}
.swatch figcaption b{display:block;font-variation-settings:'wdth' 116;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
pre{
  background:#eef0ea;border:1px solid var(--hairline-soft);border-radius:4px;
  padding:1rem 1.2rem;overflow-x:auto;font-size:.8rem;line-height:1.55;margin:1rem 0 1.4rem;
  font-family:ui-monospace,'SF Mono',Menlo,monospace;color:#33405c;max-width:100%;
}
.passlist{list-style:none;counter-reset:pass;margin:1rem 0}
.passlist li{
  counter-increment:pass;display:grid;grid-template-columns:auto 1fr;gap:16px;
  padding:1rem 0;border-bottom:1px solid var(--hairline-soft);align-items:baseline;
}
.passlist li::before{
  content:"Pass " counter(pass);
  font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 120;font-weight:600;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);white-space:nowrap;
}
.recipe{margin:1rem 0 0 1.2rem}
.recipe li{margin-bottom:.7rem;max-width:60ch}
.backlink{
  font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 118;font-size:.74rem;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  border-bottom:1px solid var(--hairline);padding-bottom:2px;
}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .exhale-grid{grid-template-columns:1fr}
  .card-grid{grid-template-columns:1fr 1fr}
  .card:last-child{grid-column:1 / -1}
}
@media (max-width:720px){
  .site-head{flex-direction:column;align-items:flex-start;gap:12px}
  .site-nav{gap:18px}
  .hero-copy .eyebrow{font-size:.62rem;letter-spacing:.15em}
  .dial-row{padding-bottom:10px}
  .dial{padding:10px 16px 10px}
  .dial-ticks{display:none}
  .plate-grid{grid-template-columns:1fr}
  .plate-wide .plate-inner{grid-template-columns:1fr}
  .plate .char{min-height:0}
  .card-grid{grid-template-columns:1fr}
  .card:last-child{grid-column:auto}
  .hero-copy{padding-top:clamp(120px,16vh,160px)}
  .site-nav a.hide-sm{display:none}
  .trade li{grid-template-columns:1fr;gap:2px}
  .trade .arrow{display:none}
  .trade .to{text-align:left;margin-top:.2rem}
}