/* ==========================================================================
   Sentinel Creative — base layer
   Tokens, reset, always-on overlays (grain / vignette / reticle), HUD.
   ========================================================================== */

:root {
  --gold: #cca101;
  --gold-lit: #e8c84a;
  --gold-dim: #6e5a10;
  --bg: #0a0e14;
  --bg-lift: #0d1219;
  --ink: #f4f1e8;
  --mute: #8e9aaa;
  --dim: #5d6875;
  --hair: rgba(204, 161, 1, 0.22);

  --serif: "Didot", "Bodoni 72", "Times New Roman", ui-serif, Georgia, serif;
  --sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --shell: min(calc(100% - 3rem), 1240px);
  --hud-h: 2.25rem;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

body {
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

.shell {
  width: var(--shell);
  margin: 0 auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

:focus-visible {
  outline: 2px solid var(--gold-lit);
  outline-offset: 0.25rem;
}

/* --- always-on overlays -------------------------------------------------- */

.grain,
.vignette {
  position: fixed;
  z-index: 300;
  inset: 0;
  pointer-events: none;
}

.grain {
  opacity: 0.06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

.vignette {
  z-index: 299;
  background: radial-gradient(ellipse at 50% 50%, transparent 48%, rgba(0, 0, 0, 0.62) 100%);
}

/* --- reticle cursor ------------------------------------------------------ */

.reticle {
  position: fixed;
  z-index: 400;
  top: 0;
  left: 0;
  display: none;
  pointer-events: none;
  will-change: transform;
}

body.fine-pointer .reticle {
  display: block;
}

body.fine-pointer,
body.fine-pointer a,
body.fine-pointer .tile,
body.fine-pointer .index-row {
  cursor: none;
}

.reticle-ring,
.reticle-dot {
  position: absolute;
  translate: -50% -50%;
}

/* A square bracket reticle, not a circle — reads as a camera focus box. */
.reticle-ring {
  width: 26px;
  height: 26px;
  border: 1px solid rgba(204, 161, 1, 0.8);
  clip-path: polygon(
    0 0, 34% 0, 34% 1px, 1px 1px, 1px 34%, 0 34%,
    0 66%, 1px 66%, 1px calc(100% - 1px), 34% calc(100% - 1px), 34% 100%, 0 100%,
    100% 100%, 66% 100%, 66% calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) 66%, 100% 66%,
    100% 34%, calc(100% - 1px) 34%, calc(100% - 1px) 1px, 66% 1px, 66% 0, 100% 0
  );
  transition:
    width 260ms var(--ease),
    height 260ms var(--ease);
}

.reticle-dot {
  width: 2px;
  height: 2px;
  background: var(--gold-lit);
}

body.reticle-locked .reticle-ring {
  width: 62px;
  height: 62px;
  border-color: var(--gold-lit);
}

/* --- HUD ----------------------------------------------------------------- */

.hud {
  position: fixed;
  z-index: 200;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  height: var(--hud-h);
  padding: 0 clamp(0.75rem, 2vw, 1.5rem);
  align-items: center;
  gap: 0.6rem;
  border-bottom: 1px solid var(--hair);
  background: rgba(10, 14, 20, 0.86);
  color: var(--gold);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hud-brand {
  color: var(--gold-lit);
  font-weight: 600;
}

.hud-sep {
  opacity: 0.4;
}

.hud-label,
.hud-meta,
.hud-clock {
  opacity: 0.75;
}

.hud-spacer {
  flex: 1;
}

.hud-clock {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 34rem) {
  .hud-label {
    display: none;
  }
}

/* --- reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .reticle {
    display: none !important;
  }

  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}