/* Prime Lounge — QR menu
   Dark charcoal + gold. Mobile-first; scales up to a centred column on desktop. */

:root{
  --bg:#0c0c0e;
  --bg-2:#121215;
  --card:#17171b;
  --card-2:#1c1c21;
  --line:#26262c;
  --line-2:#32323a;
  --txt:#eeeae3;
  --txt-2:#b6b1a8;
  --muted:#88837b;
  --gold:#d4af6e;
  --gold-lo:#b8935a;
  --gold-hi:#efd9a8;
  --gold-soft:rgba(212,175,110,.10);
  --radius:14px;
  --ui:'Jost',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --safe-b:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--txt);
  font-family:var(--ui);
  font-weight:300;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{max-width:100%;display:block}
::selection{background:var(--gold);color:#141414}

/* thin gold scrollbar on desktop */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--bg-2)}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--gold-lo)}

/* ── Language gate ─────────────────────────────────────────────── */
.gate{
  position:fixed;inset:0;z-index:100;
  display:grid;place-items:center;
  background:radial-gradient(120% 90% at 50% 0%,#1a1a1f 0%,var(--bg) 55%);
  padding:32px 22px calc(32px + var(--safe-b));
  overflow:hidden;
  transition:opacity .5s ease,visibility .5s;
}
.gate.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.gate__glow{
  position:absolute;top:-30%;left:50%;transform:translateX(-50%);
  width:min(680px,120vw);aspect-ratio:1;
  background:radial-gradient(circle,rgba(212,175,110,.16) 0%,transparent 62%);
  pointer-events:none;
}
.gate__inner{position:relative;width:100%;max-width:400px;text-align:center;animation:rise .8s cubic-bezier(.2,.7,.3,1) both}
.gate__logo{width:min(268px,74vw);margin:0 auto 26px;filter:drop-shadow(0 6px 26px rgba(212,175,110,.22))}
.gate__rule{display:flex;align-items:center;gap:12px;margin:0 auto 16px;max-width:220px}
.gate__rule span{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold-lo),transparent)}
.gate__rule i{color:var(--gold);font-size:11px;font-style:normal}
.gate__kicker{
  margin:0 0 26px;color:var(--txt-2);font-size:12.5px;font-weight:300;
  letter-spacing:.1em;text-transform:uppercase;
}
.gate__opts{display:grid;gap:11px}

.langbtn{
  position:relative;overflow:hidden;
  display:flex;align-items:baseline;justify-content:center;gap:10px;
  padding:16px 18px;border-radius:12px;
  background:linear-gradient(180deg,var(--card-2),var(--card));
  border:1px solid var(--line);
  transition:border-color .25s,transform .18s,box-shadow .25s;
}
.langbtn b{font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:.02em}
.langbtn small{color:var(--muted);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.langbtn::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(212,175,110,.14) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .6s;
}
.langbtn:hover,.langbtn:active{
  border-color:var(--gold-lo);transform:translateY(-1px);
  box-shadow:0 8px 26px rgba(0,0,0,.5),0 0 0 1px rgba(212,175,110,.14) inset;
}
.langbtn:hover::after{transform:translateX(120%)}
.langbtn:hover b{color:var(--gold-hi)}

@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ── Header ────────────────────────────────────────────────────── */
.app{max-width:760px;margin:0 auto;padding-bottom:calc(30px + var(--safe-b))}

.hdr{
  position:sticky;top:0;z-index:40;
  background:rgba(12,12,14,.9);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.hdr__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 16px 9px}
.hdr__logo{height:26px;width:auto}
.hdr__right{display:flex;align-items:center;gap:9px}

.iconbtn{
  display:grid;place-items:center;width:34px;height:34px;border-radius:9px;
  color:var(--txt-2);border:1px solid var(--line);transition:.2s;
}
.iconbtn:hover,.iconbtn.is-on{color:var(--gold);border-color:var(--gold-lo)}

.langpills{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.langpills button{
  padding:8px 10px;font-size:11px;font-weight:500;letter-spacing:.09em;
  color:var(--muted);transition:.2s;
}
.langpills button+button{border-left:1px solid var(--line)}
.langpills button.is-on{background:var(--gold-soft);color:var(--gold)}
.langpills button:hover{color:var(--gold-hi)}

.searchwrap{position:relative;padding:0 16px 10px}
.searchwrap input{
  width:100%;padding:11px 38px 11px 14px;
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  color:var(--txt);font-family:inherit;font-size:15px;font-weight:300;outline:none;
  transition:border-color .2s;
}
.searchwrap input:focus{border-color:var(--gold-lo)}
.searchwrap input::placeholder{color:var(--muted)}
.searchwrap__x{
  position:absolute;right:24px;top:50%;transform:translateY(-60%);
  color:var(--muted);font-size:14px;padding:6px;
}
.searchwrap__x:hover{color:var(--gold)}

/* back bar (shown on the category and item steps) */
.backbar{padding:0 12px 9px}
.backbtn{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px 6px 9px;border-radius:100px;
  background:var(--card);border:1px solid var(--line);
  font-size:12.5px;font-weight:300;letter-spacing:.04em;color:var(--txt-2);
  transition:.2s;
}
.backbtn svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.backbtn:hover{border-color:var(--gold-lo);color:var(--gold-hi)}

/* ── Content ───────────────────────────────────────────────────── */
.main{padding:6px 16px 8px;min-height:46vh}
.fade{animation:fade .38s ease both}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.cathead{text-align:center;padding:26px 0 6px}
.cathead h2{
  margin:0;font-family:var(--display);font-size:34px;font-weight:600;
  letter-spacing:.01em;color:var(--txt);line-height:1.15;
}
.cathead .orn{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px}
.cathead .orn span{width:38px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-lo))}
.cathead .orn span:last-child{background:linear-gradient(90deg,var(--gold-lo),transparent)}
.cathead .orn i{color:var(--gold);font-size:9px;font-style:normal}

/* ── Category tiles ────────────────────────────────────────────
   Two steps of the drill-down: big 2x2 group tiles, then a denser grid of
   category tiles. Icons are inline <symbol>s tinted with currentColor. */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:14px}
.tiles--lg{gap:12px;margin-top:26px}

.tile{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:11px;
  padding:13px 12px;border-radius:var(--radius);text-align:left;
  background:var(--card);border:1px solid var(--line);
  transition:border-color .22s,background .22s,transform .18s;
}
.tile__ic{
  flex:0 0 auto;width:26px;height:26px;
  fill:none;stroke:var(--gold);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .22s;
}
.tile__t{
  font-size:13px;font-weight:300;letter-spacing:.02em;line-height:1.25;color:var(--txt-2);
  transition:color .22s;
}
.tile:hover,.tile:active{border-color:var(--gold-lo);background:var(--card-2);transform:translateY(-1px)}
.tile:hover .tile__t{color:var(--gold-hi)}
.tile:hover .tile__ic{stroke:var(--gold-hi)}

/* group step: stacked, larger, with a soft gold wash */
.tile--lg{
  flex-direction:column;justify-content:center;gap:12px;
  padding:26px 12px;text-align:center;
  background:linear-gradient(180deg,var(--card-2),var(--card));
}
.tile--lg::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(80% 60% at 50% 0%,rgba(212,175,110,.10),transparent 70%);
  pointer-events:none;
}
.tile--lg .tile__ic{width:40px;height:40px;stroke-width:1.25}
.tile--lg .tile__t{
  font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:.02em;color:var(--txt);
}

.sec{margin-top:26px}
.sec__t{
  display:flex;align-items:center;gap:12px;margin:0 0 12px;
  font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
}
.sec__t::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),transparent)}

.list{display:grid;gap:8px}

.item{
  display:flex;align-items:center;gap:13px;
  padding:12px 14px;border-radius:var(--radius);
  background:var(--card);border:1px solid var(--line);
  transition:border-color .2s,background .2s;
}
.item:hover{border-color:var(--line-2);background:var(--card-2)}
.item--photo{padding:10px 14px 10px 10px}

.item__img{
  flex:0 0 auto;width:66px;height:66px;border-radius:11px;overflow:hidden;
  background:radial-gradient(circle at 50% 40%,#232329,#141418);
  border:1px solid var(--line);cursor:zoom-in;
}
.item__img img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.item__img:hover img{transform:scale(1.07)}

/* stand-in tile for items with no photo, so rows keep a common rhythm */
.item__img--ph{
  cursor:default;
  background:
    url('../img/mark.png') no-repeat center/44% ,
    radial-gradient(circle at 50% 40%,#212127,#151519);
  opacity:.5;
}

.item__body{flex:1;min-width:0}
.item__n{
  margin:0;font-family:var(--display);font-size:19px;font-weight:600;
  letter-spacing:.01em;line-height:1.25;color:var(--txt);
  /* Cormorant defaults to old-style figures; sizes like "5 cl" read cleaner lining. */
  font-variant-numeric:lining-nums;font-feature-settings:'lnum' 1;
}
.item__d{margin:3px 0 0;font-size:12.5px;font-weight:300;line-height:1.45;color:var(--muted)}

.item__p{
  flex:0 0 auto;align-self:center;
  font-size:15px;font-weight:500;letter-spacing:.02em;color:var(--gold);white-space:nowrap;
}
.item__p em{font-style:normal;font-size:11px;color:var(--gold-lo);margin-left:2px}

/* search results */
.res__cat{
  margin:0 0 4px;font-size:10.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}
.empty{text-align:center;padding:60px 20px;color:var(--muted)}
.empty i{display:block;font-size:26px;font-style:normal;color:var(--gold-lo);margin-bottom:10px}

/* ── Footer ────────────────────────────────────────────────────── */
.ftr{text-align:center;padding:44px 20px 10px;border-top:1px solid var(--line);margin:34px 16px 0}
.ftr__mark{width:34px;margin:0 auto 12px;opacity:.85}
.ftr__name{margin:0;font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:.34em;color:var(--gold)}
.ftr__note{margin:9px 0 0;font-size:11px;font-weight:300;letter-spacing:.05em;color:var(--muted)}

/* ── To-top ────────────────────────────────────────────────────── */
.totop{
  position:fixed;right:16px;bottom:calc(18px + var(--safe-b));z-index:35;
  display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:rgba(23,23,27,.92);border:1px solid var(--line-2);color:var(--gold);
  backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;transform:translateY(10px);transition:.28s;
}
.totop.is-on{opacity:1;visibility:visible;transform:none}
.totop:hover{border-color:var(--gold-lo)}

/* ── Lightbox ──────────────────────────────────────────────────── */
/* `display` in an author rule beats the UA's [hidden]{display:none}, so restore it. */
.lb[hidden]{display:none}
.lb{
  position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:26px;
  background:rgba(8,8,10,.94);backdrop-filter:blur(6px);animation:fade .25s both;
}
.lb figure{margin:0;text-align:center;max-width:520px}
.lb img{border-radius:16px;max-height:70vh;width:auto;margin:0 auto}
.lb figcaption{
  margin-top:14px;font-family:var(--display);font-size:22px;font-weight:600;color:var(--gold-hi);
}
.lb__x{
  position:absolute;top:16px;right:18px;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line-2);color:var(--txt-2);font-size:15px;
}
.lb__x:hover{color:var(--gold);border-color:var(--gold-lo)}

/* ── Larger screens ────────────────────────────────────────────── */
@media (min-width:600px){
  .cathead h2{font-size:42px}
  .item__n{font-size:20px}
  .item__img{width:76px;height:76px}
  .sec{display:grid;grid-template-columns:1fr;gap:0}
  .list{grid-template-columns:repeat(2,1fr)}
  .sec__t{grid-column:1/-1}

  /* the wide 2-up tiles leave too much dead space on a desktop column */
  .tiles{grid-template-columns:repeat(3,1fr)}
  .tiles--lg{grid-template-columns:repeat(4,1fr)}
  .tile--lg{padding:30px 12px}
}