/* Mezedogonia Taverna — Aliathon Resort, Paphos
   Palette drawn from the courtyard: whitewash, slate flagstones,
   olive leaf, terracotta pot, bulb amber. */

:root{
  --wash:#EDEDE4;          /* limewashed wall */
  --wash-warm:#E4E2D5;     /* shaded wall */
  --slate:#242C26;         /* flagstone, deep */
  --slate-2:#333D35;
  --olive:#4E7A3B;         /* the sign green */
  --olive-deep:#2E4A26;
  --olive-pale:#9DB08B;
  --terracotta:#B85F35;    /* the pots */
  --bulb:#E4A93C;          /* string lights */
  --ink:#1B211C;
  --muted:#6E7A6B;

  --serif:'Alegreya',Georgia,serif;
  --sans:'Alegreya Sans',system-ui,-apple-system,sans-serif;
  --sc:'Alegreya Sans SC',var(--sans);

  --wrap:1240px;
  --gut:clamp(1.25rem,4vw,3.5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{
  margin:0;background:var(--wash);color:var(--ink);
  font-family:var(--sans);font-size:1.0625rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.narrow{max-width:70ch}

h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.08;margin:0}
h1{font-size:clamp(2.6rem,7vw,5.4rem);letter-spacing:-.015em}
h2{font-size:clamp(2rem,4.4vw,3.4rem);letter-spacing:-.01em}
h3{font-size:clamp(1.3rem,2.2vw,1.7rem)}
p{margin:0 0 1.1em}
.lede{font-family:var(--serif);font-size:clamp(1.2rem,2.1vw,1.5rem);line-height:1.5;color:var(--slate-2)}
.muted{color:var(--muted)}

.eyebrow{
  font-family:var(--sc);text-transform:uppercase;letter-spacing:.22em;
  font-size:.78rem;font-weight:700;color:var(--olive);
  display:flex;align-items:center;gap:.85rem;margin:0 0 1.1rem;
}
.eyebrow::after{content:"";flex:1;height:1px;background:currentColor;opacity:.3;max-width:5rem}
.eyebrow.center{justify-content:center}
.eyebrow.center::before{content:"";flex:1;height:1px;background:currentColor;opacity:.3;max-width:5rem}

/* ---------- brand mark ---------- */
.brand{display:inline-block;line-height:0;text-decoration:none}
.brand img{height:60px;width:auto}
.foot .brand img{height:100px;margin-bottom:.4rem}
@media(max-width:760px){.brand img{height:46px}}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:60;
  background:rgba(237,237,228,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(36,44,38,.1);
}
.site-head__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:92px}
.nav{display:flex;align-items:center;gap:1.9rem}
.nav a{
  font-family:var(--sc);text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;
  font-weight:700;text-decoration:none;padding:.3rem 0;position:relative;color:var(--slate);
}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--olive);transition:right .3s}
.nav a:hover::after,.nav a[aria-current="page"]::after{right:0}
.nav a[aria-current="page"]{color:var(--olive)}
.burger{display:none;background:none;border:1px solid rgba(36,44,38,.25);border-radius:2px;padding:.55rem .7rem;cursor:pointer}
.burger span{display:block;width:20px;height:1.5px;background:var(--slate);margin:4px 0}

.btn{
  display:inline-block;font-family:var(--sc);text-transform:uppercase;letter-spacing:.16em;
  font-size:.78rem;font-weight:700;text-decoration:none;padding:.85rem 1.6rem;
  border:1px solid var(--olive);color:var(--olive);background:transparent;cursor:pointer;
  transition:background .25s,color .25s;border-radius:1px;
}
.btn:hover{background:var(--olive);color:var(--wash)}
.btn--solid{background:var(--olive);color:var(--wash)}
.btn--solid:hover{background:var(--olive-deep);border-color:var(--olive-deep)}
.btn--light{border-color:rgba(237,237,228,.6);color:var(--wash)}
.btn--light:hover{background:var(--wash);color:var(--slate);border-color:var(--wash)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(92svh,860px);display:flex;align-items:flex-end;overflow:hidden;background:var(--slate)}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62;
  animation:slowzoom 26s ease-out forwards}
@keyframes slowzoom{from{transform:scale(1.08)}to{transform:scale(1)}}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,26,21,.55) 0%,rgba(20,26,21,.15) 38%,rgba(20,26,21,.86) 100%)}
.hero__in{position:relative;z-index:2;color:var(--wash);padding-block:clamp(3rem,9vw,6rem);width:100%}
.hero h1{color:var(--wash)}
.hero h1 em{font-style:normal;display:block;color:var(--bulb);font-size:.44em;letter-spacing:.3em;
  font-family:var(--sc);text-transform:uppercase;margin-bottom:1.1rem;font-weight:700}
.hero__sub{max-width:46ch;margin-top:1.6rem;color:rgba(237,237,228,.86);font-size:1.12rem}
.hero__acts{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:.6rem 1.8rem;margin-top:2.6rem;padding-top:1.4rem;
  border-top:1px solid rgba(237,237,228,.22);
  font-family:var(--sc);text-transform:uppercase;letter-spacing:.16em;font-size:.74rem;
  color:rgba(237,237,228,.72);font-weight:700;
}

/* ---------- sections ---------- */
.sec{padding-block:clamp(4rem,9vw,7.5rem)}
.sec--tight{padding-block:clamp(3rem,6vw,5rem)}
.sec--slate{background:var(--slate);color:var(--wash)}
.sec--slate h2,.sec--slate h3{color:var(--wash)}
.sec--slate .eyebrow{color:var(--bulb)}
.sec--slate .lede{color:rgba(237,237,228,.8)}
.sec--warm{background:var(--wash-warm)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split--wide{grid-template-columns:1.05fr .95fr}

.frame{position:relative}
.frame img{width:100%;height:100%;object-fit:cover}
.frame--tall img{aspect-ratio:4/5}
.frame::before{content:"";position:absolute;inset:auto -14px -14px auto;width:58%;height:58%;
  border:1px solid var(--olive);opacity:.5;z-index:-1}

/* ---------- signature: the meze run ---------- */
.run{border-top:1px solid rgba(237,237,228,.16)}
.run__row{
  display:grid;grid-template-columns:5.5rem 1fr minmax(0,26rem);
  gap:clamp(1rem,3vw,2.5rem);align-items:baseline;
  padding-block:clamp(1.4rem,3vw,2.1rem);
  border-bottom:1px solid rgba(237,237,228,.16);
  opacity:0;transform:translateY(18px);
  transition:opacity .7s ease,transform .7s ease;
}
.run__row.in{opacity:1;transform:none}
.run--plain .run__row{grid-template-columns:1fr minmax(0,26rem)}
@media(max-width:760px){.run--plain .run__row{grid-template-columns:1fr}
.run--plain .run__note{grid-column:1/-1}}
.run__no{
  font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.3rem);color:var(--bulb);
  font-variant-numeric:lining-nums;line-height:1;
}
.run__no span{font-size:.5em;color:rgba(237,237,228,.4);margin-left:.35rem}
.run__name{font-family:var(--serif);font-size:clamp(1.25rem,2.4vw,1.85rem);line-height:1.15}
.run__name b{display:block;font-weight:400;font-family:var(--sc);text-transform:uppercase;
  letter-spacing:.2em;font-size:.62rem;color:var(--olive-pale);margin-bottom:.5rem}
.run__note{color:rgba(237,237,228,.66);font-size:.98rem;margin:0}
.run__tail{
  display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;
  padding-top:2.4rem;
}
.price{font-family:var(--serif);font-size:clamp(2rem,5vw,3.2rem);color:var(--bulb);line-height:1}
.price small{display:block;font-family:var(--sc);font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(237,237,228,.6);margin-top:.6rem}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:clamp(1.2rem,2.5vw,2rem)}
.card{background:var(--wash);border:1px solid rgba(36,44,38,.12);padding:1.8rem 1.6rem}
.card h3{margin-bottom:.6rem}
.card p{margin:0;color:var(--muted);font-size:.98rem}
.card__i{color:var(--olive);margin-bottom:1.1rem}

/* ---------- menu ---------- */
.menu-grid{display:grid;grid-template-columns:14rem 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.menu-nav{position:sticky;top:112px;display:flex;flex-direction:column;gap:.15rem}
.menu-nav a{
  font-family:var(--sc);text-transform:uppercase;letter-spacing:.14em;font-size:.76rem;font-weight:700;
  text-decoration:none;padding:.55rem 0 .55rem .9rem;border-left:2px solid rgba(36,44,38,.14);color:var(--muted);
  transition:color .2s,border-color .2s;
}
.menu-nav a:hover,.menu-nav a.active{color:var(--olive);border-color:var(--olive)}
.course{margin-bottom:clamp(3rem,6vw,4.5rem);scroll-margin-top:120px}
.course h2{margin-bottom:.4rem}
.course__note{color:var(--muted);font-size:.95rem;margin-bottom:2rem;max-width:52ch}
.dish{display:grid;grid-template-columns:1fr auto;gap:.4rem 1.5rem;padding:1rem 0;border-bottom:1px solid rgba(36,44,38,.1)}
.dish__n{font-family:var(--serif);font-size:1.22rem;line-height:1.25}
.dish__n i{font-style:normal;color:var(--olive);font-size:.85em;margin-left:.5rem;opacity:.85}
.dish__p{font-family:var(--serif);font-size:1.1rem;color:var(--olive-deep);white-space:nowrap}
.dish__d{grid-column:1/-1;color:var(--muted);font-size:.95rem;margin:0;max-width:60ch}
.tag{display:inline-block;font-family:var(--sc);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid var(--terracotta);color:var(--terracotta);padding:.12rem .45rem;margin-left:.5rem;vertical-align:2px}

/* ---------- gallery ---------- */
.gal{columns:3;column-gap:1rem}
.gal button{display:block;width:100%;margin:0 0 1rem;padding:0;border:0;background:none;cursor:pointer;overflow:hidden}
.gal img{width:100%;transition:transform .6s ease,filter .6s ease}
.gal button:hover img{transform:scale(1.04);filter:saturate(1.1)}
.lb{position:fixed;inset:0;z-index:200;background:rgba(18,22,19,.94);display:none;align-items:center;justify-content:center;padding:2rem}
.lb.open{display:flex}
.lb img{max-width:min(92vw,1100px);max-height:88svh;width:auto;object-fit:contain}
.lb__x,.lb__p,.lb__n{position:absolute;background:none;border:0;color:var(--wash);font-size:2rem;cursor:pointer;padding:1rem;line-height:1}
.lb__x{top:.5rem;right:1rem}
.lb__p{left:.5rem;top:50%;transform:translateY(-50%)}
.lb__n{right:.5rem;top:50%;transform:translateY(-50%)}

/* ---------- strip / quotes ---------- */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:clamp(1.5rem,3vw,2.8rem)}
.quote p{font-family:var(--serif);font-size:1.22rem;line-height:1.45;color:var(--slate-2)}
.quote cite{font-family:var(--sc);font-style:normal;text-transform:uppercase;letter-spacing:.18em;
  font-size:.7rem;color:var(--olive);font-weight:700}
.stars{color:var(--bulb);letter-spacing:.2em;font-size:.9rem;margin-bottom:.8rem}

/* ---------- form ---------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.field{display:flex;flex-direction:column;gap:.4rem}
.field--full{grid-column:1/-1}
label{font-family:var(--sc);text-transform:uppercase;letter-spacing:.16em;font-size:.7rem;font-weight:700;color:var(--slate-2)}
input,select,textarea{
  font-family:var(--sans);font-size:1rem;padding:.8rem .9rem;border:1px solid rgba(36,44,38,.25);
  background:var(--wash);color:var(--ink);border-radius:1px;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--olive);outline-offset:1px;border-color:var(--olive)}
textarea{resize:vertical;min-height:7rem}

/* ---------- footer ---------- */
.foot{background:var(--slate);color:rgba(237,237,228,.75);padding-block:clamp(3rem,6vw,4.5rem) 2rem}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem}
.foot h4{font-family:var(--sc);text-transform:uppercase;letter-spacing:.2em;font-size:.72rem;color:var(--bulb);margin-bottom:1rem;font-weight:700}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem;font-size:.95rem}
.foot a{text-decoration:none}
.foot a:hover{color:var(--bulb)}
.foot .brand{color:var(--wash)}
.foot .brand__top{color:rgba(237,237,228,.6)}
.foot .brand__name{color:var(--wash)}
.foot__base{margin-top:3rem;padding-top:1.5rem;border-top:1px solid rgba(237,237,228,.16);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  font-family:var(--sc);text-transform:uppercase;letter-spacing:.14em;font-size:.68rem}

/* ---------- page masthead ---------- */
.mast{position:relative;background:var(--slate);color:var(--wash);overflow:hidden}
.mast img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.mast::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(20,26,21,.9) 0%,rgba(20,26,21,.6) 55%,rgba(20,26,21,.35) 100%)}
.mast__in{position:relative;z-index:2;padding-block:clamp(4rem,10vw,7rem)}
.mast h1{color:var(--wash);font-size:clamp(2.4rem,6vw,4.4rem)}
.mast p{color:rgba(237,237,228,.8);max-width:52ch;margin-top:1rem}
.mast .eyebrow{color:var(--bulb)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease}
.rv.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .foot__grid{grid-template-columns:1fr 1fr}
  .gal{columns:2}
  .menu-grid{grid-template-columns:1fr}
  .menu-nav{position:static;flex-direction:row;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}
  .menu-nav a{border-left:0;border-bottom:2px solid rgba(36,44,38,.14);padding:.4rem .2rem}
}
@media(max-width:760px){
  .nav{
    position:fixed;inset:80px 0 auto 0;background:var(--wash);flex-direction:column;align-items:flex-start;
    gap:0;padding:1rem var(--gut) 2rem;border-bottom:1px solid rgba(36,44,38,.12);
    transform:translateY(-120%);transition:transform .35s ease;
  }
  .nav.open{transform:none}
  .nav a{width:100%;padding:.85rem 0;border-bottom:1px solid rgba(36,44,38,.08);font-size:.9rem}
  .nav .btn{margin-top:1rem;border-bottom:0}
  .burger{display:block}
  .split,.split--wide{grid-template-columns:1fr}
  .run__row{grid-template-columns:3.2rem 1fr;row-gap:.6rem}
  .run__note{grid-column:2/-1}
  .form{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr}
  .gal{columns:1}
}