/* ===== Home page — Prada-style full-bleed hero + hover header ===== */

/* Header: transparent over the photo, solid on hover / focus / scroll / menu open */
.px-header{
  position:fixed; top:0; left:0; right:0; z-index:60;
  background:transparent; border-bottom:1px solid transparent;
  backdrop-filter:none;
  color:#fff;
  transition:background-color .35s ease, color .35s ease, border-color .35s ease;
}
.px-bar{
  height:84px; padding:0 40px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
}
.px-left, .px-right{ display:flex; align-items:center; gap:36px; }
.px-right{ justify-content:flex-end; }

.px-link, .px-menu-btn{
  font-family:'Work Sans',sans-serif; font-size:16px; font-weight:400; letter-spacing:.01em;
  color:inherit; text-decoration:none; background:none; border:0; padding:6px 0; cursor:pointer;
  display:inline-flex; align-items:center; gap:12px;
}
.px-link:hover, .px-menu-btn:hover{ opacity:.65; }
.px-burger{ width:26px; height:12px; position:relative; display:inline-block; }
.px-burger::before, .px-burger::after{
  content:''; position:absolute; left:0; right:0; height:2px; background:currentColor; border-radius:2px;
}
.px-burger::before{ top:0; }
.px-burger::after{ bottom:0; width:18px; }

.px-brand{
  display:flex; align-items:center; gap:14px; text-decoration:none; color:inherit;
  font-family:'Fraunces',serif; font-weight:600; font-size:clamp(20px,2.3vw,30px);
  letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
}
.px-brand img{ height:34px; width:auto; filter:brightness(0) invert(1); transition:filter .35s ease; }

/* the Prada behaviour: hover anywhere on the header and it gets a solid background */
.px-header:hover,
.px-header:focus-within,
.px-header.is-solid,
body.menu-open .px-header{
  background:var(--ivory); color:var(--ink); border-bottom-color:var(--line);
}
.px-header:hover .px-brand img,
.px-header:focus-within .px-brand img,
.px-header.is-solid .px-brand img,
body.menu-open .px-header .px-brand img{ filter:none; }

/* Hero */
.px-hero{
  position:relative; height:100vh; height:100svh; min-height:560px;
  padding:0; border-bottom:none; overflow:hidden; background:#1b1d1a; color:#fff;
}
.px-hero > img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 24%;
}
.px-hero::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.45) 0, rgba(0,0,0,0) 22%),
    linear-gradient(to top, rgba(0,0,0,.72) 0, rgba(0,0,0,.35) 30%, rgba(0,0,0,0) 58%);
}
.px-hero-copy{
  position:absolute; z-index:2; left:0; right:0; bottom:clamp(40px,8vh,84px);
  text-align:center; padding:0 24px;
}
.px-hero-copy h1{
  font-family:'Work Sans',sans-serif; font-weight:500; letter-spacing:-.01em;
  color:#fff; font-size:clamp(28px,3.4vw,48px); line-height:1.12;
}
.px-hero-copy p{
  margin:14px auto 0; max-width:52ch; font-size:clamp(15px,1.25vw,18px); line-height:1.4; color:#fff;
}
.px-discover{
  display:inline-block; margin-top:22px; padding-bottom:3px; color:#fff; text-decoration:none;
  font-size:clamp(15px,1.25vw,18px); font-weight:500; letter-spacing:.04em; text-transform:uppercase;
  border-bottom:2px solid #fff; transition:opacity .25s ease;
}
.px-discover:hover{ opacity:.7; }

/* Slide-in menu */
.px-scrim{
  position:fixed; inset:0; z-index:70; background:rgba(0,0,0,.45);
  opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s;
}
.px-menu{
  position:fixed; top:0; bottom:0; left:0; z-index:80; width:min(440px,88vw);
  background:var(--ivory); color:var(--ink); padding:28px 40px 40px;
  transform:translateX(-102%); transition:transform .45s cubic-bezier(.2,.7,.2,1);
  display:flex; flex-direction:column;
}
body.menu-open .px-menu{ transform:none; }
body.menu-open .px-scrim{ opacity:1; visibility:visible; }
body.menu-open{ overflow:hidden; }
.px-menu-top{ display:flex; justify-content:space-between; align-items:center; height:56px; }
.px-menu-close{ background:none; border:0; font:inherit; font-size:16px; cursor:pointer; color:inherit; padding:6px 0; }
.px-menu-close:hover{ opacity:.6; }
.px-menu ul{ list-style:none; margin:40px 0 0; padding:0; }
.px-menu li{ border-bottom:1px solid var(--line); }
.px-menu li a{
  display:flex; justify-content:space-between; align-items:baseline; padding:20px 0;
  font-family:'Fraunces',serif; font-size:34px; font-weight:400; text-decoration:none; color:inherit;
}
.px-menu li a span{ font-family:'Work Sans',sans-serif; font-size:13px; color:var(--ink-soft); }
.px-menu li a:hover{ color:var(--madder-deep); }
.px-menu-foot{ margin-top:auto; font-size:14px; color:var(--ink-soft); line-height:1.7; }
.px-menu-foot a{ text-decoration:none; }

@media(max-width:700px){
  .px-bar{ padding:0 20px; height:68px; }
  .px-left .px-link{ display:none; }
  .px-brand img{ height:26px; }
  .px-brand{ letter-spacing:.1em; gap:10px; }
  .px-right .px-link{ font-size:14px; }
  .px-hero > img{ object-position:48% 20%; }
}
/* touch devices have no hover: keep the bar legible with the gradient and go solid on scroll */
@media (hover:none){
  .px-header:hover{ background:transparent; color:#fff; border-bottom-color:transparent; }
  .px-header:hover .px-brand img{ filter:brightness(0) invert(1); }
  .px-header.is-solid:hover, body.menu-open .px-header:hover{ background:var(--ivory); color:var(--ink); border-bottom-color:var(--line); }
  .px-header.is-solid:hover .px-brand img, body.menu-open .px-header:hover .px-brand img{ filter:none; }
}

/* ===== Inner pages: header is always solid, body clears the fixed bar ===== */
.px-header.px-solid{ background:var(--ivory); color:var(--ink); border-bottom-color:var(--line); }
.px-header.px-solid .px-brand img{ filter:none; }
body.inner{ padding-top:84px; }
html{ scroll-padding-top:90px; }
@media(max-width:700px){ body.inner{ padding-top:68px; } }
.px-left .px-link.current{ text-decoration:underline; text-underline-offset:6px; }