/* Copyright © 2025 Sun in Vines, LLC  
 *
 * Fonts are from https://chevyray.itch.io/pixel-font-megapack
 * It is the pixel font megapack. They are nice. Buy them maybe.
 * It is used with license from https://chevyray.itch.io/pixel-font-megapack
 *
*/

:root {
  --active-font: 'SIV faraway wide', Geneva, 'Helvetica Neue', Helvetica, Arial, 'Charcoal', sans-serif;
  --wrap-max: 720px;
  /* default; overridden by layout.js per device */
  --ui-font: Geneva, 'Helvetica Neue', Helvetica, Arial, 'Charcoal', sans-serif;
  --ui-size-small: 11px;
  /* unified pixel sizes */
  --px-size-1x: 16px;
  --px-size-2x: 32px;
  --px-size-3x: 48px;
  --px-size-4x: 64px;
  --px-line-height: 1.1;
  --px-letter-spacing: 0.045em;
}

@font-face {
  font-family: "SIV faraway wide";
  src: url('../fonts/faraway_wide.ttf') format('truetype'), url('../fonts/faraway_wide.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SIV faraway wide";
  src: url('../fonts/faraway_wide_bold.ttf') format('truetype'), url('../fonts/faraway_wide_bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SIV faraway wide";
  src: url('../fonts/faraway_wide_italic.ttf') format('truetype'), url('../fonts/faraway_wide_italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

html,
body {
  margin: 0;
  padding: 0;
  background: #bfbfbf;
  color: #000;
  font-family: var(--ui-font);
  font-size: 12px;
  letter-spacing: 0;
}

html,
body {
  background-image: url('../images/several_dots.png');
  background-repeat: repeat;
}

.wrap {
  /* 12px gutters on both sides; clamp to 1080px on wide screens */
  max-width: min(1080px, calc(100% - 24px));
  margin: 24px auto;
  padding: 0 12px;
}

.window {
  border: 2px solid #000;
  background: #fff;
  box-shadow: 4px 4px 0 #000;
  margin-bottom: 18px;
}

.titlebar {
  background: #dcdcdc;
  border-bottom: 2px solid #000;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dot {
  width: 10px;
  height: 10px;
  border: 2px solid #000;
  display: inline-block;
  background: #fff;
}

.titlebar .name {
  margin-left: 2px;
  color: #000;
  font-size: 20px; /* ensure not smaller than window content */
}

.window .content {
  padding: 12px;
  line-height: 1;
  font-size: 20px;
  font-family: var(--active-font);
  letter-spacing: 0.04em;
}

/* Normalize block spacing inside content */
.window .content h1,
.window .content h2,
.window .content h3 {
  margin: 0 0 8px 0;
}

.window .content p {
  margin: 8px 0;
}

.window .content p:first-child {
  margin-top: 0;
}

.window .content hr {
  margin: 8px 0;
}

.menu {
  background: #fff;
  border: 2px solid #000;
  display: inline-block;
  padding: 6px 8px;
  margin: 0 0 16px 0;
}

.menu a {
  color: #000;
  text-decoration: none;
  margin-right: 12px;
}

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

/* Make navbar pixel text smaller to match original sizing */
.menu.px {
  font-size: 16px;
}

hr {
  border: 0;
  border-top: 2px solid #000;
}

small,
.mono {
  font-family: var(--active-font);
}

.footer {
  text-align: center;
  margin: 24px 0;
  font-size: var(--ui-size-small);
  font-family: var(--ui-font);
}

.site-ring p {
  margin: 6px 0 0 0;
  font-size: var(--ui-size-small);
  font-family: var(--ui-font);
}

.font-tools {
  margin-top: 12px;
  font-size: var(--ui-size-small);
  font-family: var(--ui-font);
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
}

.font-tools select {
  font-size: var(--ui-size-small);
  font-family: var(--ui-font);
}

.font-tools input[type="range"] {
  width: 140px;
}

/* keep the pixels crispy */
.px {
  font-family: var(--active-font);
  font-size: var(--px-size-1x);
  line-height: var(--px-line-height);
  letter-spacing: var(--px-letter-spacing);
}

.px.x2 {
  font-size: var(--px-size-2x);
}

.px.x3 {
  font-size: var(--px-size-3x);
}

.px.x4 {
  font-size: var(--px-size-4x);
}

/* Canvas used by pixel renderer */
.px-canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: inline-block;
  vertical-align: baseline;
}

/* Avoid flash of unstyled text: hide until canvas ready */
[data-px-render="faraway_wide"]:not(.px-ready) {
  color: transparent;
}

/* Tighter tracking for italic variant (pixel renderer reads CSS letter-spacing) */
[data-px-render="faraway_wide"][data-variant="italic"] {
  letter-spacing: -0.02em;
}

/* Tighter tracking for inline italic in content (webfont path) */
.window .content em,
.window .content i,
.mono em,
.mono i {
  letter-spacing: -0.02em;
}

/* Try to reduce font rasterization smoothing when using pixel fonts as plain text */
.no-subpixel {
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
  font-smooth: never;
}

/* Featured content + masonry + audio player */
.featured-tracks {
  margin-top: 8px;
}

.tracks-container {
  display: flex;
  gap: 40px; /* divider(16) + 12px pad on each side */
  flex-wrap: wrap;
  margin-top: 0;
  position: relative; /* anchor divider */
}

.tracks-container::before {
  content: '';
  position: absolute;
  top: -12px;   /* extend into window content padding */
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  background: url('../images/vertical.png') repeat-y center top;
  pointer-events: none;
}

.track-column {
  flex: 1;
  min-width: 280px;
}

.track-column > p {
  margin: 0 0 6px 0;
}

.track-item {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid #000;
  padding: 8px;
  margin-bottom: 8px;
  font-size: 14px;
  break-inside: avoid;
}

.track-author {
  font-weight: bold;
  margin-bottom: 4px;
}

.track-content {
  margin: 8px 0;
  color: #333;
  font-style: italic;
  word-wrap: break-word;
}

.track-media {
  margin: 8px 0;
}

.track-media audio,
.track-media video {
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 1px solid #000;
}

.track-media img {
  max-width: 100%;
  max-height: 200px;
  height: auto;
  border: 1px solid #000;
  display: block;
  margin: 4px 0;
}

.track-link {
  word-break: break-all;
  font-size: 12px;
  display: inline-block;
  margin: 4px 0;
}

/* grid-based masonry within each side */
.tracks-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 10px; /* base row height for masonry calc */
  grid-auto-flow: dense;
  gap: 10px;
  align-items: start;
}

.loading-tracks {
  font-style: italic;
  color: #666;
}

.track-date {
  font-size: 11px;
  color: #666;
  margin-top: 4px;
}

.media-label {
  font-size: 11px;
  background: #ddd;
  padding: 2px 4px;
  border: 1px solid #999;
  display: inline-block;
  margin-bottom: 4px;
}

.track-meta {
  font-size: 12px;
  color: #333;
  margin-top: 4px;
}

/* Slightly smaller image tiles when image-only to pack denser */
.track-item.image-only .track-media img {
  max-height: 160px;
}

.wave-player {
  margin: 6px 0 4px 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.wave-player .waveform {
  height: 48px;
  width: 100%;
}

.wave-player .wave-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 12px;
}

.wave-player .wave-btn {
  border: 1px solid #000;
  background: #ddd;
  padding: 2px 6px;
  cursor: pointer;
}

@media (max-width: 768px) {
  .tracks-container {
    flex-direction: column;
  }
  .tracks-container::before { display: none; }
  .tracks-list {
    grid-template-columns: 1fr; /* single column per side on small screens */
  }
}