/* ============================================================
   Baveno Palace Hotel & Lido - placeholder / coming-soon
   Brand: Pantone 7686C #004A8F · 544C #D4EFFC · White
   Type:  Modernist One (logo, supplied as SVG) + Gill Sans (text)
   No external CDN - all assets local.
   ============================================================ */

/* ---- self-hosted fallback font (brand text face = Gill Sans) ---- */
@font-face{
  font-family:"Jost";font-style:normal;font-weight:300;font-display:swap;
  src:url("./fonts/jost-300.woff2") format("woff2");
}
@font-face{
  font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;
  src:url("./fonts/jost-400.woff2") format("woff2");
}
@font-face{
  font-family:"Jost";font-style:normal;font-weight:500;font-display:swap;
  src:url("./fonts/jost-500.woff2") format("woff2");
}

:root{
  --blue:#004A8F;          /* Pantone 7686C  */
  --blue-deep:#002A52;
  --blue-deeper:#001B38;
  --powder:#D4EFFC;        /* Pantone 544C   */
  --white:#ffffff;
  --sans:"Gill Sans","Gill Sans Nova","Gill Sans MT","Jost",
         system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--sans);
  color:var(--white);
  background:var(--blue-deeper);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------------- Hero slideshow ---------------- */
.stage{position:fixed;inset:0;z-index:0;background:var(--blue-deeper)}
.slide{
  position:absolute;inset:0;
  background-size:cover;background-position:center 40%;
  opacity:0;animation:kenburns 24s infinite;will-change:opacity,transform;
}
.slide.s1{background-image:url("./images/hero-1.jpg");animation-delay:0s}
.slide.s2{background-image:url("./images/hero-2.jpg");animation-delay:8s}
.slide.s3{background-image:url("./images/hero-3.jpg");animation-delay:16s}
@keyframes kenburns{
  0%{opacity:0;transform:scale(1.06)}
  4%{opacity:1}
  29%{opacity:1}
  37%{opacity:0;transform:scale(1.12)}
  100%{opacity:0;transform:scale(1.06)}
}

/* brand-blue wash for legibility (WCAG AA) */
.overlay{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 32%, rgba(0,27,56,0) 36%, rgba(0,27,56,.58) 100%),
    linear-gradient(180deg, rgba(0,27,56,.74) 0%, rgba(0,27,56,.16) 26%,
                            rgba(0,27,56,.22) 60%, rgba(0,27,56,.82) 100%),
    linear-gradient(0deg, rgba(0,74,143,.34), rgba(0,74,143,.34));
}

/* ---------------- Layout frame ---------------- */
.frame{
  position:relative;z-index:3;
  min-height:100svh;height:100svh;
  display:grid;grid-template-rows:auto 1fr auto;
  padding:clamp(20px,3.4vw,40px) clamp(22px,5vw,72px);
}
.frame::before{                       /* thin grand-hotel inner border */
  content:"";position:absolute;inset:clamp(12px,1.6vw,20px);
  border:1px solid rgba(212,239,252,.30);pointer-events:none;
}

header,footer{display:flex;align-items:center;gap:18px}
header{justify-content:space-between}

.place{
  font-size:clamp(10px,1.05vw,12px);letter-spacing:.34em;text-transform:uppercase;
  font-weight:400;color:var(--powder);
}

/* language switch */
.lang{display:flex;align-items:center;gap:2px}
.lang button{
  background:none;border:0;cursor:pointer;font-family:inherit;
  color:rgba(255,255,255,.62);font-size:12px;letter-spacing:.2em;
  padding:6px 8px;text-transform:uppercase;transition:color .35s ease;
}
.lang button:hover{color:#fff}
.lang button[aria-current="true"]{color:var(--powder)}
.lang .sep{color:rgba(255,255,255,.3)}

/* ---------------- Centerpiece ---------------- */
main{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}

.logo{
  width:clamp(248px,46vw,560px);height:auto;
  filter:drop-shadow(0 6px 34px rgba(0,16,38,.45));
}

.rule{display:flex;align-items:center;justify-content:center;gap:16px;
  margin:clamp(24px,3.2vw,38px) 0 clamp(18px,2.4vw,28px);width:min(440px,76vw)}
.rule .line{height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(212,239,252,.7))}
.rule .line:last-child{background:linear-gradient(90deg,rgba(212,239,252,.7),transparent)}
.rule .mark{flex:0 0 auto;height:clamp(16px,2vw,22px);width:auto;opacity:.95}

.tagline{
  font-weight:300;font-size:clamp(15px,2vw,21px);line-height:1.6;letter-spacing:.01em;
  color:rgba(255,255,255,.92);max-width:42ch;margin:0 auto;
}

.opening{
  margin-top:clamp(26px,3.4vw,40px);
  font-size:clamp(10px,1.05vw,12px);letter-spacing:.42em;text-transform:uppercase;color:var(--powder);
}
.cta{
  margin-top:clamp(16px,2vw,22px);display:inline-block;text-decoration:none;color:#fff;
  font-size:clamp(10px,1.05vw,12px);letter-spacing:.28em;text-transform:uppercase;
  padding:13px 30px;border:1px solid rgba(212,239,252,.55);
  transition:background .4s ease,color .4s ease,border-color .4s ease;
}
.cta:hover,.cta:focus-visible{background:var(--powder);border-color:var(--powder);color:var(--blue-deep);outline:none}

/* social */
.social{display:flex;align-items:center;gap:18px;margin-top:clamp(24px,3vw,34px)}
.social a{display:inline-flex;color:rgba(255,255,255,.78);transition:color .35s ease,transform .35s ease}
.social a:hover{color:var(--powder);transform:translateY(-2px)}
.social svg{width:20px;height:20px;display:block}

/* ---------------- Footer ---------------- */
footer{flex-direction:column;gap:10px;text-align:center}
.legal{font-size:clamp(9px,.92vw,11px);line-height:1.7;letter-spacing:.04em;color:rgba(255,255,255,.6)}
.legal .name{color:rgba(255,255,255,.78);letter-spacing:.12em;text-transform:uppercase}
.legal a{color:rgba(255,255,255,.7);text-decoration:none;border-bottom:1px solid rgba(212,239,252,.3)}
.legal a:hover{color:#fff}
.copy{font-size:clamp(9px,.9vw,10px);letter-spacing:.16em;color:rgba(255,255,255,.45);text-transform:uppercase}
footer .lang{margin-top:2px}

/* ---------------- Entrance ---------------- */
.reveal{opacity:0;transform:translateY(16px);animation:rise 1.2s cubic-bezier(.2,.7,.2,1) forwards}
.d1{animation-delay:.2s}.d2{animation-delay:.45s}.d3{animation-delay:.7s}
.d4{animation-delay:.95s}.d5{animation-delay:1.2s}.d6{animation-delay:1.45s}.d7{animation-delay:1.7s}
@keyframes rise{to{opacity:1;transform:none}}

/* ---------------- Responsive ---------------- */
@media (max-width:640px){
  .place{display:none}
  header{justify-content:flex-end}
  .frame::before{inset:10px}
  .slide{background-position:center 44%}
  .tagline{font-size:16px}
}
@media (max-width:380px){
  .logo{width:240px}
}
@media (prefers-reduced-motion:reduce){
  .slide{animation:none}
  .slide.s1{opacity:1}
  .reveal{animation:none;opacity:1;transform:none}
}

/* ============================================================
   Discreet "Discover the Story" link (splash)
   ============================================================ */
.discover{
  margin-top:clamp(22px,2.8vw,30px);display:inline-block;text-decoration:none;
  color:rgba(255,255,255,.74);
  font-size:clamp(10px,1.05vw,12px);letter-spacing:.26em;text-transform:uppercase;
  padding-bottom:4px;border-bottom:1px solid rgba(212,239,252,.32);
  transition:color .4s ease,border-color .4s ease;
}
.discover:hover,.discover:focus-visible{color:#fff;border-color:var(--powder);outline:none}

/* ============================================================
   Story subpage
   ============================================================ */
body.story{overflow:auto;height:auto}
.frame--story{
  display:block;height:auto;min-height:100svh;
  padding-bottom:clamp(40px,6vw,80px);
}
.frame--story header{position:relative}

/* brand home link (top-left) */
.home-link{
  display:inline-flex;align-items:center;gap:12px;text-decoration:none;
  color:var(--powder);transition:opacity .35s ease;
}
.home-link img{height:24px;width:auto;opacity:.95}
.home-link span{font-size:clamp(11px,1.1vw,13px);letter-spacing:.24em;text-transform:uppercase;font-weight:400}
.home-link:hover{opacity:.78}

/* story content column */
.story-main{
  max-width:760px;margin:0 auto;
  padding:clamp(36px,7vw,90px) 0 clamp(20px,3vw,40px);
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.eyebrow{
  font-size:clamp(10px,1.05vw,12px);letter-spacing:.42em;text-transform:uppercase;
  color:var(--powder);margin-bottom:clamp(18px,2.4vw,26px);
}
.story-title{
  font-weight:300;font-size:clamp(22px,3.4vw,38px);line-height:1.32;letter-spacing:.005em;
  color:#fff;max-width:20ch;margin:0 auto;
}
.intro .rule{margin:clamp(30px,4vw,46px) auto clamp(8px,1.4vw,16px)}

/* chapters */
.chapter{margin-top:clamp(40px,5.4vw,72px);max-width:60ch}
.chapter-label{
  font-size:clamp(10px,1vw,11px);letter-spacing:.36em;text-transform:uppercase;
  color:var(--powder);margin-bottom:clamp(10px,1.4vw,16px);
}
.chapter-head{
  font-weight:300;font-size:clamp(19px,2.4vw,27px);line-height:1.3;color:#fff;
  margin-bottom:clamp(12px,1.6vw,18px);
}
.chapter-body{
  font-weight:300;font-size:clamp(15px,1.7vw,18px);line-height:1.72;letter-spacing:.01em;
  color:rgba(255,255,255,.86);
}

/* contact */
.contact{margin-top:clamp(52px,6.4vw,88px);max-width:54ch}
.contact-owner{
  font-weight:300;font-size:clamp(14px,1.6vw,17px);line-height:1.65;
  color:rgba(255,255,255,.88);margin-bottom:clamp(22px,2.8vw,32px);
}
.contact-block{
  font-style:normal;display:flex;flex-direction:column;gap:7px;
  font-size:clamp(13px,1.5vw,15px);line-height:1.5;color:rgba(255,255,255,.74);
}
.contact-block .co-name{
  color:var(--powder);letter-spacing:.14em;text-transform:uppercase;
  font-size:clamp(12px,1.3vw,14px);margin-bottom:4px;
}
.contact-block a{color:rgba(255,255,255,.82);text-decoration:none;border-bottom:1px solid rgba(212,239,252,.32)}
.contact-block a:hover{color:#fff}
.contact .cta{margin-top:clamp(26px,3.2vw,38px)}
.contact-note{
  margin-top:clamp(18px,2.4vw,26px);
  font-size:clamp(10px,1vw,11px);letter-spacing:.04em;line-height:1.6;
  color:rgba(255,255,255,.5);
}

/* story footer */
.frame--story footer{margin-top:clamp(48px,6vw,80px)}
.back{
  text-decoration:none;color:rgba(255,255,255,.7);
  font-size:clamp(11px,1.1vw,13px);letter-spacing:.2em;text-transform:uppercase;
  transition:color .35s ease;
}
.back:hover{color:#fff}

/* story responsive */
@media (max-width:640px){
  .home-link span{display:none}
  .story-title{font-size:23px;max-width:24ch}
  .chapter-body{font-size:16px}
}