:root {
  --geo-ink: #241f1a;
  --geo-muted: #776b5e;
  --geo-paper: #f4eee2;
  --geo-panel: #fffaf1;
  --geo-line: #d9cbbb;
  --geo-accent: #8e2435;
  --geo-gold: #c7a45d;
  --geo-dark: #171310;
  --geo-shadow: 0 28px 74px rgba(0, 0, 0, 0.36);
}

* { box-sizing: border-box; }

html[dir="rtl"] { direction: rtl; }

body {
  margin: 0;
  min-width: 320px;
  color: var(--geo-ink);
  background:
    radial-gradient(circle at 84% 5%, rgba(199, 164, 93, 0.18), transparent 30rem),
    var(--geo-dark);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, audio { font: inherit; }
a { color: inherit; }

.geo-shell {
  width: min(1240px, calc(100% - 32px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 24px 0 48px;
}

.geo-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 18px;
  color: #fffaf1;
  border: 1px solid rgba(255, 250, 241, 0.18);
  border-bottom: 0;
  background: rgba(23, 19, 16, 0.72);
}

.geo-brand {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
  letter-spacing: 0.08em;
  text-decoration: none;
}

.language-nav { display: flex; gap: 6px; }
.language-nav a {
  min-width: 38px;
  padding: 7px 9px;
  color: #eadfce;
  border: 1px solid transparent;
  text-align: center;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.language-nav a[aria-current="page"] { border-color: var(--geo-gold); color: #fff; }

.geo-panel {
  overflow: hidden;
  border: 1px solid #6f6254;
  background: var(--geo-paper);
  box-shadow: var(--geo-shadow);
}

.geo-hero {
  min-height: 660px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
}

.geo-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(38px, 7vw, 90px);
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--geo-accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

h1, h2, h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
}

h1 { max-width: 780px; font-size: clamp(54px, 8vw, 100px); line-height: 0.91; }
.place-title { font-size: clamp(48px, 7vw, 88px); }
.remote-title { font-size: clamp(42px, 6.3vw, 78px); }

.geo-dek {
  max-width: 700px;
  margin: 25px 0 0;
  color: #3f352c;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.42;
}

.geo-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.geo-button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 11px 16px;
  border: 1px solid var(--geo-ink);
  background: transparent;
  color: var(--geo-ink);
  cursor: pointer;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
}
.geo-button.primary { background: var(--geo-ink); color: #fffaf1; }
.geo-button[aria-disabled="true"] { opacity: 0.48; cursor: not-allowed; }

.geo-visual {
  position: relative;
  min-height: 520px;
  display: grid;
  place-items: center;
  padding: clamp(28px, 5vw, 62px);
  background:
    linear-gradient(150deg, rgba(199, 164, 93, 0.15), transparent 45%),
    #15120f;
}
.geo-visual::before {
  content: "";
  position: absolute;
  inset: 24px;
  border: 1px solid rgba(255, 250, 241, 0.16);
  pointer-events: none;
}
.geo-visual img {
  position: relative;
  width: min(100%, 440px);
  max-height: 570px;
  object-fit: contain;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.58);
}

.geo-mark {
  width: min(420px, 84%);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 250, 241, 0.26);
  border-radius: 50%;
  color: #fffaf1;
  text-align: center;
}
.geo-mark span { display: block; color: var(--geo-gold); font-family: Georgia, serif; font-size: clamp(38px, 6vw, 72px); }
.geo-mark small { display: block; margin-top: 10px; letter-spacing: 0.2em; text-transform: uppercase; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 28px;
  color: var(--geo-muted);
  font-size: 13px;
}
.breadcrumb a { text-decoration-color: var(--geo-line); text-underline-offset: 4px; }
.breadcrumb span:not(:last-child)::after { content: "→"; margin-inline-start: 9px; color: var(--geo-accent); }

.identity-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--geo-line);
}
.identity-strip div { padding: 18px 22px; border-inline-end: 1px solid var(--geo-line); }
.identity-strip div:last-child { border-inline-end: 0; }
.identity-strip small { display: block; color: var(--geo-muted); margin-bottom: 5px; }
.identity-strip strong { font-family: Georgia, serif; font-size: 19px; font-weight: 500; }

.modes-section { padding: clamp(32px, 5vw, 64px); border-top: 1px solid var(--geo-line); }
.modes-heading { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 30px; margin-bottom: 28px; }
.modes-heading h2 { font-size: clamp(36px, 5vw, 60px); line-height: 0.98; }
.modes-heading p { margin: 0; color: var(--geo-muted); font-size: 17px; line-height: 1.6; }
.mode-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.mode-card { min-height: 340px; display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--geo-line); background: var(--geo-panel); }
.mode-card.remote { color: #fffaf1; border-color: #52483e; background: #2d261f; }
.mode-number { margin-bottom: auto; color: var(--geo-accent); font-family: Georgia, serif; font-size: 42px; }
.remote .mode-number { color: var(--geo-gold); }
.mode-card h3 { margin-top: 46px; font-size: clamp(30px, 4vw, 46px); }
.mode-tag { margin: 9px 0 0; color: var(--geo-accent); font-size: 12px; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; }
.remote .mode-tag { color: var(--geo-gold); }
.mode-body { margin: 18px 0 0; color: var(--geo-muted); line-height: 1.55; }
.remote .mode-body { color: #e6d8c4; }
.mode-card .geo-button { align-self: flex-start; margin-top: 25px; }
.remote .geo-button { border-color: #fffaf1; color: #fffaf1; }

.geo-note { margin: 18px 0 0; padding: 15px 18px; border-inline-start: 3px solid var(--geo-accent); color: #5b4f43; background: rgba(142, 36, 53, 0.06); }

.remote-shell { width: min(1440px, calc(100% - 32px)); }
.remote-experience { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(360px, 0.84fr); align-items: start; }
.viewer-column { position: sticky; top: 0; min-height: 780px; background: #0f0d0b; }
model-viewer { width: 100%; height: 780px; background: radial-gradient(circle at 48% 42%, #393128 0, #15120f 68%); }
.viewer-toolbar { position: absolute; z-index: 2; inset: 18px 18px auto; display: flex; align-items: center; gap: 8px; pointer-events: none; }
.viewer-tool { min-height: 40px; padding: 9px 13px; border: 1px solid rgba(255,255,255,.45); color: #fff; background: rgba(23,19,16,.86); cursor: pointer; pointer-events: auto; font-weight: 700; }
.viewer-tool.primary { border-color: var(--geo-gold); background: var(--geo-gold); color: #1b1713; }
.viewer-tool:focus-visible, .poi-card:focus-visible { outline: 3px solid #fffaf1; outline-offset: 3px; }
.viewer-model-label { margin-inline-start: auto; padding: 8px 11px; color: #eadfce; background: rgba(23,19,16,.78); font-size: 12px; letter-spacing: .04em; }
.viewer-status { position: absolute; z-index: 2; inset: auto 18px 18px; max-width: calc(100% - 36px); margin: 0; padding: 10px 13px; color: #eadfce; background: rgba(23,19,16,.88); font-size: 13px; }
.viewer-status[data-state="ready"] { border-inline-start: 3px solid var(--geo-gold); }
.remote-guide { min-width: 0; padding: clamp(28px, 4vw, 54px); }
.remote-intro .breadcrumb { margin-bottom: 42px; }
.remote-intro .geo-dek { font-size: clamp(18px, 1.7vw, 23px); }
.remote-title { max-width: 650px; font-size: clamp(42px, 5.2vw, 72px); line-height: .96; }
.poi-browser, .poi-detail, .audio-panel, .xr-panel { margin-top: 38px; padding-top: 30px; border-top: 1px solid var(--geo-line); }
.section-heading { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; align-items: start; }
.section-heading.compact { grid-template-columns: 42px minmax(0, 1fr); }
.section-heading h2 { font-size: clamp(27px, 3vw, 38px); line-height: 1.05; }
.section-heading p:not(.section-index) { margin: 8px 0 0; color: var(--geo-muted); line-height: 1.5; }
.section-index { margin: 4px 0 0; color: var(--geo-accent); font-family: Georgia, serif; font-size: 18px; }
.poi-list { display: grid; gap: 8px; margin-top: 20px; }
.poi-card { width: 100%; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 13px; align-items: center; padding: 15px; border: 1px solid var(--geo-line); color: var(--geo-ink); background: var(--geo-panel); cursor: pointer; text-align: start; }
.poi-card:hover { border-color: var(--geo-gold); }
.poi-card.is-active { border-color: var(--geo-ink); color: #fffaf1; background: var(--geo-ink); }
.poi-number { color: var(--geo-accent); font-family: Georgia, serif; font-size: 20px; }
.poi-card.is-active .poi-number { color: var(--geo-gold); }
.poi-card small, .poi-card strong { display: block; }
.poi-card small { margin-bottom: 4px; color: var(--geo-muted); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.poi-card.is-active small { color: #d9cbbb; }
.poi-card strong { font-family: Georgia, serif; font-size: 19px; font-weight: 500; }
.poi-type { margin: 0 0 7px; color: var(--geo-accent); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.poi-artist { margin: 20px 0 0; color: var(--geo-accent); font-weight: 750; }
.poi-description { margin: 18px 0 0; color: #3f352c; font-family: Georgia, "Times New Roman", serif; font-size: 18px; line-height: 1.55; }
.calibration-note { margin: 18px 0 0; padding: 12px 14px; border-inline-start: 3px solid var(--geo-gold); color: var(--geo-muted); background: rgba(199,164,93,.09); font-size: 12px; line-height: 1.45; }
.poi-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.poi-action { min-height: 40px; font-size: 13px; }
.audio-panel h2, .xr-panel h2 { font-size: 29px; }
.audio-panel audio { width: 100%; margin-top: 18px; }
.audio-panel audio[hidden] { display: none; }
.xr-panel .geo-actions { display: grid; margin-top: 20px; }
.remote-back { width: 100%; margin-top: 34px; }
.prototype-note { margin-top: 24px; color: var(--geo-muted); font-size: 13px; line-height: 1.5; }

.geo-footer { padding: 18px 4px 0; color: #cdbfab; font-size: 12px; }
[data-geo-status][data-state="error"], [data-state="error"] { color: #a92f42; }

@media (max-width: 880px) {
  .geo-hero, .remote-experience { grid-template-columns: 1fr; }
  .geo-hero-copy { min-height: 520px; }
  .geo-visual { min-height: 480px; }
  .modes-heading, .mode-grid { grid-template-columns: 1fr; }
  .viewer-column { position: relative; min-height: 560px; }
  model-viewer { height: 560px; }
}

@media (max-width: 560px) {
  .geo-shell { width: min(100% - 18px, 1240px); padding-top: 9px; }
  .geo-topbar { padding: 11px 12px; }
  .geo-brand { font-size: 17px; }
  h1 { font-size: clamp(48px, 17vw, 72px); }
  .geo-hero-copy, .modes-section, .remote-guide { padding: 28px 22px; }
  .identity-strip { grid-template-columns: 1fr; }
  .identity-strip div { border-inline-end: 0; border-bottom: 1px solid var(--geo-line); }
  .mode-card { min-height: 310px; padding: 22px; }
  .viewer-column { min-height: 430px; }
  model-viewer { height: 430px; }
  .viewer-toolbar { inset: 10px 10px auto; flex-wrap: wrap; }
  .viewer-tool { min-height: 38px; padding: 8px 10px; font-size: 12px; }
  .viewer-model-label { order: 3; width: 100%; margin-inline-start: 0; }
  .viewer-status { inset: auto 10px 10px; max-width: calc(100% - 20px); }
  .remote-title { font-size: clamp(40px, 13vw, 58px); }
  .remote-intro .breadcrumb { margin-bottom: 30px; }
  .poi-list { grid-auto-flow: column; grid-auto-columns: minmax(220px, 84%); overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; padding-bottom: 6px; }
  .poi-card { scroll-snap-align: start; }
  .section-heading, .section-heading.compact { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; }
  .poi-description { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}