/* Ώρα Μηδέν — η νύχτα σε ώρες */

:root{
  --bg:#14100d;
  --surface:#1c1714;
  --ink:#f5ead8;
  --ink-soft:#d3bfa3;
  --accent:#e8a33d;
  --accent-ink:#1a1209;
  --rule:#3a2e24;
  --dark:#e9b7ad;
  --dark-ink:#3a1512;

  --df:"Sofia Sans Condensed", Arial, sans-serif;
  --tf:"Noto Serif", Georgia, serif;

  --maxw:1240px;
  --gutter:clamp(1.25rem, 4vw, 3rem);
  --hourcol:clamp(3.75rem, 7vw, 5.5rem);
  --railw:84px;

  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:3rem; --s6:4rem; --s7:6rem;
  --pad:clamp(4.5rem, 9vw, 8.5rem);

  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-io:cubic-bezier(.77,0,.175,1);

  --step--1:.9375rem;
  --step-0:1.125rem;
  --step-1:clamp(1.2rem, 1.6vw, 1.4rem);
  --step-2:clamp(1.8rem, 3.2vw, 2.6rem);
  --display:clamp(3.2rem, 10vw, 4.5rem);
}

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-padding-top:5.5rem;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--tf);
  font-size:var(--step-0);
  line-height:1.72;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}

h1,h2,h3{
  font-family:var(--df);
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1.02;
  margin:0;
  text-wrap:balance;
}

p{margin:0 0 var(--s2);text-wrap:pretty;max-width:68ch}
ul,ol,dl,dd{margin:0;padding:0}
li{list-style:none}

a{color:inherit}

.num,.hour,.menu-price,.counts b{font-variant-numeric:tabular-nums}

::selection{background:var(--accent);color:var(--accent-ink)}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.band-accent :focus-visible,.band-dark :focus-visible{outline-color:currentColor}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--accent);color:var(--accent-ink);
  font-family:var(--df);font-weight:700;padding:.75rem 1.25rem;
}
.skip:focus{left:0}

/* ---------- shell ---------- */

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.band{position:relative;padding-block:var(--pad)}
.band-base{background:var(--bg);color:var(--ink);--hour-c:var(--accent);--soft:var(--ink-soft)}
.band-surface{background:var(--surface);color:var(--ink);--hour-c:var(--accent);--soft:var(--ink-soft)}
.band-accent{background:var(--accent);color:var(--accent-ink);--hour-c:var(--accent-ink);--soft:rgba(26,18,9,.86)}
.band-dark{background:var(--dark);color:var(--dark-ink);--hour-c:var(--dark-ink);--soft:rgba(58,21,18,.86)}

.note{color:var(--soft);font-size:var(--step--1);line-height:1.6}

/* ---------- demo ribbon ---------- */

.demo-ribbon{
  background:var(--surface);
  color:var(--ink-soft);
  font-family:var(--df);
  font-size:.9375rem;
  letter-spacing:.01em;
  line-height:1.45;
  padding:.6rem var(--gutter);
  text-align:center;
}
.demo-foot{
  max-width:none;
  margin:var(--s5) 0 var(--s2);
  padding:.75rem 1rem;
  background:rgba(245,234,216,.07);
  color:var(--ink-soft);
  text-align:left;
}

/* ---------- header ---------- */

.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--bg);
}
.header-in{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  min-height:4.5rem;
}
.brand{
  display:flex;flex-direction:column;justify-content:center;gap:.1rem;
  min-height:48px;padding-block:.25rem;
  text-decoration:none;line-height:1;
}
.brand-name{font-family:var(--df);font-weight:700;font-size:1.5rem;letter-spacing:-.02em}
.brand-sub{font-family:var(--df);font-size:.8125rem;letter-spacing:.06em;color:var(--ink-soft)}
.brand:hover .brand-name{color:var(--accent)}

.nav{display:flex;align-items:center;gap:var(--s4)}
.nav-list{display:flex;align-items:center;gap:var(--s4)}
.nav-list a{
  position:relative;display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--df);font-size:1.125rem;letter-spacing:0;text-decoration:none;
}
.nav-list a::after{
  content:"";position:absolute;left:0;right:0;bottom:.7rem;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease-out);
}
.nav-list a:hover::after,.nav-list a:focus-visible::after{transform:scaleX(1)}
.nav-call{padding:0 1rem;min-height:44px}

.burger{
  display:none;align-items:center;gap:.6rem;
  min-height:44px;padding:0 .75rem;
  background:transparent;color:inherit;border:0;cursor:pointer;
  font-family:var(--df);font-size:1.0625rem;
}
.burger-bars{position:relative;display:block;width:22px;height:2px;background:currentColor}
.burger-bars::before,.burger-bars::after{
  content:"";position:absolute;left:0;width:22px;height:2px;background:currentColor;
  transition:transform .2s var(--ease-out);
}
.burger-bars::before{top:-7px}
.burger-bars::after{top:7px}
.site-header.is-open .burger-bars{background:transparent}
.site-header.is-open .burger-bars::before{transform:translateY(7px) rotate(45deg)}
.site-header.is-open .burger-bars::after{transform:translateY(-7px) rotate(-45deg)}

.nav-shade{
  position:fixed;inset:0;z-index:90;
  background:rgba(10,7,5,.66);
}
[hidden]{display:none !important}

/* ---------- hour rail (signature) ---------- */

.rail{z-index:80;pointer-events:none}
.rail-line{position:absolute;background:var(--rule)}
.rail-mark{position:absolute;background:var(--accent)}
.rail-hours{
  font-family:var(--df);font-weight:700;font-size:.875rem;letter-spacing:.02em;
  color:var(--ink-soft);
}
.rail-hours li{transition:color .3s ease,opacity .3s ease;opacity:.65}
.rail-hours li.is-now{color:var(--accent);opacity:1}

@media (max-width:1099px){
  .rail{
    position:fixed;left:0;right:0;bottom:0;height:38px;
    background:var(--surface);display:flex;align-items:center;
    padding:0 var(--gutter);
  }
  .rail-line{left:0;right:0;top:0;height:2px}
  .rail-mark{left:0;top:0;height:2px;width:14px}
  .rail-hours{display:flex;width:100%;justify-content:space-between}
  .rail-hours li:nth-child(even){display:none}
  body{padding-bottom:38px}
}

@media (min-width:1100px){
  .rail{
    position:fixed;
    top:clamp(130px,20vh,190px);
    bottom:clamp(90px,14vh,150px);
    left:calc(max(0px,(100vw - var(--maxw))/2) + var(--gutter));
    width:var(--railw);
  }
  .rail-line{left:0;top:0;bottom:0;width:2px}
  .rail-mark{left:-3px;top:0;width:8px;height:8px}
  .rail-hours{
    position:absolute;left:1rem;top:0;bottom:0;
    display:flex;flex-direction:column;justify-content:space-between;
  }
  .wrap{padding-left:calc(var(--gutter) + var(--railw))}
}

/* ---------- hero ---------- */

.hero{
  display:flex;align-items:flex-end;
  min-height:clamp(540px,86svh,860px);
  padding-block:0;
  overflow:hidden;
}
.hero-media{
  position:absolute;inset:0;margin-inline:auto;
  width:100%;max-width:2560px;height:100%;
}
.hero-media img{
  width:100%;height:100%;object-fit:cover;object-position:42% 48%;
  animation:drift 30s ease-in-out infinite alternate;
}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.035)}}

.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,
    rgba(20,16,13,.95) 0%,
    rgba(20,16,13,.88) 28%,
    rgba(20,16,13,.46) 58%,
    rgba(20,16,13,.3) 100%);
}
.hero-in{position:relative;z-index:1;padding-block:clamp(5rem,12vw,8rem) clamp(3rem,6vw,5rem)}

.hero-time{
  display:flex;align-items:baseline;gap:.6rem;
  font-family:var(--df);font-size:1.0625rem;color:var(--ink-soft);
  margin-bottom:var(--s2);
}
.hero-time .hour{color:var(--accent)}

.display{
  font-size:var(--display);
  line-height:.94;
  letter-spacing:-.045em;
}
.hero-lede{
  font-size:clamp(1.25rem,2.4vw,1.75rem);
  line-height:1.4;
  margin:var(--s3) 0 var(--s2);
  max-width:24ch;
}
.hero-meta{
  font-family:var(--df);
  font-size:1.0625rem;
  letter-spacing:.01em;
  color:var(--ink-soft);
  max-width:52ch;
  margin-bottom:var(--s4);
}
.hero-acts{display:flex;flex-wrap:wrap;gap:var(--s2);max-width:none;margin:0}

/* ---------- buttons ---------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 1.4rem;
  font-family:var(--df);font-weight:700;font-size:1.0625rem;letter-spacing:.01em;
  text-decoration:none;border:0;
  transition:transform .16s var(--ease-out),background-color .2s ease,color .2s ease,box-shadow .2s ease;
}
.btn-solid{background:var(--accent);color:var(--accent-ink)}
.btn-ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px var(--rule)}
.btn:active{transform:scale(.97)}

@media (hover:hover) and (pointer:fine){
  .btn-solid:hover{background:var(--ink);color:var(--bg)}
  .btn-ghost:hover{box-shadow:inset 0 0 0 2px var(--accent);color:var(--accent)}
}
.btn-solid:focus-visible{background:var(--ink);color:var(--bg)}
.btn-ghost:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}

/* ---------- section heads ---------- */

.sec-top{
  display:grid;grid-template-columns:1fr;gap:var(--s3);
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
.sec-head{display:grid;grid-template-columns:var(--hourcol) 1fr;align-items:baseline;gap:var(--s2)}
.sec-head h2{font-size:var(--step-2)}
.hour{
  font-family:var(--df);font-weight:700;font-size:1.0625rem;letter-spacing:.01em;
  color:var(--hour-c);
}
.sec-side p{margin:0;font-size:var(--step-1);line-height:1.6;color:var(--soft)}

@media (min-width:860px){
  .sec-top{grid-template-columns:1.1fr 1fr;gap:var(--s6);align-items:start}
}

/* ---------- the wall of hours ---------- */

.hours-rows{
  margin-bottom:clamp(2.5rem,5vw,4rem);
  border-top:0;
}
.hours-rows li{
  display:grid;grid-template-columns:var(--hourcol) 1fr;gap:var(--s2);
  padding:var(--s3) 0;
  background-image:linear-gradient(var(--rule),var(--rule));
  background-size:100% 2px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .4s var(--ease-out);
}
.hours-rows li:first-child{padding-top:0}
.hours-what{max-width:66ch;color:var(--ink-soft)}

.grid4{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s2);
}
@media (min-width:1100px){
  .grid4{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
}

.frame{
  margin:0;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--rule);
}
.frame img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.92) brightness(.92);
  transition:transform 1.1s var(--ease-out),filter .5s ease;
}
@media (hover:hover) and (pointer:fine){
  .frame:hover img{transform:scale(1.05);filter:none}
}

/* ---------- menu ---------- */

.menu-grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.5rem)}
.menu-photo .frame{background:rgba(58,21,18,.25)}
.frame-tall{aspect-ratio:16/10}

@media (min-width:900px){
  .menu-grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(2.5rem,5vw,4.5rem);align-items:start}
  .menu-photo{position:sticky;top:7rem;z-index:2;align-self:start}
  .frame-tall{aspect-ratio:3/4}
  .menu-photo .frame{margin-top:calc(-1 * (var(--pad) + clamp(3rem,5vw,4.5rem)))}
}

.menu-note{color:var(--soft);font-size:var(--step--1);margin:var(--s3) 0 var(--s5);max-width:52ch}
.menu-group{
  font-size:1.375rem;letter-spacing:-.01em;
  margin:var(--s5) 0 var(--s2);
}
.menu-list li{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:"name price" "desc desc";
  column-gap:var(--s2);
  padding:.85rem 0;
  background-image:linear-gradient(rgba(58,21,18,.22),rgba(58,21,18,.22));
  background-size:100% 1.5px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .4s var(--ease-out);
}
.menu-list li:last-child{background-image:none}
.menu-name{grid-area:name;font-family:var(--df);font-weight:700;font-size:1.3125rem;letter-spacing:-.01em}
.menu-price{grid-area:price;font-family:var(--df);font-weight:700;font-size:1.3125rem}
.menu-desc{grid-area:desc;font-size:var(--step--1);line-height:1.55;color:var(--soft);max-width:54ch}

@media (min-width:620px){
  .menu-list li{
    grid-template-columns:minmax(0,13rem) minmax(0,1fr) auto;
    grid-template-areas:"name desc price";
    align-items:baseline;column-gap:var(--s3);
  }
}
@media (hover:hover) and (pointer:fine){
  .menu-list li:hover{background-size:100% 3px}
}

/* ---------- programme ---------- */

.prog-rows li{
  display:grid;
  grid-template-columns:var(--hourcol) 1fr;
  grid-template-areas:"hour day" ". what";
  column-gap:var(--s2);
  padding:var(--s3) 0;
  background-image:linear-gradient(var(--rule),var(--rule));
  background-size:100% 2px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .4s var(--ease-out),color .3s ease;
}
.prog-rows li .hour{grid-area:hour}
.prog-day{grid-area:day;font-family:var(--df);font-weight:700;font-size:1.375rem;letter-spacing:-.01em}
.prog-what{grid-area:what;color:var(--ink-soft);line-height:1.55}

@media (min-width:760px){
  .prog-rows li{
    grid-template-columns:var(--hourcol) minmax(0,11rem) minmax(0,1fr);
    grid-template-areas:"hour day what";
    align-items:baseline;column-gap:var(--s3);
  }
}
@media (hover:hover) and (pointer:fine){
  .prog-rows li:hover{background-size:100% 4px}
  .prog-rows li:hover .prog-what{color:var(--ink)}
}
.prog-note{margin-top:var(--s3)}

/* ---------- 00:00 ---------- */

#ora-miden{z-index:2}
.zero-grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3rem);align-items:center}
.zero-type .display{letter-spacing:-.05em}
.zero-line{
  font-size:clamp(1.4rem,2.8vw,2.1rem);
  line-height:1.26;
  margin:clamp(1.5rem,3vw,2.5rem) 0 var(--s3);
  max-width:17ch;
  text-wrap:balance;
}
.zero-sub{color:var(--soft);max-width:44ch;margin:0}
.zero-photo .frame{background:rgba(26,18,9,.3)}

@media (min-width:900px){
  .zero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(3rem,6vw,5rem)}
  .zero-photo{position:relative;z-index:2}
  .zero-photo .frame{margin-bottom:calc(-1 * (var(--pad) + clamp(3rem,5vw,4.5rem)))}
}

/* ---------- facts ---------- */

#leptomereies{z-index:1;padding-bottom:0}
.facts{display:grid;grid-template-columns:1fr;gap:var(--s3) var(--s5)}
.fact{
  padding:var(--s3) 0;
  background-image:linear-gradient(var(--rule),var(--rule));
  background-size:100% 2px;background-repeat:no-repeat;background-position:0 0;
  padding-top:var(--s3);
}
.fact dt{
  font-family:var(--df);font-weight:700;font-size:1.25rem;letter-spacing:-.01em;
  color:var(--accent);margin-bottom:.25rem;
}
.fact dd{margin:0;line-height:1.55}
.fact a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;color:var(--ink);text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:2px;text-decoration-color:var(--accent);transition:color .2s ease}
.fact a:hover,.fact a:focus-visible{color:var(--accent)}

@media (min-width:640px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.facts{grid-template-columns:repeat(3,minmax(0,1fr))}}

.counts{
  display:grid;grid-template-columns:1fr;
  gap:var(--s2);
  margin-top:clamp(2.5rem,5vw,4rem);
  margin-bottom:clamp(3rem,6vw,5rem);
}
.counts li{display:flex;align-items:baseline;gap:.85rem}
.counts b{
  font-family:var(--df);font-weight:700;
  font-size:clamp(2.2rem,8vw,2.8rem);line-height:1;letter-spacing:-.04em;
  color:var(--accent);
}
.counts span{font-size:var(--step--1);line-height:1.5;color:var(--ink-soft)}
@media (min-width:700px){
  .counts{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
  .counts li{flex-direction:column;align-items:flex-start;gap:.3rem}
  .counts b{font-size:clamp(2.6rem,5vw,3.6rem)}
}

.closer{margin:0;aspect-ratio:16/9;overflow:hidden;background:var(--rule)}
.closer img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
@media (min-width:900px){.closer{aspect-ratio:21/9}}

/* ---------- footer ---------- */

.site-footer{padding-block:clamp(3.5rem,7vw,6rem) clamp(2.5rem,5vw,4rem)}
.foot-mark{
  font-family:var(--df);font-weight:700;
  font-size:clamp(2.2rem,7vw,4.5rem);
  line-height:.92;letter-spacing:-.045em;
  margin:0 0 var(--s5);max-width:none;
}
.foot-grid{display:grid;grid-template-columns:1fr;gap:var(--s3)}
.foot-grid p{margin:0;color:var(--ink-soft);line-height:1.6}
.foot-grid a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:2px;text-decoration-color:var(--rule);transition:color .2s ease,text-decoration-color .2s ease}
.foot-grid a:hover,.foot-grid a:focus-visible{color:var(--accent);text-decoration-color:var(--accent)}
@media (min-width:700px){.foot-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}}

.credit{font-size:var(--step--1);color:var(--ink-soft);max-width:none;margin:0}
.credit a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;justify-content:center;text-decoration:underline;text-underline-offset:.22em;text-decoration-color:var(--accent)}
.credit a:hover,.credit a:focus-visible{color:var(--accent)}

/* ---------- mobile navigation ---------- */

@media (max-width:899px){
  .burger{display:inline-flex}
  .nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--surface);
    padding:var(--s2) var(--gutter) var(--s4);
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .22s var(--ease-out),transform .22s var(--ease-out),visibility .22s;
  }
  .site-header.is-open .nav{opacity:1;visibility:visible;transform:none}
  .nav-list{flex-direction:column;align-items:stretch;gap:0}
  .nav-list a{min-height:52px;font-size:1.3125rem}
  .nav-list a::after{bottom:.9rem;right:auto;width:2.5rem}
  .nav-call{margin-top:var(--s2);align-self:flex-start}
}

@media (min-width:900px){
  .nav-shade{display:none}
}

/* ---------- motion ---------- */

html.lenis{scroll-behavior:auto}

.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .75s var(--ease-out),transform .75s var(--ease-out)}
.js .reveal.is-in{opacity:1;transform:none}

.js .prog-rows li:nth-child(2),.js .facts .fact:nth-child(2),.js .counts li:nth-child(2){transition-delay:70ms}
.js .prog-rows li:nth-child(3),.js .facts .fact:nth-child(3),.js .counts li:nth-child(3){transition-delay:140ms}
.js .prog-rows li:nth-child(4),.js .facts .fact:nth-child(4){transition-delay:210ms}
.js .prog-rows li:nth-child(5),.js .facts .fact:nth-child(5){transition-delay:280ms}
.js .prog-rows li:nth-child(6),.js .facts .fact:nth-child(6){transition-delay:350ms}

.js [data-split] .w{display:inline-block;overflow:hidden;vertical-align:top}
.js [data-split] .w>span{display:inline-block;transform:translateY(105%);transition:transform .9s var(--ease-out)}
.js [data-split].is-in .w>span{transform:none}

.magnetic{will-change:transform}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .js .reveal,.js [data-split] .w>span{opacity:1;transform:none}
  .hero-media img{animation:none}
}