/* =========================================================================
   KLUB JUGOSLOVENA - hidden Serbian/Yugoslav club, al. Roz 5 (by the embassy).
   SFRJ members-club booklet. Paper: aged ivory | Accent: Yugoslav oxblood
   Brass star + buzzer. Display: Antonio (condensed) | Body: Spectral
   ========================================================================= */
:root {
  --ivory: #ece3d0;
  --ivory-2: #e1d6bd;
  --oxblood: #841f24;
  --oxblood-deep: #5f1418;
  --brass: #c69a48;
  --brass-deep: #9c7630;
  --blue: #2a477a;
  --ink: #221913;
  --muted: #786b58;
  --line: rgba(34, 25, 19, 0.28);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { font-family: "Spectral", Georgia, serif; background: var(--ivory); color: var(--ink); line-height: 1.62; font-size: 1.06rem; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--oxblood); }
.cond { font-family: "Antonio", system-ui, sans-serif; text-transform: uppercase; line-height: 0.92; }
.wrap { width: min(960px, calc(100% - 56px)); margin-inline: auto; }
h1, h2, h3 { font-family: "Antonio", sans-serif; font-weight: 600; text-transform: uppercase; line-height: 0.95; }

/* top bar */
.bar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; padding: 11px 24px; background: var(--oxblood); color: var(--ivory); }
.bar .b { font-family: "Antonio", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.2rem; color: var(--ivory); text-decoration: none; }
.bar nav { display: flex; align-items: center; gap: 18px; }
.bar nav a { font-family: "Antonio", sans-serif; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.95rem; color: var(--ivory); text-decoration: none; opacity: .82; }
.bar nav a:hover { opacity: 1; }
.lang { display: inline-flex; border: 1px solid rgba(236,227,208,.5); }
.lang button { border: 0; background: transparent; color: var(--ivory); font: 700 0.72rem "Antonio", sans-serif; padding: 3px 9px; cursor: pointer; text-transform: uppercase; }
.lang button[aria-pressed="true"] { background: var(--brass); color: var(--oxblood-deep); }
@media (max-width: 760px) { .bar nav a { display: none; } }

/* ---------- hero (oxblood panel) ---------- */
.hero { background: var(--oxblood); color: var(--ivory); min-height: 92vh; display: flex; align-items: center; position: relative; border-bottom: 4px solid var(--brass); overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(0,0,0,.10) 1px, transparent 1px); background-size: 4px 4px; opacity: .6; pointer-events: none; }
.hero .wrap { position: relative; z-index: 2; }
.hero .star { width: 76px; height: 76px; margin-bottom: 18px; }
.hero h1 { font-size: clamp(3.4rem, 13vw, 9.5rem); color: var(--ivory); letter-spacing: 0.005em; }
.hero h1 .j { display: block; color: var(--brass); }
.hero .gloss { font-family: "Spectral", serif; font-style: italic; font-size: clamp(1.1rem, 2.6vw, 1.5rem); color: var(--ivory); opacity: .92; margin-top: 20px; max-width: 34ch; }
.hero .plaque { position: absolute; left: 0; bottom: 26px; z-index: 2; background: var(--brass); color: var(--oxblood-deep); font-family: "Antonio", sans-serif; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.78rem; padding: 6px 16px; }
.buzzer { position: absolute; top: 24px; right: 4%; z-index: 3; width: 96px; height: 96px; border-radius: 50%; border: 3px solid var(--brass-deep); background: radial-gradient(circle at 38% 32%, #e7c87f, var(--brass) 45%, var(--brass-deep) 100%); color: var(--oxblood-deep); font-family: "Antonio", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 1.05rem; cursor: pointer; box-shadow: 0 6px 0 var(--brass-deep), 0 14px 26px -10px rgba(0,0,0,.6); text-decoration: none; display: flex; align-items: center; justify-content: center; transition: transform .08s, box-shadow .08s; }
.buzzer small { display: block; font-size: 0.5rem; opacity: .8; letter-spacing: .1em; }
.buzzer:active, .buzzer.press { transform: translateY(5px); box-shadow: 0 1px 0 var(--brass-deep), 0 6px 14px -8px rgba(0,0,0,.6); }
@media (max-width: 600px) { .buzzer { width: 74px; height: 74px; font-size: 0.85rem; } }

/* ---------- articles ---------- */
.article { padding: 64px 0; border-bottom: 3px solid var(--ink); }
.article:nth-child(even) { background: var(--ivory-2); }
.art-head { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: baseline; margin-bottom: 26px; }
.art-head .clan { font-family: "Antonio", sans-serif; font-weight: 700; color: var(--oxblood); font-size: 1.1rem; letter-spacing: 0.08em; white-space: nowrap; border-bottom: 3px solid var(--oxblood); padding-bottom: 4px; }
.art-head h2 { font-size: clamp(1.9rem, 5vw, 3.2rem); }
.art-body { max-width: 62ch; }
.art-body p { margin-bottom: 14px; }
.art-body p .lead { font-family: "Antonio", sans-serif; color: var(--oxblood); }
.art-body .star-li { list-style: none; margin-top: 8px; }
.art-body .star-li li { position: relative; padding-left: 26px; padding-top: 6px; }
.art-body .star-li li::before { content: "\2605"; position: absolute; left: 0; color: var(--brass-deep); }

/* menu rows */
.dishes { margin-top: 14px; border-top: 2px solid var(--ink); }
.dish { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); }
.dish .sr { font-family: "Spectral", serif; font-style: italic; color: var(--muted); white-space: nowrap; }
.dish .nm { font-family: "Antonio", sans-serif; font-weight: 600; text-transform: uppercase; font-size: 1.2rem; }
.dish .ds { color: var(--muted); font-size: 0.92rem; text-align: right; max-width: 28ch; }
@media (max-width: 620px) { .dish { grid-template-columns: 1fr; gap: 2px; } .dish .ds { text-align: left; max-width: none; } }

/* full-bleed duotone plates */
.plate { width: 100vw; margin-left: calc(50% - 50vw); margin-top: 40px; position: relative; background: var(--oxblood); }
.plate img { width: 100%; aspect-ratio: 21/8; object-fit: cover; opacity: 0.9; mix-blend-mode: multiply; filter: grayscale(.2) contrast(1.05); }
.plate figcaption { position: absolute; left: 24px; bottom: 16px; background: var(--brass); color: var(--oxblood-deep); font-family: "Antonio", sans-serif; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.74rem; padding: 4px 10px; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.duo figure { background: var(--oxblood); }
.duo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; opacity: .92; mix-blend-mode: multiply; }

/* contact / membership stamp */
.contact { padding: 70px 0; }
.stamp-card { border: 3px solid var(--oxblood); padding: 30px 32px; max-width: 760px; }
.stamp-card .top { display: flex; align-items: center; gap: 14px; border-bottom: 2px solid var(--oxblood); padding-bottom: 14px; margin-bottom: 18px; }
.stamp-card .top .star { width: 34px; height: 34px; }
.stamp-card .top h2 { font-size: 1.7rem; color: var(--oxblood); }
.stamp-card dl { display: grid; grid-template-columns: auto 1fr; gap: 12px 20px; }
.stamp-card dt { font-family: "Antonio", sans-serif; text-transform: uppercase; letter-spacing: 0.06em; color: var(--oxblood); padding-top: 3px; }
.stamp-card dd a { color: var(--ink); border-bottom: 1px solid var(--brass-deep); text-decoration: none; }
.note { margin-top: 16px; font-style: italic; color: var(--muted); }
.socials { margin-top: 22px; display: flex; gap: 12px; flex-wrap: wrap; }
.btn { display: inline-block; font-family: "Antonio", sans-serif; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.95rem; padding: 10px 20px; text-decoration: none; border: 2px solid var(--oxblood); color: var(--oxblood); }
.btn:hover { background: var(--oxblood); color: var(--ivory); }
.btn-fill { background: var(--oxblood); color: var(--ivory); }
.map-box { margin-top: 26px; border: 3px solid var(--oxblood); overflow: hidden; min-height: 330px; }
.map-box iframe { width: 100%; height: 100%; min-height: 330px; border: 0; display: block; filter: sepia(.3) saturate(.7) brightness(.95); }

/* footer */
.foot { background: var(--oxblood); color: var(--ivory); padding: 40px 0; text-align: center; }
.foot .star { width: 40px; height: 40px; margin: 0 auto 12px; }
.foot .mark { font-family: "Antonio", sans-serif; font-weight: 700; text-transform: uppercase; font-size: 1.5rem; letter-spacing: 0.04em; }
.foot .meta { font-size: 0.86rem; opacity: .85; margin-top: 8px; }
.foot .meta a { color: var(--brass); }
.disclaimer { margin-top: 18px; font-size: 0.77rem; opacity: .6; max-width: 74ch; margin-inline: auto; line-height: 1.5; }

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