/* Reliquaire — shared system: relics shown in lit, arched niches. */
:root {
  --ground: #0b0b0c;
  --niche: #141416;
  --niche-2: #1a1a1d;
  --rim: #2a2a2e;
  --bone: #ecebe6;          /* 17:1 on ground */
  --mute: #9d9a91;          /* 7.3:1 on ground */
  --gold: #ecebe6;          /* accent is bone now: monochrome system around logo C */
  --gold-line: rgba(236, 235, 230, .26);
  --f-ui: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-wide: "Syncopate", "Arial Black", sans-serif;
  --pad: clamp(16px, 3.2vw, 44px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --arch: 14px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; scrollbar-color: #3a3a3f var(--ground); }
body { background: var(--ground); color: var(--bone); font: 400 15px/1.55 var(--f-ui); -webkit-font-smoothing: antialiased; }
::selection { background: var(--gold); color: #000; }
input, select { caret-color: var(--gold); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--ground); }
::-webkit-scrollbar-thumb { background: #34343a; border-radius: 10px; border: 2px solid var(--ground); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 1.5px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.label { font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }

/* ---------- header ---------- */
.head { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px var(--pad); background: rgba(11, 11, 12, .82); backdrop-filter: blur(10px); border-bottom: 1px solid #1d1d20; }
.wordmark { font-family: var(--f-wide); font-weight: 700; font-size: 15px; letter-spacing: .34em; text-transform: uppercase; color: var(--bone); padding: 6px 0; }
.wordmark:hover { opacity: .8; }
.wide { font-family: var(--f-wide); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.head nav { display: flex; align-items: center; gap: 28px; font-size: 13px; }
.head nav a { color: var(--mute); transition: color .2s; }
.head nav a:hover { color: var(--bone); }
.head nav .pill { color: #000; background: var(--bone); padding: 9px 18px; border-radius: 999px; font-weight: 500; }
.head nav .pill:hover { color: #000; background: #fff; }

/* ---------- niche (the display case) ---------- */
.niche {
  position: relative; overflow: hidden;
  /* flat display panel, faint top light */
  border-radius: var(--arch);
  background:
    radial-gradient(60% 40% at 50% 18%, rgba(255, 255, 255, .06), transparent 70%),
    linear-gradient(180deg, var(--niche-2), var(--niche) 60%);
  box-shadow: inset 0 0 0 1px var(--rim), inset 0 -40px 60px -30px rgba(0, 0, 0, .6);
}

/* image track: hover-slide on desktop, swipe on touch */
.track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.track::-webkit-scrollbar { display: none; }
.track > * { flex: 0 0 100%; height: 100%; position: relative; scroll-snap-align: center; }
.track img { position: absolute; top: 11%; bottom: 7%; left: 12%; right: 12%; width: 76%; height: 82%; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .55)); }
.track .detail-shot img { inset: 0; width: 100%; height: 100%; object-fit: cover; filter: none; }
.dots { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(236, 235, 230, .28); transition: background-color .25s, width .25s; }
.dots i.on { background: var(--bone); width: 14px; border-radius: 3px; }

/* ---------- footer ---------- */
.footmark { margin-top: clamp(96px, 12vw, 160px); font-family: var(--f-wide); font-weight: 700; text-transform: uppercase; text-align: center; letter-spacing: .12em; font-size: clamp(30px, 7.6vw, 118px); line-height: 1; color: #1d1d20; padding: 0 var(--pad); white-space: nowrap; overflow: hidden; }
.foot { margin-top: 18px; padding: 36px var(--pad) 30px; border-top: 1px solid #1d1d20; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 30px; font-size: 13px; color: var(--mute); }
.foot nav { display: flex; flex-wrap: wrap; gap: 22px; }
.foot a:hover { color: var(--bone); }

@media (max-width: 640px) {
  .head nav a:not(.pill) { display: none; }
  .wordmark { font-size: 13px; letter-spacing: .28em; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}