/* La Vella Sol · entrance, navigation and hero finish (October 2026, for approval)
   One file for the opening, the header material and the hero petals.
   The older rules these replace were removed at source (type.css, metal.css, editorial.css,
   home.css and the homepage's inline styles) rather than overridden here.
   Materials: brushed antique bronze and smoked walnut, cropped from Jess's own reference boards. */

:root{
  --ent-oat:#efe3d3;
  --ent-oat-soft:rgba(239,227,211,.72);
  --ent-bronze-line:rgba(186,146,104,.5);
  --ent-bronze:url(/images/material/antique-bronze.jpg);
  --ent-letters:url(/images/material/bronze-lettering.jpg);
  --ent-walnut:url(/images/material/walnut-bookmatched.jpg);
}

/* ---------- 1. the opening ---------- */
.splash{background:radial-gradient(120% 90% at 50% 38%,#311b14 0%,#231210 58%,#1a0d0b 100%);padding:40px 24px;gap:0}
.splash .mark{margin:0;font-size:0;line-height:0;color:transparent}
.splash .mark .wm{height:clamp(40px,6.4vw,76px);background:var(--ent-letters) 88% 30%/900px auto,#93704c}
.splash .k{margin:18px 0 0;font:600 10.5px/1.4 var(--sans)!important;letter-spacing:.34em!important;text-transform:uppercase;color:var(--ent-oat-soft)!important}
.splash .ent-line{display:block;width:44px;height:1px;margin:clamp(30px,5vh,46px) auto;background:var(--ent-bronze-line)}
.splash .breath{margin:0;font-family:var(--serif)!important;font-weight:300!important;font-size:clamp(28px,3.6vw,46px);line-height:1.22;letter-spacing:-.005em!important;color:#eadccb;text-transform:none!important}
.splash .breath span{display:block}
.splash .breath em{font-style:italic;color:#d6b994}
.season-tag{display:inline-flex;flex-direction:column;align-items:center;gap:5px;margin-top:clamp(30px,5vh,44px);padding:14px 28px;border-top:1px solid var(--ent-bronze-line);border-bottom:1px solid var(--ent-bronze-line);background:none;text-decoration:none}
.season-tag span{font:600 9.5px/1.3 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--ent-oat-soft)}
.season-tag strong{font-family:var(--serif);font-weight:400;font-size:clamp(19px,2vw,24px);letter-spacing:.02em;color:var(--ent-oat)}
.splash .enter{-webkit-tap-highlight-color:transparent;margin-top:26px;min-height:46px;padding:0 30px;background:transparent;border:1px solid rgba(201,162,122,.6);color:var(--ent-oat);-webkit-text-fill-color:var(--ent-oat);font:600 11px/1 var(--sans)!important;letter-spacing:.24em!important;text-transform:uppercase;cursor:pointer;transition:background-color .4s,border-color .4s}
.splash .enter:hover,.splash .enter:focus-visible{background:rgba(201,162,122,.12);border-color:#c9a27a}
/* one restrained fade; the button is never hidden */
@media (prefers-reduced-motion:no-preference){
  .splash .mark,.splash .k,.splash .ent-line,.splash .breath,.splash .season-tag{opacity:0;animation:entFade 1.6s cubic-bezier(.2,.7,.2,1) forwards}
  .splash .k{animation-delay:.25s}.splash .ent-line{animation-delay:.45s}.splash .breath{animation-delay:.6s}.splash .season-tag{animation-delay:1s}
}
@keyframes entFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(max-width:760px){
  .splash .mark .wm{height:auto;width:min(78vw,340px);aspect-ratio:5.06}
  .splash .breath{font-size:clamp(27px,8vw,34px)}
  .season-tag{padding:12px 22px}
}

/* ---------- 2. the header ---------- */
/* At the top of the homepage the bar stays open over the photograph, as on the live site.
   Once scrolled, and on every other page, it sits on smoked walnut with a fine bronze edge. */
body.home nav#nav.solid,body:not(.home) nav#nav,body>nav:not(#nav){
  background:linear-gradient(rgba(20,10,7,.45),rgba(20,10,7,.45)),var(--ent-walnut) center/auto 100% repeat-x,#2b1a12!important;
  border-bottom:1px solid var(--ent-bronze-line)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
nav#nav .nav-in a.l,nav#nav .menu-btn,body>nav .nav-links a{color:var(--ent-oat)!important}
nav#nav .nav-in a.l:hover,body>nav .nav-links a:hover{color:#d9b48c!important}
/* the booking action: real brushed bronze, proportionate to the bar */
nav#nav .nav-in .bk{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 18px;
  background:var(--ent-letters) 50% 60%/900px auto,#93704c;border:1px solid rgba(214,182,140,.6);
  color:#1f130d;-webkit-text-fill-color:#1f130d;font:700 11.5px/1 var(--sans)!important;letter-spacing:.16em!important;text-transform:uppercase;white-space:nowrap;
  text-shadow:none;transition:border-color .3s,filter .3s}
nav#nav .nav-in .bk:hover{border-color:#c9a27a;filter:brightness(1.08)}
@media(max-width:760px){nav#nav .nav-in .bk{min-height:36px;padding:0 12px;font-size:10.5px!important;letter-spacing:.12em!important}}
/* mobile menu */
nav#nav .drawer{background:#251510}
nav#nav .drawer a{color:var(--ent-oat);border-color:rgba(201,162,122,.2)!important}
nav#nav .drawer .dg{color:#d6b994!important}
nav#nav .drawer .dbk{display:flex;align-items:center;justify-content:center;min-height:48px;background:var(--ent-letters) 50% 60%/900px auto,#93704c;border:1px solid rgba(214,182,140,.6);color:#1f130d;-webkit-text-fill-color:#1f130d;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
body>nav:not(#nav){position:relative}

/* ---------- 3. the hero ---------- */
.hero .ingot{background:var(--ent-letters) 80% 30%/900px auto,#93704c;box-shadow:none}
html body .hero .btn.f{background:var(--ent-letters) 50% 60%/900px auto,#93704c!important;border:1px solid rgba(214,182,140,.6)!important;
  color:#1f130d!important;-webkit-text-fill-color:#1f130d!important;text-shadow:none!important;filter:none}
html body .hero .btn.f:hover{border-color:#c9a27a!important;filter:brightness(1.08)}

/* ---------- 4. falling petals, cut from the hero photograph's own flower ---------- */
.hero .petals{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;contain:strict}
.hero .petal{position:absolute;top:0;left:var(--x);width:var(--w);opacity:0;will-change:transform,opacity;
  animation:petalFall var(--d) linear var(--dl) infinite}
.hero .petal i{display:block;width:100%;aspect-ratio:var(--ar);background:var(--img) center/contain no-repeat;
  filter:var(--blur,none) drop-shadow(0 6px 8px rgba(0,0,0,.28));
  animation:petalSway var(--sd) ease-in-out var(--dl) infinite alternate}
@keyframes petalFall{
  0%{transform:translate3d(0,-14vh,0);opacity:0}
  10%{opacity:var(--o)}
  88%{opacity:var(--o)}
  100%{transform:translate3d(var(--dx),108vh,0);opacity:0}}
@keyframes petalSway{
  0%{transform:translateX(-18px) rotate(var(--r0)) scaleX(1)}
  50%{transform:translateX(6px) rotate(calc(var(--r0) + 40deg)) scaleX(.55)}
  100%{transform:translateX(18px) rotate(calc(var(--r0) + 85deg)) scaleX(.95)}}
.hero.petals-paused .petal,.hero.petals-paused .petal i{animation-play-state:paused}
/* reduced motion: a still composition, nothing moves */
@media (prefers-reduced-motion:reduce){
  .hero .petal,.hero .petal i{animation:none!important}
  .hero .petal{opacity:var(--o);transform:translate3d(0,var(--rest),0)}
  .hero .petal i{transform:rotate(var(--r0))}
}