/* ============================================================
   EPAVLI PAPADOPOULOU — shared site shell
   header · footer · hero · scroll-video · booking · sections
   (loads after tokens.css)
   ============================================================ */

/* ---------------- Header ---------------- */
.site-hdr{
  position:fixed; inset:0 0 auto 0; z-index:80;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:10px var(--pad);
  background:var(--white); color:var(--ink);
  border-bottom:1px solid var(--line);
}

.brand{ display:flex; align-items:center; gap:13px; text-decoration:none; }
.brand__logo{ height:58px; width:auto; display:block; }
.brand__mark{ height:36px; width:auto; display:block; }
.brand__wm{ font-family:var(--serif); font-size:17px; letter-spacing:.05em; line-height:1; color:inherit; }
.brand__wm small{ display:block; font-family:var(--mono); font-size:8px; letter-spacing:.36em; margin-top:5px; opacity:.72; }

.nav{ display:flex; gap:30px; justify-content:center; }
.nav a{ font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:inherit; opacity:.85; transition:opacity .3s; white-space:nowrap; }
.nav a:hover{ opacity:1; }
.nav a.current{ opacity:1; }
.nav a.current::after{ content:""; display:block; height:1px; background:currentColor; margin-top:5px; }

.hdr-right{ display:flex; justify-content:flex-end; align-items:center; gap:14px; }
.book{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  padding:11px 20px; border:1px solid var(--ink); background:var(--ink); color:var(--paper); white-space:nowrap;
  transition:background .35s, color .35s;
}
.book:hover{ background:transparent; color:var(--ink); }

.menu-btn{ display:none; background:none; border:0; color:inherit; cursor:pointer; padding:6px; }
.menu-btn span{ display:block; width:24px; height:1.5px; background:currentColor; margin:5px 0; transition:transform .35s, opacity .3s; }

/* mobile drawer — white panel, original grey logo */
.drawer{ position:fixed; inset:0; z-index:90; background:var(--white); color:var(--ink); display:flex; flex-direction:column; padding:24px var(--pad); transform:translateY(-100%); visibility:hidden; transition:transform .5s cubic-bezier(.7,0,.2,1), visibility .5s; }
.drawer.open{ transform:translateY(0); visibility:visible; }
.drawer__top{ display:flex; justify-content:space-between; align-items:center; }
.drawer__close{ background:none; border:0; color:inherit; font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; cursor:pointer; }
.drawer nav{ display:flex; flex-direction:column; gap:4px; margin-top:auto; margin-bottom:auto; }
.drawer nav a{ font-family:var(--serif); font-size:clamp(24px,5.6vw,40px); line-height:1.1; color:var(--ink); padding:8px 0; border-bottom:1px solid var(--line); }
.drawer__foot{ display:flex; flex-wrap:wrap; gap:16px 28px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.drawer__foot a{ color:var(--ink); }

/* ---------------- Page hero (interior) ---------------- */
.phero{ position:relative; height:72svh; min-height:480px; }
.phero .ph{ position:absolute; inset:0; border:0; }
.phero__veil{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(20,22,26,.5),rgba(20,22,26,.2) 42%,rgba(20,22,26,.66)); }
.phero__inner{ position:absolute; inset:0; z-index:2; color:var(--paper); display:flex; flex-direction:column; justify-content:flex-end; padding:0 var(--pad) clamp(34px,6vh,64px); }
.phero__eyebrow{ color:#ffffff; margin-bottom:20px; }
.phero h1{ font-family:var(--serif); font-weight:500; font-size:var(--d2); line-height:.96; letter-spacing:-.012em; margin:0; text-wrap:balance; }
.phero h1 .it{ font-style:italic; font-weight:400; }
.phero__sub{ margin:24px 0 0; max-width:54ch; font-size:clamp(15px,1.4vw,18px); line-height:1.6; border-top:1px solid #ffffff; padding-top:22px; }

/* ---------------- Section utilities ---------------- */
.sec{ padding:clamp(60px,9vh,132px) var(--pad); }
.shell{ max-width:1680px; margin:0 auto; }
.sec__head{ max-width:1680px; margin:0 auto; display:flex; flex-direction:column; gap:18px; }
.sec__head h2{ font-family:var(--serif); font-weight:500; font-size:var(--d3); line-height:1; margin:0; max-width:20ch; text-wrap:balance; }
.sec__head .eyebrow{ color:var(--bronze); }
.lede{ font-size:clamp(16px,1.5vw,20px); line-height:1.62; max-width:62ch; color:var(--ink-soft); }

.sec.ink{ background:var(--ink); color:var(--paper); }
.sec.ink .sec__head .eyebrow{ color:var(--bronze-lt); }
.sec.ink .lede{ color:#cfd0d3; }
.sec.white{ background:var(--white); }

/* ---------------- Scroll-scrubbed video ---------------- */
.scrub--video .scrub__hud{ display:none; }
.scrub{ position:relative; background:var(--ink); }
.scrub.tall{ height:320vh; }
.scrub__sticky{ position:sticky; top:0; height:100svh; overflow:hidden; }
.scrub__sticky::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(90deg, rgba(20,22,26,.66) 0%, rgba(20,22,26,.42) 38%, rgba(20,22,26,.12) 72%, rgba(20,22,26,.05) 100%); }
.scrub__frame{ position:absolute; inset:-8%; will-change:transform; }
.scrub__frame .ph{ position:absolute; inset:0; border:0; }
.scrub__text{ position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; justify-content:center; padding:0 var(--pad); color:var(--paper); pointer-events:none; }
.scrub__text .eyebrow{ color:#ffffff; }
.scrub__text h2{ font-family:var(--serif); font-weight:500; font-size:var(--d2); line-height:.98; margin:18px 0 0; max-width:16ch; }
.scrub__text p{ max-width:46ch; margin:26px 0 0; font-size:clamp(15px,1.3vw,18px); color:rgba(255,255,255,.8); }
.scrub__hud{ position:absolute; z-index:4; left:var(--pad); right:var(--pad); bottom:32px; display:flex; align-items:center; gap:18px; color:var(--paper); }
.scrub__bar{ flex:1; height:1px; background:var(--line-ink); position:relative; }
.scrub__bar i{ position:absolute; left:0; top:0; height:100%; width:0%; background:var(--bronze-lt); }
.scrub__tc{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; white-space:nowrap; }

/* scroll-triggered text entrance + typewriter title */
.scrub__text.js-tw .eyebrow,
.scrub__text.js-tw p{ opacity:0; transform:translateY(18px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.scrub__text.js-tw h2{ opacity:0; transition:opacity .4s ease; }
.scrub__text.js-tw.tw-in .eyebrow{ opacity:1; transform:none; transition-delay:.05s; }
.scrub__text.js-tw.tw-in h2{ opacity:1; }
.scrub__text.js-tw.tw-done p{ opacity:1; transform:none; }
.scrub__text .tw-caret{ display:inline-block; width:2px; height:.82em; margin-left:.06em; background:currentColor; vertical-align:-0.06em; animation:twblink 1s steps(1) infinite; }
.scrub__text .tw-caret.tw-stop{ animation:none; opacity:0; transition:opacity .5s ease; }
@keyframes twblink{ 0%,49%{opacity:1} 50%,100%{opacity:0} }
@media print{
  .scrub__text.js-tw .eyebrow,
  .scrub__text.js-tw p,
  .scrub__text.js-tw h2{ opacity:1 !important; transform:none !important; }
  .scrub__text .tw-caret{ display:none !important; }
}

/* ---------------- Booking band ---------------- */
.booking{ background:var(--ink); color:var(--paper); padding:clamp(60px,10vh,128px) var(--pad); }
.booking__grid{ max-width:1680px; margin:0 auto; display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(36px,6vw,90px); align-items:center; }
.booking .eyebrow{ color:#ffffff; }
.booking h2{ font-family:var(--serif); font-weight:500; font-size:var(--d2); line-height:.98; margin:20px 0 0; }
.booking h2 .it{ font-style:italic; font-weight:400; }
.booking p{ color:rgba(255,255,255,.8); max-width:46ch; margin:24px 0 36px; }
.booking__panel{ border:1px solid var(--line-ink); padding:34px; }
.booking__panel .row{ display:flex; justify-content:space-between; gap:16px; padding:16px 0; border-bottom:1px solid var(--line-ink); font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.booking__panel .row:last-of-type{ border-bottom:0; }
.booking__panel .row b{ font-weight:500; color:var(--paper); }
.booking__panel .row span{ color:rgba(255,255,255,.6); }
.booking__panel .btn{ width:100%; justify-content:center; margin-top:26px; }

/* ---------------- Statement ---------------- */
.statement{ padding:clamp(76px,13vh,170px) var(--pad); text-align:center; }
.statement p{ font-family:var(--serif); font-weight:400; font-style:normal; font-size:var(--d3); line-height:1.18; max-width:24ch; margin:0 auto; }
.statement.ink{ background:var(--ink); color:var(--paper); }

/* ---------------- Footer ---------------- */
.site-foot{ background:var(--ink); color:var(--paper); padding:0 0 30px; }
.foot__logo{ background:var(--white); display:flex; justify-content:center; padding:clamp(34px,5vw,56px) var(--pad); margin:0 0 clamp(40px,6vh,72px); }
.foot__logo img{ height:clamp(78px,9vw,118px); width:auto; }
.foot__top{ max-width:1680px; margin:0 auto; padding:0 var(--pad) 48px; display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; border-bottom:1px solid var(--line-ink); }
.foot__brand p{ color:var(--white); font-size:13.5px; max-width:34ch; margin:0 0 18px; line-height:1.75; }
.foot__brand .social{ display:flex; gap:12px; }
.foot__brand .social a{ width:40px; height:40px; border:1px solid var(--line-ink); display:grid; place-items:center; color:rgba(255,255,255,.82); transition:background .3s,color .3s; }
.foot__brand .social a svg{ width:18px; height:18px; display:block; fill:currentColor; }
.foot__brand .social a:hover{ background:var(--paper); color:var(--ink); }
.site-foot h4{ font-family:var(--serif); font-size:17px; letter-spacing:.02em; text-transform:none; color:rgba(255,255,255,.92); margin:0 0 18px; font-weight:500; }
.site-foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.site-foot ul a{ font-size:14px; color:rgba(255,255,255,.72); transition:color .3s; }
.site-foot ul a:hover{ color:var(--paper); }
.foot__bot{ max-width:1680px; margin:0 auto; padding:22px var(--pad) 0; display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.foot__bot a{ color:rgba(255,255,255,.5); } .foot__bot a:hover{ color:var(--paper); }

/* ---------------- Real imagery ---------------- */
.imgfill{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; border:0; }
.cell .cellimg{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; border:0; }
.cell.flip .cellimg{ width:46%; aspect-ratio:auto; align-self:stretch; }
.craft__card .cardimg{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; border:0; }
.gal__item .imgfill{ transition:transform .6s ease; }
.gal__item:hover .imgfill{ transform:scale(1.04); }
@media (max-width:900px){ .cell.flip .cellimg{ width:100%; aspect-ratio:4/3; } }

/* ---------------- Reveal on scroll ---------------- */
[data-reveal]{ opacity:0; transform:translateY(24px); transition:opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
[data-reveal].in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ [data-reveal]{ opacity:1 !important; transform:none !important; } }

/* ---------------- Responsive ---------------- */
@media (max-width:1080px){
  .nav{ display:none; }
  .site-hdr{ grid-template-columns:1fr auto; }
  .hdr-right .book{ display:none; }
  .menu-btn{ display:block; }
  .booking__grid{ grid-template-columns:1fr; }
  .foot__top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .brand__wm{ display:none; }
  .foot__top{ grid-template-columns:1fr; }
}

/* ---------------- Language switcher ---------------- */
.lang{ position:relative; }
.lang__btn{ display:flex; align-items:center; gap:7px; background:none; border:1px solid var(--line); padding:9px 11px; cursor:pointer; color:var(--ink); font-family:var(--mono); font-size:11px; letter-spacing:.14em; line-height:1; transition:border-color .3s; }
.lang__btn:hover{ border-color:var(--ink); }
.lang__btn svg{ width:16px; height:16px; display:block; }
.lang__code{ display:block; }
.lang__menu{ position:absolute; top:calc(100% + 8px); right:0; min-width:158px; background:var(--white); border:1px solid var(--line); display:none; flex-direction:column; z-index:95; box-shadow:0 14px 38px rgba(56,56,57,.14); }
.lang.open .lang__menu{ display:flex; }
.lang__menu button{ text-align:left; background:none; border:0; padding:13px 16px; font-family:var(--sans); font-size:14px; color:var(--ink); cursor:pointer; transition:background .2s,color .2s; }
.lang__menu button + button{ border-top:1px solid var(--line); }
.lang__menu button:hover{ background:rgba(108,109,111,.08); }
.lang__menu button[aria-current="true"]{ color:var(--bronze); font-weight:600; }
@media (max-width:1080px){ .hdr-right{ gap:10px; } .lang__btn{ padding:8px 10px; } }