/* =========================================================================
   JOEL SHARING CONCEPT - kuchnia izraelska, Koszykowa 1. Collected table.
   Canvas: dim oxblood-brown | Deep: oxblood | Accent: saffron | Gilt: gold
   Display: Bodoni Moda | Body: Hanken Grotesk
   ========================================================================= */
:root {
  --bg: #1b1413;
  --bg-2: #231a18;
  --oxblood: #7c2e3a;
  --saffron: #d99a2b;
  --saffron-deep: #b97f1c;
  --cream: #f0e7d8;
  --muted: #b4a392;
  --gold: #c9a86a;
  --line: rgba(240, 231, 216, 0.14);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition: none !important; } }
body { font-family: "Hanken Grotesk", system-ui, sans-serif; background: var(--bg); color: var(--cream); line-height: 1.62; font-size: 1.04rem; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--saffron); }
.bodoni { font-family: "Bodoni Moda", Georgia, serif; }
.wrap { width: min(1120px, calc(100% - 64px)); margin-inline: auto; }
h1, h2, h3 { font-family: "Bodoni Moda", serif; font-weight: 600; line-height: 1.04; }
.sc { font-family: "Hanken Grotesk"; text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.72rem; color: var(--muted); }

/* top rule */
.top { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; padding: 13px 28px; background: rgba(27,20,19,.9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.top .b { font-family: "Bodoni Moda", serif; font-weight: 600; font-size: 1.4rem; letter-spacing: 0.04em; text-decoration: none; color: var(--cream); }
.top nav { display: flex; align-items: center; gap: 20px; }
.top nav a { font-family: "Hanken Grotesk"; font-size: 0.84rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); text-decoration: none; }
.top nav a:hover { color: var(--cream); }
.top .pill { background: var(--saffron); color: #2a1c08; padding: 7px 15px; border-radius: 999px; font-weight: 700; font-size: 0.8rem; }
.lang { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.lang button { border: 0; background: transparent; color: var(--cream); font: 600 0.72rem "Hanken Grotesk"; padding: 4px 10px; cursor: pointer; }
.lang button[aria-pressed="true"] { background: var(--saffron); color: #2a1c08; }
@media (max-width: 760px) { .top nav a:not(.pill) { display: none; } }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 96vh; display: flex; align-items: center; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero .bg { position: absolute; inset: 0; z-index: 0; }
.hero .bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.42) saturate(0.95); }
.hero .scrim { position: absolute; inset: 0; z-index: 1; background: radial-gradient(120% 120% at 30% 50%, rgba(124,46,58,.5), rgba(27,20,19,.82) 70%); }
.hero .wrap { position: relative; z-index: 2; }
.hero h1 { font-size: clamp(5rem, 20vw, 15rem); font-weight: 600; letter-spacing: 0.02em; color: var(--cream); }
.hero .desc { margin-top: 4px; }
.hero .placecard { font-family: "Bodoni Moda", serif; font-style: italic; font-size: clamp(1.4rem, 3.4vw, 2.2rem); color: var(--saffron); margin-top: 26px; }
.hero .cta { margin-top: 30px; }
.pill-btn { display: inline-block; background: var(--saffron); color: #2a1c08; font-family: "Hanken Grotesk"; font-weight: 700; letter-spacing: 0.03em; padding: 13px 26px; border-radius: 999px; text-decoration: none; }
.pill-btn:hover { background: var(--saffron-deep); }

/* ---------- courses ---------- */
.course { padding: 92px 0; border-bottom: 1px solid var(--line); position: relative; }
.course.alt { background: var(--bg-2); }
.course-head { position: relative; margin-bottom: 48px; }
.course-head .no { font-family: "Bodoni Moda", serif; font-weight: 600; font-size: 5rem; color: var(--oxblood); line-height: 0.8; position: relative; display: inline-block; }
.course-head .no::after { content: ""; position: absolute; left: -14px; top: 50%; width: 130px; height: 130px; border: 1px solid var(--gold); border-radius: 50%; transform: translateY(-50%); opacity: .35; pointer-events: none; }
.course-head h2 { font-size: clamp(2rem, 5vw, 3.2rem); margin-top: 8px; }
.course-head p { color: var(--muted); margin-top: 10px; max-width: 52ch; }

/* plate table */
.table { display: flex; flex-wrap: wrap; gap: 38px 44px; align-items: flex-start; justify-content: center; }
.plate { width: clamp(190px, 26vw, 280px); text-align: center; transition: transform .3s ease; }
.plate .dish { position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 1px solid var(--gold); box-shadow: 0 0 0 6px var(--bg), 0 14px 36px -16px rgba(0,0,0,.7); }
.plate .dish img { width: 100%; height: 100%; object-fit: cover; }
.plate.oval .dish { aspect-ratio: 6/5; border-radius: 49% / 50%; }
.plate.wobble .dish { border-radius: 50% 48% 52% 49% / 49% 51% 49% 51%; }
.plate:nth-child(3n+1) { transform: rotate(-1.5deg); }
.plate:nth-child(3n+2) { transform: rotate(1.2deg) translateY(14px); }
.plate:nth-child(3n+3) { transform: rotate(-0.6deg) translateY(-8px); }
.plate:hover { transform: rotate(0) translateY(-8px); z-index: 3; }
.plate h3 { font-size: 1.3rem; margin: 18px 0 5px; }
.plate .ing { font-style: italic; font-family: "Bodoni Moda", serif; color: var(--muted); font-size: 0.95rem; }
.plate .px { display: inline-block; margin-top: 8px; font-family: "Hanken Grotesk"; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--saffron); }

/* pull quote */
.pull { text-align: center; max-width: 28ch; margin: 60px auto 0; }
.pull q { font-family: "Bodoni Moda", serif; font-style: italic; font-size: clamp(1.5rem, 4vw, 2.4rem); color: var(--cream); }
.pull .by { display: block; margin-top: 14px; color: var(--muted); }

/* room split */
.room-split { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; }
@media (max-width: 760px) { .room-split { grid-template-columns: 1fr; } }
.room-split .ph img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border: 1px solid var(--line); }
.room-split h2 { font-size: clamp(1.9rem, 4.4vw, 2.8rem); }
.room-split p { color: var(--muted); margin-top: 14px; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.duo img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--line); }

/* contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; margin-top: 28px; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }
.info dl { display: grid; grid-template-columns: auto 1fr; gap: 12px 20px; }
.info dt { font-family: "Hanken Grotesk"; font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--saffron); padding-top: 4px; }
.info dd a { color: var(--cream); border-bottom: 1px solid var(--saffron); text-decoration: none; }
.info .socials { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; }
.btn { display: inline-block; font-family: "Hanken Grotesk"; font-weight: 700; font-size: 0.82rem; padding: 11px 20px; border-radius: 999px; text-decoration: none; border: 1px solid var(--line); color: var(--cream); }
.btn-solid { background: var(--saffron); color: #2a1c08; border-color: var(--saffron); }
.map-box { border: 1px solid var(--line); overflow: hidden; min-height: 340px; filter: grayscale(.4) sepia(.25) brightness(.85); }
.map-box iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }

/* footer */
.foot { padding: 44px 0; }
.foot .top2 { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: baseline; }
.foot .mark { font-family: "Bodoni Moda", serif; font-weight: 600; font-size: 1.7rem; letter-spacing: 0.04em; }
.foot .meta { color: var(--muted); font-size: 0.86rem; }
.foot .meta a { color: var(--saffron); }
.disclaimer { margin-top: 20px; font-size: 0.77rem; color: #897a6e; max-width: 74ch; line-height: 1.5; }

.r { will-change: transform, opacity; }