/* ===== Frenches Station Estate — design system ===== */

:root{
  --cream:#f3ede0;
  --paper:#faf7ef;
  --ink:#211c15;
  --ink-soft:#5a5142;
  --rust:#a3441f;
  --rust-dark:#7c3315;
  --forest:#3c4a34;
  --forest-dark:#2a3425;
  --copper:#b3792c;
  --line: rgba(33,28,21,0.14);
  --line-soft: rgba(33,28,21,0.08);
  --serif:'Fraunces', Georgia, serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --maxw: 1280px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; margin:0; color:var(--ink); }
p{ margin:0 0 1em; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 32px; }

/* ===== Header ===== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:22px 0;
  transition:background .35s ease, padding .35s ease, box-shadow .35s ease;
}
.site-header.scrolled{
  background:rgba(250,247,239,0.92);
  backdrop-filter:blur(8px);
  padding:14px 0;
  box-shadow:0 1px 0 var(--line);
}
.header-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 32px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{ display:flex; flex-direction:column; line-height:1.1; }
.brand-name{
  font-family:var(--serif); font-weight:600; font-size:1.25rem;
  color:var(--ink); letter-spacing:.01em;
}
.site-header:not(.scrolled) .brand-name,
.site-header:not(.scrolled) .brand-tag{ color:#fff; }
.brand-tag{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.14em;
  color:var(--ink-soft); margin-top:2px;
}
.site-nav{ display:flex; align-items:center; gap:30px; }
.site-nav a{
  font-size:.86rem; font-weight:500; letter-spacing:.02em;
  color:var(--ink); opacity:.82; transition:opacity .2s;
}
.site-header:not(.scrolled) .site-nav a{ color:#fff; }
.site-nav a:hover{ opacity:1; }
.nav-cta{
  padding:9px 18px; border-radius:2px;
  background:var(--rust); color:#fff !important; opacity:1 !important;
}
.nav-cta:hover{ background:var(--rust-dark); }
.nav-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px;
}
.nav-toggle span{ width:24px; height:2px; background:#fff; transition:.25s; }
.site-header.scrolled .nav-toggle span{ background:var(--ink); }

/* ===== Hero ===== */
.hero{
  position:relative; height:100vh; min-height:640px;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden; color:#fff;
}
.hero-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,16,10,.35) 0%, rgba(20,16,10,.15) 35%, rgba(20,16,10,.75) 100%);
}
.hero-content{ position:relative; z-index:2; padding:0 32px 90px; max-width:var(--maxw); margin:0 auto; width:100%; }
.hero-kicker{
  text-transform:uppercase; letter-spacing:.22em; font-size:.78rem; font-weight:600;
  margin-bottom:18px; opacity:.9;
}
.hero-title{
  font-size:clamp(2.6rem, 6vw, 5.2rem); font-weight:600; line-height:1.02;
  max-width:16ch; margin-bottom:22px; text-wrap:balance; color:#fff;
}
.hero-sub{
  font-size:1.08rem; max-width:44ch; opacity:.92; margin-bottom:0; font-weight:400;
}
.hero-facts{
  position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:0;
  border-top:1px solid rgba(255,255,255,.28);
  max-width:var(--maxw); margin:34px auto 0; padding:24px 32px 0;
}
.hero-fact{ flex:1 1 160px; padding-right:24px; }
.hero-fact .num{ font-family:var(--serif); font-size:1.7rem; font-weight:600; display:block; }
.hero-fact .lbl{ font-size:.76rem; text-transform:uppercase; letter-spacing:.1em; opacity:.82; }

/* ===== Section scaffolding ===== */
section{ position:relative; }
.section-pad{ padding:120px 0; }
.section-pad.tight{ padding:90px 0; }
.kicker{
  text-transform:uppercase; letter-spacing:.18em; font-size:.76rem; font-weight:600;
  color:var(--rust); margin-bottom:14px; display:block;
}
.section-title{ font-size:clamp(2rem,3.4vw,2.9rem); margin-bottom:26px; text-wrap:balance; }
.lede{ font-size:1.2rem; color:var(--ink-soft); max-width:62ch; }

.dark{ background:var(--forest-dark); color:#f3ede0; }
.dark h2, .dark h3{ color:#faf7ef; }
.dark .kicker{ color:#d8a862; }
.dark p{ color:#e4dfd2; }
.dark .lede{ color:#d8d2c2; }

/* ===== Editorial split blocks (story sections) ===== */
.story{
  display:grid; grid-template-columns: 0.92fr 1.08fr; gap:72px; align-items:center;
}
.story.reverse{ direction:rtl; }
.story.reverse > *{ direction:ltr; }
.story-media{ position:relative; }
.story-media img{ width:100%; height:100%; object-fit:cover; border-radius:2px; }
.story-media.tall img{ aspect-ratio:4/5; }
.story-media.wide img{ aspect-ratio:5/4; }
.story-media figcaption{
  margin-top:10px; font-size:.8rem; color:var(--ink-soft); font-style:italic;
}
.story-text .kicker{ margin-bottom:10px; }
.story-text h2{ margin-bottom:22px; }
.story-text p{ color:var(--ink-soft); font-size:1.02rem; }
.story-text p:first-of-type::first-letter{
  font-family:var(--serif); font-size:3.1em; float:left; line-height:.82;
  padding:.05em .07em 0 0; color:var(--rust); font-weight:600;
}

.pull-quote{
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(1.3rem,2.2vw,1.7rem); line-height:1.45;
  color:var(--ink); border-left:3px solid var(--rust); padding-left:26px;
  margin:34px 0; max-width:46ch;
}
.dark .pull-quote{ color:#faf7ef; border-color:#d8a862; }

/* photo pair */
.photo-pair{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.photo-pair img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; border-radius:2px; }
.photo-pair .cap{ font-size:.8rem; color:var(--ink-soft); font-style:italic; margin-top:8px; }
.dark .photo-pair .cap{ color:#cfc8b8; }

/* full-bleed banner image */
.banner{ position:relative; height:56vh; min-height:380px; overflow:hidden; }
.banner img{ width:100%; height:100%; object-fit:cover; }
.banner-cap{
  position:absolute; left:0; right:0; bottom:0; padding:26px 32px;
  background:linear-gradient(0deg, rgba(20,16,10,.68), transparent);
  color:#fff; font-family:var(--serif); font-size:1.15rem; font-style:italic;
}

/* ===== Gallery grid ===== */
.gallery-head{ text-align:center; max-width:640px; margin:0 auto 54px; }
.gallery-head .lede{ margin:0 auto; }
.gallery-grid{
  display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:190px; gap:14px;
}
.gallery-grid figure{ margin:0; overflow:hidden; border-radius:2px; position:relative; cursor:zoom-in; background:var(--line-soft); }
.gallery-grid img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.gallery-grid figure:hover img{ transform:scale(1.06); }
.gallery-grid figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:14px 16px 12px;
  background:linear-gradient(0deg, rgba(20,16,10,.75), transparent);
  color:#fff; font-size:.82rem; opacity:0; transition:opacity .25s;
}
.gallery-grid figure:hover figcaption{ opacity:1; }
.g-a{ grid-column:span 3; grid-row:span 2; }
.g-b{ grid-column:span 3; grid-row:span 1; }
.g-c{ grid-column:span 2; grid-row:span 1; }

/* ===== Facts / spec sheet ===== */
.facts-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:64px 72px; }
.facts-grid.kv{ grid-template-columns:repeat(3,1fr); gap:52px 48px; }
.facts-group h3{
  font-size:1.3rem; margin-bottom:18px; color:var(--rust);
}
.facts-group .facts-sub{ font-size:.86rem; color:var(--ink-soft); margin-bottom:20px; text-transform:uppercase; letter-spacing:.08em; }
.facts-list{ list-style:none; margin:0; padding:0; }
.facts-list li{
  padding:13px 0; border-bottom:1px solid var(--line);
  font-size:.96rem; color:var(--ink-soft); line-height:1.55;
}
.facts-list li:last-child{ border-bottom:0; }
.facts-list li b, .facts-list li strong{ color:var(--ink); font-weight:600; }

.kv-list{ list-style:none; margin:0; padding:0; }
.kv-list li{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:11px 0; border-bottom:1px solid var(--line); font-size:.92rem;
}
.kv-list li:last-child{ border-bottom:0; }
.kv-list li span:first-child{ color:var(--ink-soft); }
.kv-list li span:last-child{ font-weight:600; font-family:var(--serif); text-align:right; white-space:nowrap; }

.stat-strip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border:1px solid var(--line); border-radius:2px; overflow:hidden; margin-bottom:70px;
}
.stat-strip div{
  padding:26px 24px; border-right:1px solid var(--line);
}
.stat-strip div:last-child{ border-right:0; }
.stat-strip .num{ font-family:var(--serif); font-size:1.7rem; font-weight:600; display:block; color:var(--rust); }
.stat-strip .lbl{ font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); }

/* ===== Timeline ===== */
.timeline{
  list-style:none; margin:0; padding:0;
}
.timeline li{
  display:grid; grid-template-columns:92px 28px 1fr; column-gap:0;
  position:relative; padding-bottom:36px;
}
.timeline li:last-child{ padding-bottom:0; }
.t-year{
  font-family:var(--serif); font-weight:600; font-size:1.02rem; color:var(--rust);
  text-align:right; padding-right:18px; padding-top:1px; white-space:nowrap;
}
.t-dot-col{ position:relative; display:flex; justify-content:center; }
.t-dot-col::before{
  content:''; position:absolute; top:2px; bottom:-36px; width:1px; background:var(--line); left:50%;
}
.timeline li:last-child .t-dot-col::before{ display:none; }
.t-dot{
  width:9px; height:9px; border-radius:50%; background:var(--rust);
  margin-top:6px; position:relative; z-index:1; box-shadow:0 0 0 4px var(--paper);
}
.timeline li.t-future .t-dot{ background:transparent; border:1px solid var(--rust); box-shadow:0 0 0 4px var(--paper); }
.t-body h4{ font-family:var(--serif); font-size:1.08rem; font-weight:600; margin:0 0 4px; color:var(--ink); }
.t-body p{ color:var(--ink-soft); font-size:.93rem; margin:0; line-height:1.55; }
.dark .t-dot-col::before{ background:rgba(255,255,255,.18); }
.dark .t-dot{ box-shadow:0 0 0 4px var(--forest-dark); }
.dark .t-body h4{ color:#faf7ef; }
.dark .t-body p{ color:#cfc8b8; }
.timeline-intro{ margin-bottom:50px; }

/* ===== Timeline-free heritage note ===== */
.heritage-note{
  border-top:1px solid rgba(255,255,255,.18); margin-top:60px; padding-top:40px;
  display:grid; grid-template-columns:1.2fr 0.8fr; gap:60px; align-items:start;
}
.timeline-photos{
  display:grid; grid-template-columns:1fr 1fr; gap:14px; position:sticky; top:110px;
}
.timeline-photos figure{ margin:0; }
.timeline-photos img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:2px; display:block; }
.timeline-photos figcaption{ font-size:.72rem; color:#b9b19f; margin-top:6px; font-style:italic; line-height:1.35; }
.timeline-photos .tp-wide{ grid-column:span 2; }
.timeline-photos .tp-wide img{ aspect-ratio:16/10; }

/* ===== Map / getting here ===== */
.getting-here{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.miles-list{ list-style:none; margin:0; padding:0; }
.miles-list li{
  display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--line);
  font-size:.96rem;
}
.miles-list li span:first-child{ color:var(--ink-soft); }
.miles-list li span:last-child{ font-weight:600; font-family:var(--serif); }

/* ===== CTA / Contact ===== */
.contact{
  background:var(--forest-dark); color:#faf7ef; text-align:center; padding:130px 0;
}
.contact h2{ color:#fff; font-size:clamp(2rem,4vw,3rem); margin-bottom:20px; }
.contact p{ color:#cfc8b8; max-width:52ch; margin:0 auto 34px; }
.contact-email{
  display:inline-block; font-family:var(--serif); font-size:1.5rem; font-weight:600;
  color:#fff; border-bottom:2px solid var(--copper); padding-bottom:6px;
}
.contact-address{ margin-top:26px; color:#a9a08c; font-size:.9rem; letter-spacing:.03em; }
.contact-note{ margin-top:18px; color:#8c8471; font-size:.8rem; font-style:italic; }

/* ===== Footer ===== */
.site-footer{
  background:var(--forest-dark); color:#a9a08c; padding:28px 0; text-align:center; font-size:.82rem;
  border-top:1px solid rgba(255,255,255,.08);
}

/* ===== Lightbox ===== */
.lightbox{
  position:fixed; inset:0; background:rgba(15,12,8,.94); z-index:1000;
  display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none;
  transition:opacity .25s ease; flex-direction:column; padding:40px;
}
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox img{ max-width:100%; max-height:80vh; object-fit:contain; border-radius:2px; }
.lightbox p{ color:#e4dfd2; margin-top:16px; font-family:var(--serif); font-style:italic; }
.lightbox-close{
  position:absolute; top:24px; right:32px; background:none; border:0; color:#fff;
  font-size:2.4rem; line-height:1; cursor:pointer; opacity:.8;
}
.lightbox-close:hover{ opacity:1; }

/* ===== Reveal on scroll ===== */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ===== Responsive ===== */
@media (max-width: 980px){
  .story{ grid-template-columns:1fr; gap:32px; }
  .story.reverse{ direction:ltr; }
  .facts-grid{ grid-template-columns:1fr; gap:48px; }
  .facts-grid.kv{ grid-template-columns:repeat(2,1fr); gap:40px; }
  .getting-here{ grid-template-columns:1fr; }
  .heritage-note{ grid-template-columns:1fr; gap:32px; }
  .timeline-photos{ position:static; }
  .gallery-grid{ grid-template-columns:repeat(4,1fr); grid-auto-rows:160px; }
  .g-a{ grid-column:span 4; grid-row:span 2; }
  .g-b{ grid-column:span 2; }
  .g-c{ grid-column:span 2; }
  .stat-strip{ grid-template-columns:repeat(2,1fr); }
  .stat-strip div:nth-child(2n){ border-right:0; }
  .stat-strip div{ border-bottom:1px solid var(--line); }
}
@media (max-width: 720px){
  .wrap, .header-inner, .hero-content, .hero-facts{ padding-left:20px; padding-right:20px; }
  .timeline li{ grid-template-columns:64px 22px 1fr; }
  .t-year{ font-size:.86rem; padding-right:10px; }
  .facts-grid.kv{ grid-template-columns:1fr; gap:36px; }
  .site-nav{
    position:fixed; top:0; right:0; height:100vh; width:76vw; max-width:320px;
    background:var(--forest-dark); flex-direction:column; align-items:flex-start;
    padding:100px 30px; gap:22px; transform:translateX(100%); transition:transform .3s ease;
  }
  .site-nav.open{ transform:translateX(0); }
  .site-nav a{ color:#faf7ef !important; opacity:1; font-size:1rem; }
  .nav-toggle{ display:flex; }
  .section-pad{ padding:76px 0; }
  .photo-pair{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:180px; }
  .g-a{ grid-column:span 2; }
  .g-b, .g-c{ grid-column:span 2; }
  .hero-facts{ gap:18px 0; }
  .hero-fact{ flex:1 1 40%; }
}