/* ================================= */
/* GENERAL */
/* ================================= */

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


/* ================================= */
/* HALLOWEEN — HIDDEN BY DEFAULT */
/* ================================= */

body {
  background: #000;
  color: #fff;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.8;
  margin: 0;
  padding: 0;
}

main {
  max-width: 900px;
  margin: 55px auto 40px auto;
  padding: 0 30px;
}

/* ================================= */
/* TYPOGRAPHY SYSTEM */
/* ================================= */

.section-title,
.latest h2,
.project-status h2,
.archive-activity h2,
.project-section h2,
.blog-header h2,
.about-text h2,
.about-block h2 {
  color: #ff00aa;
  font-family: monospace;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: 3px;
  margin-top: 0;
}

/* ================================= */
/* INDIE NODES */
/* ================================= */

.indienodes-badge {
  display: block;
  margin-top: 20px;
  line-height: 0;
}


/* ================================= */
/* HEADER */
/* ================================= */

header {
  width: 100%;
  padding: 30px 0;
  position: relative;
}

.personal-logo {
  position: absolute;
  left: 30px;
  top: 30px;
}

.personal-logo img {
  display: block;
  width: 50px;
  height: auto;
}


/* NAVIGATION */

nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  width: 100%;
}

nav a {
  color: #ff00aa;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 2px;
  padding-bottom: 5px;
  border-bottom: 1px solid transparent;
  box-sizing: border-box;
}

nav a:hover {
  border-bottom-color: #ff00aa;
}

nav .active {
  border-bottom-color: #ff00aa;
}


/* ================================= */
/* HOME */
/* ================================= */

/* TITLE IMAGE */

.title-image {
  display: block;
  width: 500px;
  max-width: 100%;
  height: auto;
  margin: 0 auto 30px auto;
}


/* VIDEO */

.video-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16 / 9;
  margin: 0 auto 45px auto;
  background: #111;
  overflow: hidden;
}

.video-container iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-cover {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
  overflow: hidden;
}

.video-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 0.2s ease,
    filter 0.2s ease;
}

.video-label {
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 15px;

  display: flex;
  justify-content: space-between;

  color: #fff;
  font-family: monospace;
  font-size: 10px;
  letter-spacing: 2px;
}

.video-label span:last-child {
  color: #ff00aa;
}

.video-cover:hover img {
  transform: scale(1.01);
  filter: brightness(0.8);
}

.video-cover:focus-visible {
  outline: 1px solid #ff00aa;
  outline-offset: 6px;
}


/* HERO */

.hero {
  max-width: 620px;
  margin: 0 auto 80px auto;
  text-align: center;
}

.hero p {
  font-size: 16px;
  line-height: 1.8;
  margin: 0;
}

.hero p.hero-archive {
  margin-top: 30px;
  font-size: 12px;
  letter-spacing: 1px;
  opacity: 0.45;
}

.hero-visitor-link {
  display: inline-block;
  margin-top: 28px;
  color: #ff00aa;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-decoration: none;
}

.hero-visitor-link:hover {
  color: #fff;
}

/* NOW TRANSMITTING */

.now-transmitting {
  width: 100%;
  max-width: 650px;
  margin: 70px auto 0;
  padding-bottom: 80px;
  box-sizing: border-box;
}

.transmission-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.transmission-header h2 {
  margin: 0;
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 1.5px;
  color: #ff00aa;
  white-space: nowrap;
}

.transmission-line {
  height: 1px;
  background: #444;
  flex: 1;
}


/* PLAYER */

.music-player {
  width: 100%;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  column-gap: 20px;
  align-items: start;
  box-sizing: border-box;
}

.music-play {
  width: 52px;
  height: 52px;
  flex-shrink: 0;

  border: 1px solid #ff00aa;
  background: #000;
  color: #ff00aa;

  font-family: monospace;
  font-size: 17px;

  cursor: pointer;
}

.music-play:hover {
  background: #ff00aa;
  color: #000;
}

.music-content {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}


/* TRACK INFORMATION */

.music-track-info {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 18px;
}

.music-number {
  color: #888;
  font-size: 10px;
}

.music-track {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.music-artist {
  color: #fff;
  font-size: 12px;
  letter-spacing: 1px;
}

.music-title {
  color: #aaa;
  font-size: 12px;
  letter-spacing: 1px;
}

.music-time {
  color: #999;
  font-size: 12px;
  white-space: nowrap;
  text-align: right;
}


/* PROGRESS */

.music-progress {
  position: relative;
  width: 100%;
  height: 3px;
  margin-top: 15px;
  background: #555;
  cursor: pointer;
}

.music-progress-fill {
  width: 0;
  height: 100%;
  background: #ff00aa;
}


/* BOTTOM INFORMATION */

.music-bottom {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-top: 14px;
  box-sizing: border-box;
}

.music-meta {
  display: flex;
  flex-direction: column;

  font-size: 10px;
  line-height: 2;
  letter-spacing: 1.5px;

  color: #888;
}

.artist-link {
  color: #ff00aa;

  font-size: 10px;
  letter-spacing: 1px;

  text-decoration: none;
}

.artist-link:hover {
  color: #fff;
}

.audio-row-artist-link {
  color: #fff;
  text-decoration: none;
  transition: color 0.15s ease;
}

.audio-row-artist-link:hover {
  color: #ff00aa;
}

/* AUDIO ARCHIVE ACCESS */

.audio-archive-access {
  max-width: 650px;
  margin: 18px auto 0;
  text-align: left;
}

.audio-archive-access a {
  color: #ff00aa;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-decoration: none;
}

.audio-archive-access a:hover {
  color: #fff;
}

/* LATEST */

.latest {
  max-width: 650px;
  margin: 0 auto;
}

.latest h2 {
  color: #ff00aa;
  font-family: monospace;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 3px;
  margin: 0 0 25px 0;
}

.latest-entry {
  border-top: 1px solid #333;
  padding: 25px 0 20px 0;
}

/* LATEST ENTRY METADATA */

.entry-meta {
  display: block;
  font-size: 10px;
  letter-spacing: 2px;
  opacity: 0.4;
  margin-bottom: 14px;
}

.latest-entry p {
  line-height: 1.8;
  margin: 0 0 10px 0;
}

.latest a {
  color: #ff00aa;
  font-size: 11px;
  letter-spacing: 2px;
  text-decoration: none;
}

.latest a:hover {
  text-decoration: underline;
}

/* PROJECT STATUS */

.project-status {
  max-width: 650px;
  margin: 50px auto 0;
}

.project-status h2 {
  color: #ff00aa;
  font-family: monospace;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 3px;
  margin: 0 0 25px 0;
}

.status-list {
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
  padding: 20px 0;
  margin-bottom: 25px;
}

.status-row {
  display: flex;
  justify-content: space-between;
  gap: 30px;

  font-size: 11px;
  letter-spacing: 1px;
  line-height: 2;
}

.status-row span:first-child {
  opacity: 0.45;
}

.status-row span:last-child {
  text-align: right;
}

.status-link {
  color: #ff00aa;
  font-size: 11px;
  letter-spacing: 2px;
  text-decoration: none;
}

.status-link:hover {
  text-decoration: underline;
}

.comic-progress {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.progress-bar {
  width: 120px;
  height: 5px;
  border: 1px solid #444;
  background: #000;
}

.progress-fill {
  width: 35.8%;
  height: 100%;
  background: #ff00aa;
}

.progress-percent {
  font-size: 10px;
  color: #fff;
}

/* ================================= */
/* ARCHIVE ACTIVITY */
/* ================================= */

.archive-activity {
  max-width: 650px;
  margin: 80px auto 0;
}

.archive-activity h2 {
  color: #ff00aa;
  font-family: monospace;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 3px;
  margin: 0 0 25px 0;
}


.activity-list {
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
  padding: 18px 0;
}

.activity-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 20px;

  font-family: monospace;
  font-size: 10px;
  line-height: 2.2;
  letter-spacing: 1px;
}

.activity-row span:first-child {
  opacity: 0.4;
}

.archive-folder-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ARCHIVE TRANSMISSIONS */

.archive-transmissions {
  max-width: 650px;
  margin: 100px auto 0 auto;
  padding-top: 20px;
  border-top: 1px solid #333;
}

.transmission-header {
  display: flex;
  justify-content: space-between;

  font-family: monospace;
  font-size: 12px;
  color: #ff00aa;

  margin-bottom: 35px;
}

.transmission-description {
  max-width: 500px;

  font-family: monospace;
  font-size: 14px;
  line-height: 1.6;

  margin-bottom: 30px;
}

.transmission-form {
  max-width: 600px;
}

.transmission-form label {
  display: block;

  font-family: monospace;
  font-size: 10px;

  margin-bottom: 8px;
  color: #777;
}

.transmission-input-row {
  display: flex;
  width: 100%;
}

.transmission-input-row input {
  flex: 1;

  background: #000;
  color: #fff;

  border: 1px solid #555;
  border-right: none;

  padding: 14px;

  font-family: monospace;
  font-size: 12px;

  outline: none;
  border-radius: 0;
}

.transmission-input-row input:focus {
  border-color: #ff00aa;
}

.transmission-input-row input::placeholder {
  color: #555;
}

.transmission-input-row button {
  background: #ff00aa;
  color: #000;

  border: 1px solid #ff00aa;
  border-radius: 0;

  padding: 14px 18px;

  font-family: monospace;
  font-size: 12px;
  font-weight: bold;

  cursor: pointer;
}

.transmission-input-row button:hover {
  background: #000;
  color: #ff00aa;
}


/* MOBILE */

@media (max-width: 600px) {

  .archive-transmissions {
    margin-top: 70px;
  }

  .transmission-header {
    font-size: 10px;
  }

  .transmission-input-row {
    flex-direction: column;
  }

  .transmission-input-row input {
    border-right: 1px solid #555;
  }

  .transmission-input-row button {
    width: 100%;
    margin-top: 8px;
  }

}

/* ================================= */
/* PROJECT */
/* ================================= */

.project-section {
  max-width: 800px;
  margin: 0 auto 90px auto;
}

.project-section h2 {
  color: #ff00aa;
  font-family: monospace;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 3px;
  margin: 0 0 30px 0;
}

.project-section p {
  max-width: 650px;
  line-height: 1.8;
  margin: 0 0 20px 0;
}

.project-section p:last-child {
  margin-bottom: 0;
}


/* ================================= */
/* CHARACTERS */
/* ================================= */

.character-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 30px;
  align-items: flex-start;
}

.character {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
}


/* CHARACTER FOLDERS */

.character-image {
  width: 100%;
  overflow: hidden;
}

.character-image img {
  display: block;
  width: 100%;
  height: auto;
}

.folder-trigger {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.15s ease,
    filter 0.15s ease;
}

.folder-trigger img {
  display: block;
  width: 100%;
  height: auto;
}

.folder-trigger:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.folder-trigger:active {
  transform: translateY(0);
}

.folder-trigger[aria-expanded="true"] {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.folder-trigger[aria-expanded="true"]::after {
  content: "";
  display: block;
  width: 30px;
  height: 1px;
  background: #ff00aa;
  margin: 12px auto 0 auto;
}

.folder-trigger:focus-visible {
  outline: 1px solid #ff00aa;
  outline-offset: 6px;
}


/* CHARACTER PANELS */

.character-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 35px;
  padding: 30px 0;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
  animation: panel-open 0.15s ease-out;
}

.character-panel[hidden] {
  display: none;
}

.character-portrait {
  display: block;
  width: 100%;
  height: auto;
}

.character-info {
  padding-top: 12px;
}

.character-number {
  display: block;
  font-size: 11px;
  letter-spacing: 2px;
  opacity: 0.5;
  margin-bottom: 6px;
}

.character-info h3 {
  color: #ff00aa;
  font-family: monospace;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 2px;
  margin: 0;
}

.character-info p {
  margin: 4px 0 0 0;
  font-size: 12px;
  letter-spacing: 1px;
  opacity: 0.6;
}


/* ================================= */
/* PHENOMENA */
/* ================================= */

.phenomena-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 35px 20px;
  margin-top: 30px;
  align-items: flex-start;
}

.phenomenon {
  text-align: center;
}


/* PHENOMENA FOLDERS */

.phenomenon-trigger {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.15s ease,
    filter 0.15s ease;
}

.phenomenon-trigger img {
  display: block;
  width: 88%;
  height: auto;
  margin: 0 auto;
}

.phenomenon-trigger:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.phenomenon-trigger:active {
  transform: translateY(0);
}

.phenomenon-trigger[aria-expanded="true"] {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.phenomenon-trigger[aria-expanded="true"]::after {
  content: "";
  display: block;
  width: 30px;
  height: 1px;
  background: #ff00aa;
  margin: 12px auto 0 auto;
}

.phenomenon-trigger:focus-visible {
  outline: 1px solid #ff00aa;
  outline-offset: 6px;
}


/* PHENOMENA PANELS */

.phenomena-panels {
  grid-column: 1 / -1;
  width: 100%;
}

.phenomenon-panel {
  width: 100%;
  box-sizing: border-box;

  /* important: horizontal breathing room */
  padding: 30px 25px;

  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
  border-left: 1px solid #444;
  border-right: 1px solid #444;

  text-align: left;
  animation: panel-open 0.15s ease-out;
}

.phenomenon-panel[hidden] {
  display: none;
}

.phenomenon-number {
  display: block;
  margin-bottom: 12px;
  font-size: 11px;
  letter-spacing: 2px;
  opacity: 0.5;
}

.phenomenon-panel h3 {
  color: #ff00aa;
  font-family: monospace;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 2px;
  margin: 0 0 25px 0;
}

.phenomenon-panel p {
  font-size: 12px;
  line-height: 1.8;
  margin: 0 0 22px 0;
}

.phenomenon-panel p:last-child {
  margin-bottom: 0;
}


/* PANEL ANIMATION */

@keyframes panel-open {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


/* ================================= */
/* RECOVERED MATERIAL */
/* ================================= */

.recovered-material .image-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  width: 100%;
}

.recovered-item {
  margin: 0;
  width: 100%;
  min-width: 0;
}

.recovered-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  cursor: pointer;
}

.recovered-intro {
  margin: -5px 0 30px;
  color: #888;
  font-size: 10px;
  letter-spacing: 1px;
}

.recovered-data {
  margin-top: 10px;
  font-family: monospace;
  font-size: 10px;
  letter-spacing: 1px;
  line-height: 1.8;
}


.recovered-file {
  display: block;
  margin-bottom: 5px;
  color: #ff00aa;
}

.recovered-meta {
  display: flex;
  flex-direction: column;
  color: #999;
}

.production-credit {
  display: block;
  margin-top: 8px;
  color: #444;
  font-size: 8px;
  letter-spacing: 1px;
}

/* IMAGE PROTECTION */

.protected-image {
  -webkit-user-drag: none;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* MOBILE */

@media (max-width: 600px) {

  .recovered-material .image-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }

}

/* ================================ */
/* ARCHIVE FOLDERS */
/* ================================ */

.archive-folder-pending {
  position: relative;
  min-width: 0;
  cursor: default;

  padding-top: 15px;
  box-sizing: border-box;
}

.archive-folder-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;

  opacity: 0.3;
  filter: grayscale(20%);
}

.archive-folder-overlay {
  position: absolute;

  top: 75%;
  left: 0;
  right: 0;

  display: flex;
  justify-content: center;

  pointer-events: none;
}

.archive-folder-overlay span {
  padding: 8px 14px;

  background: #000;
  border: 1px solid #777;

  color: #aaa;

  font-family: monospace;
  font-size: 11px;
  letter-spacing: 2px;

  white-space: nowrap;
}

/* ================================= */
/* RECOVERED IMAGE VIEWER */
/* ================================= */

.recovered-image {
  cursor: zoom-in;
}


/* FULLSCREEN OVERLAY */

.image-viewer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1000;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 60px;
  box-sizing: border-box;

  background: rgba(0, 0, 0, 0.96);
}

.image-viewer[hidden] {
  display: none;
}


/* FULLSCREEN IMAGE */

.image-viewer img {
  display: block;

  max-width: 100%;
  max-height: calc(100vh - 120px);

  width: auto;
  height: auto;

  object-fit: contain;
}


/* CLOSE BUTTON */

.image-viewer-close {
  position: absolute;
  top: 25px;
  right: 30px;

  padding: 0;
  border: 0;
  background: transparent;

  color: #ff00aa;
  font-family: monospace;
  font-size: 11px;
  letter-spacing: 2px;

  cursor: pointer;
}

.image-viewer-close:hover {
  text-decoration: underline;
}

/* ================================= */
/* THE PROTOCOL */
/* ================================= */


/* HIDDEN REFERENCE */

.protocol-link {
  display: inline;
  padding: 0;
  border: 0;
  background: transparent;

  color: inherit;
  font: inherit;

  text-decoration: underline;
  text-decoration-style: dotted;

  cursor: pointer;
}

.protocol-link:hover {
  color: #ff00aa;
}

.protocol-link:focus-visible {
  outline: 1px solid #ff00aa;
  outline-offset: 3px;
}


/* MODAL */

.protocol-modal {
  position: fixed;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  z-index: 1000;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 30px;
  box-sizing: border-box;
}

.protocol-modal[hidden] {
  display: none;
}

/* DOCUMENT MODES */

.protocol-document {
  position: relative;
}

.protocol-scan img {
  display: block;
  max-width: 100%;
  max-height: 85vh;
  width: auto;
  height: auto;
  margin: auto;
}


/* TRANSCRIPTION */

.protocol-transcription {
  width: 600px;
  max-width: 100%;
  max-height: 80vh;
  overflow-y: auto;

  padding: 45px;
  box-sizing: border-box;

  background: #050505;
  border: 1px solid #333;

  color: #fff;
  font-family: monospace;
}

.protocol-transcription[hidden] {
  display: none;
}

.protocol-doc-header {
  margin: 0 0 8px 0 !important;
  color: #fff;
  font-size: 12px;
  line-height: 1.6;
}

.protocol-doc-header + .protocol-transcription-meta {
  margin-top: 4px;
}

.protocol-transcription-meta {
  display: block;

  margin-bottom: 30px;

  color: #ff00aa;
  font-size: 10px;
  letter-spacing: 2px;
}

.protocol-transcription h2 {
  margin: 0 0 35px 0;

  color: #fff;
  font-size: 18px;
  letter-spacing: 2px;
}

.protocol-transcription p {
  margin: 0 0 25px 0;

  font-size: 12px;
  line-height: 1.8;
}

.protocol-redacted {
  color: #444;
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: 0;
}

.protocol-end {
  display: block;

  margin-top: 45px;
  padding-top: 15px;

  border-top: 1px solid #333;

  font-size: 9px;
  letter-spacing: 2px;
  opacity: 0.5;
}


/* SCAN / TRANSCRIPTION BUTTON */

.protocol-toggle {
  display: block;

  margin: 15px auto 0 auto;
  padding: 0;

  border: 0;
  background: transparent;

  color: #ff00aa;
  font-family: monospace;
  font-size: 10px;
  letter-spacing: 2px;

  cursor: pointer;
}

.protocol-toggle:hover {
  text-decoration: underline;
}

/* DARKEN SITE */

.protocol-backdrop {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background: rgba(0, 0, 0, 0.88);
}


/* DOCUMENT */

.protocol-viewer {
  position: relative;
  z-index: 1;

  width: 700px;
  max-width: 100%;
  max-height: 90vh;
}

.protocol-viewer img {
  display: block;

  max-width: 100%;
  max-height: 90vh;

  width: auto;
  height: auto;

  margin: auto;
}


/* CLOSE */

.protocol-close {
  position: absolute;
  top: 0;
  right: -40px;

  padding: 0;
  border: 0;
  background: transparent;

  color: #fff;
  font-family: monospace;
  font-size: 28px;
  font-weight: normal;

  cursor: pointer;
  opacity: 0.6;
}

.protocol-close:hover {
  color: #ff00aa;
  opacity: 1;
}

/* ================================= */
/* BLOG */
/* ================================= */

/* BLOG INTRO */

.blog-header {
  max-width: 650px;
  margin: 40px auto 80px auto;
}

.blog-header h2 {
  color: #ff00aa;
  font-size: 14px;
  letter-spacing: 3px;
  margin: 0 0 25px 0;
}

.blog-header p {
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 1px;
  opacity: 0.5;
  margin: 0;
}

/* =================================
   BLOG — RSS
================================= */

.blog-header-top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  width: 100%;
  margin: 0 0 25px 0;
}

.blog-header-top h2 {
  margin: 0;
}

.rss-link {
  display: block;

  color: #ff00aa;
  font-family: monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-decoration: none;
  white-space: nowrap;

  opacity: 0.8;
}

.rss-link:hover {
  color: #fff;
  opacity: 1;
}



/* MVNDY — COLLAPSIBLE BLOG CLUSTERS */

.blog-clusters {
  margin: 0 0 48px;
}

.blog-clusters h2 {
  margin: 0 0 20px;
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 0.08em;
  color: #888;
}

.blog-cluster {
  border: 1px solid #333;
}

.blog-cluster-heading {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  cursor: pointer;
  color: #ff00aa;
  font-size: 12px;
  list-style: none;
}

.blog-cluster-heading::-webkit-details-marker {
  display: none;
}

.blog-cluster-heading::marker {
  content: "";
}

.blog-cluster-heading:hover {
  background: #111;
}

.blog-cluster-heading:focus-visible {
  outline: 1px solid #ff00aa;
  outline-offset: 3px;
}

.blog-cluster-meta {
  margin-left: auto;
  color: #777;
  font-size: 10px;
}

.blog-cluster-toggle {
  color: #ff00aa;
  white-space: nowrap;
}

.blog-cluster[open] .blog-cluster-toggle {
  font-size: 0;
}

.blog-cluster[open] .blog-cluster-toggle::after {
  content: "[ − ]";
  font-size: 12px;
}

.blog-cluster-content {
  padding: 0 20px 20px;
}

.blog-cluster-content p {
  margin: 0 0 20px;
  max-width: 600px;
  color: #aaa;
  font-size: 11px;
  line-height: 1.8;
}

.blog-cluster-entries {
  display: flex;
  flex-direction: column;
}

.blog-cluster-entries a {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid #292929;
  color: inherit;
  font-size: 12px;
  text-decoration: none;
}

.blog-cluster-entries a:visited {
  color: inherit;
}

.blog-cluster-entries a:hover,
.blog-cluster-entries a:visited:hover {
  color: #ff00aa;
}

.blog-cluster-entries a:focus-visible {
  outline: 1px solid #ff00aa;
  outline-offset: 3px;
}

.blog-cluster-entries a span {
  color: #ff00aa;
}

@media (max-width: 600px) {
  .blog-cluster-heading {
    padding: 16px;
    flex-wrap: wrap;
  }

  .blog-cluster-meta {
    display: none;
  }

  .blog-cluster-toggle {
    margin-left: auto;
  }

  .blog-cluster-content {
    padding: 0 16px 16px;
  }

  .blog-cluster-entries a {
    font-size: 11px;
  }
}


/* BLOG ARCHIVE */

.blog-archive {
  max-width: 650px;
  margin: 0 auto;
}

.blog-entry {
  border-top: 1px solid #333;
  padding: 35px 0 40px 0;
}

.blog-entry:last-child {
  border-bottom: 1px solid #333;
}


/* ENTRY METADATA */

.blog-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.blog-meta .post-date,
.entry-number {
  margin: 0;
  font-size: 10px;
  letter-spacing: 2px;
  opacity: 0.55;
}


/* ENTRY TITLE */

.blog-entry h1 {
  max-width: 600px;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: 2px;
  margin: 0 0 20px 0;
}

.blog-entry h1 a {
  color: #fff;
  text-decoration: none;
  transition: color 0.15s ease;
}

.blog-entry h1 a:hover {
  color: #ff00aa;
}


/* ENTRY EXCERPT */

.blog-entry > p {
  max-width: 600px;
  font-size: 12px;
  line-height: 1.8;
  margin: 0 0 24px 0;
  opacity: 0.65;
}


/* READ LINK */

.read-more {
  display: inline-block;
  color: #ff00aa;
  font-size: 10px;
  letter-spacing: 2px;
  text-decoration: none;
}

.read-more:hover {
  text-decoration: underline;
}


/* BLOG POST */

.post {
  max-width: 650px;
  margin: 0 auto 150px auto;
}


/* POST METADATA */

.post-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;

  font-size: 10px;
  letter-spacing: 2px;
  opacity: 1;
}


/* POST TITLE */

.post h1 {
  max-width: 620px;
  font-size: 28px;
  line-height: 1.3;
  letter-spacing: 3px;
  margin: 0 0 45px 0;
}


/* POST BODY */

.post p {
  font-size: 15px;
  line-height: 1.85;
  margin: 0 0 22px 0;
}

.post p:last-child {
  margin-bottom: 0;
}


/* BACK LINK */

.back-link {
  display: block;
  max-width: 650px;
  margin: 0 auto 45px auto;

  color: #ff00aa;
  font-size: 10px;
  letter-spacing: 2px;
  text-decoration: none;
}

.back-link:hover {
  text-decoration: underline;
}

/* BLOG POST IMAGES */

.post-image {
  margin: 0;
}

.post-image img {
  display: block;
  width: 100%;
  height: auto;
}

.post-image figcaption {
  margin-top: 10px;

  font-family: monospace;
  font-size: 9px;
  letter-spacing: 1.5px;

  color: #666;
}

/* ========================================
   BLOG POST — BOTTOM ACTIONS
======================================== */

.post-bottom-actions {
  margin-top: 40px;
  text-align: center;
}

/* SHARE */

.share-container {
  display: flex;
  justify-content: center;
}

.share-button {
  background: transparent;
  border: 1px solid #ff00aa;
  color: #ff00aa;
  font: inherit;
  font-size: 0.85rem;
  text-transform: uppercase;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.share-button:hover {
  background: #ff00aa;
  color: #000;
}

.share-button:active {
  transform: translateY(1px);
}

/* BACK TO ARCHIVE */

.bottom-back-link {
  display: inline-block;
  margin-top: 20px;
  color: #888;
  font-size: 0.8rem;
  text-decoration: none;
}

.bottom-back-link:hover {
  color: #ff00aa;
}

/* ================================= */
/* ABOUT */
/* ================================= */

.about-section {
  max-width: 800px;
  margin: 40px auto 40px auto;
}


/* ABOUT ME */

.about-grid {
  max-width: 650px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 30px;
  align-items: center;
}

.about-image {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 0;}

.about-image img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

.about-text {
  width: 100%;

  min-width: 0;}

.about-text h2 {
  color: #ff00aa;
  font-family: monospace;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 3px;
  margin: 0 0 30px 0;
}

.about-text p {
  line-height: 1.8;
  margin: 0 0 20px 0;
}

.about-text p:last-child {
  margin-bottom: 0;
}


/* ABOUT EXTRA */

.about-extra {
  max-width: 650px;
  margin: 35px auto 0 auto;
}

.about-block {
  border-top: 1px solid #333;
  padding: 30px 0 35px 0;
}

.about-block:last-child {
  border-bottom: none;
}

.about-block h2 {
  color: #ff00aa;
  font-family: monospace;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 3px;
  margin: 0 0 20px 0;
}

.about-block p {
  line-height: 1.8;
  margin: 0 0 20px 0;
}

.about-block p:last-child {
  margin-bottom: 0;
}

.about-block a {
  color: #fff;
  text-decoration: none;
}

.about-block a:hover {
  color: #ff00aa;
  text-decoration: underline;
}


/* ABOUT — LINKS */

.about-links {
  border-top: 1px solid #333;

  margin-top: 25px;}

.about-links a {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 14px 0;
  border-bottom: 1px solid #333;

  color: #aaa;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-decoration: none;
}

.about-links a::after {
  content: "→";
  color: #aaa;
}

.about-links a:hover {
  color: #ff00aa;
  text-decoration: none;
}

.about-links a:hover::after {
  color: #ff00aa;
}


/* TESTIMONY PROJECT LINK */

.about-testimonies .testimony-project-link {
  color: #888;
  text-decoration: none;
  font-size: 10px;
  transition: color 0.2s ease;
}

.about-testimonies .testimony-project-link:hover {
  color: #ff00aa;
  text-decoration: underline;
}

.about-testimonies .testimony-project-link:focus-visible {
  outline: 1px solid #ff00aa;
  outline-offset: 3px;
}

/* ================================= */
/* ARCHIVE ACCESS */
/* ================================= */

.access-page {
  background: #000;
  color: #fff;
}

.access-main {
  width: 100%;
  max-width: none;
  min-height: 100vh;

  margin: 0;
  padding: 40px;

  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: center;
}

.access-message {
  width: 100%;
  max-width: 520px;
}

.access-code {
  display: block;

  color: #555;

  font-size: 9px;
  letter-spacing: 2px;

  margin-bottom: 25px;
}

.access-message h1 {
  color: #ff00aa;

  font-size: 18px;
  letter-spacing: 3px;

  margin: 0 0 35px 0;
}

.access-message p {
  font-size: 12px;
  line-height: 2;
  letter-spacing: 1px;

  margin: 0 0 30px 0;
}

.access-status {
  display: block;

  padding: 12px 0;
  margin-bottom: 35px;

  border-top: 1px solid #333;
  border-bottom: 1px solid #333;

  color: #777;

  font-size: 10px;
  letter-spacing: 2px;
}

.access-data {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 30px;

  padding: 15px 0;
  margin-bottom: 35px;

  border-top: 1px solid #333;
  border-bottom: 1px solid #333;

  font-size: 10px;
  letter-spacing: 1px;
}

.access-data span:nth-child(odd) {
  color: #555;
}

.access-data span:nth-child(even) {
  text-align: right;
}

.access-warning {
  color: #777;
  font-size: 10px;
}

.access-message a {
  color: #ff00aa;

  font-size: 10px;
  letter-spacing: 2px;

  text-decoration: none;
}

.access-message a:hover {
  text-decoration: underline;
}

@media (max-width: 600px) {

  .access-main {
    padding: 25px;
  }

  .access-message h1 {
    font-size: 16px;
    letter-spacing: 2px;
  }

  .access-message p {
    font-size: 11px;
  }
}

/* ================================= */
/* FOOTER */
/* ================================= */

footer {
  margin-top: 200px;
  padding: 30px;
  text-align: center;
  font-size: 11px;
  opacity: 0.5;
}

.archive-meta {
  margin-top: 12px;
  font-family: monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-align: center;
  opacity: 0.9;
}

/* ================================= */
/* MOBILE */
/* ================================= */

@media (max-width: 600px) {

  body {
    overflow-x: hidden;
  }
  
}
@keyframes archive-pulse {
    0%, 100% {
      opacity: 0.35;
    }

    50% {
      opacity: 1;
    }
  }

@media (max-width: 600px) {

  /* HEADER */

  header {
    width: 100%;
    padding: 20px 0 0 0;
  }

  .personal-logo {
    position: static;
    display: block;
    width: fit-content;
    margin: 0 auto 24px;
  }

  .personal-logo img {
    display: block;
    width: 48px;
    height: auto;
  }

.project-status {
  width: 100%;
  max-width: none;
  margin: 60px auto 0;
}

.project-status h2 {
  font-size: 13px;
  letter-spacing: 3px;
  margin-bottom: 20px;
}

.status-list {
  padding: 18px 0;
}

.status-row {
  font-size: 10px;
  gap: 15px;
}

.latest a,
.status-link {
  font-size: 10px;
  letter-spacing: 2px;
}

  /* NAVIGATION */

nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
  padding: 0 15px;
  box-sizing: border-box;
}

  nav a {
    font-size: 10px;
    white-space: nowrap;
  }


  /* MAIN */

  main {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    margin-top: 70px;
    padding: 0 20px;
  }


  /* HOME */

  .title-image {
    width: 300px;
    max-width: 100%;
    margin-bottom: 20px;
  }

  .video-container {
    width: 100%;
    max-width: none;
    aspect-ratio: 16 / 9;
    margin: 0 auto 35px auto;
  }

  .hero {
    width: 100%;
    max-width: none;
    margin: 0 auto 55px auto;
  }

  .hero p {
    font-size: 14px;
    line-height: 1.8;
  }

 .latest {
  width: 100%;
  max-width: none;
  margin: 0 auto;
}

  .latest h2 {
    font-size: 13px;
    letter-spacing: 3px;
    margin-bottom: 15px;
  }

  .latest-entry {
    padding: 22px 0 28px 0;
  }

.archive-activity {
  width: 100%;
  max-width: none;
  margin: 60px auto 0;
}

.archive-activity h2 {
  font-size: 13px;
  letter-spacing: 3px;
  margin-bottom: 20px;
}

.activity-row {
  grid-template-columns: 90px 1fr;
  gap: 12px;
  font-size: 9px;
}

/* NOW TRANSMITTING */

.now-transmitting {
  width: 100%;
  margin-top: 55px;
}

.music-player {
  width: 100%;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 14px;
}

.music-play {
  width: 44px;
  height: 44px;
}

.music-track-info {
  width: 100%;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 10px;
}

.music-track {
  flex: 1;
}

.music-time {
  grid-column: 1 / -1;
  width: 100%;
  text-align: right;
}

.music-bottom {
  align-items: flex-start;
  gap: 15px;
}

.artist-link {
  text-align: right;
}

  /* PROJECT */

  .project-section {
    width: 100%;
    max-width: none;
    margin: 0 auto 70px auto;
  }

  .project-section h2 {
    font-size: 13px;
    letter-spacing: 3px;
    margin-bottom: 25px;
  }

  .project-section p {
    line-height: 1.8;
    margin-bottom: 22px;
  }


  /* CHARACTERS */

  .character-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  
  /* CHARACTERS */

.character-grid {
  grid-template-columns: 1fr;
  gap: 35px;
}

.character,
.phenomenon,
.character-panel,
.phenomenon-panel,
.recovered-item {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.character-panel {
  margin-top: 30px;
  padding: 25px 0;
}

  .character-portrait {
    max-width: 100%;
    height: auto;
  }


  /* PHENOMENA */

  .phenomena-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px 15px;
    margin-top: 25px;
  }

  .phenomenon-trigger img {
    width: 68%;
    max-width: 100%;
    height: auto;
  }

  .phenomenon-trigger:hover {
    transform: none;
  }

  .phenomena-panels {
    grid-column: 1 / -1;
    width: 100%;
  }

  .phenomenon-panel {
    width: 100%;
    box-sizing: border-box;
    padding: 25px 15px;
    text-align: left;
  }

  .phenomenon-number {
    font-size: 9px;
    letter-spacing: 1.5px;
  }

  .phenomenon-panel h3 {
    font-size: 14px;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
  }

  .phenomenon-panel p {
    font-size: 12px;
    line-height: 1.7;
    margin-bottom: 14px;
  }


  /* RECOVERED MATERIAL */

  .image-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }


  /* BLOG */

  .blog-header {
    margin: 25px auto 60px auto;
  }

  .blog-header h2 {
    font-size: 13px;
    margin-bottom: 20px;
  }

  .blog-header p {
    font-size: 10px;
    line-height: 1.8;
    letter-spacing: 0.8px;
  }

  .blog-archive {
    width: 100%;
  }

  .blog-entry {
    padding: 28px 0 35px 0;
  }

  .blog-entry .post-date {
    font-size: 10px;
    letter-spacing: 2px;
    margin-bottom: 14px;
  }

  .blog-entry h1 {
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: 2px;
    margin-bottom: 16px;
  }

  .blog-entry p {
    font-size: 12px;
    line-height: 1.8;
    margin-bottom: 20px;
  }

  .read-more {
    font-size: 10px;
  }

 /* THE PROTOCOL */

.protocol-modal {
  padding: 15px;
}

.protocol-viewer {
  max-width: 100%;
  max-height: 92vh;
}

.protocol-viewer img {
  max-height: 92vh;
}

.protocol-close {
  top: -35px;
  right: 0;
  font-size: 26px;
}

.protocol-transcription {
  width: 100%;
  max-height: 78vh;
  padding: 25px 20px;
}

.protocol-transcription h2 {
  font-size: 16px;
  margin-bottom: 25px;
}

.protocol-transcription p {
  font-size: 11px;
  line-height: 1.7;
}

.archive-folder-grid {
  grid-template-columns: 1fr;
  gap: 35px;
  margin-top: 45px;
}

.archive-folder-status {
  font-size: 10px;
  padding: 7px 11px;
}

 /* BLOG POST */

.post {
  width: 100%;
  margin: 0 auto 80px auto;
}

.post-meta {
  margin-bottom: 20px;
  font-size: 9px;
  letter-spacing: 1.5px;
}

.post h1 {
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: 2px;
  margin-bottom: 35px;
}

.post p {
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 20px;
}

.back-link {
  width: 100%;
  margin: 0 auto 35px auto;
  font-size: 10px;
  letter-spacing: 1.5px;
}


  /* ABOUT */

  .about-section {
    width: 100%;
    max-width: none;
    margin: 25px auto 60px auto;
  }

  .about-grid {
    width: 100%;
    max-width: none;
    grid-template-columns: 1fr;
    gap: 35px;
    align-items: flex-start;
  }

  .about-image {
    width: 100%;
    height: auto;
    display: block;
  }

  .about-image img {
    width: 100%;
    height: auto;
    max-width: 100%;
  }

  .about-text {
    width: 100%;
  }

  .about-text h2,
  .about-block h2 {
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: 3px;
  }

  .about-text p,
  .about-block p {
    font-size: 13px;
    line-height: 1.8;
  }

  .about-extra {
    width: 100%;
    max-width: 650px;
    margin: 35px auto 0 auto;
  }

  .about-block {
    padding: 25px 0 30px 0;
  }


  /* FOOTER */

  footer {
    margin-top: 60px;
    padding: 20px;
  }

}

/* =================================
   TESTIMONIES — MOBILE
================================= */

@media (max-width: 700px) {

  .about-testimonies {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .about-testimonies .testimony {
    padding: 16px 0 20px;
  }

  .about-testimonies .testimony-quote {
    font-size: 12px;
    line-height: 1.8;
    overflow-wrap: break-word;
  }

  .about-testimonies .testimony-author {
    font-size: 10px;
    gap: 5px;
  }

  .about-testimonies .testimony-project-link {
    font-size: 10px;
    overflow-wrap: break-word;
  }

  .about-testimonies .testimonies-toggle {
    font-size: 11px;
    padding: 14px 0;
  }

}

/* ================================= */
/* ARCHIVE ENTRANCE */
/* ================================= */

.archive-entry {
  min-height: 100vh;
  background: #000;
  margin: 0;
  overflow: hidden;
}


/* CENTER ARCHIVE */

.archive-entry-main {
  width: 100%;
  min-height: 100vh;
  max-width: none;
  margin: 0;
  padding: 40px;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


/* ARCHIVE FOLDER */

.archive-folder {
  display: block;
  width: 720px;
  max-width: 85vw;
  max-height: 85vh;

  cursor: pointer;
  text-decoration: none;

  transition:
    transform 0.18s ease,
    filter 0.18s ease;
}

.archive-folder img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 85vh;
  object-fit: contain;
}


/* INTERACTION */

.archive-folder:hover {
  transform: translateY(-4px);
  filter: brightness(1.08);
}

.archive-folder:active {
  transform: translateY(-1px);
}

.archive-folder:focus-visible {
  outline: 1px solid #ff00aa;
  outline-offset: 8px;
}


/* ================================= */
/* ARCHIVE ENTRANCE — MOBILE */
/* ================================= */

@media (max-width: 600px) {

  .archive-entry {
    min-height: 100svh;
  }

  .archive-entry-main {
    width: 100%;
    min-height: 100svh;
    max-width: none;

    margin: 0;
    padding: 20px 16px;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .archive-folder-group {
    width: 100%;
    max-width: 430px;

    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .archive-folder {
    display: block;

    width: 100%;
    max-width: 100%;

    margin: 0;

    cursor: pointer;
    text-decoration: none;

    -webkit-tap-highlight-color: rgba(255, 0, 170, 0.18);
    touch-action: manipulation;
  }

  .archive-folder img {
    display: block;

    width: 100%;
    height: auto;

    margin: 0 auto;

    object-fit: contain;
  }

  .archive-folder:hover {
    transform: none;
    filter: none;
  }

  .archive-folder:active {
    transform: scale(0.985);
    filter: brightness(1.08);
  }

  .archive-tap-hint {
    display: block;

    margin-top: 14px;
    padding: 8px 12px;

    border: 1px solid #ff00aa;

    color: #ff00aa;
    background: #000;

    font-family: monospace;
    font-size: 10px;
    font-weight: bold;
    line-height: 1.4;
    letter-spacing: 1.5px;

    text-align: center;

    pointer-events: none;

    animation: archive-pulse 1.8s ease-in-out infinite;
  }

  .indienodes-badge {
    margin-top: 20px;
  }

}

@keyframes archive-pulse {
  0%,
  100% {
    opacity: 0.55;
  }

  50% {
    opacity: 1;
  }
}

/* ================================= */
/* INDEX — INDIENODES BADGE */
/* ================================= */

.archive-entry-main {
  position: relative;
}

.archive-entry .indienodes-badge {
  position: absolute;
  left: 50%;
  bottom: 24px;

  display: block;
  margin: 0;

  transform: translateX(-50%);

  line-height: 0;
  opacity: 0.65;

  transition: opacity 0.2s ease;
}

.archive-entry .indienodes-badge:hover {
  opacity: 1;
}

.archive-entry .indienodes-badge img {
  display: block;
}

@media (max-width: 600px) {

  .archive-entry .indienodes-badge {
    bottom: 18px;
  }

}


/* ================================= */
/* REDUCED MOTION */
/* ================================= */

@media (prefers-reduced-motion: reduce) {

  .folder-trigger,
  .folder-trigger img,
  .character-panel,
  .phenomenon-trigger,
  .phenomenon-trigger img,
  .phenomenon-panel {
    transition: none;
    animation: none;
  }

} /* CLOSE REDUCED MOTION */


/* ================================= */
/* LARGE DESKTOP */
/* ================================= */

@media (min-width: 1600px) {

  body {
    font-size: 15px;
  }

  main {
    max-width: 1050px;
  }

} /* CLOSE LARGE DESKTOP */

/* ========================================
   AUDIO ARCHIVE — ARTIST PROFILE
======================================== */

.artist-back {
  width: 100%;
  max-width: 650px;
  margin: 0 auto 45px auto;
  box-sizing: border-box;
  text-align: left;
}

.artist-back a {
  display: inline-block;
  color: #ff00aa;
  font-size: 10px;
  letter-spacing: 2px;
  text-decoration: none;
}

.artist-back a:hover {
  text-decoration: underline;
}
.artist-back a,
.artist-bottom-back a {
  color: #ff00aa;
  font-size: 10px;
  letter-spacing: 2px;
  text-decoration: none;
}

.artist-back a:hover,
.artist-bottom-back a:hover {
  color: #ff00aa;
  text-decoration: underline;
}

/* HEADER */

.artist-header {
  max-width: 650px;
  margin: 0 auto 35px;
}

.artist-file-number {
  display: block;
  color: #ff00aa;
  font-size: 9px;
  letter-spacing: 2px;
  margin-bottom: 5px;
}

.artist-header h1 {
  margin: 0 0 12px;
  font-size: 26px;
  font-weight: normal;
  letter-spacing: 2px;
}

.artist-location {
  display: flex;
  gap: 20px;

  color: #777;

  font-size: 10px;
  letter-spacing: 1.5px;
}


/* PROFILE */

.artist-profile-grid {
  max-width: 650px;

  margin: 0 auto 70px;

  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 35px;
}

.artist-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #111;
}

.artist-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(100%);
}

.artist-biography h2 {
  margin: 0 0 18px;

  color: #ff00aa;

  font-size: 10px;
  font-weight: normal;
  letter-spacing: 1.5px;

  padding-bottom: 8px;
  border-bottom: 1px solid #333;
}

.artist-biography p {
  margin: 0 0 18px;
  color: #aaa;
  font-size: 11px;
  line-height: 1.9;
}


/* SECTIONS */

.artist-section {
  max-width: 650px;
  margin: 0 auto 70px;
}

.artist-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 22px;
  padding-bottom: 8px;

  border-bottom: 1px solid #333;
}

.artist-section-header h2 {
  margin: 0;

  color: #ff00aa;

  font-size: 10px;
  font-weight: normal;
  letter-spacing: 1.5px;
}

.artist-section-header span {
  color: #555;
  font-size: 9px;
}


/* PLAYER */

.artist-player {
  display: flex;
  align-items: center;
  gap: 18px;
}

.artist-play {
  width: 42px;
  height: 42px;

  flex-shrink: 0;

  border: 1px solid #ff00aa;
  background: transparent;

  color: #ff00aa;

  font-family: inherit;
  font-size: 12px;

  cursor: pointer;
}

.artist-play:hover {
  background: #ff00aa;
  color: #000;
}

.artist-player-content {
  flex: 1;
}

.artist-track-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  gap: 20px;
}

.artist-track-name {
  display: flex;
  flex-direction: column;
}

.artist-track-artist {
  color: #fff;

  font-size: 12px;
  letter-spacing: 1px;
}

.artist-track-title {
  color: #888;

  font-size: 10px;
  letter-spacing: 1px;
}

.artist-track-time {
  color: #777;

  font-size: 10px;

  white-space: nowrap;
}


/* PROGRESS */

.artist-progress {
  position: relative;

  width: 100%;
  height: 3px;

  margin-top: 14px;

  background: #333;

  cursor: pointer;
}

.artist-progress-fill {
  width: 0;
  height: 100%;

  background: #ff00aa;
}


/* SUPPORT */

.artist-support {
  margin-top: 18px;
  text-align: right;
}

.artist-support a {
  color: #888;

  text-decoration: none;

  font-size: 12px;
  letter-spacing: 1.5px;
}

.artist-support a:hover {
  color: #ff00aa;
}


/* RELEASES */

.release-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.release {
  display: flex;
  flex-direction: column;

  color: #fff;
  text-decoration: none;
}

.release img {
  display: block;

  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;

  margin-bottom: 10px;

  filter: grayscale(100%);
  transition: filter 0.2s ease;
}

.release:hover img {
  filter: grayscale(0%);
}

.release-title {
  color: #aaa;
  font-size: 12px;
  letter-spacing: 1px;
}

.release-year {
  color: #555;
  font-size: 10px;
  letter-spacing: 1px;
}


/* LINKS */

.artist-links {
  border-top: 1px solid #222;
}

.artist-links a {
  display: flex;

  justify-content: space-between;
  align-items: center;

  padding: 10px 0;

  border-bottom: 1px solid #222;

  color: #888;

  text-decoration: none;

  font-size: 12px;
  letter-spacing: 1.5px;
}

.artist-links a:hover {
  color: #ff00aa;
}


/* BOTTOM */

.artist-bottom-back {
  max-width: 650px;

  margin: 100px auto 0;

  padding-top: 15px;

  border-top: 1px solid #222;
}


/* AUDIO ARCHIVE — ROW INTERACTION */

.audio-row-title {
  color: #999;
  transition: color 0.15s ease;
}

.audio-row-play {
  transition: color 0.15s ease;
}

.audio-track-row:hover .audio-row-title {
  color: #fff;
}

.audio-track-row:hover .audio-row-play {
  color: #ff00aa;
}

/* ========================================
   ARTIST PROFILE — MOBILE
======================================== */

@media (max-width: 600px) {

  .artist-header,
  .artist-profile-grid,
  .artist-section,
  .artist-bottom-back {
    width: 100%;
    max-width: none;
  }

  .artist-profile-grid {
    display: block;
    margin-bottom: 60px;
  }

  .artist-photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    margin-bottom: 30px;
  }

  .artist-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: grayscale(100%);
  }

  .artist-header h1 {
    font-size: 22px;
  }

  .artist-location {
    flex-direction: column;
    gap: 2px;
  }

  .artist-player {
    align-items: flex-start;
  }

  .artist-player-content {
    min-width: 0;
  }

  .artist-track-top {
    display: block;
  }

  .artist-track-time {
    display: block;
    margin-top: 8px;
    text-align: right;
  }

  .artist-track-top {
    gap: 10px;
  }

  .release-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}

/* ================================= */
/* AUDIO ARCHIVE PAGE */
/* ================================= */

.audio-header {
  width: 100%;
  max-width: 650px;
  margin: 40px auto 80px auto;
  box-sizing: border-box;
}

.audio-header h2 {
  color: #ff00aa;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 3px;
  margin: 0 0 25px 0;
}

.audio-header p {
  margin: 0;
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 1px;
  opacity: 0.5;
}


/* PLAYER POSITION */

.audio-header + .now-transmitting {
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
  box-sizing: border-box;
}


/* PLAYER LINKS */

.audio-links {
  display: flex;
  gap: 14px;
  align-items: center;
}


/* ================================= */
/* ARCHIVE LIST */
/* ================================= */

.audio-track-archive {
  width: 100%;
  max-width: 650px;
  margin: 0 auto 100px auto;
  box-sizing: border-box;
}


/* ARCHIVE HEADER */

.audio-archive-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 25px;
}

.audio-archive-header h2 {
  margin: 0;

  color: #ff00aa;

  font-size: 14px;
  font-weight: bold;
  letter-spacing: 3px;
}

.audio-archive-header > span {
  color: #aaa;
  font-size: 10px;
  letter-spacing: 1.5px;
}


/* COLUMN HEADERS */

.audio-columns {
  display: grid;

  grid-template-columns:
    40px
    minmax(0, 2fr)
    minmax(0, 1.3fr)
    55px
    25px;

  gap: 12px;

  padding: 0 0 10px 0;

  border-bottom: 1px solid #333;

  color: #666;

  font-size: 8px;
  letter-spacing: 1px;
}


/* TRACK ROW */

.audio-track-row {
  display: grid;

  grid-template-columns:
    40px
    minmax(0, 2fr)
    minmax(0, 1.3fr)
    55px
    25px;

  gap: 12px;

  align-items: center;

  padding: 18px 0;

  border-bottom: 1px solid #333;

  box-sizing: border-box;
}


/* NUMBER */

.audio-row-number {
  color: #777;
  font-size: 9px;
}


/* ARTIST / TRACK */

.audio-row-track {
  display: flex;
  flex-direction: column;

  min-width: 0;

  gap: 2px;
}

.audio-row-artist {
  color: #fff;

  font-size: 10px;
  letter-spacing: 1px;
}

.audio-row-title {
  color: #888;

  font-size: 9px;
  letter-spacing: 0.5px;
}


/* LOCATION / GENRE */

.audio-row-meta {
  display: flex;
  flex-direction: column;

  color: #777;

  font-size: 8px;
  line-height: 1.7;
  letter-spacing: 0.5px;
}


/* LENGTH */

.audio-row-length {
  color: #888;

  font-size: 9px;
}


/* PLAY BUTTON */

.audio-row-play {
  display: block;

  width: 25px;
  height: 25px;

  margin: 0;
  padding: 0;

  border: 0;

  background: transparent;
  color: #ff00aa;

  font-family: monospace;
  font-size: 14px;
  line-height: 25px;

  text-align: center;

  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;
}

.audio-row-play:hover {
  color: #fff;
}


/* ACTIVE TRACK */

.audio-track-row.is-current .audio-row-number {
  color: #ff00aa;
}

.audio-track-row.is-current .audio-row-artist {
  color: #fff;
}


/* ================================= */
/* MOBILE AUDIO ARCHIVE */
/* ================================= */

@media (max-width: 600px) {

  .audio-header {
    width: 100%;
    margin: 25px auto 60px auto;
  }

  .audio-header h2 {
    font-size: 13px;
    margin-bottom: 20px;
  }

  .audio-header p {
    font-size: 10px;
    line-height: 1.8;
  }


  .audio-links {
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
  }


  .audio-track-archive {
    width: 100%;
    max-width: none;

    margin: 0 auto 60px auto;
  }


  .audio-archive-header h2 {
    font-size: 13px;
  }


  .audio-columns {
    display: none;
  }


  .audio-track-row {
    grid-template-columns:
      30px
      minmax(0, 1fr)
      45px;

    gap: 8px 10px;

    padding: 18px 0;
  }


  .audio-row-number {
    grid-column: 1;
    grid-row: 1 / 3;
  }


  .audio-row-track {
    grid-column: 2;
    grid-row: 1;
  }


  .audio-row-meta {
    grid-column: 2;
    grid-row: 2;

    margin-top: 4px;
  }


  .audio-row-length {
    grid-column: 3;
    grid-row: 1;

    text-align: right;
  }


  .audio-row-play {
    grid-column: 3;
    grid-row: 2;

    justify-self: end;
  }
  
}

/* AUDIO — VISUAL POLISH */

.audio-header + .now-transmitting {
  padding-bottom: 45px;
}

.audio-columns {
  grid-template-columns:
    40px
    minmax(0, 2fr)
    minmax(0, 1.3fr)
    55px
    25px;

  font-size: 8px;
}

.audio-row-artist {
  font-size: 11px;
}

.audio-row-title {
  font-size: 9px;
  margin-top: 3px;
}

.audio-row-meta {
  font-size: 9px;
}

.audio-row-length {
  font-size: 9px;
}

.audio-track-row {
  padding: 20px 0;
}

.music-artist {
  color: #fff;
  font-size: 12px;
  letter-spacing: 1px;
  text-decoration: none;
}

.music-artist:hover {
  color: #ff00aa;
}

.music-artist-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.music-artist-link:hover {
  color: #ff00aa;
}

.music-artist-link::before {
  content: "→";
  color: #ff00aa;
  margin-right: 7px;
}

.music-artist-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.music-artist-link:hover {
  color: #ff00aa;
}

.audio-row-artist-link {
  color: #fff;
  text-decoration: none;
  transition: color 0.15s ease;
}

.audio-row-artist-link::before {
  content: "→";
  color: #ff00aa;
  margin-right: 6px;
}

.audio-row-artist-link:hover {
  color: #ff00aa;
}

/* ================================= */
/* AUDIO — MINI PLAYER */
/* ================================= */

.mini-player {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;

  background: #000;
  border-top: 1px solid #333;
}

.mini-player-inner {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 12px 30px;
  box-sizing: border-box;

  display: grid;
  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto
    150px;
  align-items: center;
  gap: 18px;
}

/* TRANSPORT */

.mini-controls {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.mini-prev,
.mini-play,
.mini-next {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;

  color: #ff00aa;
  font-family: monospace;
  font-size: 11px;
  line-height: 1;

  cursor: pointer;
}

.mini-play {
  font-size: 14px;
}

.mini-prev:hover,
.mini-play:hover,
.mini-next:hover {
  color: #fff;
}

/* TRACK */

.mini-track-info {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
}

.mini-artist {
  flex-shrink: 0;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-decoration: none;
}

.mini-artist::before {
  content: "→";
  color: #ff00aa;
  margin-right: 6px;
}

.mini-artist:hover {
  color: #ff00aa;
}

.mini-title {
  min-width: 0;
  color: #aaa;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* TIME */

.mini-time {
  flex-shrink: 0;
  color: #777;
  font-size: 9px;
  white-space: nowrap;
  display: inline-block;
  min-width: 12ch;
  font-variant-numeric: tabular-nums;
}

/* PROGRESS */

.mini-progress {
  width: 100%;
  height: 2px;
  background: #333;
  cursor: pointer;
}

.mini-progress-fill {
  width: 0%;
  height: 100%;
  background: #ff00aa;
}

/* Leave room for fixed player */

body {
  padding-bottom: 60px;
}

/* MINI PLAYER — MOBILE */

@media (max-width: 600px) {

  .mini-player-inner {
    padding: 9px 15px;
    grid-template-columns:
      auto
      minmax(0, 1fr)
      auto;
    gap: 10px;
  }

  .mini-controls {
    gap: 1px;
  }

  .mini-prev,
  .mini-play,
  .mini-next {
    width: 18px;
    height: 20px;
    font-size: 9px;
  }

  .mini-play {
    font-size: 12px;
  }

  .mini-track-info {
    display: block;
  }

  .mini-artist,
  .mini-title {
    display: block;
    font-size: 8px;
    line-height: 1.5;
  }

  .mini-time {
    font-size: 8px;
  }

  .mini-progress {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* ================================= */


/* ================================= */
/* AUDIO ARCHIVE — FINAL READABILITY */
/* ================================= */

.audio-archive-description {
  margin: -2px 0 28px;
  color: #888;
  font-size: 9px;
  letter-spacing: 1.5px;
  line-height: 1.6;
}

.audio-archive-header > span {
  color: #aaa;
  font-size: 10px;
  letter-spacing: 1.5px;
}

.audio-columns {
  color: #aaa;
  font-size: 9px;
  letter-spacing: 1px;
}

.audio-row-title {
  color: #aaa;
}

.audio-row-meta {
  color: #999;
}

.audio-row-length {
  color: #aaa;
}



/* ================================= */
/* AUDIO PLAYER — WIDTH SAFEGUARD */
/* ================================= */

.audio-header,
.audio-header + .now-transmitting,
.audio-track-archive {
  width: 100%;
  max-width: 650px;
  box-sizing: border-box;
}

.audio-header + .now-transmitting .music-player,
.audio-header + .now-transmitting .music-content,
.audio-header + .now-transmitting .music-progress,
.audio-header + .now-transmitting .music-bottom {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

@media (max-width: 600px) {
  .audio-header,
  .audio-header + .now-transmitting,
  .audio-track-archive {
    max-width: none;
  }
}


/* ================================= */
/* AUDIO PLAYER — FINAL FIX */
/* ================================= */

.audio-header,
.audio-header + .now-transmitting,
.audio-track-archive {
  width: 100%;
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}


/* BIG PLAYER */

.audio-header + .now-transmitting .music-player {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}


/* PLAY BUTTON */

.audio-header + .now-transmitting .music-play {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
}


/* EVERYTHING BESIDE PLAY BUTTON */

.audio-header + .now-transmitting .music-content {
  width: auto;
  min-width: 0;
  flex: 1 1 0;
}


/* TRACK INFORMATION */

.audio-header + .now-transmitting .music-track-info {
  width: 100%;

  display: flex;
  align-items: flex-start;

  gap: 18px;
}


.audio-header + .now-transmitting .music-number {
  flex: 0 0 auto;
}


.audio-header + .now-transmitting .music-track {
  flex: 1 1 auto;
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 2px;
}


.audio-header + .now-transmitting .music-artist,
.audio-header + .now-transmitting .music-title {
  white-space: normal;
}


.audio-header + .now-transmitting .music-time {
  flex: 0 0 auto;

  width: auto;
  margin-left: auto;

  white-space: nowrap;
  text-align: right;
}


/* PROGRESS */

.audio-header + .now-transmitting .music-progress {
  width: 100%;
  max-width: none;

  margin-top: 15px;
}


/* BOTTOM INFO */

.audio-header + .now-transmitting .music-bottom {
  width: 100%;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 30px;

  margin-top: 14px;
}


.audio-header + .now-transmitting .music-meta {
  flex: 0 1 auto;
}


.audio-header + .now-transmitting .audio-links {
  flex: 0 0 auto;

  margin-left: auto;
}


.audio-header + .now-transmitting .artist-link {
  white-space: nowrap;
}


/* ================================= */
/* MOBILE */
/* ================================= */

@media (max-width: 600px) {

  .audio-header,
  .audio-header + .now-transmitting,
  .audio-track-archive {
    width: 100%;
    max-width: none;
  }


  .audio-header + .now-transmitting .music-player {
    gap: 14px;
  }


  .audio-header + .now-transmitting .music-play {
    width: 44px;
    height: 44px;

    flex-basis: 44px;
  }


  .audio-header + .now-transmitting .music-track-info {
    display: grid;

    grid-template-columns:
      auto
      minmax(0, 1fr);

    gap: 5px 10px;
  }


  .audio-header + .now-transmitting .music-time {
    grid-column: 1 / -1;

    width: 100%;

    margin-left: 0;

    text-align: right;
  }


  .audio-header + .now-transmitting .music-bottom {
    gap: 15px;
  }


  .audio-header + .now-transmitting .artist-link {
    white-space: normal;
    text-align: right;
  }

}

/* =========================================
   SUBJECT DATABASE
========================================= */

.subjects-header {
  width: 100%;
  max-width: 650px;
  margin: 40px auto 45px auto;
  box-sizing: border-box;
}

.subjects-header h1 {
  margin: 0 0 25px 0;
  color: #ff00aa;
  font-family: monospace;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: 3px;
}

.subjects-header p {
  margin: 0;
  font-family: monospace;
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 1px;
  opacity: 0.5;
}

.subjects-header-line {
  width: 100%;
  height: 1px;
  margin-top: 25px;
  background: #333;
}

/* GRID */

.subjects-grid {
  width: 100%;
  max-width: 650px;
  margin: 0 auto 100px auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 38px 16px;
  box-sizing: border-box;
}

.subject {
  min-width: 0;
}

/* CLICKABLE PORTRAIT */

.subject-image {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #020604;
  border: 1px solid #18251d;
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
}

.subject-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter:
    grayscale(1)
    contrast(1.25)
    brightness(0.65)
    sepia(1)
    hue-rotate(75deg)
    saturate(3);
  transition:
    filter 0.25s ease,
    transform 0.35s ease;
}

.subject-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      rgba(0, 255, 90, 0.08),
      rgba(0, 255, 90, 0.02)
    );
  mix-blend-mode: screen;
  transition: background 0.25s ease;
}

.subject-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 2px,
      rgba(80, 255, 120, 0.16) 3px,
      transparent 4px
    );
}

/* HOVER */

.subject-detected {
  position: absolute;
  left: 9px;
  bottom: 8px;
  z-index: 2;
  color: #7dff9f;
  font-family: monospace;
  font-size: 8px;
  letter-spacing: 1px;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.subject:hover .subject-image img {
  filter:
    grayscale(1)
    contrast(1.4)
    brightness(0.82)
    sepia(1)
    hue-rotate(75deg)
    saturate(5);
  transform: scale(1.025);
}

.subject:hover .subject-image::after {
  background:
    linear-gradient(
      rgba(0, 255, 90, 0.16),
      rgba(0, 255, 90, 0.04)
    );
}

.subject:hover .subject-detected {
  opacity: 1;
  transform: translateY(0);
}

/* INFO */

.subject-info {
  margin-top: 10px;
}

.subject-number {
  display: block;
  margin-bottom: 3px;
  color: #4dff88;
  font-family: monospace;
  font-size: 8px;
  letter-spacing: 1px;
}

.subject-info h2 {
  margin: 0;
  color: #fff;
  font-family: monospace;
  font-size: 12px;
  font-weight: normal;
  line-height: 1.5;
  letter-spacing: 1px;
}

.subject-location {
  display: block;
  margin-top: 3px;
  color: #666;
  font-family: monospace;
  font-size: 8px;
  letter-spacing: 1px;
}

/* =========================================
   SUBJECT DATABASE — MOBILE
========================================= */

@media (max-width: 600px) {
  .subjects-header {
    width: 100%;
    max-width: none;
    margin: 25px auto 40px auto;
  }

  .subjects-header h1 {
    font-size: 13px;
    letter-spacing: 3px;
    margin-bottom: 20px;
  }

  .subjects-header p {
    font-size: 10px;
    line-height: 1.8;
    letter-spacing: 0.8px;
  }

  .subjects-header-line {
    margin-top: 20px;
  }

  .subjects-grid {
    width: 100%;
    max-width: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 12px;
    margin-bottom: 70px;
  }

  .subject-info {
    margin-top: 8px;
  }

  .subject-number,
  .subject-location {
    font-size: 7px;
  }

  .subject-info h2 {
    font-size: 10px;
  }

  .subject-detected {
    display: none;
  }
}

/* ================================= */
/* PAGE HEADER SPACING — FINAL */
/* BLOG / AUDIO / SUBJECT DATABASE */
/* ================================= */

.blog-header,
.audio-header,
.subjects-header {
  width: 100%;
  max-width: 650px;
  margin: 40px auto 80px auto;
  box-sizing: border-box;
}

/* SUBJECT DATABASE follows the same open header structure as BLOG/AUDIO */
.subjects-header-line {
  display: none;
}

@media (max-width: 600px) {
  .blog-header,
  .audio-header,
  .subjects-header {
    width: 100%;
    max-width: none;
    margin: 25px auto 60px auto;
  }
}

/* ================================= */
/* MOBILE NAVIGATION — FINAL FIX */
/* ================================= */

@media (max-width: 600px) {
  nav {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 8px;

    align-items: center;
    justify-content: initial;
  }

  nav a {
    display: block;
    min-width: 0;
    padding: 0 0 5px 0;

    color: #ff00aa;
    font-family: monospace;
    font-size: 10px;
    letter-spacing: 1px;
    line-height: 1.4;

    text-align: center;
    white-space: nowrap;
    text-decoration: none;

    border-bottom: 1px solid transparent;
    box-sizing: border-box;
  }

  nav a:hover,
  nav a:active,
  nav .active {
    border-bottom-color: #ff00aa;
  }

  /* Seventh link: separate archive access row */
nav a[href="/visitor-log"],
nav a[href="/visitor-log"] {
  grid-column: 1 / -1;
  width: 100%;
  text-align: center;
  margin-top: 2px;
  padding: 0px 0;
  border-top: none;
  border-bottom: 1px solid transparent;
  letter-spacing: 1.5px;
}

  nav a[href="/visitor-log"]:hover,
  nav a[href="/visitor-log"].active,
  nav a[href="/visitor-log"]:hover,
  nav a[href="/visitor-log"].active {
    border-bottom-color: #ff00aa;
  }

  header { padding-top: 20px; }
  .personal-logo { margin-bottom: 20px; }
  main { margin-top: 35px; }
}

/* ================================= */
/* MVNDY ARCHIVE ANNOTATIONS */
/* ================================= */

.archive-scribble {
  position: absolute;
  display: block;
  height: auto;
  pointer-events: none;
  user-select: none;
  z-index: 5;
}


/* HOME — SIGNAL FOUND */

.now-transmitting {
  position: relative;
}

.home-signal-found {
  width: 105px;
  top: -32px;
  right: -55px;
  opacity: 0.72;
  transform: rotate(7deg);
}


/* HOME — AUDIO ARCHIVE ARROW */

.audio-archive-access {
  position: relative;
}

.home-audio-arrow {
  width: 65px;
  left: -68px;
  top: -6px;
  opacity: 0.65;
  transform: rotate(-8deg);
}


/* MOBILE */

@media (max-width: 600px) {

  .home-signal-found {
    width: 72px;
    top: -37px;
    right: 3px;
    opacity: 0.58;
    transform: rotate(6deg);
  }

  .home-audio-arrow {
    width: 45px;
    left: auto;
    right: 3px;
    top: -35px;
    opacity: 0.55;
    transform: rotate(15deg);
  }

}

/* =================================
   SUBJECT DATABASE — ANNOTATIONS
================================= */

.subject {
  position: relative;
}

.subject-info {
  position: relative;
}


/* SUBJECT 008 — ??? */

.subjects-questions {
  width: 65px;
  right: -25px;
  top: 15px;

  opacity: 0.72;
  transform: rotate(9deg);
}


/* SUBJECT 020 — CIRCLE */

.subjects-circle {
  width: 100px;
  left: -18px;
  top: -13px;

  opacity: 0.65;
  transform: rotate(-5deg);
}


/* SUBJECT 034 — CLASSIFIED */

.subjects-classified {
  width: 100px;
  right: -40px;
  top: 20px;

  opacity: 0.7;
  transform: rotate(6deg);
}

/* SUBJECT 014 — POTENTIAL BREACH */

.subjects-breach {
  width: 115px;
  left: -45px;
  top: 55px;
  opacity: 0.68;
  transform: rotate(-8deg);
}


/* SUBJECT 027 — TRIBUNAL MARK */

.subjects-crosshair {
  width: 48px;
  right: -18px;
  top: 105px;
  opacity: 0.55;
  transform: rotate(11deg);
}


/* SUBJECT 039 — UNKNOWN */

.subjects-unknown {
  width: 90px;
  right: -35px;
  bottom: 15px;
  opacity: 0.7;
  transform: rotate(-6deg);
}


@media (max-width: 600px) {

  .subjects-breach {
    width: 82px;
    left: -8px;
    top: 45px;
  }

  .subjects-crosshair {
    width: 36px;
    right: -4px;
    top: 80px;
  }

  .subjects-unknown {
    width: 66px;
    right: -4px;
    bottom: 8px;
  }

}


/* MOBILE */

@media (max-width: 600px) {

  .subjects-questions {
    width: 48px;
    right: -5px;
    top: 8px;
  }

  .subjects-circle {
    width: 76px;
    left: -10px;
    top: -9px;
  }

  .subjects-classified {
    width: 72px;
    right: -5px;
    top: 10px;
  }

}

/* =================================
   AUDIO ARCHIVE — ANNOTATIONS
================================= */

.audio-track-archive,
.audio-archive-header,
.audio-track-row {
  position: relative;
}


/* ARCHIVE HEADER */

.audio-signal-found {
  width: 90px;
  right: -60px;
  top: -25px;
  opacity: 0.62;
  transform: rotate(7deg);
}


/* TRACK 001 */

.audio-waveform {
  width: 85px;
  left: -100px;
  top: 50%;
  opacity: 0.5;
  transform: translateY(-50%) rotate(-4deg);
}


/* TRACK 003 */

.audio-track-arrow {
  width: 55px;
  right: -68px;
  top: 25px;
  opacity: 0.62;
  transform: scaleX(-1) rotate(14deg);
}


/* TRACK 005 */

.audio-received {
  width: 100px;
  left: -105px;
  top: 20px;
  opacity: 0.7;
  transform: rotate(-7deg);
}


/* TRACK 007 */

.audio-crosshair {
  width: 45px;
  right: -55px;
  top: 18px;
  opacity: 0.5;
  transform: rotate(8deg);
}


/* MOBILE */

@media (max-width: 600px) {

  .audio-signal-found {
    width: 65px;
    right: 0;
    top: -35px;
  }

  .audio-waveform {
    width: 55px;
    left: 3px;
    top: -20px;
    transform: rotate(-4deg);
  }

  .audio-track-arrow {
    width: 38px;
    right: 4px;
    top: 8px;
    transform: scaleX(-1) rotate(14deg);
  }

  .audio-received {
    width: 70px;
    left: 4px;
    top: -25px;
  }

  .audio-crosshair {
    width: 32px;
    right: 5px;
    top: 10px;
  }

}

/* =================================
   PROJECT — ARCHIVE ANNOTATIONS
================================= */

.character,
.phenomenon,
.project-world,
.recovered-material {
  position: relative;
}


/* MANDY */

.project-mandy-questions {
  width: 60px;
  right: -20px;
  top: 10px;
  opacity: 0.62;
  transform: rotate(8deg);
}


/* TRIBUNAL */

.project-tribunal-mark {
  width: 48px;
  right: -15px;
  bottom: 20px;
  opacity: 0.70;
  transform: rotate(-8deg);
}


/* THE JUDGE */

.project-judge-unknown {
  width: 90px;
  right: -35px;
  top: 20px;
  opacity: 0.68;
  transform: rotate(7deg);
}


/* THE WORLD */

.project-world-wave {
  width: 140px;
  right: -50px;
  top: 5px;
  opacity: 0.45;
  transform: rotate(-4deg);
}


/* PSYCHONAUTICS */

.project-psych-arrow {
  width: 55px;
  left: -45px;
  top: 45px;
  opacity: 0.62;
  transform: rotate(-12deg) scale(0.6);
}


/* DIMENSIONAL BREACHES */

.project-breach {
  width: 115px;
  right: -55px;
  top: 35px;
  opacity: 0.72;
  transform: rotate(8deg);
}


/* RECOVERED MATERIAL */

.project-recovered-classified {
  width: 105px;
  right: -35px;
  top: -10px;
  opacity: 0.62;
  transform: rotate(-6deg);
}


/* MOBILE */

@media (max-width: 600px) {

  .project-mandy-questions {
    width: 43px;
    right: 0;
    top: 4px;
  }

  .project-tribunal-mark {
    width: 34px;
    right: 2px;
    bottom: 10px;
  }

  .project-judge-unknown {
    width: 64px;
    right: 0;
    top: 8px;
  }

  .project-world-wave {
    width: 80px;
    right: 0;
    top: 0;
  }

  .project-psych-arrow {
    width: 38px;
    left: 0;
    top: 35px;
  }

  .project-breach {
    width: 78px;
    right: 0;
    top: 25px;
  }

  .project-recovered-classified {
    width: 72px;
    right: 0;
    top: -5px;
  }

}

/* =================================
   BLOG — ARCHIVE ANNOTATIONS
================================= */

.blog-entry {
  position: relative;
}


/* ENTRY 005 — ABOUT DRAWING */

.blog-drawing-circle {
  width: 125px;
  left: -35px;
  top: 38px;
  opacity: 0.55;
  transform: rotate(-5deg);
}


/* ENTRY 004 — HOW TO MAKE A COMIC */

.blog-comic-arrow {
  width: 60px;
  right: -55px;
  bottom: 25px;
  opacity: 0.62;
  transform: scale(-1) rotate(15deg);
}


/* ENTRY 003 — THE POWER OF VISION */

.blog-vision-questions {
  width: 58px;
  right: -30px;
  top: 32px;
  opacity: 0.65;
  transform: rotate(8deg);
}


/* ENTRY 001 — THE BEGINNING */

.blog-beginning-wave {
  width: 90px;
  left: -70px;
  top: 48px;
  opacity: 0.45;
  transform: rotate(-5deg);
}


/* MOBILE */

@media (max-width: 600px) {

  .blog-drawing-circle {
    width: 85px;
    left: -5px;
    top: 35px;
  }

  .blog-comic-arrow {
    width: 42px;
    right: 2px;
    bottom: 20px;
  }

  .blog-vision-questions {
    width: 42px;
    right: 3px;
    top: 25px;
  }

  .blog-beginning-wave {
    width: 62px;
    left: 2px;
    top: 42px;
  }

}

/* =================================
   ABOUT — ARCHIVE ANNOTATIONS
================================= */

.about-text,
.about-block {
  position: relative;
}


/* ABOUT ME */

.about-me-arrow {
  width: 70px;
  right: -45px;
  top: 25px;
  opacity: 0.55;
  transform: scale(-1) rotate(12deg);
}


/* MUSIC */

.about-music-wave {
  width: 120px;
  right: -55px;
  bottom: -20px;
  opacity: 0.45;
  transform: rotate(-5deg);
}


/* ABOUT MVNDY */

.about-signal-found {
  width: 95px;
  right: -35px;
  top: -15px;
  opacity: 0.62;
  transform: rotate(7deg);
}


/* MOBILE */

@media (max-width: 600px) {

  .about-me-arrow {
    width: 40px;
    right: 2px;
    top: 25px;
  }

  .about-music-wave {
    width: 62px;
    right: 2px;
    bottom: -15px;
  }

  .about-signal-found {
    width: 68px;
    right: 2px;
    top: -10px;
  }

}

/* =================================
   SUBJECT DATABASE — NEW ANNOTATIONS
================================= */

/* Needed for positioning the date */
.subjects-header {
  position: relative;
}


/* SUBJECT 003 — FOUR POINT STAR */

.subjects-star {
  width: 70px;
  right: -22px;
  top: 18px;
  opacity: 0.9;
  transform: rotate(8deg);
}


/* SUBJECT 011 — OBSERVATION */

.subjects-observation {
  width: 125px;
  left: -70px;
  bottom: 80px;
  opacity: 0.8;
  transform: rotate(-5deg);
}


/* SUBJECT 017 — CRESCENT */

.subjects-crescent {
  width: 60px;
  left: -32px;
  top: 55px;
  opacity: 0.8;
  transform: rotate(-10deg);
}


/* SUBJECT 023 — SUBJECT IDENTIFIED */

.subjects-identified {
  width: 115px;
  right: -45px;
  bottom: 100px;
  opacity: 0.9;
  transform: rotate(6deg);
}


/* SUBJECT 030 — STACKED DIAMOND */

.subjects-diamond {
  width: 80px;
  right: -30px;
  top: 75px;
  opacity: 0.8;
  transform: rotate(3deg);
}


/* SUBJECT 041 — INTERFERENCE */

.subjects-interference {
  width: 105px;
  left: -45px;
  top: 35px;
  opacity: 1;
  transform: rotate(-7deg);
}


/* DATABASE HEADER — 01.07.26 */

.subjects-date {
  width: 90px;
  right: 20px;
  bottom: -10px;
  opacity: 0.55;
  transform: rotate(-4deg);
}


/* =================================
   MOBILE
================================= */

@media (max-width: 600px) {

  .subjects-star {
    width: 50px;
    right: 2px;
    top: 10px;
  }

  .subjects-observation {
    width: 88px;
    left: 2px;
    bottom: 8px;
  }

  .subjects-crescent {
    width: 50px;
    left: 2px;
    top: 20px;
  }

  .subjects-identified {
    width: 82px;
    right: 2px;
    bottom: 10px;
  }

  .subjects-diamond {
    width: 32px;
    right: 3px;
    top: 55px;
  }

  .subjects-interference {
    width: 75px;
    left: 2px;
    top: 25px;
  }

  .subjects-date {
    width: 65px;
    right: 0;
    bottom: -5px;
  }

}

.about-support {
  position: relative;
}

.support-link {
  display: inline-block;
  color: #ff00aa;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.support-link:hover {
  opacity: 0.7;
  transform: translateX(3px);
}

/* =========================================
   HALLOWEEN CONTENT — OFF BY DEFAULT
========================================= */

.archive-folder img.archive-folder-halloween {
  display: none;
}

.archive-folder .archive-halloween-label {
  display: none;
}

.halloween-index-warning,
.halloween-home-alert,
.halloween-home-symbols,
.halloween-home-interference,
.halloween-video-warning,
.halloween-video-status {
  display: none;
}

.video-title-halloween {
  display: none;
}

/* HALLOWEEN CONTENT — OFF BY DEFAULT */

.halloween-giant-bat {
  display: none;
}

.halloween-bats,
.halloween-pumpkin,
.halloween-home-alert,
.halloween-home-symbols,
.halloween-video-warning,
.halloween-video-status {
  display: none;
}

.video-title-halloween {
  display: none;
}

/* HALLOWEEN SIGNAL — OFF BY DEFAULT */

.halloween-signal {
  display: none;
}
.halloween-phenomenon-record {
  display: none;
}

.halloween-hidden-subject {
  display: none;
}

.halloween-blog-entry {
  display: none;
}

/* HALLOWEEN — SUBJECTS ASSETS */

.halloween-unregistered-signal,
.halloween-who-is-this,
.halloween-trace-lost {
  display: none;
}


.halloween-about-record,
.halloween-about-annotation {
  display: none;
}

/* =========================================
   BLOG — HANDWRITTEN ANNOTATION
========================================= */

.halloween-blog-entry {
  position: relative;
  overflow: visible;
}

.halloween-blog-annotation {
  display: block;
  position: absolute;

  width: 180px;
  max-width: 32vw;
  height: auto;

  right: -45px;
  top: -55px;

  z-index: 5;
  pointer-events: none;
  user-select: none;

  transform: rotate(-5deg);
}

@media (max-width: 600px) {
  .halloween-blog-annotation {
    width: 105px;
    max-width: 30vw;
    right: 0;
    top: -35px;
  }
}

/* =================================
   VISITOR LOG
================================= */

.visitor-log {
  width: 100%;
  max-width: 650px;
  margin: 40px auto 100px;
  box-sizing: border-box;
}

.visitor-log-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid #333;
}

.visitor-log-heading h1 {
  margin: 0;
  color: #ff00aa;
  font-size: 14px;
  letter-spacing: 3px;
}

.visitor-log-heading span {
  color: #888;
  font-size: 10px;
}

.visitor-log-intro {
  margin: 25px 0 35px;
  font-size: 11px;
  line-height: 1.8;
  letter-spacing: 1px;
}

.visitor-log-frame {
  width: 100%;
}

.visitor-log-frame iframe {
  display: block;
  width: 100%;
  height: 1000px;
  border: 0;
  background: #000;
}

.visitor-log-fallback {
  margin-top: 20px;
  font-size: 10px;
  color: #888;
}

.visitor-log-fallback a,
.visitor-log-fallback a:visited {
  color: #ff00aa;
  text-decoration: none;
}

.visitor-log-fallback a:hover {
  text-decoration: underline;
}

/* MOBILE */

@media (max-width: 600px) {
  .visitor-log {
    max-width: none;
    margin: 25px auto 70px;
  }

  .visitor-log-heading h1 {
    font-size: 13px;
  }

  .visitor-log-heading span {
    font-size: 9px;
  }

  .visitor-log-frame iframe {
    height: 1200px;
  }
}

/* =========================================
   MVNDY — CUSTOM VISITOR LOG
========================================= */

.visitor-log {
  max-width: 650px;
  margin: 45px auto 90px;
}

.visitor-log-heading,
.visitor-archive-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
}

.visitor-log-heading h1 {
  margin: 0;
  font-size: 20px;
  letter-spacing: 2px;
}

.visitor-log-heading span,
.visitor-archive-heading span {
  color: #ff00aa;
  font-size: 11px;
  letter-spacing: 1px;
}

.visitor-log-intro {
  color: #888;
  font-size: 11px;
  line-height: 1.9;
  margin: 25px 0 45px;
}

.mvndy-visitor-form {
  display: grid;
  gap: 22px;
  margin-bottom: 75px;
}

.visitor-field label {
  display: block;
  color: #ff00aa;
  font-size: 11px;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.mvndy-visitor-form input,
.mvndy-visitor-form select,
.mvndy-visitor-form textarea {
  box-sizing: border-box;
  width: 100%;
  background: #080808;
  border: 1px solid #333;
  border-radius: 0;
  color: #eee;
  padding: 12px;
  font: inherit;
  font-size: 13px;
}

.mvndy-visitor-form textarea {
  resize: vertical;
  min-height: 120px;
}

.mvndy-visitor-form input:focus,
.mvndy-visitor-form select:focus,
.mvndy-visitor-form textarea:focus {
  outline: none;
  border-color: #ff00aa;
}

.visitor-message-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.visitor-message-tools button,
.visitor-pagination button {
  background: transparent;
  border: none;
  color: #888;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  padding: 4px 0;
}

.visitor-message-tools button:hover,
.visitor-pagination button:hover:not(:disabled) {
  color: #ff00aa;
}

#visitor-char-count {
  color: #666;
  font-size: 11px;
}

.visitor-emoji-picker:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.visitor-emoji-picker button {
  background: #111;
  border: 1px solid #333;
  padding: 7px;
  font-size: 18px;
  cursor: pointer;
}

.visitor-emoji-picker button:hover {
  border-color: #ff00aa;
}

.visitor-security {
  min-height: 65px;
}

.visitor-submit {
  background: #000;
  border: 1px solid #ff00aa;
  color: #ff00aa;
  padding: 14px;
  font: inherit;
  cursor: pointer;
}

.visitor-submit:hover {
  background: #ff00aa;
  color: #000;
}

.visitor-submit:disabled {
  opacity: 0.5;
  cursor: wait;
}

#visitor-status {
  color: #aaa;
  font-size: 11px;
  min-height: 18px;
  margin: 0;
}

.visitor-archive-heading {
  border-bottom: 1px solid #444;
  padding-bottom: 14px;
}

.visitor-archive-heading h2 {
  font-size: 14px;
  letter-spacing: 1px;
  margin: 0;
}

.visitor-entry {
  border-bottom: 1px solid #292929;
  padding: 25px 0;
}

.visitor-entry-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #ff00aa;
  font-size: 14px;
  margin-bottom: 14px;
}

.visitor-identity {
  color: #eee;
  margin-bottom: 15px;
}

.visitor-message {
  color: #bbb;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  line-height: 1.9;
}

.visitor-listening-record {
  background: #0d0d0d;
  border-left: 2px solid #ff00aa;
  padding: 10px 13px;
  margin-top: 18px;
}

.visitor-listening-label {
  color: #777;
  font-size: 10px;
  margin-bottom: 4px;
}

.visitor-listening-value {
  color: #ff00aa;
  overflow-wrap: break-word;
}

.visitor-date {
  color: #666;
  font-size: 11px;
  margin-top: 18px;
}

.visitor-pagination {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 30px;
  font-size: 11px;
  color: #777;
}

.visitor-pagination button:disabled {
  opacity: 0.25;
  cursor: default;
}

@media (max-width: 600px) {
  .visitor-log {
    margin: 35px auto 65px;
  }

  .visitor-log-heading h1 {
    font-size: 18px;
  }

  .visitor-log-intro {
    margin-bottom: 35px;
  }

  .mvndy-visitor-form {
    margin-bottom: 55px;
  }

  .visitor-entry {
    padding: 20px 0;
  }
}
.visitor-entry-header {
  margin-bottom: 18px;
}

.visitor-identity {
  color: #fff;
  font-size: 12px;
  margin-bottom: 14px;
}

.visitor-message {
  color: #bbb;
  font-size: 12px;
  line-height: 1.8;
}

.visitor-date {
  color: #666;
  font-size: 10px;
}
/* =========================================
   VISITOR LOG — FINAL LAYOUT FIXES
   Keep these rules last to override older iframe-era styling.
========================================= */
.visitor-log {
  width: 100%;
max-width: 650px;
box-sizing: border-box;
}

.mvndy-visitor-form,
.visitor-entry,
.visitor-archive-heading {
  min-width: 0;
}

.mvndy-visitor-form input,
.mvndy-visitor-form select,
.mvndy-visitor-form textarea {
  min-width: 0;
  max-width: 100%;
}

.visitor-message-tools {
  gap: 12px;
  flex-wrap: wrap;
}

.visitor-message-tools button {
  width: auto;
  min-width: 0;
  flex: 0 0 auto;
  text-align: left;
}

/* Hide the picker until its toggle is activated. */
.visitor-emoji-picker[hidden] {
  display: none !important;
}

.visitor-emoji-picker:not([hidden]) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.visitor-emoji-picker button {
  width: 36px;
  min-width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 4px;
  color: #eee;
}

.visitor-entry-header {
  align-items: flex-start;
  flex-wrap: wrap;
  overflow-wrap: break-word;
}

.visitor-identity,
.visitor-message,
.visitor-listening-value {
  overflow-wrap: break-word;
}

.visitor-pagination {
  align-items: center;
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .visitor-log {
    width: 100%;
    max-width: 100%;
  }

  .visitor-log-heading,
  .visitor-archive-heading {
    align-items: flex-start;
  }

  .visitor-entry-header {
    gap: 8px;
  }

  .visitor-message-tools {
    gap: 8px;
  }
}
/* =========================================
   BLOG — EN / ES LANGUAGE SWITCHER
   Shared styles for every entry; no inline style block needed.
========================================= */

.post .post-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  opacity: 1;
}

/* Fade metadata individually so the switcher stays bright. */
.post .post-meta .post-date,
.post .post-meta .entry-number {
  opacity: 0.45;
}

.post .post-language {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: 1px;
  white-space: nowrap;
  color: #ff00aa;
  opacity: 1;
}

.post .post-language a {
  display: inline-block;
  padding: 8px 10px;
  color: #fff;
  background: transparent;
  opacity: 1;
  text-decoration: none;
}

.post .post-language a[aria-current="page"],
.post .post-language a:hover {
  color: #000;
  background: #ff00aa;
  opacity: 1;
}

.post .post-language a:focus-visible {
  outline: 2px solid #ff00aa;
  outline-offset: 3px;
}



/* =================================
   MVNDY — BLOG LINKS
================================= */

/* LINKS INSIDE ESSAYS */

.post p a {
  color: #ff00aa;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease,
              background-color 0.2s ease;
}

.post p a:visited {
  color: #ff00aa;
}

.post p a:hover {
  color: #000;
  background-color: #ff00aa;
  text-decoration: none;
}

.post p a:focus-visible {
  outline: 1px solid #ff00aa;
  outline-offset: 3px;
}


/* RELATED FILES */

.related-files {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #444;
}

.related-files h2 {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 0.08em;
  color: #888;
}

.related-files-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.related-files-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  padding: 12px 0;
  border-bottom: 1px solid #292929;

  color: inherit;
  font-size: 12px;
  line-height: 1.5;
  text-decoration: none;

  transition: color 0.2s ease,
              padding-left 0.2s ease;
}

.related-files-list a:visited {
  color: inherit;
}

.related-files-list a:hover,
.related-files-list a:visited:hover {
  color: #ff00aa;
  padding-left: 6px;
}

.related-files-list a:focus-visible {
  outline: 1px solid #ff00aa;
  outline-offset: 3px;
}


/* MOBILE */

@media (max-width: 600px) {
  .related-files {
    margin-top: 32px;
    padding-top: 16px;
  }

  .related-files-list a {
    font-size: 11px;
    padding: 14px 0;
  }
}


/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {
  .post p a,
  .related-files-list a {
    transition: none;
  }
}


/* BLOG POSTS — BLOCKQUOTE ACCENT */
.post blockquote {
  border-left: 3px solid #ff00aa;
  padding-left: 18px;
}


/* ABOUT v2.2 — consolidated responsive refinements (2026-10-21) */
.about-links a:focus-visible, .about-support a:focus-visible {
  outline: 2px solid #ff00aa;
  outline-offset: 3px;
}
@media (min-width: 601px) and (max-width: 800px) {
  .about-grid { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 30px; }
}
@media (max-width: 600px) {
  .about-section { max-width: 100%; }
  .about-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .about-image { max-width: 350px; margin: 0 auto; }
  .about-extra { margin-top: 64px; }
  .about-links a { padding: 13px 0; }
}

/* =========================================
   ABOUT — INTRO VISUAL REFINEMENT
   Scoped to the intro, leaves other pages unchanged.
========================================= */
.about-section .about-grid {
  align-items: center;
}
.about-section .about-image img {
  outline: 1px solid rgba(255, 255, 255, .16);
  outline-offset: 5px;
}
.about-section .about-text h2 {
  margin-bottom: 22px;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(255, 0, 170, .38);
  line-height: 1.5;
}
.about-section .about-text p {
  line-height: 1.85;
  margin-bottom: 17px;
}
.about-section .about-text p:last-child {
  margin-bottom: 0;
}
@media (max-width: 600px) {
  .about-section .about-image img {
    outline-offset: 4px;
  }
  .about-section .about-text h2 {
    margin-bottom: 20px;
  }
}


/* =========================================
   ABOUT — TESTIMONIES / NUMBERED ARCHIVE
   Matches about-testimonies-fixed
========================================= */
.about-testimonies .testimonies-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}
.about-testimonies .testimony {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 18px;
  padding: 18px 0 22px;
  border-bottom: 1px solid #292929;
  min-width: 0;
}
.about-testimonies .testimony-index {
  grid-column: 1;
  grid-row: 1 / span 2;
  color: #ff00aa;
  font-family: monospace;
  font-size: 11px;
  line-height: 1.8;
  white-space: nowrap;
}
.about-testimonies .testimony-quote {
  grid-column: 2;
  margin: 0 0 16px;
  font-size: 12px;
  line-height: 1.85;
  color: #ddd;
  overflow-wrap: anywhere;
}
.about-testimonies .testimony-author {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 5px 10px;
  font-size: 10px;
  letter-spacing: .5px;
  color: #fff;
}
.about-testimonies .testimony-project-link {
  color: #999;
  font-size: 10px;
  letter-spacing: 0;
}
@media (max-width: 600px) {
  .about-testimonies .testimony {
    grid-template-columns: 1fr;
    row-gap: 8px;
    padding: 16px 0 22px;
  }
  .about-testimonies .testimony-index {
    grid-column: 1;
    grid-row: auto;
  }
  .about-testimonies .testimony-quote,
  .about-testimonies .testimony-author {
    grid-column: 1;
  }
  .about-testimonies .testimony-quote { margin-bottom: 5px; }
}

/* ABOUT — expandable testimonies */
.about-testimonies .testimony[hidden],
.about-testimonies .testimonies-toggle[hidden] { display: none !important; }
.about-testimonies .testimonies-toggle {
  display: block; width: 100%; margin-top: 10px; padding: 14px 0;
  border: 0; background: transparent; color: #ff00aa;
  font: inherit; font-size: 11px; text-align: left; cursor: pointer;
}
.about-testimonies .testimonies-toggle:hover,
.about-testimonies .testimonies-toggle:focus-visible { color: #fff; }

/* ABOUT — compact testimonies: single separator before next section */
.about-testimonies { padding-bottom: 8px; }
.about-testimonies h2 { margin-bottom: 16px; }
.about-testimonies .testimony { padding-top: 12px; padding-bottom: 12px; border-bottom: 0; }
.about-testimonies .testimony-quote { margin-bottom: 8px; }
.about-testimonies .testimony-author { margin-top: 0; margin-bottom: 0; }
.about-testimonies .testimonies-toggle {
  margin: 4px 0 0;
  padding: 10px 0 8px;
  border: 0;
}
.about-testimonies + .about-block { padding-top: 22px; }
@media (max-width: 600px) {
  .about-testimonies .testimony { padding: 10px 0 12px; row-gap: 5px; }
  .about-testimonies .testimony-quote { margin-bottom: 4px; }
}