/* ============================================================
   Private Estate in la Garde Freinet — styles
   Light and warm: lime plaster, sand, terracotta, olive.
   The photographs carry the page; the type stays out of their way.
   All colours live in this first block — change them once here.
   ============================================================ */

:root{
  --paper:#F7F3EC;        /* chalk / lime plaster */
  --paper-2:#EFE8DC;      /* warm sand, for the quieter bands */
  --ink:#2E2A24;          /* soft charcoal-brown */
  --ink-soft:#5A5249;
  --muted:#8E8578;
  --line:rgba(46,42,36,.14);
  --clay:#C1704B;         /* terracotta — figures, rules, hovers */
  --olive:#7E8A6B;        /* sage — the second, quieter accent */
  --font-serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:'Inter', system-ui, -apple-system, sans-serif;
  --wrap:1280px;
}

/* ---------- BASE ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink-soft);
  font-family:var(--font-sans);font-weight:300;line-height:1.8;font-size:1.02rem;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1{color:var(--ink);font-family:var(--font-serif);font-weight:300;line-height:1.08;margin:0}
p{margin:0 0 1.2rem}
figure{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 34px}
.wrap.narrow{max-width:800px}
.narrow-center{max-width:700px;margin:0 auto;text-align:center}
section{padding:clamp(80px,12vw,170px) 0}
.overline{font-size:.68rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--muted);font-weight:400;margin:0 0 26px}

/* ---------- SOFT REVEAL ON SCROLL ---------- */
.js .reveal{opacity:0;transform:translateY(24px);
  transition:opacity 1.2s cubic-bezier(.2,.7,.2,1), transform 1.2s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}

/* ============================================================
   COVER
   ============================================================ */
.cover{position:relative;min-height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:48px;overflow:hidden}
.cover-bg{position:absolute;inset:0}
.cover-bg img{width:100%;height:100%;object-fit:cover;
  animation:drift 30s ease-in-out infinite alternate}  /* the one slow, constant motion */
@keyframes drift{from{transform:scale(1.03)}to{transform:scale(1.10)}}
/* the scrim: enough shade for white type to read over stone and foliage,
   still light enough that the photograph keeps its colour */
.cover::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(62% 48% at 50% 52%, rgba(24,18,12,.50) 0%, rgba(24,18,12,.16) 62%, transparent 100%),
    linear-gradient(180deg, rgba(24,18,12,.40) 0%, rgba(24,18,12,.16) 42%, rgba(24,18,12,.52) 100%)}
.cover-inner{position:relative;z-index:2}
.cover .overline{color:rgba(255,252,246,.92);margin-bottom:32px;
  text-shadow:0 1px 18px rgba(0,0,0,.8)}
.cover h1{font-size:clamp(2.6rem,7.4vw,5.6rem);color:#FFFCF6;letter-spacing:.005em;
  text-shadow:0 2px 26px rgba(0,0,0,.72), 0 1px 60px rgba(0,0,0,.5)}
.cover .overline.reveal{transition-delay:.25s}
.cover h1.reveal{transition-delay:.45s}
.scroll-cue{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:2;
  color:rgba(255,252,246,.7)}
.scroll-cue svg{width:26px;height:26px;animation:bob 2.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* ============================================================
   TEXT
   ============================================================ */
.statement{font-family:var(--font-serif);font-size:clamp(1.45rem,2.9vw,2.15rem);
  line-height:1.48;color:var(--ink);margin:0;text-align:center}
.statement.small{font-size:clamp(1.25rem,2.3vw,1.7rem)}

/* ---------- TEXT BESIDE A PHOTOGRAPH ---------- */
.split-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,100px);align-items:center}
.split-text p{max-width:46ch}
.split-text p:last-child{margin-bottom:0}
.split-text .overline{position:relative;padding-top:22px}
.split-text .overline::before{content:"";position:absolute;top:0;left:0;
  width:44px;height:1px;background:var(--clay)}

/* ---------- PHOTOGRAPH FRAMES ---------- */
.frame .shade{display:block;overflow:hidden;background:var(--paper-2)}
.frame img{width:100%;height:100%;object-fit:cover}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,22px);
  margin-top:clamp(52px,7vw,96px)}
.pair .frame .shade{aspect-ratio:4/3}

/* ---------- FULL-WIDTH PHOTOGRAPH ---------- */
.band{position:relative;height:clamp(340px,74vh,780px)}
.band img{width:100%;height:100%;object-fit:cover}
/* where the crop should sit in each photograph — lower the % to show more of the top */
.band.maures img{object-position:center 34%}
.band.village img{object-position:center 26%}
.band.closing img{object-position:center 46%}
.band.tall{height:clamp(420px,92vh,940px)}
.band figcaption.over{position:absolute;left:0;right:0;z-index:2;
  bottom:clamp(34px,6vw,64px);
  text-align:center;padding:0 34px;color:#FFFCF6;
  font-family:var(--font-serif);font-style:italic;
  font-size:clamp(1.15rem,2.4vw,1.85rem);line-height:1.4;
  text-shadow:0 2px 28px rgba(0,0,0,.72)}
/* the closing photograph carries its sentence higher, to leave the title room beneath */
.band.closing figcaption.over{bottom:auto;top:clamp(300px,58vh,620px)}
.band.village figcaption.over{font-style:normal;letter-spacing:.3em;text-transform:uppercase;
  font-family:var(--font-sans);font-size:.74rem}
.band.closing .shade::after,.band.village .shade::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 42%,rgba(28,22,16,.58) 100%)}

/* ---------- PHOTOGRAPH TITLES ----------
   A short terracotta rule, then the title in italic. Used under every
   photograph, so a visitor always knows what they are looking at. */
figcaption{display:flex;align-items:baseline;gap:13px;margin-top:17px;
  font-family:var(--font-serif);font-style:italic;font-size:1.06rem;
  line-height:1.4;color:var(--muted);letter-spacing:.012em}
figcaption::before{content:"";flex:0 0 22px;height:1px;background:var(--clay);
  transform:translateY(-6px)}
.shot figcaption{font-size:.98rem;margin-top:14px;gap:11px}
.shot figcaption::before{flex-basis:18px}
/* under a full-width photograph the title is centred, like the page */
.band figcaption{justify-content:center;max-width:var(--wrap);
  margin:19px auto 0;padding:0 34px}
.band figcaption.over::before{display:none}

/* ---------- OUTDOORS ---------- */
.outdoors{background:var(--paper-2)}

/* ---------- THE NUMBERS ---------- */
.facts-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:30px;text-align:center}
.fact{display:flex;flex-direction:column;gap:12px}
.fact .fig{font-family:var(--font-serif);font-size:clamp(2rem,4.2vw,3.2rem);
  line-height:1;color:var(--clay);font-variant-numeric:lining-nums}
.fact .lab{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.facts-note{max-width:64ch;margin:clamp(52px,6vw,80px) auto 0;text-align:center;
  color:var(--ink-soft);padding-top:clamp(40px,5vw,56px);border-top:1px solid var(--line)}
/* the figures land one after another */
.fact.reveal:nth-child(2){transition-delay:.09s}
.fact.reveal:nth-child(3){transition-delay:.18s}
.fact.reveal:nth-child(4){transition-delay:.27s}
.fact.reveal:nth-child(5){transition-delay:.36s}

/* ---------- GALLERY ---------- */
.gallery{padding-top:0}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,18px)}
.shot{cursor:zoom-in}
.shot .shade{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--paper-2)}
.shot img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.shot:hover img{transform:scale(1.05)}
.grid{align-items:start}
.shot.reveal:nth-child(2){transition-delay:.08s}
.shot.reveal:nth-child(3){transition-delay:.16s}

/* ---------- FOOTER ---------- */
footer{padding:46px 0 56px;text-align:center;
  font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}

/* ============================================================
   LIGHTBOX — a gallery photograph opened full-screen
   ============================================================ */
.lb{position:fixed;inset:0;z-index:90;background:rgba(24,19,14,.96);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .5s ease}
.lb.on{opacity:1;pointer-events:auto}
.lb img{max-width:92vw;max-height:88vh;width:auto;height:auto;object-fit:contain}
.lb button{position:absolute;background:none;border:0;cursor:pointer;padding:18px;
  color:rgba(255,252,246,.72);transition:color .25s}
.lb button:hover{color:var(--clay)}
.lb svg{width:26px;height:26px}
.lb-close{top:14px;right:16px}
.lb-prev{left:10px}
.lb-next{right:10px}
.lb-meta{position:absolute;bottom:22px;left:0;right:0;text-align:center;padding:0 60px}
.lb-title{display:block;font-family:var(--font-serif);font-style:italic;
  font-size:1.12rem;color:rgba(255,252,246,.9)}
.lb-count{display:block;margin-top:7px;font-size:.66rem;letter-spacing:.22em;color:var(--muted)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .split-grid{grid-template-columns:1fr;gap:34px}
  .split.alt .frame{order:-1}
  .frame .shade{aspect-ratio:4/3}
  .facts-grid{grid-template-columns:repeat(3,1fr);gap:34px 20px}
  .grid{grid-template-columns:1fr 1fr}
  .lb-prev{left:0}.lb-next{right:0}
}
@media (max-width:560px){
  .wrap{padding:0 22px}
  .band figcaption{padding:0 22px}
  figcaption{font-size:1rem}
  .pair{grid-template-columns:1fr}
  .facts-grid{grid-template-columns:1fr 1fr}
  .grid{grid-template-columns:1fr}
  .shot .shade{aspect-ratio:5/4}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important}
  .js .reveal{opacity:1;transform:none;transition:none}
  .shot:hover img{transform:none}
  html{scroll-behavior:auto}
}