/* Dernika — Al Asad Al Aswad's restaurant, motel and café at Erbil One: deep emerald and soft gold, like its branding */
:root{
  --bg:#072a25; --bg-2:#0a332d; --surface:rgba(255,255,255,.04); --text:#efe7d2; --muted:#b7c6bc; --line:rgba(212,176,106,.25);
  --accent:#d4b06a; --accent-ink:#072a25; --nav-bg:rgba(7,42,37,.88); --icon-bg:rgba(212,176,106,.12); --badge-bg:transparent;
  --display:"Cinzel","Noto Naskh Arabic",Georgia,serif; --body:"Manrope","Noto Sans Arabic",system-ui,sans-serif;
  --radius:6px; --btn-radius:3px; --h-weight:500; --h-track:.04em;
}
body{background:radial-gradient(70% 60% at 15% 0%,#0f4a42,transparent 60%),var(--bg)}
.btn-accent{background:linear-gradient(100deg,#b8913f,#ecd08e 50%,#b8913f);color:#072a25}
.logo-badge img{border-radius:50%;box-shadow:0 0 0 1px rgba(212,176,106,.5)}
.logo-text small{color:var(--accent)}

/* Hero: the reception behind an emerald veil, the emblem on the right */
.hero{display:flex;align-items:center;min-height:min(88vh,820px);
  background:linear-gradient(90deg,rgba(7,42,37,.97) 28%,rgba(7,42,37,.62) 62%,rgba(7,42,37,.4)),url(../../assets/media/dernika-reception.webp) center 35%/cover,var(--bg)}
.hero .hero-inner{width:100%}
.hero h1{font-size:clamp(64px,10.5vw,150px);font-weight:500;letter-spacing:.18em;line-height:1}
.tagline{margin-top:16px;font-size:14px;letter-spacing:.34em;text-transform:uppercase;color:var(--accent)}
.hero-emblem{width:clamp(170px,22vw,300px);height:auto;border-radius:50%;box-shadow:0 0 0 1px rgba(212,176,106,.55),0 30px 80px -20px rgba(0,0,0,.7);animation:emblem-in 1.4s .2s cubic-bezier(.2,.7,.2,1) both}
@keyframes emblem-in{from{opacity:0;scale:.85;rotate:-8deg}}

/* Story */
.story-wrap{max-width:900px}
.story{margin:0;padding-inline-start:28px;border-inline-start:1px solid var(--accent);font:italic 500 clamp(22px,2.6vw,32px)/1.5 "Cormorant Garamond","Noto Naskh Arabic",Georgia,serif;color:#f1e6cb}
.story p+p{margin-top:18px}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(150px,17vw,230px);gap:12px}
.gallery figure{margin:0;overflow:hidden;border-radius:var(--radius);background:#0a332d}
.gallery img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.gallery figure:hover img{transform:scale(1.05)}
.g-big{grid-column:span 2;grid-row:span 2}
.g-wide{grid-column:span 2}

/* Header animation (Dernika): the emblem turns in, a gold line opens from the centre, the links rise */
.nav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--accent) 20%,#f3dc9a 50%,var(--accent) 80%,transparent);animation:dk-line 1.5s .15s cubic-bezier(.7,0,.2,1) both}
@keyframes dk-line{from{transform:scaleX(0)}}
.nav .logo-badge img{animation:dk-turn 1.1s cubic-bezier(.2,.7,.2,1) both}
@keyframes dk-turn{from{opacity:0;rotate:-90deg;scale:.6}}
.nav .links a:not(.only-mobile),.nav-end>*{animation:dk-rise .8s cubic-bezier(.2,.7,.2,1) both}
.nav .links a:nth-child(1){animation-delay:.3s}.nav .links a:nth-child(2){animation-delay:.38s}.nav .links a:nth-child(3){animation-delay:.46s}
.nav .links a:nth-child(4){animation-delay:.54s}.nav .links a:nth-child(5){animation-delay:.62s}
.nav-end>:nth-child(1){animation-delay:.66s}.nav-end>:nth-child(2){animation-delay:.74s}.nav-end>:nth-child(3){animation-delay:.82s}
@keyframes dk-rise{from{opacity:0;translate:0 -14px}}
.links a:hover{color:var(--accent)}

/* Arabic & Kurdish */
[data-script="arabic"] .hero h1{letter-spacing:.18em!important}
[data-script="arabic"] .story{font-style:normal}

@media (max-width:900px){
  .hero{min-height:0;background:linear-gradient(180deg,rgba(7,42,37,.7),rgba(7,42,37,.97) 60%),url(../../assets/media/dernika-reception.webp) center 30%/cover,var(--bg)}
  .hero-art{order:-1}
  .hero-emblem{width:150px}
  .gallery{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .gallery{grid-auto-rows:140px}
  .hero h1,[data-script="arabic"] .hero h1{font-size:clamp(40px,13.5vw,64px);letter-spacing:.12em!important}
}
