:root{
  --ink:#16130f;
  --paper:#f3ede2;
  --paper-dim:#cfc6b6;
  --gold:#c8a96a;
  --gold-soft:#d8c08a;
  --bg:#0c0a08;
  --sans:'Jost',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --serif:'Cormorant Garamond',Georgia,serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--paper);
  font-family:var(--sans);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button{font-family:inherit}
.hidden{display:none !important}

/* ---------- scene ---------- */
#scene{position:fixed;inset:0;z-index:0}
#scene canvas{display:block;width:100%;height:100%;touch-action:none}

/* ---------- overlays ---------- */
.overlay{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center}

/* ---------- intro ---------- */
.intro{
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(40,33,24,.55), transparent 60%),
    linear-gradient(180deg,#100d09 0%,#1a150e 55%,#0c0a08 100%);
  overflow:hidden;
}
.intro .scrim{
  position:absolute;inset:0;z-index:0;opacity:.10;pointer-events:none;
  background-image:url('thumbs/p07.jpg'),url('thumbs/p22.jpg');
  background-position:8% 50%,92% 50%;
  background-size:34vmin,30vmin;
  background-repeat:no-repeat;
  filter:grayscale(.5) contrast(1.05);
  -webkit-mask-image:radial-gradient(60% 60% at 50% 50%,transparent,#000);
          mask-image:radial-gradient(60% 60% at 50% 50%,transparent,#000);
}
.intro-inner{position:relative;z-index:1;text-align:center;padding:6vmin 24px;max-width:760px}
.eyebrow{
  font-size:.78rem;letter-spacing:.55em;text-transform:uppercase;
  color:var(--gold);margin:0 0 1.4rem;padding-left:.55em;font-weight:400;
}
.brand{
  font-family:var(--serif);font-weight:400;line-height:.92;margin:0;
  font-size:clamp(3.4rem,13vw,8.5rem);letter-spacing:.01em;color:var(--paper);
}
.brand em{font-style:italic;color:var(--gold-soft)}
.tagline{
  font-family:var(--serif);font-style:italic;font-size:clamp(1.05rem,2.4vw,1.5rem);
  color:var(--paper-dim);margin:1.6rem auto 2.6rem;max-width:34ch;
}
.intro-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.intro-hint{margin:2.2rem auto 0;color:rgba(207,198,182,.6);font-size:.82rem;letter-spacing:.04em}

/* ---------- buttons ---------- */
.btn{
  cursor:pointer;border:1px solid transparent;border-radius:999px;
  padding:.95rem 2rem;font-size:.92rem;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;
  transition:transform .18s ease,background .25s ease,color .25s ease,border-color .25s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--gold);color:#1a140a;font-weight:500}
.btn-primary:hover{background:var(--gold-soft)}
.btn-ghost{background:transparent;color:var(--paper);border-color:rgba(243,237,226,.35)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-soft)}

/* ---------- loader ---------- */
.loader,.nowebgl{background:#0c0a08;flex-direction:column;z-index:30}
.loader-inner{text-align:center;padding:24px;max-width:420px}
.loader-title{font-family:var(--serif);font-size:1.7rem;margin:0 0 1.3rem;color:var(--paper)}
.bar{width:min(70vw,340px);height:2px;background:rgba(243,237,226,.18);border-radius:2px;overflow:hidden;margin:0 auto}
.bar span{display:block;height:100%;width:0;background:var(--gold);transition:width .25s ease}
.loader-pct{margin:1rem 0 0;color:var(--paper-dim);font-size:.8rem;letter-spacing:.25em}

/* ---------- HUD ---------- */
.hud{position:fixed;inset:0;z-index:15;pointer-events:none}
.hud-top{
  position:absolute;top:0;left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(16px,4vw,34px);
  background:linear-gradient(180deg,rgba(10,8,6,.6),transparent);
}
.hud-brand{
  pointer-events:auto;background:none;border:0;cursor:pointer;
  font-family:var(--serif);font-size:1.25rem;letter-spacing:.04em;color:var(--paper);
}
.hud-actions{display:flex;gap:9px}
.chip{
  pointer-events:auto;cursor:pointer;
  background:rgba(18,15,11,.55);color:var(--paper);
  border:1px solid rgba(243,237,226,.22);border-radius:999px;
  padding:.5rem 1.05rem;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  backdrop-filter:blur(6px);transition:border-color .2s,color .2s,background .2s;
}
.chip:hover{border-color:var(--gold);color:var(--gold-soft)}
.controls-hint{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  margin:0;color:rgba(243,237,226,.62);font-size:.76rem;letter-spacing:.1em;
  text-align:center;white-space:nowrap;
  text-shadow:0 1px 6px rgba(0,0,0,.7);transition:opacity .5s ease;
}

/* reticle */
.reticle{
  position:absolute;top:50%;left:50%;width:7px;height:7px;
  transform:translate(-50%,-50%);border-radius:50%;
  background:rgba(243,237,226,.5);box-shadow:0 0 0 1px rgba(0,0,0,.35);
  transition:width .15s,height .15s,background .15s;opacity:0;
}
.reticle.show{opacity:1}
.reticle.hot{width:16px;height:16px;background:transparent;border:1.5px solid var(--gold-soft);box-shadow:0 0 12px rgba(200,169,106,.6)}
.look-hint{
  position:absolute;top:calc(50% + 22px);left:50%;transform:translateX(-50%);
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft);
  opacity:0;transition:opacity .2s;text-shadow:0 1px 6px rgba(0,0,0,.8);white-space:nowrap;
}
.look-hint.show{opacity:1}

/* joystick (mobile) */
.joystick{
  position:absolute;left:max(18px,env(safe-area-inset-left));bottom:max(26px,env(safe-area-inset-bottom));
  width:120px;height:120px;border-radius:50%;
  background:rgba(18,15,11,.35);border:1px solid rgba(243,237,226,.18);
  pointer-events:auto;touch-action:none;backdrop-filter:blur(3px);
}
.joystick span{
  position:absolute;top:50%;left:50%;width:50px;height:50px;margin:-25px 0 0 -25px;
  border-radius:50%;background:rgba(200,169,106,.85);box-shadow:0 4px 14px rgba(0,0,0,.4);
  transition:transform .05s linear;
}
.touch-look-hint{
  position:absolute;right:24px;bottom:60px;color:rgba(243,237,226,.5);
  font-size:.72rem;letter-spacing:.12em;text-shadow:0 1px 4px #000;
}

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  background:rgba(7,6,4,.94);backdrop-filter:blur(8px);
  opacity:0;transition:opacity .28s ease;
}
.lightbox.show{opacity:1}
.lb-figure{margin:0;max-width:92vw;max-height:90vh;display:flex;flex-direction:column;align-items:center;gap:14px}
#lbImg{
  max-width:92vw;max-height:82vh;object-fit:contain;
  box-shadow:0 30px 80px rgba(0,0,0,.6);border-radius:2px;
  background:#1a1714;
}
.lb-cap{color:var(--paper-dim);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase}
.lb-close{
  position:absolute;top:18px;right:20px;z-index:2;
  width:46px;height:46px;border-radius:50%;cursor:pointer;
  background:rgba(243,237,226,.08);color:var(--paper);border:1px solid rgba(243,237,226,.2);
  font-size:1.05rem;transition:background .2s,border-color .2s;
}
.lb-close:hover{background:rgba(243,237,226,.16);border-color:var(--gold)}
.lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:58px;height:58px;border-radius:50%;cursor:pointer;
  background:rgba(243,237,226,.06);color:var(--paper);border:1px solid rgba(243,237,226,.16);
  font-size:2rem;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:background .2s,border-color .2s;
}
.lb-nav:hover{background:rgba(243,237,226,.16);border-color:var(--gold)}
.lb-prev{left:max(12px,2vw)}
.lb-next{right:max(12px,2vw)}

/* ---------- grid view ---------- */
.grid{background:#0c0a08;flex-direction:column;align-items:stretch;overflow-y:auto;z-index:35}
.grid-head{
  position:sticky;top:0;z-index:2;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px clamp(16px,4vw,40px);
  background:linear-gradient(180deg,#0c0a08 60%,transparent);
}
.grid-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,4vw,2.4rem);margin:0;letter-spacing:.04em}
.masonry{
  columns:4 240px;column-gap:14px;
  padding:0 clamp(16px,4vw,40px) 60px;
}
.masonry figure{margin:0 0 14px;break-inside:avoid;cursor:pointer;position:relative;overflow:hidden;border-radius:3px;background:#1a1714}
.masonry img{display:block;width:100%;height:auto;transition:transform .5s ease,filter .5s ease;filter:saturate(.92)}
.masonry figure:hover img{transform:scale(1.04);filter:saturate(1.05)}
.masonry figure::after{
  content:'';position:absolute;inset:0;
  box-shadow:inset 0 0 0 1px rgba(243,237,226,0);transition:box-shadow .3s;
}
.masonry figure:hover::after{box-shadow:inset 0 0 0 1px rgba(200,169,106,.6)}

/* ---------- info ---------- */
.info{background:rgba(8,7,5,.92);backdrop-filter:blur(8px);z-index:38}
.info-card{
  position:relative;max-width:560px;width:92vw;max-height:88vh;overflow-y:auto;
  background:linear-gradient(180deg,#171310,#100d0a);
  border:1px solid rgba(200,169,106,.25);border-radius:8px;
  padding:clamp(26px,5vw,42px);
}
.info-close{position:absolute;top:16px;right:16px}
.info-card h2{font-family:var(--serif);font-weight:400;font-size:2.2rem;margin:0 0 .4rem;letter-spacing:.03em}
.info-lead{color:var(--paper-dim);margin:0 0 1.8rem;line-height:1.6}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:2rem}
.info-grid h3{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 .7rem}
.info-grid ul{list-style:none;margin:0;padding:0}
.info-grid li{color:var(--paper-dim);font-size:.92rem;padding:.28rem 0;border-bottom:1px solid rgba(243,237,226,.06)}
.info-actions{display:flex;gap:10px;flex-wrap:wrap}
.info-actions .btn{padding:.8rem 1.5rem;font-size:.78rem}
.info-foot{margin:1.6rem 0 0;color:rgba(243,237,226,.45);font-size:.82rem;letter-spacing:.1em}

/* packages + sections */
.info-sec{margin-bottom:1.9rem}
.info-sec h3{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 .8rem}
.pkg-list{display:flex;flex-direction:column}
.pkg{padding:.6rem 0;border-bottom:1px solid rgba(243,237,226,.06)}
.pkg-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.pkg-head span:first-child{color:var(--paper);font-size:1rem;letter-spacing:.02em}
.pkg .price{color:var(--gold);font-family:var(--serif);font-size:1.1rem;white-space:nowrap}
.pkg .detail{margin:.25rem 0 0;color:var(--paper-dim);font-size:.82rem;line-height:1.5}
.info-pay{color:var(--paper-dim);font-size:.9rem;line-height:1.7;margin:0}
.info-pay b{color:var(--paper);font-weight:500}

@media (max-width:560px){
  .info-grid{grid-template-columns:1fr}
  .masonry{columns:2 150px}
  .controls-hint{font-size:.68rem;white-space:normal;width:90%}
}