/* nares.earth v2 — desktop home screen.
   Sizes are expressed in reference px of the 1440x900 design frame and scaled by --s,
   so the composition holds at any desktop window size. Mobile is not designed yet. */

:root {
  --ground: #020302;
  --text: #e8e2d4;
  --cream: #f7f2e6;
  --accent: #d3e4f7;            /* the one colour: links, buttons, lights, the bar. A pale baby blue */
  --accent-rgb: 211, 228, 247;
  --accent-mid: #deebf9;        /* the accent's tints, for glows and the orb */
  --accent-light: #e4effa;
  --accent-light-rgb: 228, 239, 250;
  --accent-pale: #ecf3fc;
  --accent-pale-rgb: 236, 243, 252;
  --line: rgba(232, 226, 212, 0.6);
  --pace: 0.5s ease;
  --font: 'Times New Roman', Times, serif;

  /* one reference px */
  --s: min(calc(100vw / 1440), calc(100vh / 900));
  --vh: 100vh;
  --band: calc(112 * var(--s));
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font);
  overflow: hidden;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

button, a {
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: color var(--pace), background-color var(--pace), border-color var(--pace),
    box-shadow var(--pace), filter var(--pace), opacity var(--pace), outline-color var(--pace);
}

/* focus rings ease in like everything else */
button:focus-visible, a:focus-visible { outline-color: var(--accent); }

.glyph {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

/* ---- layout ---- */

.home {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.scene {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
}

/* ---- photo ---- */

.photo,
.photo-tint,
.photo-fade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.photo {
  object-fit: cover;
  /* anchored low: her face stays clear of the logo even in short browser windows */
  object-position: 50% 75%;
  filter: brightness(0.7) contrast(1.08) saturate(0.8);
}

.photo-tint {
  background: rgba(34, 40, 92, 0.18);
  mix-blend-mode: multiply;
}

/* solid behind the nav, clear by ~50%, clear to ~66%, 80% black at the bottom */
.photo-fade {
  background: linear-gradient(180deg,
    rgba(2, 3, 2, 1) 0%,
    rgba(2, 3, 2, 1) 7%,
    rgba(2, 3, 2, 0.9) 11%,
    rgba(2, 3, 2, 0.72) 16%,
    rgba(2, 3, 2, 0.5) 22%,
    rgba(2, 3, 2, 0.3) 29%,
    rgba(2, 3, 2, 0.14) 36%,
    rgba(2, 3, 2, 0.04) 43%,
    rgba(2, 3, 2, 0) 50%,
    rgba(2, 3, 2, 0) 66%,
    rgba(2, 3, 2, 0.7) 100%);
}

/* ---- corner brackets ---- */

/* "dotwork": the brackets and window borders are dotted, not solid */
.bracket {
  position: absolute;
  width: 28px;
  height: 28px;
  border: 0 dotted rgba(232, 226, 212, 0.8);
  pointer-events: none;
}
.bracket.tl { left: calc(32 * var(--s)); top: calc(116 * var(--s)); border-left-width: 2px; border-top-width: 2px; }
.bracket.tr { right: calc(32 * var(--s)); top: calc(116 * var(--s)); border-right-width: 2px; border-top-width: 2px; }
.bracket.bl { left: calc(32 * var(--s)); bottom: calc(28 * var(--s)); border-left-width: 2px; border-bottom-width: 2px; }
.bracket.br { right: calc(32 * var(--s)); bottom: calc(28 * var(--s)); border-right-width: 2px; border-bottom-width: 2px; }

/* ---- nav ---- */

.nav {
  position: absolute;
  top: 16px;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: max(56px, calc(84 * var(--s)));
}

.nav-item {
  position: relative;
  width: max(56px, calc(56 * var(--s)));
  height: max(56px, calc(56 * var(--s)));
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-item svg {
  width: max(30px, calc(36 * var(--s)));
  height: max(30px, calc(36 * var(--s)));
  transition: opacity var(--pace);
}

.nav-word {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity var(--pace);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--accent);
  text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.8), 0 6px 10px rgba(0, 0, 0, 0.9);
}

.nav-item:hover svg,
.nav-item:focus-visible svg,
.nav-item.is-decrypting svg { opacity: 0; }

.nav-item:hover .nav-word,
.nav-item:focus-visible .nav-word,
.nav-item.is-decrypting .nav-word { opacity: 1; }

/* ---- the video tile: the newest video, bottom right of the home screen ---- */
.video-tile {
  position: absolute;
  right: calc(60 * var(--s));
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: calc(16 * var(--s));
  padding: 0;
  border: 0;
  background: none;
  color: var(--cream);
  text-align: left;
  cursor: pointer;
}
.video-tile[hidden] { display: none; }
.video-tile-still {
  position: relative;
  display: block;
  width: calc(150 * var(--s));
  height: calc(84 * var(--s));
  padding: 3px;
  border: 1px dotted rgba(232, 226, 212, 0.55);
  background: rgba(5, 8, 6, 0.72);
  transition: box-shadow var(--pace), border-color var(--pace);
}
.video-tile-still img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.75) brightness(0.8);
  transition: filter var(--pace);
}
.video-tile-play {
  position: absolute;
  left: 50%; top: 50%;
  width: 28px; height: 28px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(247, 242, 230, 0.85);
  border-radius: 50%;
  background: rgba(4, 5, 10, 0.5);
  transition: border-color var(--pace), background-color var(--pace);
}
.video-tile-play::after {
  content: '';
  position: absolute;
  left: 11px; top: 8px;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent rgba(247, 242, 230, 0.9);
}
.video-tile-text { display: flex; flex-direction: column; gap: 3px; }
.video-tile-title { font-family: var(--font-title); font-size: var(--sz-label); color: var(--cream); transition: color var(--pace); }
.video-tile-sub { font-family: var(--font-ui); font-size: var(--sz-small); color: var(--accent); }
.video-tile:hover .video-tile-still, .video-tile:focus-visible .video-tile-still { border-color: rgba(232, 226, 212, 0.9); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.55), 0 18px 40px rgba(0, 0, 0, 0.7); }
.video-tile:hover img, .video-tile:focus-visible img { filter: saturate(1) brightness(1); }
.video-tile:hover .video-tile-title, .video-tile:focus-visible .video-tile-title { color: var(--accent); }
.video-tile:hover .video-tile-play, .video-tile:focus-visible .video-tile-play { border-color: var(--accent); background-color: rgba(var(--accent-rgb), 0.2); }

/* ---- slots ---- */

.slots {
  position: absolute;
  right: calc(72 * var(--s));
  top: calc(152 * var(--s));
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--s));
}

.slot {
  width: calc(168 * var(--s));
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--s));
  padding: calc(8 * var(--s));
  border: 1px solid rgba(232, 226, 212, 0.35);
  background: rgba(5, 8, 6, 0.72);
}

.slot:hover,
.slot:focus-visible {
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.55), 0 18px 40px rgba(0, 0, 0, 0.7);
}

.slot-thumb {
  position: relative;
  height: calc(96 * var(--s));
  overflow: hidden;
  background: #0d100e;
}

.slot-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* a tall photo in a wide square: frame the face and the raised arms */
.slot-thumb.portrait img { object-position: 50% 40%; }

/* PLACEHOLDER until jewelry photos arrive */
.slot-thumb.empty {
  border: 1px dashed rgba(232, 226, 212, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: rgba(232, 226, 212, 0.7);
}

.slot-glyph {
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slot-glyph svg { width: max(22px, calc(26 * var(--s))); height: max(22px, calc(26 * var(--s))); }

/* ---- logo ---- */

.logo {
  position: absolute;
  left: 50%;
  bottom: calc(20 * var(--s));
  transform: translateX(-50%);
  width: calc(500 * var(--s));
  margin: 0;
  line-height: 0;
}

.logo img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 6px 26px rgba(0, 0, 0, 0.75));
}

/* ---- bottom band ---- */

.band {
  position: relative;
  flex: 0 0 var(--band);
  background: var(--ground);
}

.orb {
  position: absolute;
  left: calc(40 * var(--s));
  top: 50%;
  transform: translateY(-50%);
  width: 96px;
  height: 96px;
}

.orb:hover,
.orb:focus-visible { filter: brightness(1.35); }

.orb-cloud {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* each puff drifts and scales around its own centre */
.orb-cloud circle { transform-box: fill-box; transform-origin: center; }

.coords {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(400 * var(--s));
  min-width: 280px;
  height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.coords:hover,
.coords:focus-visible { filter: drop-shadow(0 0 8px rgba(214, 218, 228, 0.7)); }

.bar {
  display: block;
  width: 100%;
  height: 3px;
  background: rgba(232, 226, 212, 0.2);
}

/* the bar is the intro's loading line: it fills while the doors open, then rests */
.bar-fill {
  display: block;
  width: 87%;
  height: 100%;
  background: var(--accent);
  transform-origin: 0 50%;
}
html:not(.no-intro) .bar-fill { animation: bar-load 6.4s cubic-bezier(.3, .1, .3, 1) both; }
@keyframes bar-load { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.coords-text {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  letter-spacing: 0.02em;
  white-space: pre;
  /* silver, to sit with the chrome logo */
  background: linear-gradient(180deg, #f6f6f8 0%, #cfd2d9 38%, #969aa4 52%, #e9eaee 70%, #aeb1ba 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


/* ---- windows ---- */

[hidden] { display: none !important; }

.dim {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: rgba(2, 3, 8, 0.6);
  animation: fade-in 0.5s ease both;
}
.dim.out { animation: fade-out 0.5s ease both; }

.win {
  position: fixed;
  z-index: 11;
  /* centered, sitting slightly high like the reference frame (top 128 of 900) */
  inset: calc(-24 * var(--s)) 0 0 0;
  margin: auto;
  width: calc(1000 * var(--s));
  height: calc(620 * var(--s));
  display: flex;
  flex-direction: column;
  background: rgba(5, 6, 12, 0.94);
  border: 1px dotted rgba(232, 226, 212, 0.55);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.8);
  outline: none;
  animation: win-in 0.5s ease both;
}
.win.out { animation: win-out 0.5s ease both; }

.win-head {
  position: relative;
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 8px 0 20px;
}

/* the "fence": a picket row under the header instead of a plain rule */
.win-head::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 7px;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(232, 226, 212, 0.42) 0 1px, transparent 1px 6px),
    linear-gradient(rgba(232, 226, 212, 0.3), rgba(232, 226, 212, 0.3)) 0 100% / 100% 1px no-repeat;
}

.win-glyph {
  width: 26px;
  height: 26px;
  stroke-width: 1.2;
  color: var(--accent);
}

.win-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--cream);
}

.win-close {
  margin-left: auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.win-close svg { width: 18px; height: 18px; stroke-width: 1.2; }
.win-close:hover { color: var(--accent); }

.win-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.win-tall { height: calc(820 * var(--s)); inset: 0; }

@keyframes win-in { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes win-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(10px) scale(0.985); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }

/* reduced motion: windows cross-fade only */
@media (prefers-reduced-motion: reduce) {
  .win { animation-name: fade-in; }
  .win.out { animation-name: fade-out; }
}

/* PLACEHOLDER boxes (relics, subject) */
.placeholder {
  box-sizing: border-box;
  border: 1px dashed rgba(232, 226, 212, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: rgba(232, 226, 212, 0.7);
}

.relics-soon {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.relics-mark { width: calc(72 * var(--s)); height: calc(72 * var(--s)); color: rgba(232, 226, 212, 0.35); }

/* a label in the map's voice, used wherever something is not open yet */
.tag {
  display: inline-block;
  padding: 5px 11px;
  font-family: var(--font-title);
  font-size: var(--sz-small);
  color: var(--cream);
  background: rgba(4, 5, 10, 0.88);
  border: 1px dotted rgba(232, 226, 212, 0.45);
  white-space: nowrap;
}

.slot-thumb.sealed {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #06070b;
}
/* the jewelry shows, dimmed, under the pending tag */
.slot-thumb.sealed img { position: absolute; inset: 0; filter: brightness(0.5) saturate(0.7); }
.slot-thumb.sealed .tag { position: relative; }
.slot-thumb.sealed .tag { font-size: 12px; padding: 3px 8px; }

.subject-body { overflow-y: auto; }

.subject-text {
  max-width: 620px;
  margin: 0 auto;
  padding: 36px 32px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--cream);
}

/* ---- buttons in windows ---- */

.cta {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 20px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
}
.cta:hover { background-color: rgba(var(--accent-rgb), 0.14); color: var(--cream); }

/* ---- contact ---- */

.contact-body { overflow-y: auto; }

.obs {
  position: relative;
  width: min(560px, calc(100% - 64px));
  margin: 0 auto;
  padding: 28px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: opacity var(--pace);
}

.obs-label {
  font-size: 15px;
  font-weight: 700;
  text-decoration: underline;
}

.obs textarea,
.obs input {
  width: 100%;
  font: inherit;
  font-size: 15px;
  padding: 10px 12px;
  color: var(--cream);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(232, 226, 212, 0.35);
  border-radius: 0;
  transition: border-color var(--pace), background-color var(--pace);
}
.obs textarea { resize: vertical; min-height: 64px; }
.obs textarea::placeholder, .obs input::placeholder { color: rgba(232, 226, 212, 0.5); }
.obs textarea:focus, .obs input:focus { outline: none; border-color: var(--accent); background: rgba(255, 255, 255, 0.07); }

.obs-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.obs .cta { align-self: flex-start; background: none; padding: 0 22px; }
.obs .cta:hover { background-color: rgba(var(--accent-rgb), 0.14); }
.obs .cta:disabled { opacity: 0.5; cursor: default; }

.obs-status {
  margin: 0;
  min-height: 1.2em;
  font-size: 15px;
  font-style: italic;
  color: var(--cream);
  transition: opacity var(--pace);
}
.obs-status:empty { opacity: 0; }

/* after a successful transmit the fields fade away and only the status remains */
.obs.sent > :not(.obs-status) { opacity: 0; pointer-events: none; transition: opacity var(--pace); }
.obs > * { transition: opacity var(--pace); }
.obs.sent .obs-status { position: absolute; left: 0; top: 28px; }

/* ---- archives ---- */

.archives-body { display: flex; }

.files {
  flex: 0 0 calc(230 * var(--s));
  min-width: 190px;
  padding: 24px 20px;
  border-right: 1px solid rgba(232, 226, 212, 0.18);
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
}

/* copies the section headings in her casefile */
.side-head {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: underline;
}
.side-head.attached { margin-top: 18px; }

.file-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.file {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
  border-left: 2px solid rgba(232, 226, 212, 0.2);
}
.file.is-open { gap: 4px; padding: 10px 12px; }
.file.is-open:hover, .file.is-open:focus-visible { border-left-color: rgba(var(--accent-rgb), 0.5); }
.file.is-open[aria-current="true"] { border-left-color: var(--accent); }
.file.is-sealed { gap: 7px; padding: 14px 12px; }

.file-id { font-size: 15px; color: rgba(232, 226, 212, 0.85); }
.file.is-open[aria-current="true"] .file-id { color: var(--accent); }
.file-name { font-size: 13px; color: rgba(232, 226, 212, 0.75); }

.redact { display: block; width: 96px; height: 10px; background: rgba(232, 226, 212, 0.45); }
.file-sealed { font-size: 13px; font-style: italic; letter-spacing: 0.04em; color: rgba(232, 226, 212, 0.6); }

.exhibit {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(232, 226, 212, 0.3);
  text-align: left;
}

.exhibit img {
  display: block;
  width: 100%;
  height: calc(210 * var(--s));
  object-fit: cover;
  object-position: 50% 12%;
  filter: grayscale(1) contrast(1.25) brightness(0.95);
  transition: filter var(--pace);
}

.exhibit:hover img,
.exhibit:focus-visible img,
.exhibit[aria-pressed="true"] img { filter: grayscale(0) contrast(1) brightness(1); }

.exhibit-name { font-size: 11px; color: rgba(232, 226, 212, 0.7); }

.casefile {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 24px 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.casefile { flex-direction: column; align-items: center; justify-content: flex-start; gap: 24px; }
.casefile img {
  display: block;
  flex-shrink: 0;
  width: calc(660 * var(--s));
  height: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
}

/* ---- map ---- */
/* Everything is placed in a 998x562 reference frame (x, y as % of the map), sized by --s. */

.map-body { background: #04050a; cursor: crosshair; }

.map-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.map-haze {
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.map-vignette { box-shadow: inset 0 0 calc(110 * var(--s)) calc(40 * var(--s)) rgba(3, 4, 10, 0.9); }

.map-light {
  position: absolute;
  width: calc(var(--d) * var(--s));
  height: calc(var(--d) * var(--s));
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.34) 0%, rgba(var(--accent-rgb), 0.15) 35%, rgba(var(--accent-rgb), 0) 70%);
  filter: blur(5px);
  pointer-events: none;
}

.spot {
  position: absolute;
  transform: translate(-50%, -50%);
  display: block;
  color: var(--text);
}

/* next single: breathes, says "access pending" */
.spot-next {
  width: calc(96 * var(--s));
  height: calc(96 * var(--s));
  cursor: pointer;
}
.spot-next .ring2 {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(36 * var(--s));
  height: calc(36 * var(--s));
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px dotted rgba(247, 242, 230, 0.6);
  transition: border-color var(--pace);
}
.spot-next .spot-title {
  position: absolute;
  left: 50%;
  top: calc(50% + 30 * var(--s));
  transform: translateX(-50%);
  font-family: var(--font-title);
  font-size: calc(var(--sz-label) - 3px);
  color: rgba(247, 242, 230, 0.7);
  white-space: nowrap;
  transition: color var(--pace);
}
.spot-next:hover .spot-title, .spot-next:focus-visible .spot-title { color: var(--accent); }
.spot-next:hover .ring2, .spot-next:focus-visible .ring2 { border-color: rgba(247, 242, 230, 0.95); }
.spot-next .glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-light-rgb), 0.75) 0%, rgba(var(--accent-rgb), 0.32) 35%, rgba(var(--accent-rgb), 0) 70%);
  filter: blur(3px);
  animation: spot-breathe 3.2s ease-in-out infinite;
}

/* open song: dot, ring, halo, title; links out */
.spot-open {
  /* box is 220x168; the dot sits at (110, 60) */
  width: calc(220 * var(--s));
  height: calc(168 * var(--s));
  transform: translate(-50%, calc(-60 / 168 * 100%));
  text-decoration: none;
}
.spot-open > span { position: absolute; border-radius: 50%; }
.spot-open .halo {
  left: calc(50 * var(--s)); top: 0;
  width: calc(120 * var(--s)); height: calc(120 * var(--s));
  background: radial-gradient(circle, rgba(247, 242, 230, 0.34) 0%, rgba(247, 242, 230, 0.10) 40%, rgba(247, 242, 230, 0) 70%);
}
.spot-open .ring,
.spot-open .echo-wrap {
  left: calc(88 * var(--s)); top: calc(38 * var(--s));
  width: calc(44 * var(--s)); height: calc(44 * var(--s));
}
.spot-open .ring { border: 1px solid rgba(247, 242, 230, 0.75); }
.spot-open .echo-wrap { opacity: 0; transition: opacity var(--pace); }
.spot-open .echo {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid rgba(247, 242, 230, 0.8);
  animation: spot-echo 1.6s ease-out infinite;
}
.spot-open .core {
  left: calc(110 * var(--s) - 4px); top: calc(60 * var(--s) - 4px);
  width: 8px; height: 8px;
  background: var(--cream);
  box-shadow: 0 0 12px 2px rgba(247, 242, 230, 0.8);
  transition: box-shadow var(--pace);
}
.spot-open .spot-title {
  left: 0; right: 0; top: calc(94 * var(--s));
  border-radius: 0;
  text-align: center;
  font-size: 17px;
  font-style: italic;
  color: var(--cream);
  white-space: nowrap;
  transition: color var(--pace);
}
.spot-open:hover .echo-wrap, .spot-open:focus-within .echo-wrap { opacity: 1; }
.spot-open:hover .core, .spot-open:focus-within .core { box-shadow: 0 0 18px 5px rgba(247, 242, 230, 0.95); }
.spot-open:hover .spot-title, .spot-open:focus-within .spot-title { color: var(--accent); }

/* Listen and Watch under the name; they appear on hover, and stay put where there is no hover */
.spot-actions {
  position: absolute;
  left: 0; right: 0; top: calc(124 * var(--s));
  display: flex;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  transition: opacity var(--pace);
}
.spot-open:hover .spot-actions, .spot-open:focus-within .spot-actions { opacity: 1; }
@media (hover: none) { .spot-actions { opacity: 1; } }
.spot-act {
  display: inline-block;
  padding: 3px 11px;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.3;
  color: var(--accent);
  background: rgba(4, 5, 10, 0.78);
  border: 1px solid rgba(var(--accent-rgb), 0.8);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--pace), color var(--pace), border-color var(--pace);
}
.spot-act:hover, .spot-act:focus-visible { background-color: rgba(var(--accent-rgb), 0.16); color: var(--cream); border-color: var(--accent); }

.map-tip {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  padding: 5px 11px;
  font-size: 14px;
  font-style: italic;
  color: var(--cream);
  background: rgba(4, 5, 10, 0.88);
  border: 1px solid rgba(232, 226, 212, 0.45);
  transition: opacity var(--pace);
}
.map-tip.on { opacity: 1; }

@keyframes spot-echo { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(2.1); opacity: 0; } }
@keyframes spot-breathe { 0%, 100% { opacity: 0.45; transform: scale(0.88); } 50% { opacity: 1; transform: scale(1.12); } }

@media (prefers-reduced-motion: reduce) {
  .spot-next .glow, .spot-open .echo { animation: none; }
}

/* ---- signal ---- */

.signal-body { overflow-y: auto; }

.releases {
  list-style: none;
  margin: 0;
  padding: 28px 32px;
}

.release {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(232, 226, 212, 0.14);
}

.cover {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  overflow: hidden;
  background: #0b0c12;
}
.cover img {
  display: block;
  width: 130%;
  height: 130%;
  margin: -15%;
  object-fit: cover;
}
.cover img.blurred { filter: blur(7px) brightness(0.8); }
.cover.placeholder { font-size: 12px; }

.release-text { display: flex; flex-direction: column; gap: 4px; }
.release-title { font-size: 19px; font-style: italic; color: var(--cream); }
.release-meta { font-size: 13px; color: rgba(232, 226, 212, 0.7); }
/* buttons sit at the right of their row */
.release .cta { margin-left: auto; }

/* ---- logo glisten: a thin highlight crosses the letters every 9s, masked to the logo ---- */

.glint-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(var(--accent-pale-rgb), 0.7)) drop-shadow(0 0 10px rgba(var(--accent-rgb), 0.4));
}

.glint {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-mask: url(/assets/img/logo-chrome.png) 0 0 / 100% 100% no-repeat;
  mask: url(/assets/img/logo-chrome.png) 0 0 / 100% 100% no-repeat;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 46.5%, rgba(255, 255, 255, 0.82) 50%, rgba(255, 255, 255, 0) 53.5%) 150% 0 / 300% 100% no-repeat;
  animation: glint 9s ease-in-out infinite;
}

@keyframes glint { 0%, 58% { background-position: 150% 0; } 100% { background-position: -50% 0; } }

/* ---- orb motion: seven puffs on their own loops inside a breathing cloud ---- */

.orb-cloud { animation: orb-breathe 4.6s ease-in-out infinite; }
.p1 { animation: pf-a 6s ease-in-out infinite; }
.p2 { animation: pf-b 7.5s ease-in-out infinite; }
.p3 { animation: pf-c 5.5s ease-in-out infinite; }
.p4 { animation: pf-d 8.5s ease-in-out infinite; }
.p5 { animation: pf-b 6.5s ease-in-out infinite reverse; }
.p6 { animation: pf-c 9.5s ease-in-out infinite reverse; }
.p7 { animation: pf-d 7s ease-in-out infinite; }

@keyframes orb-breathe { 0%, 100% { transform: scale(0.9) rotate(0deg); } 50% { transform: scale(1.1) rotate(8deg); } }
@keyframes pf-a { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(3px, -4px) scale(1.2); } }
@keyframes pf-b { 0%, 100% { transform: translate(0, 0) scale(1); } 35% { transform: translate(-13px, 7px) scale(0.6); } 70% { transform: translate(9px, -9px) scale(1.4); } }
@keyframes pf-c { 0%, 100% { transform: translate(0, 0) scale(1.15); } 40% { transform: translate(12px, 10px) scale(0.65); } 75% { transform: translate(-8px, -6px) scale(1.35); } }
@keyframes pf-d { 0%, 100% { transform: translate(0, 0) scale(0.8); } 45% { transform: translate(-10px, -12px) scale(1.45); } 80% { transform: translate(11px, 5px) scale(0.7); } }

@media (prefers-reduced-motion: reduce) {
  .glint, .orb-cloud, .orb-cloud circle { animation: none; }
}

/* ---- drop window: the Cobrand embed ---- */

.drop-body { background: #04050a; }

.drop-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  opacity: 0;
  transition: opacity var(--pace);
}
.drop-frame.on { opacity: 1; }

.drop-fallback {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  transition: opacity var(--pace);
}
.drop-fallback.on { opacity: 1; pointer-events: auto; }

.drop-open {
  position: absolute;
  right: 16px;
  bottom: 10px;
  font-size: var(--sz-small);
  color: rgba(232, 226, 212, 0.5);
}
.drop-open:hover { color: var(--accent); }

/* ---- video window ---- */

.video-body { background: #000; }
.video-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.video-cap {
  position: absolute; left: 20px; bottom: 14px;
  display: flex; align-items: baseline; gap: 12px;
  pointer-events: none;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
  opacity: 0.9;
}
.video-title { font-family: var(--font-title); font-size: var(--sz-label); color: var(--cream); }
.video-sub { font-size: var(--sz-small); color: rgba(232, 226, 212, 0.65); }
.video-ext {
  position: absolute; right: 16px; bottom: 12px;
  font-size: var(--sz-small); color: rgba(232, 226, 212, 0.55);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
}
.video-ext:hover { color: var(--accent); }
/* YouTube's own controls sit on the frame; keep our caption clear of them while it plays */
.video-body.is-playing .video-cap, .video-body.is-playing .video-ext { opacity: 0; transition: opacity var(--pace); }

/* a release row can carry two buttons */
.release .cta ~ .cta { margin-left: 10px; }

/* ---- intro: "doors of light" ----
   A 1440x900 scene scaled to cover the window. Keyframes and timings are the prototype's. */

.intro {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow: hidden;
  display: block;
  padding: 0;
  cursor: pointer;
  background: none;
  transition: opacity var(--pace);
  /* safety net: gone at 9.2s even if the script never runs */
  animation: intro-gone 0s 9.2s forwards;
}
.intro.skip { opacity: 0; }
.intro:focus-visible { outline: none; }
.no-intro .intro { display: none; }

.intro span { display: block; }

.in-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1440px;
  height: 900px;
  transform: translate(-50%, -50%) scale(var(--cover, 1));
}

.in-scene, .in-cam, .in-glow, .in-white, .in-vignette { position: absolute; inset: 0; }
.in-scene { background: transparent; animation: in-scene 12s 1 forwards; }
.in-cam { transform-origin: 50% 50%; animation: in-cam 12s 1 forwards; }
.in-glow { animation: in-glow 12s 1 forwards; }

.in-beam {
  position: absolute;
  opacity: 0.82;
  left: 420px; top: -200px; width: 600px; height: 1300px;
  background: radial-gradient(ellipse at 50% 50%, #ffffff 0%, rgba(232, 236, 255, 0.95) 18%, rgba(170, 180, 255, 0.5) 42%, rgba(60, 66, 140, 0.12) 62%, rgba(0, 0, 0, 0) 74%);
  filter: blur(18px);
}

.in-fog { position: absolute; left: -120px; top: 0; animation: in-fog 12s infinite linear; }
.in-fog-a {
  -webkit-mask-image: radial-gradient(ellipse 34% 62% at 50% 55%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 34% 62% at 50% 55%, #000 25%, transparent 78%);
}
.in-fog-b {
  -webkit-mask-image: linear-gradient(180deg, transparent 58%, #000 92%);
  mask-image: linear-gradient(180deg, transparent 58%, #000 92%);
}

/* flat dark panels lit only at their inner edges; do not add detail */
.in-door {
  position: absolute;
  top: -60px;
  width: 900px;
  height: 1020px;
  background-color: #020203;
}
.in-dl {
  left: -180px;
  background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0) 168px, rgba(210, 216, 255, 0.05) 168px, rgba(210, 216, 255, 0.05) 170px),
    linear-gradient(270deg, rgba(150, 160, 220, 0.34) 0px, rgba(60, 66, 100, 0.16) 26px, rgba(20, 22, 34, 0.08) 150px, rgba(2, 2, 3, 0) 420px);
  box-shadow: inset -2px 0 0 rgba(226, 231, 255, 0.85);
  animation: in-dl 12s 1 forwards;
}
.in-dr {
  left: 720px;
  background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0) 168px, rgba(210, 216, 255, 0.05) 168px, rgba(210, 216, 255, 0.05) 170px),
    linear-gradient(90deg, rgba(150, 160, 220, 0.34) 0px, rgba(60, 66, 100, 0.16) 26px, rgba(20, 22, 34, 0.08) 150px, rgba(2, 2, 3, 0) 420px);
  box-shadow: inset 2px 0 0 rgba(226, 231, 255, 0.85);
  animation: in-dr 12s 1 forwards;
}

.in-floor { position: absolute; left: 0; top: 540px; width: 1440px; height: 420px; filter: blur(34px); }
.in-floor > span {
  width: 1440px;
  height: 420px;
  background: linear-gradient(180deg, rgba(214, 220, 255, 0) 0%, rgba(var(--accent-light-rgb), 0.3) 100%);
  clip-path: polygon(47% 0, 53% 0, 80% 100%, 20% 100%);
}

.in-vignette { background: radial-gradient(ellipse 75% 85% at 50% 50%, rgba(1, 1, 2, 0) 45%, rgba(1, 1, 2, 0.92) 100%); }


.in-white { position: fixed; background: #f6f7ff; animation: in-white 12s 1 forwards; }

@keyframes in-cam { 0%, 9% { transform: scale(1); animation-timing-function: ease-in-out; } 46% { transform: scale(1.2); animation-timing-function: cubic-bezier(.7, 0, .9, .4); } 56%, 100% { transform: scale(9); } }
@keyframes in-dl { 0%, 9% { transform: translateX(0); animation-timing-function: cubic-bezier(.3, 0, .2, 1); } 50%, 100% { transform: translateX(-21%); } }
@keyframes in-dr { 0%, 9% { transform: translateX(0); animation-timing-function: cubic-bezier(.3, 0, .2, 1); } 50%, 100% { transform: translateX(21%); } }
@keyframes in-glow { 0%, 7% { opacity: 0; } 16% { opacity: .75; } 46%, 100% { opacity: 1; } }
@keyframes in-white { 0%, 49% { opacity: 0; } 55%, 60% { opacity: 1; } 74%, 100% { opacity: 0; } }
@keyframes in-fog { 0% { transform: translateX(-60px); } 50% { transform: translateX(60px); } 100% { transform: translateX(-60px); } }
@keyframes in-scene { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes intro-gone { to { visibility: hidden; pointer-events: none; } }

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

/* the orb's blues follow the accent */
#og2 stop, #og4 stop, #og6 stop { stop-color: var(--accent); }
#og3 stop { stop-color: var(--accent-mid); }
#og5 stop { stop-color: var(--accent-light); }
#og7 stop { stop-color: var(--accent-pale); }

/* ---- type system ----
   Every text role sits on a variable. Folchart (headers, nav words, coordinates) and
   Humanistica Cursiva (everything else) are the site's two hands; Times stays only on the
   casefile headings. The hands have one weight each: no faked bold or italic, and their
   period ligatures (long s, u for v) are off everywhere except the uppercase display role. */

@font-face { font-family: 'Folchart'; src: url(/assets/fonts/folchart.woff2?v=2) format('woff2'); font-display: block; }
@font-face { font-family: 'Humanistica'; src: url(/assets/fonts/humanistica.woff2?v=2) format('woff2'); font-display: block; }

:root {
  --font-times: 'Times New Roman', Times, serif;
  --font-folchart: 'Folchart', var(--font-times);
  --font-humanistica: 'Humanistica', var(--font-times);

  --font-display: var(--font-folchart);    /* window titles, nav words */
  --font-title: var(--font-humanistica);   /* song titles, map labels */
  --font-text: var(--font-humanistica);    /* body, notes, inputs */
  --font-ui: var(--font-humanistica);      /* buttons, form labels, file ids */
  --font-doc: var(--font-times);           /* casefile headings: FILES:, ATTACHED: */
  --font-machine: var(--font-folchart);    /* coordinates */

  --sz-head: 18px; --sz-nav: 17px; --sz-title: 22px; --sz-label: 18px;
  --sz-ui: 16px; --sz-text: 16px; --sz-body: 18px; --sz-small: 14px;
  --hand-features: "liga" 0, "clig" 0, "dlig" 0;
}

html { font-synthesis: none; }

body { font-family: var(--font-text); font-size: var(--sz-text); font-feature-settings: var(--hand-features); }

.win-title { font-family: var(--font-display); font-size: var(--sz-head); font-feature-settings: normal; }
.nav-word  { font-family: var(--font-display); font-size: var(--sz-nav);  font-feature-settings: normal; text-align: center; }

.release-title, .spot-title, .map-tip, .obs-status, .file-sealed { font-family: var(--font-title); }
.release-title { font-size: var(--sz-title); }
.spot-title { font-size: var(--sz-label); }
.map-tip { font-size: calc(var(--sz-small) + 1px); }

.cta, .obs-label, .file-id { font-family: var(--font-ui); font-size: var(--sz-ui); }
.obs textarea, .obs input { font-family: var(--font-text); font-size: var(--sz-text); }
.subject-text { font-size: var(--sz-body); }
.release-meta, .file-name, .obs-status, .file-sealed { font-size: var(--sz-small); }
.placeholder { font-size: calc(var(--sz-small) + 1px); }

.side-head { font-family: var(--font-doc); }
.coords-text { font-family: var(--font-machine); }


/* ---- phones ----
   Upright phones get the same composition built vertically on a vertical photo;
   sideways phones get the stage with the windows filling the screen; tablets get the desktop. */

@supports (height: 100dvh) {
  :root { --s: min(calc(100vw / 1440), calc(100dvh / 900)); --vh: 100dvh; }
  .home { height: var(--vh); }
}

.home { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }

/* sideways phone */
@media (max-height: 500px) {
  .video-tile { display: none; }
  .win, .win-tall { inset: 6px; width: auto; height: auto; margin: 0; }
  .win-head { height: 46px; }
  .win-close { width: 40px; height: 40px; }
  .drop-open { bottom: 6px; right: 10px; }
}

/* upright phone */
@media (orientation: portrait) and (max-width: 699px) {
  :root { --s: calc(100vw / 560); --band: 84px; }

  /* a black band behind the glyphs; the photo begins beneath it and the band fades into the photo */
  .photo { top: 72px; height: calc(100% - 72px); object-position: 50% 0%; }
  .photo-fade {
    background: linear-gradient(180deg,
      rgba(2, 3, 2, 1) 0, rgba(2, 3, 2, 1) 72px, rgba(2, 3, 2, 0.7) 110px, rgba(2, 3, 2, 0.3) 150px, rgba(2, 3, 2, 0) 200px,
      rgba(2, 3, 2, 0) 58%, rgba(2, 3, 2, 0.75) 100%);
  }

  .nav { top: 10px; gap: 18px; }
  .nav-item { width: 52px; height: 52px; }
  .nav-item svg { width: 30px; height: 30px; }
  .nav-word { font-size: 14px; }

  /* on a phone the gap between the doors is the whole screen, so the glyphs, the tiles and the brackets
     wait until the doors have opened; only the photo, the logo and the loading line show through */
  .nav, .slots, .bracket { transition: opacity var(--pace); }
  .intro-on .nav, .intro-on .slots, .intro-on .bracket { opacity: 0; }

  .bracket { width: 22px; height: 22px; }
  .bracket.tl, .bracket.bl { left: 14px; }
  .bracket.tr, .bracket.br { right: 14px; }
  .bracket.tl, .bracket.tr { top: 72px; }
  .bracket.bl, .bracket.br { bottom: 14px; }

  .logo { width: 78vw; bottom: 150px; }

  /* the three slots as a row under the logo */
  .slots {
    right: auto;
    top: auto;
    left: 50%;
    bottom: 36px;
    transform: translateX(-50%);
    flex-direction: row;
    gap: 12px;
  }
  .slot { width: 98px; padding: 5px; gap: 5px; }
  .slot-thumb { height: 60px; }
  .slot-thumb.sealed .tag { font-size: 11px; padding: 2px 6px; }
  .slot-glyph { height: 20px; }
  .slot-glyph svg { width: 20px; height: 20px; }

  /* the video tile is desktop only */
  .video-tile { display: none; }

  .orb { left: 14px; width: 72px; height: 72px; transform: translateY(-50%) scale(0.75); transform-origin: 0 50%; }
  .coords { left: auto; right: 16px; transform: translateY(-50%); width: 220px; min-width: 0; }
  .coords-text { font-size: 13px; }

  /* windows fill the screen */
  .win, .win-tall { inset: 0; width: auto; height: auto; margin: 0; border-left: 0; border-right: 0; }
  .win-head { height: 52px; padding-left: 16px; }
  .win-body { overflow-y: auto; }

  .releases { padding: 12px 16px; }
  .release { gap: 12px; }
  .cover { width: 60px; height: 60px; }
  .release-title { font-size: 20px; }

  .archives-body { flex-direction: column; overflow-y: auto; }
  .files { flex: 0 0 auto; min-width: 0; border-right: 0; border-bottom: 1px dotted rgba(232, 226, 212, 0.18); padding: 16px; overflow: visible; }
  .exhibit img { height: auto; }
  .casefile { flex: 0 0 auto; overflow: visible; padding: 16px 0 24px; }
  .casefile img { width: calc(100vw - 24px); }

  .subject-text { padding: 24px 20px; font-size: 17px; }
  .obs { width: calc(100% - 32px); padding: 20px 0; }
  .drop-open { right: 10px; bottom: 8px; }
}

/* no text-selection callouts on controls when a thumb lingers */
button, .nav-item, .slot, .spot { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* ---- lightbox: an exhibit at full size, over everything, tap to close ---- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(2, 3, 8, 0.92);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--pace);
  cursor: zoom-out;
}
.lightbox.on { opacity: 1; pointer-events: auto; }
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.8);
  transform: scale(0.985);
  transition: transform var(--pace);
}
.lightbox.on img { transform: none; }
.lightbox .lightbox-name {
  position: absolute;
  left: 0; right: 0; bottom: 18px;
  text-align: center;
  font-size: var(--sz-small);
  color: rgba(232, 226, 212, 0.7);
}