/* Hero measured against the validated 1024 px-wide reference. */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Oswald:wght@300&display=swap');
header{padding:20px 4.4% 0 3.6%;align-items:center}
.brand{gap:14.7px;font-size:25px;letter-spacing:.13em}
.logo{width:57px;height:57px;border-radius:0;overflow:hidden}
.logo img{position:absolute;width:640%;height:auto;max-width:none;left:50%;top:50%;transform:translate(-50%,-50%);filter:invert(1);mix-blend-mode:screen}
header nav{gap:36px}
header nav a{font-size:12px;letter-spacing:.26em}
.hero{height:auto;aspect-ratio:1024/450;min-height:0;max-height:none;isolation:isolate;background:#080807}
.hero-photo{width:70%;height:auto;max-width:none;left:0;top:-17%;object-fit:initial;filter:sepia(1) saturate(1.35) brightness(.72) contrast(1.12)}
.hero-shade{background:linear-gradient(90deg,transparent 38%,#0808070a 48%,#080807b8 64%,#080807 76%),linear-gradient(0deg,#080807 0%,#080807b3 6%,transparent 22%)}
.hero-title{left:57.6%;top:28.5%;width:30.7%;height:45.3%;padding:0;border:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.hero-title:after{content:'';position:absolute;right:0;top:0;bottom:0;width:1px;background:#c39c4e}
.hero-title h1{font-family:'Anton','Barlow Condensed',sans-serif;font-weight:400;font-size:11.15vw;line-height:1.15;letter-spacing:.025em;transform:scaleX(.91);transform-origin:left center;white-space:nowrap;background:linear-gradient(115deg,#fff2d6 0%,#e7ddc2 45%,#b9ae93 100%);background-clip:text;-webkit-background-clip:text;color:transparent;margin-top:-7px}
.hero-title p{width:91%;font:400 13px 'Barlow Condensed',sans-serif;letter-spacing:.53em;margin:8px 0 0;text-align:center}
.scroll{left:50%;bottom:6.5%;gap:6px;font:400 12px 'Barlow Condensed',sans-serif;letter-spacing:.21em}
.scroll span{width:1px;height:25px;background:#b5b6aa}
.scroll svg{width:16px;height:10px}
@media(min-width:1600px){.hero-title h1{font-size:178.4px}.brand{font-size:39px}.logo{width:89px;height:89px}header{padding-top:31px}header nav{gap:56px}header nav a{font-size:18px}.hero-title p{font-size:20px}.scroll{font-size:18px}.scroll span{height:39px}.scroll svg{width:25px;height:16px}}
@media(min-width:601px) and (max-width:1599px){.brand{font-size:2.44vw}.logo{width:5.56vw;height:5.56vw}.brand{gap:1.435vw}header{padding-top:1.95vw}header nav{gap:3.52vw}header nav a{font-size:clamp(10px,1.17vw,18px)}.hero-title p{font-size:clamp(11px,1.27vw,20px)}.scroll span{height:2.44vw}}
@media(max-width:600px){header{padding:16px 5%;gap:12px}.logo{width:43px;height:43px}.brand{font-size:25px;gap:9.1px}header nav{gap:15px}header nav a{font-size:11px;letter-spacing:.1em}.hero{aspect-ratio:auto;height:520px}.hero-photo{width:125%;top:3%;left:-27%;height:auto}.hero-shade{background:linear-gradient(0deg,#080807 2%,#08080780 25%,transparent 70%),linear-gradient(90deg,transparent 45%,#080807aa 90%)}.hero-title{left:48%;right:auto;top:53%;width:45%;height:27%;justify-content:center}.hero-title h1{font-size:16vw;transform:scaleX(.91);margin:0}.hero-title p{font-size:11px;letter-spacing:.3em;margin-top:10px}.scroll{bottom:5%;font-size:12px;gap:7px}.scroll span{height:24px}}

/* Colour and lighting are authored in the photo, with no sepia overlay. */
.hero-photo{inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:none}
.hero-responsive{display:contents}
.hero-shade{background:linear-gradient(0deg,#080807 0%,#08080733 4%,transparent 14%)}
@media(max-width:600px){.hero-photo{inset:0;width:100%;height:100%;object-fit:cover;object-position:38% center}.hero-shade{background:linear-gradient(0deg,#080807 0%,#08080766 15%,transparent 45%)}}

/* Fine condensed navigation and a weathered ivory surface inside the title. */
header nav a{font-family:'Oswald','Barlow Condensed',sans-serif;font-weight:300;letter-spacing:.28em}
.hero-title h1{background-image:linear-gradient(115deg,#fff5d950,#e0d4b900 48%,#6f634754),url('/assets/title-patina.svg');background-size:100% 100%;background-repeat:no-repeat;background-blend-mode:normal;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* Raster wordmark replaces the procedural text texture. */
.hero-title h1{width:94%;font-size:inherit;line-height:0;transform:none;background:none; margin-top:-7px}
.hero-wordmark{display:block;width:100%;height:auto;max-width:100%}
.hero-title p{margin-top:7px}
@media(max-width:600px){.hero-title h1{width:94%;transform:none;margin:0}.hero-title p{margin-top:10px}}

/* Plain background beneath the hero. */
.signature{background:#080807}
/* Subtle amber plate, without a noise overlay or animation. */
.signature{isolation:isolate;z-index:1}
.signature:after{content:'';position:absolute;z-index:-1;pointer-events:none;inset:-50px 0 -30px;background:url('/assets/rencontre-texture-ambre.png') center/cover no-repeat;opacity:.50;filter:saturate(.65);mask-image:linear-gradient(0deg,transparent 0%,#000 24%,#000 65%,transparent 100%);-webkit-mask-image:linear-gradient(0deg,transparent 0%,#000 24%,#000 65%,transparent 100%)}

/* Compact navigation with a quick gold underline reveal. */
header nav a{position:relative;font-size:clamp(10px,1vw,16px)}
header nav a:after{content:'';position:absolute;left:0;right:0;bottom:3px;height:1px;background:#c39c4e;transform:scaleX(0);transform-origin:left;transition:transform 180ms ease-out;pointer-events:none}
header nav a:hover:after,header nav a:focus-visible:after{transform:scaleX(1)}
@media(max-width:600px){header nav a{font-size:10px}}
@media(prefers-reduced-motion:reduce){header nav a:after{transition:none}}

.hero-title-pending .hero-wordmark{opacity:0}

/* Header signature: light over the hero, metallic once the dark bar appears. */
.brand-wordmark-wrap{position:relative;display:block;width:clamp(70px,7.8vw,125px);aspect-ratio:2048/721;flex:none}
.brand-wordmark{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;filter:none}
.header-brand-color,.header-brand-light{transition:opacity 180ms ease-out}
.header-brand-color{opacity:0}
.header-brand-light{opacity:1}
header.is-scrolled .header-brand-color,header.is-menu-open .header-brand-color{opacity:1}
header.is-scrolled .header-brand-light,header.is-menu-open .header-brand-light{opacity:0}
@media(max-width:600px){.brand-wordmark-wrap{width:76px}}
header{position:fixed;left:50%;right:auto;top:0;bottom:auto;transform:translateX(-50%);width:100%;max-width:1600px;z-index:20;transition:background-color 180ms ease-out;padding-bottom:14px}
header.is-scrolled{background-color:rgba(0,0,0,.78)}
html{scroll-padding-top:120px}
@media(max-width:600px){header{padding-bottom:12px}html{scroll-padding-top:130px}}
@media(prefers-reduced-motion:reduce){header{transition:none}}

/* Supplied white vector emblem: show the complete artwork without raster cropping. */
header .logo img{position:absolute;inset:0;width:100%;height:100%;max-width:100%;object-fit:contain;transform:scale(1.18);filter:none;mix-blend-mode:normal}

/* The same four-pad emblem is used on full, medium and mobile. */
@media(min-width:1200px){
  header .brand{gap:8px}
  header .logo{width:clamp(34px,2.8vw,45px);height:clamp(34px,2.8vw,45px)}
  header .logo img{transform:scale(1.22)}
}
@media(min-width:768px) and (max-width:1199px){
  header .brand{gap:8px}
  header .logo{width:38px;height:38px}
}

/* Mobile navigation and hero: a dedicated composition, not a compressed desktop. */
.menu-toggle{display:none}

@media(max-width:767px){
  html{scroll-padding-top:82px}
  header{height:72px;padding:13px 5%;gap:0;align-items:center;flex-wrap:nowrap;background:linear-gradient(180deg,rgba(0,0,0,.78),rgba(0,0,0,.28));isolation:isolate}
  header.is-scrolled{background:rgba(5,5,5,.94)}
  header.is-menu-open{background:#050505;transition:none}
  header .brand{position:relative;z-index:2;gap:8px;font-size:24px}
  header .logo{width:27px;height:27px}
  header .brand-wordmark-wrap{width:76px}
  .menu-toggle{position:relative;z-index:2;display:grid;place-content:center;gap:7px;width:46px;height:46px;margin-left:auto;padding:0;border:1px solid rgba(213,170,100,.26);background:rgba(8,8,7,.3);color:#f1f0ec}
  .menu-toggle span{display:block;width:21px;height:1px;background:currentColor;transition:transform .3s ease,opacity .3s ease}
  header.is-menu-open .menu-toggle span:first-child{transform:translateY(4px) rotate(45deg)}
  header.is-menu-open .menu-toggle span:last-child{transform:translateY(-4px) rotate(-45deg)}
  header nav{position:absolute;z-index:1;top:100%;left:0;right:0;display:flex;flex-direction:column;align-items:flex-end;gap:0;padding:20px 5% 28px;background:linear-gradient(180deg,#050505 0%,rgba(8,8,7,.98) 100%);border-top:1px solid rgba(213,170,100,.16);border-bottom:1px solid rgba(213,170,100,.35);box-shadow:0 24px 45px rgba(0,0,0,.42);opacity:1;visibility:hidden;transform:translateY(-10px);pointer-events:none;transition:transform .28s ease,visibility 0s linear .28s}
  header.is-menu-open nav{visibility:visible;transform:translateY(0);pointer-events:auto;transition-delay:0s}
  header nav a{width:100%;padding:13px 0;font-size:14px;letter-spacing:.3em;text-align:right;border-bottom:1px solid rgba(255,255,255,.06)}
  header nav a:last-child{border-bottom:0}
  .hero{height:100svh;min-height:560px;max-height:780px;aspect-ratio:auto}
  .hero-photo{inset:0;width:100%;height:100%;object-fit:cover;object-position:center center}
  .hero-shade{background:linear-gradient(0deg,#080807 0%,rgba(8,8,7,.26) 12%,transparent 36%),linear-gradient(180deg,rgba(5,5,5,.14),transparent 20%)}
  .hero-title{left:auto;right:6%;top:auto;bottom:15%;width:52%;height:auto;padding:0 17px 14px 0;display:block}
  .hero-title:after{top:0;bottom:0}
  .hero-title h1{width:100%;margin:0}
  .hero-title p{width:100%;margin:9px 0 0;font-size:11px;letter-spacing:.31em}
  .scroll{bottom:3.5%;font-size:10px}
}

@media(max-width:767px) and (orientation:landscape){
  .hero{height:100svh;min-height:390px;max-height:none}
  .hero-title{right:6%;bottom:13%;width:40%}
  .scroll{left:46%;bottom:3%}
}

@media(max-width:767px) and (prefers-reduced-motion:reduce){
  .menu-toggle span,header nav{transition:none}
}