:root{
  --green:#3C5445; --green-deep:#2B3C32; --cream:#FFFDE0; --cream-warm:#FAF4C9;
  --espresso:#2C220B;
  --display:"riquet","Fraunces",Georgia,serif;
  --serif:"dapifer","Newsreader",Georgia,serif;
  --sans:"atf-franklin-gothic","Libre Franklin",system-ui,sans-serif;
  --pad:clamp(100px,13vw,190px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--cream);color:var(--espresso);font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(24px,5vw,64px)}
.eyebrow{font-size:11px;letter-spacing:.34em;text-transform:uppercase;opacity:.7;margin-bottom:34px}

/* reveal */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity 1.1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1)}
[data-reveal].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}

/* nav */
header{position:fixed;top:0;left:0;right:0;z-index:30;transition:background .45s ease,box-shadow .45s ease}
header.scrolled,header.solid{background:var(--green-deep);box-shadow:0 10px 34px rgba(0,0,0,.20)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:104px;transition:height .45s ease}
header.scrolled .wrap{height:72px}
.badge-link{display:block;line-height:0}
.badge{height:56px;width:56px;border-radius:50%;transition:height .45s ease,width .45s ease}
header.scrolled .badge{height:44px;width:44px}
nav ul{list-style:none;display:flex;gap:clamp(18px,2.2vw,38px)}
nav a{color:var(--cream);text-decoration:none;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;opacity:.9;transition:opacity .3s;white-space:nowrap}
nav a:hover{opacity:.55}
.lang{display:flex;align-items:center;gap:10px}
.lang button{background:none;border:0;color:var(--cream);font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;opacity:.5;padding:2px;transition:opacity .3s}
.lang button.active{opacity:1}
.lang .sep{color:var(--cream);opacity:.35}
.head-right{display:flex;align-items:center;gap:16px}
.menu-toggle{display:none;background:none;border:0;color:var(--cream);font-size:20px;line-height:1;cursor:pointer;padding:2px 6px;z-index:60;transition:opacity .3s}
.menu-toggle:hover{opacity:.6}
.mobile-menu{position:fixed;inset:0;z-index:50;background:var(--green-deep);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(20px,5vh,34px);padding:0 22px;opacity:0;pointer-events:none;transform:translateY(-10px);transition:opacity .4s ease,transform .4s ease}
.mobile-menu.open{opacity:1;pointer-events:auto;transform:none}
.mobile-menu nav{display:flex;flex-direction:column;align-items:center;gap:clamp(20px,5vh,34px)}
.mobile-menu a{color:var(--cream);text-decoration:none;font-family:var(--display);font-style:italic;font-size:clamp(24px,7vw,34px);opacity:.92;transition:opacity .3s;text-align:center}
.mobile-menu a:hover{opacity:.6}

/* hero */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:flex-start;text-align:left;color:var(--cream);overflow:hidden}
.hero-bg{position:absolute;inset:0;background:url('assets/hero-day.jpg') center/cover;animation:kb 22s ease-out forwards}
html.night .hero-bg{background-image:url('assets/photo-web-2.jpg')}
@keyframes kb{from{transform:scale(1.08)}to{transform:scale(1)}}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(112% 100% at 50% 42%, rgba(10,7,1,0) 20%, rgba(10,7,1,.52) 58%, rgba(6,4,1,.94) 100%),
    linear-gradient(180deg,rgba(40,32,8,.4) 0%,rgba(44,66,52,.22) 42%,rgba(40,32,8,.82) 100%)}
/* hero text plate — solid brand block so the type never competes with the photo */
.hero-inner{position:relative;z-index:2;margin-left:clamp(0px,5vw,86px);
  background:var(--green);color:var(--cream);padding:clamp(32px,4.2vw,60px);
  max-width:min(560px,86vw);border-radius:4px;box-shadow:0 24px 60px rgba(20,14,2,.34)}
html.night .hero-inner{background:var(--cream);color:var(--green)}
.hero .eyebrow{opacity:.78;margin-bottom:22px}
.hero h1{font-family:var(--display);font-weight:340;font-style:italic;font-size:clamp(30px,3.5vw,54px);line-height:1.04;letter-spacing:.005em;font-variation-settings:"opsz" 120,"SOFT" 20,"WONK" 1}
/* buttons sit on the plate, so they invert against it rather than the photo */
.hero-inner .cta{background:var(--cream);color:var(--espresso)}
.hero-inner .cta:hover{background:#fff}
.hero-inner .cta.inv{background:var(--green-deep);color:var(--cream)}
.hero-inner .cta.inv:hover{background:var(--espresso);color:var(--cream)}
html.night .hero-inner .cta{background:var(--green);color:var(--cream)}
html.night .hero-inner .cta:hover{background:var(--green-deep);color:var(--cream)}
html.night .hero-inner .cta.inv{background:var(--green-deep);color:var(--cream)}
html.night .hero-inner .cta.inv:hover{background:var(--espresso);color:var(--cream)}
.scroll{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:2;font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--cream);opacity:.7}

/* buttons */
.cta{display:inline-block;background:var(--cream);color:var(--espresso);text-decoration:none;
  font-size:12px;letter-spacing:.24em;text-transform:uppercase;padding:19px 44px;border-radius:2px;transition:background .3s,transform .3s,color .3s}
.cta:hover{background:#fff;transform:translateY(-2px)}
.hero .cta{margin-top:52px}
.cta.solid{background:var(--green);color:var(--cream)}
.cta.solid:hover{background:var(--green-deep);color:var(--cream)}
/* hero dual CTA: Réserver (primary) + Menu (inverted fill) */
.hero-cta{margin-top:30px;display:flex;gap:13px;justify-content:flex-start;align-items:center;flex-wrap:wrap}
.hero .hero-cta .cta{margin-top:0}
.cta.inv{background:var(--cream);color:var(--espresso)}
.cta.inv:hover{background:#fff}

/* about */
.about{padding:var(--pad) 0;background:var(--cream)}
.about .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(48px,7vw,110px);align-items:center}
.about .eyebrow{color:var(--green)}
.about .copy{font-family:var(--serif);font-weight:400;font-size:clamp(25px,3.1vw,40px);line-height:1.28;color:var(--green-deep);font-variation-settings:"opsz" 42}
.about-media{position:relative;aspect-ratio:4/5;border-radius:4px;overflow:hidden}
.about-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.about-media:hover img{transform:scale(1.045)}

/* events (full-bleed) */
.events{position:relative;color:var(--cream);text-align:center;padding:calc(var(--pad) * 1.05) 0}
.events-bg{position:absolute;inset:0;background:url('assets/events-day.jpg') center/cover}
html.night .events-bg{background-image:url('assets/venue.jpg')}
.events-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(44,66,52,.82),rgba(40,32,8,.86))}
.events .wrap{position:relative;z-index:2;max-width:1080px}
.events .eyebrow{opacity:.72}
.events h2{font-family:var(--display);font-style:italic;font-weight:340;font-size:clamp(30px,4.4vw,58px);line-height:1.12;max-width:900px;margin:0 auto;font-variation-settings:"opsz" 120,"SOFT" 20,"WONK" 1}
.events .cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);margin-top:64px;text-align:left}
.events .cols h3{font-size:12px;letter-spacing:.28em;text-transform:uppercase;opacity:.8;margin-bottom:20px}
.events .cols p{font-size:15px;line-height:1.95;opacity:.92}
.events .cta{margin-top:64px}
.events .flink{display:inline-block;margin-top:24px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--cream);text-decoration:none;opacity:.92;transition:opacity .3s}
.events .flink::after{content:" \2192";display:inline-block;margin-left:6px;transition:transform .35s ease}
.events .flink:hover{opacity:.6}
.events .flink:hover::after{transform:translateX(5px)}

/* gallery */
.gallery{padding:var(--pad) 0;background:var(--cream);overflow:hidden}
.gallery .eyebrow{color:var(--green);text-align:center;margin-bottom:clamp(30px,4vw,52px)}
.gal{position:relative;max-width:1180px;margin:0 auto;padding:0 clamp(24px,5vw,64px)}
.gal-track{display:flex;gap:clamp(14px,1.8vw,26px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:6px 0}
.gal-track::-webkit-scrollbar{display:none}
.gal-slide{flex:0 0 clamp(260px,70%,880px);scroll-snap-align:center;aspect-ratio:16/10;border-radius:6px;overflow:hidden;margin:0;background:var(--green-deep)}
.gal-slide img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.gal-slide:hover img{transform:scale(1.045)}
.gal-nav{position:absolute;top:calc(50% + 3px);transform:translateY(-50%);width:54px;height:54px;border:0;border-radius:50%;background:var(--cream);color:var(--espresso);font-family:var(--serif);font-size:26px;line-height:1;cursor:pointer;display:grid;place-items:center;box-shadow:0 10px 30px rgba(40,32,8,.22);transition:transform .35s ease,background .35s ease,opacity .35s ease;z-index:3;opacity:0}
.gal:hover .gal-nav{opacity:1}
.gal-nav:hover{background:#fff;transform:translateY(-50%) scale(1.07)}
.gal-nav.prev{left:clamp(6px,3vw,30px)}
.gal-nav.next{right:clamp(6px,3vw,30px)}
.gal-dots{display:flex;justify-content:center;gap:9px;margin-top:28px}
.gal-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:var(--green);opacity:.26;cursor:pointer;transition:opacity .35s ease,transform .35s ease}
.gal-dots button.active{opacity:.85;transform:scale(1.25)}

/* interior page (careers, contact) */
.page{padding:clamp(150px,20vh,215px) 0 var(--pad);background:var(--cream);min-height:72vh}
.page-head{text-align:center;margin-bottom:clamp(46px,6vw,84px)}
.page-head .eyebrow{color:var(--green);margin-bottom:18px}
.page-title{font-family:var(--display);font-style:italic;font-weight:340;font-size:clamp(32px,5.2vw,66px);line-height:1.04;color:var(--green-deep);font-variation-settings:"opsz" 120,"SOFT" 20,"WONK" 1}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(30px,4vw,64px);text-align:center;max-width:960px;margin:0 auto;color:var(--green-deep)}
.contact-grid h4{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--green);opacity:.85;margin-bottom:16px}
.contact-grid p{font-size:16px;line-height:1.95}
.contact-grid a{color:var(--green-deep);text-decoration:none;transition:opacity .3s}
.contact-grid a:hover{opacity:.55}
.contact-grid .dir{display:inline-block;margin-top:8px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--green)}
.careers-body{max-width:640px;margin:0 auto;text-align:center}
.careers-body .lede{font-family:var(--serif);font-size:clamp(22px,3vw,34px);line-height:1.3;color:var(--green-deep);font-variation-settings:"opsz" 42;margin-bottom:18px}
.careers-body .sub{font-size:15px;opacity:.72;margin-bottom:42px}

/* shared footer */
.site-foot{background:var(--green);color:var(--cream);padding:clamp(58px,7vw,90px) 0 clamp(40px,5vw,60px);text-align:center}
.site-foot .wrap{display:flex;flex-direction:column;align-items:center}
.foot-badge{display:inline-block;line-height:0;margin-bottom:24px}
.foot-badge img{height:clamp(88px,9vw,116px);width:clamp(88px,9vw,116px);border-radius:50%}
.foot-info{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(30px,6vw,84px);margin-bottom:30px;text-align:center}
/* Outer two columns must match width, or the wider one pushes the middle column
   off-axis and the centred logo above it reads as crooked. */
.foot-info>div:first-child,.foot-info>div:last-child{min-width:215px}
.foot-info h4{font-size:10px;letter-spacing:.28em;text-transform:uppercase;opacity:.55;margin-bottom:11px}
.foot-info p{font-size:13.5px;line-height:1.75;opacity:.9}
.foot-info a{color:var(--cream);text-decoration:none;transition:opacity .3s}
.foot-info a:hover{opacity:.55}
.foot-info .dir{display:inline-block;margin-top:6px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.7}
.site-foot .ig{display:inline-block;color:var(--cream);text-decoration:none;font-size:12px;letter-spacing:.2em;text-transform:uppercase;opacity:.85;margin-bottom:14px;transition:opacity .3s}
.site-foot .ig:hover{opacity:.55}
.site-foot .fl{font-size:10px;letter-spacing:.34em;text-transform:uppercase;opacity:.5}

@media(max-width:880px){
  nav ul{display:none}
  .menu-toggle{display:inline-flex}
  header .wrap{height:84px}
  .hero{justify-content:center}
  .hero-inner{margin-left:0;margin-right:0;max-width:none;width:calc(100% - 36px)}
  /* keep Réserver + Menu on one row inside the narrower plate */
  .hero-inner .cta{padding:17px 28px;font-size:11px;letter-spacing:.17em}
  .lamp-cue{font-size:14px}
  .about .grid{grid-template-columns:1fr;gap:44px}
  .about-media{aspect-ratio:16/13}
  .events .cols{grid-template-columns:1fr;gap:40px}
  .contact-grid{grid-template-columns:1fr;gap:44px}
  .gal-slide{flex-basis:86%;aspect-ratio:4/3}
  .gal-nav{display:none}
}

/* ===== Day / Night via pull-lamp.
   DEFAULT = DAYTIME (bulb OFF): beige backgrounds, GREEN text everywhere incl. over the hero, bright photos.
   html.night = NIGHTTIME (bulb ON): green backgrounds, beige text, dark photos. Footer + scrolled header are the inverted bookends. ===== */
/* instant flip — colour switch is immediate (transitions suppressed for one frame via .no-anim) */
html.no-anim *,html.no-anim *::before,html.no-anim *::after{transition:none!important}

/* ---------- DAYTIME (default): green text on beige, bright photos ---------- */
body{color:var(--green)}
.hero,.events,.scroll,.events .flink,nav a,.lang button,.lang .sep,.menu-toggle{color:var(--green)}
.cta{background:var(--green);color:var(--cream)}
header.scrolled,header.solid{background:var(--cream);box-shadow:0 10px 30px rgba(44,66,52,.16)}
.hero-bg::after{background:radial-gradient(120% 100% at 50% 40%,rgba(248,246,214,0) 6%,rgba(248,246,214,.42) 54%,rgba(247,242,205,.74) 100%),linear-gradient(180deg,rgba(248,246,214,.32),rgba(247,242,205,.62))}
.events-bg::after{background:linear-gradient(180deg,rgba(248,246,214,.55),rgba(247,242,205,.72))}

/* ---------- NIGHTTIME (html.night): beige text on green, dark photos ---------- */
html.night body{background:var(--green);color:var(--cream)}
html.night .about,html.night .gallery,html.night .page{background:var(--green)}
html.night .about .copy,html.night .page-title,html.night .contact-grid,html.night .contact-grid a,html.night .careers-body .lede,html.night .about .eyebrow,html.night .gallery .eyebrow,html.night .page .eyebrow{color:var(--cream)}
html.night .hero,html.night .events,html.night .scroll,html.night .events .flink,html.night nav a,html.night .lang button,html.night .lang .sep,html.night .menu-toggle{color:var(--cream)}
html.night .cta{background:var(--cream);color:var(--espresso)}
html.night .cta.inv{background:var(--green);color:var(--cream)}
html.night .cta.inv:hover{background:var(--green-deep);color:var(--cream)}
html.night header.scrolled,html.night header.solid{background:var(--green-deep);box-shadow:0 10px 34px rgba(0,0,0,.2)}
html.night .site-foot{background:var(--cream);color:var(--green)}
html.night .foot-info h4,html.night .site-foot a,html.night .site-foot .ig,html.night .foot-info .dir{color:var(--green)}
html.night .gal-dots button{background:var(--cream)}
html.night .hero-bg::after{background:radial-gradient(112% 100% at 50% 42%,rgba(10,7,1,0) 20%,rgba(10,7,1,.52) 58%,rgba(6,4,1,.94) 100%),linear-gradient(180deg,rgba(40,32,8,.4) 0%,rgba(44,66,52,.22) 42%,rgba(40,32,8,.82) 100%)}
html.night .events-bg::after{background:linear-gradient(180deg,rgba(44,66,52,.82),rgba(40,32,8,.86))}

/* hanging cone pendant lamp (centered). The pull-chain runs up into the shade (not onto the bulb); pull to switch. */
.lamp{position:absolute;top:80px;left:50%;transform:translateX(-50%);z-index:20;background:none;border:0;padding:8px 16px;cursor:pointer;-webkit-tap-highlight-color:transparent;line-height:0}
.lamp-svg{display:block;width:104px;height:auto;overflow:visible}
/* "pull me" cue beside the chain */
.lamp-cue{position:absolute;left:calc(58% + 20px);top:70%;transform:translateY(-50%);white-space:nowrap;
  font-family:var(--display);font-style:italic;font-weight:340;font-size:17px;letter-spacing:.01em;
  color:var(--green);pointer-events:none;animation:cuebreathe 2.8s ease-in-out infinite;
  text-shadow:0 0 14px rgba(255,253,224,.95),0 0 4px rgba(255,253,224,.9)}
html.night .lamp-cue{color:var(--cream);text-shadow:0 0 16px rgba(20,14,2,.85),0 0 5px rgba(20,14,2,.7)}
@keyframes cuebreathe{0%,100%{opacity:.5}50%{opacity:.95}}
@media(prefers-reduced-motion:reduce){.lamp-cue{animation:none;opacity:.8}}
/* by day the lamp is OFF (dark, reads on the bright hero); at night it glows ON */
.lamp .wire,.lamp .chain{stroke:var(--green)}
.lamp .wire{stroke-width:1.5;opacity:.55}
.lamp .chain{stroke-width:1.7;stroke-linecap:round;opacity:.7}
.lamp .shade,.lamp .metal-f{fill:var(--green)}
.lamp .glass{fill:rgba(60,84,69,.16);stroke:var(--green);stroke-width:1.5}
.lamp .pool{fill:transparent}
.lamp .pull{transition:transform .18s cubic-bezier(.34,1.5,.5,1);animation:lampbob 2.1s ease-in-out infinite}
.lamp .knob{transform-box:fill-box;transform-origin:center;animation:knobpulse 1.4s ease-in-out infinite}
.lamp .ping{transform-box:fill-box;transform-origin:center;fill:none;stroke:#FFC061;stroke-width:1.8;animation:pingring 1.6s ease-out infinite}
/* hover cues only on real-hover devices, so a tap can't leave them "stuck" on mobile */
@media(hover:hover){
  .lamp:hover .pull{transform:translateY(3px);animation:none}
  .lamp:hover .knob{animation:none}          /* bead stays visible, just settles */
  .lamp:hover .ping{animation:none;opacity:0} /* only the expanding ring hides on hover */
}
.lamp:active .pull{transform:translateY(11px)}
.lamp.tug .pull{animation:pull .45s ease}
@keyframes lampbob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@keyframes knobpulse{0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(255,196,90,0))}50%{transform:scale(1.5);filter:drop-shadow(0 0 6px rgba(255,196,90,.95))}}
@keyframes pingring{0%{transform:scale(.5);opacity:.9}72%,100%{transform:scale(3.8);opacity:0}}
@keyframes pull{0%,100%{transform:translateY(0)}45%{transform:translateY(13px)}}
/* NIGHT — lamp glows ON */
html.night .lamp .wire,html.night .lamp .chain{stroke:var(--cream)}
html.night .lamp .shade,html.night .lamp .metal-f{fill:var(--cream)}
html.night .lamp .glass{fill:#FFF0AE;stroke:#FFE79E;filter:drop-shadow(0 0 6px rgba(255,231,158,.95)) drop-shadow(0 0 20px rgba(255,206,110,.75))}
html.night .lamp .pool{fill:url(#lampcone)}
/* the lamp attention beacon animates even under reduced-motion — it's the key affordance for the day/night switch */