:root {
  --bg: #0A0C12;
  --ink: #ECEAE3;
  --muted: #B7BDCB;
  --dim: #8A92A6;
  --line: rgba(255, 255, 255, 0.14);
  --teal: #6FE3DC;
  --teal-hi: #A5F0EA;
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'Instrument Sans', system-ui, sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

.g-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- header (matches the portfolio header) ---------- */
.g-header {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: 64px; padding: 0 clamp(16px, 9vw, 132px);
  border-bottom: 1px solid var(--line);
  background: rgba(10, 12, 18, 0.72);
  backdrop-filter: blur(10px);
}
.g-brand { display: flex; align-items: baseline; gap: 12px; text-decoration: none; }
.g-name { font-family: var(--serif); font-size: 22px; letter-spacing: -0.01em; }
.g-sub { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); }
.g-nav { display: flex; gap: 22px; }
.g-nav a { font-size: 14px; color: var(--muted); text-decoration: none; padding: 22px 0; border-bottom: 1px solid transparent; transition: color .2s; }
.g-nav a:hover { color: var(--teal-hi); }
.g-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--teal); }

/* ---------- sphere surface ---------- */
.g-main { position: fixed; inset: 0; }
.g-surface { position: absolute; inset: 0; touch-action: none; user-select: none; -webkit-user-select: none; }
#g-canvas { display: block; width: 100%; height: 100%; }
/* soft fades so the header, label row and hint stay readable over the images */
.g-main::before, .g-main::after { content: ''; position: absolute; left: 0; right: 0; z-index: 4; pointer-events: none; transition: opacity .5s; }
.g-main::before { top: 0; height: 170px; background: linear-gradient(var(--bg) 40%, rgba(10, 12, 18, 0)); }
.g-main::after { bottom: 0; height: 110px; background: linear-gradient(rgba(10, 12, 18, 0), rgba(10, 12, 18, 0.9)); }
.is-focused .g-main::before, .is-focused .g-main::after { opacity: 0; }

.g-meta {
  position: absolute; z-index: 5; inset: 88px clamp(16px, 7vw, 100px) auto;
  display: flex; justify-content: space-between;
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim);
  pointer-events: none; transition: opacity .5s;
}
.g-hint, .g-status {
  position: absolute; left: 0; right: 0; bottom: 26px; margin: 0; text-align: center; pointer-events: none;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; color: var(--dim); transition: opacity .5s;
}
.g-hint { z-index: 5; }
.g-status { bottom: 50%; font-size: 13px; z-index: 5; }
.g-status a { pointer-events: auto; color: var(--teal); }
.is-focused .g-meta, .is-focused .g-hint { opacity: 0; }

/* accessible list: visually hidden; a plain grid when WebGL is unavailable */
.g-list { list-style: none; margin: 0; padding: 0; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.g-list button, .g-list a { display: block; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; text-decoration: none; }
.no-webgl .g-list {
  inset: 140px clamp(16px, 7vw, 100px) 0; width: auto; height: auto; clip: auto; overflow: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px 16px; padding-bottom: 40px;
}
.no-webgl .g-list img { display: block; width: 100%; aspect-ratio: 4 / 1; object-fit: cover; border: 1px solid var(--line); }
.no-webgl .g-list .g-li-title { display: block; margin-top: 8px; font-family: var(--serif); font-size: 19px; }
.no-webgl .g-list a:hover .g-li-title { color: var(--teal-hi); }
.no-webgl .g-surface, .no-webgl .g-hint { display: none; }

/* ---------- focused scene: text under the WebGL tile ---------- */
.g-info {
  position: absolute; z-index: 10; left: 50%; bottom: clamp(24px, 7vh, 72px); transform: translateX(-50%);
  width: min(640px, calc(100% - 32px));
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.g-info[hidden] { display: none; }
.g-explore {
  display: inline-flex; gap: 10px; align-items: center; text-decoration: none;
  padding: 13px 26px; border: 1px solid var(--teal); color: var(--teal); background: rgba(10, 12, 18, 0.6);
  font-weight: 600; font-size: 15px; transition: background .2s, color .2s;
}
.g-explore:hover { background: var(--teal); color: var(--bg); }
.g-d-theme { margin: 20px 0 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal); }
.g-d-title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.05; }
.g-d-desc { margin: 10px 0 0; font-size: 14px; line-height: 1.55; color: var(--muted); }

.g-close {
  position: absolute; z-index: 10; top: 88px; right: clamp(16px, 7vw, 100px);
  background: rgba(10, 12, 18, 0.6); border: 1px solid var(--line); padding: 8px 14px; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
.g-close[hidden] { display: none; }
.g-close:hover { color: var(--teal-hi); border-color: var(--teal); }

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  .g-header { padding: 0 16px; }
  .g-sub { display: none; }
  .g-nav { gap: 14px; }
  .g-nav a:not([aria-current]):not(:nth-child(2)) { display: none; }
  .g-meta { inset: 80px 16px auto; }
  .g-close { top: 80px; right: 16px; }
  .g-d-theme { margin-top: 14px; }
}