/* ===== Menu button + full-screen menu + prev/next tour (all pages) ===== */

/* ---------- button (and its twin: the close button inside the menu) ---------- */
.xp-btn,.xp-x{position:relative;display:inline-flex;align-items:center;gap:12px;height:44px;padding:0 18px 0 16px;isolation:isolate;
  font:600 11px var(--f-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-bright);
  background:rgba(10,10,10,.62);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);transition:color .35s}
.xp-btn::before,.xp-x::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--gold-bright),var(--gold) 55%,var(--bronze));transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.76,0,.24,1)}
.xp-btn::after,.xp-x::after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:linear-gradient(var(--gold),var(--gold)) 0 0/100% 1px no-repeat,linear-gradient(var(--gold),var(--gold)) 0 100%/100% 1px no-repeat,linear-gradient(var(--gold),var(--gold)) 0 0/1px 100% no-repeat,linear-gradient(var(--gold),var(--gold)) 100% 0/1px 100% no-repeat,
  linear-gradient(135deg,transparent 6.5px,var(--gold) 6.5px 7.5px,transparent 7.5px) 0 0/10px 10px no-repeat,linear-gradient(135deg,transparent 2.5px,var(--gold) 2.5px 3.5px,transparent 3.5px) 100% 100%/10px 10px no-repeat;opacity:.5;transition:opacity .3s}
.xp-btn:hover,.xp-x:hover,.xp-btn:focus-visible,.xp-x:focus-visible{color:#0A0A0A}
.xp-btn:hover::before,.xp-x:hover::before,.xp-btn:focus-visible::before,.xp-x:focus-visible::before{transform:scaleX(1)}
.xp-btn:hover::after,.xp-x:hover::after{opacity:1}
.xp-btn:focus-visible,.xp-x:focus-visible{outline:none}
.xp-burger{display:flex;flex-direction:column;gap:4px;width:18px}
.xp-burger i{display:block;height:1.5px;background:currentColor;transition:transform .45s cubic-bezier(.76,0,.24,1),width .45s cubic-bezier(.76,0,.24,1)}
.xp-burger i:nth-child(1){width:100%}.xp-burger i:nth-child(2){width:62%;margin-left:auto}.xp-burger i:nth-child(3){width:82%}
.xp-btn:hover .xp-burger i,.xp-all:hover .xp-burger i{width:100%}
.xp-btn:hover .xp-burger i:nth-child(2){transform:translateX(-3px)}
.xp-xi{position:relative;width:16px;height:16px}
.xp-xi i{position:absolute;left:0;right:0;top:50%;height:1.5px;background:currentColor;transform:rotate(45deg);transition:transform .45s cubic-bezier(.76,0,.24,1)}
.xp-xi i+i{transform:rotate(-45deg)}
.xp-x:hover .xp-xi i{transform:rotate(135deg)}.xp-x:hover .xp-xi i+i{transform:rotate(45deg)}
html.xp-open #nav .xp-btn{visibility:hidden}

/* ---------- menu ---------- */
.xp{position:fixed;inset:0;z-index:1200;visibility:hidden;background:#070707;
  background-image:radial-gradient(900px 600px at 0% 100%,rgba(216,180,120,.10),transparent 60%),radial-gradient(700px 500px at 100% 0%,rgba(216,180,120,.07),transparent 60%);
  clip-path:inset(0 0 100% 0);transition:clip-path .7s cubic-bezier(.76,0,.24,1),visibility 0s linear .7s}
.xp::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;
  background-image:linear-gradient(rgba(216,180,120,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(216,180,120,.035) 1px,transparent 1px);background-size:80px 80px;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%)}
html.xp-open .xp,.xp:not(.xp-js):target{visibility:visible;clip-path:inset(0);transition:clip-path .7s cubic-bezier(.76,0,.24,1)}
html.xp-lock:root,html.xp-lock body{overflow:hidden!important}
.xp-in{position:relative;height:100%;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;padding:0 max(24px,calc((100vw - 1320px)/2))}
.xp-top{display:flex;align-items:center;gap:20px;padding:18px 0;border-bottom:1px solid rgba(216,180,120,.14)}
.xp-top .brand{margin-right:auto}
.xp-search{display:flex;align-items:center;gap:10px;width:min(340px,40vw);height:44px;padding:0 4px;border-bottom:1px solid rgba(216,180,120,.3);transition:border-color .25s}
.xp-search:focus-within{border-color:var(--gold-bright)}
.xp-search>span{position:relative;width:13px;height:13px;flex:0 0 13px}
.xp-search>span i{position:absolute;inset:0 3px 3px 0;border:1.5px solid var(--gold);border-radius:50%}
.xp-search>span::after{content:"";position:absolute;right:0;bottom:1px;width:5px;height:1.5px;background:var(--gold);transform:rotate(45deg)}
.xp-search input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--text);font:500 14px var(--f-sans)}
.xp-search input::placeholder{color:#6d6d73}
.xp-search input::-webkit-search-cancel-button{filter:invert(.6)}
.xp kbd{font:600 10px var(--f-mono);color:var(--text-muted);border:1px solid #2c2c30;border-radius:4px;padding:1px 6px}

.xp-body{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,5vw,90px);min-height:0;padding-top:clamp(24px,4vh,48px)}
.xp-railw{min-height:0;display:flex;flex-direction:column}
.xp-rk{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--text-muted);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.xp-rk::before{content:"";width:6px;height:6px;border-radius:50%;background:#5fe39a;box-shadow:0 0 8px #5fe39a}
.xp-rail{list-style:none;overflow:auto;scrollbar-width:none}
.xp-rail::-webkit-scrollbar{display:none}
.xp-cat{position:relative;display:flex;align-items:flex-start;gap:16px;width:100%;padding:clamp(6px,1.2vh,12px) 0;background:none;border:0;text-align:left;color:rgba(236,236,238,.26);transition:color .35s}
.xp-cn{font-size:11px;letter-spacing:.1em;color:var(--gold);opacity:.55;padding-top:.9em;min-width:22px;transition:opacity .3s}
.xp-cname{position:relative;font-stretch:125%;font-weight:800;font-size:clamp(28px,2.9vw,50px);line-height:1.05;letter-spacing:-.035em;white-space:nowrap;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.xp-cname::after{content:"";position:absolute;left:0;right:0;bottom:-.08em;height:2px;background:var(--gold-bright);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.76,0,.24,1)}
.xp-cat sup{font-size:10px;color:var(--text-muted);padding-top:.4em;letter-spacing:.06em}
.xp-cat:hover{color:rgba(236,236,238,.7)}
.xp-cat:hover .xp-cname{transform:translateX(6px)}
.xp-cat.on{color:var(--text)}
.xp-cat.on .xp-cn{opacity:1}
.xp-cat.on .xp-cname{transform:translateX(10px)}
.xp-cat.on .xp-cname::after{transform:scaleX(1)}
.xp-cat:focus-visible{outline:none}.xp-cat:focus-visible .xp-cname{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:.2em}
.xp-searching .xp-cat{opacity:.3}

.xp-panes{min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 10px 24px 0;scrollbar-width:thin;scrollbar-color:rgba(216,180,120,.3) transparent}
.xp-js .xp-pane:not(.on){display:none}
.xp-js.xp-searching .xp-pane{display:block}.xp-js.xp-searching .xp-pane.xp-empty{display:none}
.xp-pane+.xp-pane{margin-top:38px}
.xp-ph{position:relative;padding-bottom:18px}
.xp-big{position:absolute;right:0;top:-.18em;font-stretch:125%;font-weight:800;font-size:clamp(80px,9vw,150px);line-height:1;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px rgba(216,180,120,.16);pointer-events:none;user-select:none}
.xp-pk{display:flex;gap:14px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.xp-pk span+span{color:var(--text-muted)}
.xp-ph h2{position:relative;max-width:26ch;margin-top:10px;font-family:var(--f-serif);font-style:italic;font-weight:400;font-stretch:100%;font-size:clamp(22px,2vw,30px);line-height:1.2;letter-spacing:0;color:rgba(236,236,238,.85)}
.xp-list{border-top:1px solid rgba(216,180,120,.2)}
.xp-card{position:relative;border-bottom:1px solid rgba(56,56,60,.75)}
.xp-card::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(216,180,120,.09),transparent 70%);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.76,0,.24,1);pointer-events:none}
.xp-card:hover::before,.xp-card:focus-within::before{transform:scaleX(1)}
.xp-card.xp-hide{display:none}
.xp-main{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) auto 22px;gap:16px;align-items:baseline;padding:18px 6px 18px 0;color:var(--text)}
.xp-n{font-size:10.5px;letter-spacing:.1em;color:var(--gold);opacity:.7}
.xp-t{display:flex;flex-direction:column;gap:5px;min-width:0}
.xp-t b{font-stretch:118%;font-weight:800;font-size:clamp(18px,1.55vw,23px);letter-spacing:-.015em;line-height:1.15;transition:color .3s}
.xp-t small{font-size:13.5px;line-height:1.5;color:rgba(236,236,238,.55)}
.xp-meta{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);white-space:nowrap}
.xp-here{font-size:9px;font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:#0A0A0A;background:var(--gold-bright);padding:3px 8px;white-space:nowrap;clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
.xp-arr{font-size:16px;color:var(--gold);justify-self:end;transition:transform .45s cubic-bezier(.16,1,.3,1),color .3s}
.xp-card:hover .xp-t b{color:var(--gold-bright)}
.xp-card:hover .xp-arr{transform:translateX(5px);color:var(--gold-bright)}
.xp-card.here .xp-t b{color:var(--gold-bright)}
.xp-chips{position:relative;display:flex;flex-wrap:wrap;gap:6px 16px;padding:0 0 16px 50px;margin-top:-6px}
.xp-chips a{font:500 10.5px var(--f-mono);letter-spacing:.06em;color:var(--text-muted);transition:color .2s}
.xp-chips a::before{content:"▸ ";color:var(--gold)}
.xp-chips a:hover{color:var(--gold-bright)}
.xp-none{display:none;padding:40px 0;font:500 13px var(--f-mono);color:var(--text-muted)}.xp-none.on{display:block}

.xp-foot{display:flex;align-items:center;gap:24px;padding:16px 96px 18px 0;border-top:1px solid rgba(216,180,120,.14);font:500 11px var(--f-mono);letter-spacing:.12em;text-transform:uppercase}
.xp-foot a{color:var(--text-muted);transition:color .2s}.xp-foot a:hover,.xp-foot a.gold{color:var(--gold-bright)}
.xp-soc{display:flex;gap:22px;flex-wrap:wrap;margin-left:auto}
.xp-soc a:first-child{text-transform:none;letter-spacing:.04em}
.xp-keys{color:#55555b;white-space:nowrap}

/* entrance (only when motion is OK) */
@media (prefers-reduced-motion:no-preference){
  .xp-rail li,.xp-rk,.xp-ph,.xp-foot,.xp-top>*{opacity:0;transform:translateY(24px);transition:opacity .5s ease,transform .7s cubic-bezier(.16,1,.3,1)}
  html.xp-open .xp-rail li,html.xp-open .xp-rk,html.xp-open .xp-ph,html.xp-open .xp-foot,html.xp-open .xp-top>*{opacity:1;transform:none}
  html.xp-open .xp-top>*{transition-delay:.3s}html.xp-open .xp-rk{transition-delay:.32s}
  html.xp-open .xp-rail li:nth-child(1){transition-delay:.36s}html.xp-open .xp-rail li:nth-child(2){transition-delay:.41s}html.xp-open .xp-rail li:nth-child(3){transition-delay:.46s}html.xp-open .xp-rail li:nth-child(4){transition-delay:.51s}html.xp-open .xp-rail li:nth-child(5){transition-delay:.56s}
  html.xp-open .xp-ph{transition-delay:.45s}html.xp-open .xp-foot{transition-delay:.6s}
  .xp-js .xp-pane.on .xp-card{animation:xpIn .6s cubic-bezier(.16,1,.3,1) both}
  .xp-pane.on .xp-card:nth-child(2){animation-delay:.04s}.xp-pane.on .xp-card:nth-child(3){animation-delay:.08s}.xp-pane.on .xp-card:nth-child(4){animation-delay:.12s}.xp-pane.on .xp-card:nth-child(5){animation-delay:.16s}.xp-pane.on .xp-card:nth-child(6){animation-delay:.2s}.xp-pane.on .xp-card:nth-child(7){animation-delay:.24s}
}
@media (prefers-reduced-motion:reduce){.xp{clip-path:none;opacity:0;transition:opacity .2s,visibility 0s .2s}html.xp-open .xp{opacity:1;transition:opacity .2s}}
@keyframes xpIn{from{opacity:0;transform:translateY(18px)}}

/* ---------- prev / next tour ---------- */
.xp-tour{position:relative;z-index:2;padding:30px 0 10px}
.xp-tour-in{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:stretch}
.xp-prev,.xp-next{display:flex;flex-direction:column;gap:6px;padding:24px 26px;background:#0d0d0e;box-shadow:inset 0 0 0 1px rgba(56,56,60,.9);transition:box-shadow .3s,background .3s;min-width:0;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.xp-next{text-align:right;align-items:flex-end}
.xp-prev:hover,.xp-next:hover{box-shadow:inset 0 0 0 1px rgba(240,204,132,.6);background:linear-gradient(160deg,rgba(216,180,120,.1),transparent 70%),#0d0d0e}
.xp-tour small{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.xp-tour b{font-stretch:120%;font-weight:800;font-size:clamp(20px,2.2vw,30px);letter-spacing:-.02em;line-height:1.1}
.xp-tour span:not(.xp-burger){font:500 10.5px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.xp-all{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:18px 26px;border:1px dashed rgba(216,180,120,.4);color:var(--gold-bright);transition:border-color .3s,background .3s}
.xp-all:hover{border-style:solid;border-color:var(--gold-bright);background:rgba(216,180,120,.08)}
.xp-all span:not(.xp-burger){color:var(--gold-bright)!important}

/* ---------- tablet / phone ---------- */
@media (max-width:1000px){
  .xp-in{padding:0 20px}
  .xp-top{flex-wrap:wrap;gap:12px;padding:14px 0 12px}
  .xp-search{order:3;width:100%}
  .xp-body{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:18px;padding-top:16px}
  .xp-rk{display:none}
  .xp-rail{display:flex;gap:22px;overflow-x:auto;margin:0 -20px;padding:0 20px 6px}
  .xp-cat{width:auto;flex:0 0 auto;gap:6px;padding:4px 0 8px;white-space:nowrap}
  .xp-cname{font-size:24px}.xp-cn{display:none}.xp-cat sup{padding-top:0}
  .xp-cat.on .xp-cname,.xp-cat:hover .xp-cname{transform:none}
  .xp-big{font-size:84px}
  .xp-foot{flex-wrap:wrap;gap:10px 18px;padding:12px 84px 14px 0}.xp-keys{display:none}.xp-soc{margin-left:0;gap:16px}
}
@media (max-width:640px){
  .xp-main{grid-template-columns:26px minmax(0,1fr) 16px;gap:10px}
  .xp-meta,.xp-here{grid-column:2;grid-row:2;justify-self:start;margin-top:-2px}
  .xp-arr{grid-column:3;grid-row:1}
  .xp-chips{padding-left:36px}
  .xp-top .brand-txt small{display:none}
  .xp-soc a:not(.gold):not(:first-child){display:none}
  .xp-tour-in{grid-template-columns:1fr 1fr}.xp-all{grid-column:1/-1;order:3;flex-direction:row}
  .xp-prev,.xp-next{padding:18px}
}