@font-face{
  font-family:"Arno Pro";
  src:local("Arno Pro Light Display"), local("Arno Pro"),
      url("../assets/fonts/ArnoPro-LightDisplay.otf") format("opentype");
  font-weight:300;
  font-style:normal;
  font-display:swap;
}
:root{
  --ease:cubic-bezier(.22,.75,.18,1);
  --serif:"Arno Pro", Garamond, Georgia, "Times New Roman", serif;
}
*{box-sizing:border-box}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
html,body{width:100%;height:100%;margin:0}
body{overflow:hidden;background:#090806;color:#eee7dc;font-family:var(--serif)}
a{color:inherit;text-decoration:none}

.lobby{
  position:relative;isolation:isolate;
  width:100%;height:100svh;min-height:560px;
  display:grid;grid-template-columns:1fr 1fr;
  overflow:hidden;background:#0b0907;
}

.scene-wrap{position:absolute;inset:-2%;z-index:-4;display:block}
.scene{
  width:100%;height:100%;object-fit:cover;object-position:center;
  transform:scale(1.02);
  filter:saturate(.92) contrast(1.05);
  transition:transform 1.4s var(--ease), filter 1.2s var(--ease);
  display:block;
}

.seam{
  position:absolute;z-index:4;left:50%;top:8%;bottom:8%;width:1px;
  transform:translateX(-50%);
  background:linear-gradient(transparent,rgba(202,170,112,.18) 22%,rgba(202,170,112,.10) 78%,transparent);
  opacity:.45;pointer-events:none;
}

.house-line{
  position:absolute;z-index:5;left:0;right:0;bottom:4.5%;
  display:grid;grid-template-columns:1fr 1fr;
  margin:0;pointer-events:none;
  font-size:clamp(.88rem,1.15vw,1.05rem);font-style:italic;font-weight:300;
  letter-spacing:.035em;line-height:1;
}
.house-line span:first-child{
  color:#f0dfbc;text-align:right;padding-right:1.15em;
  text-shadow:0 1px 9px rgba(0,0,0,.45);
}
.house-line span:last-child{
  color:#17120d;text-align:left;padding-left:1.15em;
}

.house{
  position:relative;
  outline:none;overflow:hidden;
}
.house::before{
  content:"";position:absolute;inset:0;opacity:0;
  transition:opacity .8s var(--ease);pointer-events:none;
}
.house--napoleon::before{background:radial-gradient(circle at 38% 50%,rgba(217,177,108,.13),transparent 38%),linear-gradient(90deg,rgba(0,0,0,.12),transparent)}
.house--josephine::before{background:radial-gradient(circle at 62% 50%,rgba(211,164,99,.18),transparent 42%),linear-gradient(270deg,rgba(255,240,213,.08),transparent)}
.house:hover::before,.house:focus-visible::before{opacity:1}

/* Bottles sit deliberately outside the frame, as in the original lobby. */
.bottle{
  position:absolute;bottom:0;width:auto;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.5));
  transition:transform 1s var(--ease);
  pointer-events:none;
}
.house--napoleon .bottle{height:78%;left:-55%}
.house--josephine .bottle{height:65%;right:-51%}

/* Each identity is centred in its own half. */
.copy{
  position:absolute;left:50%;top:52%;
  transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:.55em;
  width:max-content;max-width:82%;
}

.eyebrow{
  margin:0;font-family:var(--serif);font-size:.82rem;letter-spacing:.30em;
  text-transform:uppercase;opacity:1;font-weight:300;text-rendering:geometricPrecision;
}
.house--napoleon .eyebrow{color:#f3ead7;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.house--josephine .eyebrow{color:#000;text-shadow:none}

.name{
  margin:0;font-family:var(--serif);font-weight:300;
  font-size:clamp(2.55rem,4.8vw,3.7rem);letter-spacing:.035em;line-height:.94;
}
.house--napoleon .name{color:#f4efe4}
.house--josephine .name{color:#000;text-shadow:none}

.by{
  margin:0;font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(1rem,1.6vw,1.4rem);
}
.house--napoleon .by{color:#f0dfbc;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.house--josephine .by{color:#000;text-shadow:none}

.enter{
  margin-top:.3em;font-family:var(--serif);font-size:.85rem;
  letter-spacing:.3em;text-transform:uppercase;
  padding-bottom:.4em;border-bottom:1px solid currentColor;
  opacity:.9;
}
.house--napoleon .enter{color:#f3ead7;text-shadow:0 1px 8px rgba(0,0,0,.30)}
.house--josephine .enter{color:#000;text-shadow:none}

/* hover parallax — background shifts + grades, bottle moves with it */
.lobby:has(.house--napoleon:hover) .scene{transform:scale(1.055) translateX(1.2%);filter:saturate(.82) contrast(1.13) brightness(.92)}
.lobby:has(.house--josephine:hover) .scene{transform:scale(1.055) translateX(-1.2%);filter:saturate(1.0) contrast(1.03) brightness(1.05)}
.lobby:has(.house--napoleon:hover) .house--napoleon .bottle{transform:scale(1.03) translateX(-0.6%)}
.lobby:has(.house--josephine:hover) .house--josephine .bottle{transform:scale(1.03) translateX(0.6%)}

.house.is-leaving{z-index:10;animation:openDoor .72s var(--ease) forwards}
.lobby.is-leaving .house:not(.is-leaving){opacity:0;transition:opacity .35s ease}
@keyframes openDoor{to{transform:scale(1.045);filter:brightness(.72)}}

@media (max-width:760px){
  body{overflow:auto}
  .lobby{height:100svh;min-height:760px;grid-template-columns:1fr;grid-template-rows:1fr 1fr}

  .house--napoleon .bottle{height:50%;left:-24%;bottom:0}
  .house--josephine .bottle{height:48%;right:-22%;bottom:0}
  .copy{left:50%;top:50%;width:max-content;max-width:70%;transform:translate(-50%,-50%)}

  .name{font-size:clamp(2rem,9vw,2.8rem)}
  .by{font-size:1rem}
  .eyebrow{font-size:.7rem;letter-spacing:.28em}
  .enter{font-size:.75rem}

  .seam{left:8%;right:8%;top:50%;bottom:auto;width:auto;height:1px;transform:translateY(-50%);
    background:linear-gradient(90deg,transparent,rgba(202,170,112,.18),transparent)}

  .house-line{
    inset:0;grid-template-columns:1fr;grid-template-rows:1fr 1fr;
    font-size:clamp(.82rem,3.8vw,.98rem);letter-spacing:.025em;
  }
  .house-line span:first-child{
    align-self:end;text-align:center;padding:0 0 .9rem;color:#f0dfbc;
  }
  .house-line span:last-child{
    align-self:start;text-align:center;padding:.9rem 0 0;color:#17120d;
  }
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.scene{transform:none!important}}

/* Final desktop composition — matches the earlier Dahnsjö lobby */
@media (min-width:761px){
  .copy{top:49.5%;gap:.42em;max-width:76%}
  .name{font-size:clamp(2.25rem,3.05vw,2.85rem);letter-spacing:.045em;line-height:.96;white-space:nowrap}
  .eyebrow{font-size:.78rem;letter-spacing:.29em}
  .by{font-size:clamp(1.02rem,1.28vw,1.22rem)}
  .enter{font-size:.80rem;letter-spacing:.25em;margin-top:.42em}
  .house--napoleon .bottle{height:76%;left:-52%}
  .house--josephine .bottle{height:58%;right:-43%}
}

/* Final visual polish */
@media (min-width:761px){
  /* Lift both identity blocks slightly for better vertical balance. */
  .copy{top:47.5%}

  /* Bring Joséphine farther into the frame without making the bottle dominant. */
  .house--josephine .bottle{right:-39%}

  /* Improve legibility of the smaller Napoléon text. */
  .house--napoleon .eyebrow,
  .house--napoleon .by,
  .house--napoleon .enter{
    color:#fff8e8;
    font-weight:400;
    text-shadow:0 1px 10px rgba(0,0,0,.48);
  }
}