/* =====================================================================
   Meltemi · Greek design layer. Loaded after base.css and widget CSS.
   Fonts: Marcellus (--serif, headings), Cinzel (--display, inscriptional
   caps for eyebrows, numerals and big words), Manrope (--sans, body).
   Motifs: meander (Greek key) via --meander mask, Cycladic arches,
   Santorini line art. Marcellus has no italic: no faux obliques anywhere.
   ===================================================================== */
:root{--meander:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='14' viewBox='0 0 20 14'%3E%3Cpath d='M0 13H20M16 13V1H4V9H10V5' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3C/svg%3E")}
html{font-synthesis:none}
em{font-style:normal}

/* ---------- eyebrows: inscriptional caps + a short meander instead of a hairline ---------- */
.eyebrow{font-family:var(--display);font-weight:600;font-size:.72rem;letter-spacing:.22em}
.eyebrow::before,.sec-head--center .eyebrow::after{width:34px;height:9px;opacity:.8;background:currentColor;-webkit-mask:var(--meander) 0 50%/auto 100% repeat-x;mask:var(--meander) 0 50%/auto 100% repeat-x}
.sec-head--center .eyebrow::after{transform:scaleX(-1)}

/* ---------- home hero: MELTEMI in Cinzel caps + rotating booking badge ---------- */
.cs-h{font-family:var(--display);font-style:normal;font-weight:500;letter-spacing:.05em;text-transform:uppercase}
.cs--full .cs-h{font-size:min(13.5vw,14rem,26svh);letter-spacing:.05em}
[data-cinematic="short"] .cs-h{font-family:var(--serif);text-transform:none;letter-spacing:-.01em}
.cs-sub em{color:var(--gold2)}
.cs-badge{position:absolute;z-index:3;right:max(var(--gutter),calc((100vw - var(--container)) / 2));bottom:clamp(6.5rem,15vh,9.5rem);opacity:0;animation:fadeUp 1s 1.2s var(--ease) forwards}
.cs-badge .ct-badge{width:clamp(112px,10vw,140px)}
@media (max-width:760px){
  .cs--full .cs-h{font-size:min(14vw,8rem,20svh);letter-spacing:.04em}
  .cs-badge{bottom:auto;top:calc(var(--header-h) + 1rem);right:var(--gutter)}
  .cs-badge .ct-badge{width:92px}
}

/* ---------- photo-filled words (page heroes, CTA) in Cinzel ---------- */
.mask-text,.mt-hero h1.mask-text,.reveal-line{font-family:var(--display);font-weight:700;letter-spacing:.01em}
.mt-word{font-size:min(19rem,calc(84vw / (var(--chars) * .84)));line-height:.9}
.mt-pagehero .mt-word{font-size:min(19rem,calc(88cqi / (var(--chars) * .84)))}
.sec-maskcta .reveal-line{font-size:clamp(2.2rem,9.4vw,9.6rem)}
.mt-sub{font-style:normal}

/* ---------- numerals ---------- */
.sk-num,.ac-hero-num,.ac-num,.pol-n,.hz-time,.cf-count,.acc-num,.tc-count{font-family:var(--display)}
.ac-num,.ac-hero-num{font-weight:500;letter-spacing:.02em}

/* ---------- menus ---------- */
.mtab-it{font-size:clamp(1.15rem,1.7vw,1.45rem)}
.mgroup-title{font-family:var(--serif)}
.mgroup-title::before{content:"";flex:none;width:30px;height:9px;background:var(--gold);opacity:.75;-webkit-mask:var(--meander) 0 50%/auto 100% repeat-x;mask:var(--meander) 0 50%/auto 100% repeat-x}

/* ---------- footer: Greek key band along the top edge ---------- */
.site-footer::before{content:"";position:absolute;left:0;right:0;top:-1px;height:11px;background:var(--gold);opacity:.5;-webkit-mask:var(--meander) 0 0/auto 100% repeat-x;mask:var(--meander) 0 0/auto 100% repeat-x;pointer-events:none}

/* ---------- Santorini line art ---------- */
.skyline-cap{font-family:var(--serif);font-style:normal}
.theme-light .ld-pano .ld-p:nth-of-type(4){stroke:var(--terra)}
/* centre-out skyline (data-line-draw="centre"): colour by role, not by path order */
.sec-skyline .ld-pano[data-line-draw="centre"] .ld-p{vector-effect:none;stroke-width:calc(1.8px * var(--ld-sw,1))}
.sec-skyline .ld-pano[data-line-draw="centre"] .ld-p.ld-main{stroke:var(--cream);stroke-width:calc(2.2px * var(--ld-sw,1))}
.sec-skyline .ld-pano[data-line-draw="centre"] .ld-p.ld-muted,.sec-skyline .ld-pano[data-line-draw="centre"] .ld-p.ld-win{stroke:var(--muted)}
.sec-skyline .ld-pano[data-line-draw="centre"] .ld-p.ld-gold{stroke:var(--gold)}
.theme-light .sec-skyline .ld-pano[data-line-draw="centre"] .ld-p.ld-sun{stroke:var(--terra)}
.ld-icon figcaption{font-family:var(--display);font-weight:600;letter-spacing:.16em}

/* ---------- legacy section polish ---------- */
.sh-sign,.ct-body,.tc-quote p,.hv-cap strong,.hs-name,.cf-name,.fb-face h3,.acc-content h3,.acc-label,.mq-cap b,.gcap,.lb-cap,.phero-word,.sm-reveal-title,.hz-end-title,.hz-cap h3{font-style:normal}
.sm-reveal-title em{color:var(--m-gold2)}
.phero-word{font-family:var(--display);font-weight:700}

/* ---------- prices on photo fronts use the on-media accent ---------- */
.fb-front .fb-price{color:var(--m-gold2)!important}
.theme-light .sm-reveal-media::after{background:radial-gradient(ellipse at center,rgba(8,20,40,.5),rgba(8,20,40,.72))}
.theme-light .mt-pagehero .mt-word{filter:saturate(1.6) brightness(.82) contrast(1.08)}

/* ---------- statement sits on the container's left edge; keep the measure readable ---------- */
.sec-statement .sh-text,.sec-statement .sh-sign{max-width:21em}
.sec-statement .sh-sign{max-width:none}
/* ---------- mobile menu tabs: five Greek/English pairs wrap onto two rows instead of running off-screen ---------- */
@media (max-width:760px){
  .mtabs{flex-wrap:wrap;overflow:visible;column-gap:1.25rem;row-gap:0}
  .mtab{padding:.6rem 0 .55rem}
  .mtab-it{font-size:1.05rem}
}

/* ---------- contact hero: "Come and say yiá sou" wraps to two lines so the rotating badge never touches it ---------- */
.phero.phero--contact h1.display{max-width:min(6.6em,calc(100% - clamp(150px,15vw,210px)))}
.phero--contact .hero-lead{max-width:min(34rem,calc(100% - clamp(150px,15vw,210px)))}
@media (max-width:760px){.phero.phero--contact h1.display,.phero--contact .hero-lead{max-width:none}}

/* 404: the harbour photo is busy behind the copy, so it gets a heavier scrim in both themes */
.nf .hero-shade{background:
  linear-gradient(90deg,rgba(var(--shade-rgb),.95) 0%,rgba(var(--shade-rgb),.84) 46%,rgba(var(--shade-rgb),.22) 82%),
  linear-gradient(0deg,rgba(var(--shade-rgb),.95) 0%,rgba(var(--shade-rgb),0) 55%),
  linear-gradient(180deg,rgba(var(--shade-rgb),.55) 0%,rgba(var(--shade-rgb),0) 25%)}
@media (max-width:760px){.nf .hero-shade{background:
  linear-gradient(0deg,rgba(var(--shade-rgb),.97) 0%,rgba(var(--shade-rgb),.9) 52%,rgba(var(--shade-rgb),.15) 80%),
  linear-gradient(180deg,rgba(var(--shade-rgb),.55) 0%,rgba(var(--shade-rgb),0) 25%)}}

/* sticky menu tabs: page bg, not the (deeper) hero shade, so there is no seam under the Menus hero in dark */
.mtabs-wrap{background:rgba(var(--bg-rgb),.9)}