:root {
  /* Surfaces */
  --bg-deep: #110a1a;
  --bg-stripe-a: #0f0b15;
  --bg-stripe-b: #1c0c1c;
  --bg-card-a: #011e25;
  --bg-card-b: #001f27;
  --bg-pager: #1e1433;

  /* Accents */
  --gold: #ffd700;
  --gold-bright: #eed700;
  --gold-dim: #a08020;

  --purple-light: #c8a0ff;
  --purple-dark: #570d48;
  --purple-deep: #322057;
  --purple-glass: #32205773;

  /* Text */
  --text: #e8e0f0;
  --text-muted: #344850;
  --link: #c8a0ff;
  --link-hover: #f0d060;

  /* Layout */
  --stripe-size: 16px;
  --radius: 8px;
  --gap: 1.25rem;
  --container-pad: 1rem;

  /* Effects */
  --shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.6);
}

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

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100dvh;
  padding: var(--container-pad);
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  color: var(--text);
  background: repeating-linear-gradient(
    45deg,
    var(--bg-stripe-a),
    var(--bg-stripe-a) var(--stripe-size),
    var(--bg-stripe-b) var(--stripe-size),
    var(--bg-stripe-b) calc(var(--stripe-size) * 2)
  );
}

a {
  color: var(--link);
  text-decoration: none;
  transition: color 0.2s;
}

a:hover {
  color: var(--link-hover);
}

/* Header */
header {
  padding: 1.5rem 0 1rem;
}

main {
  margin: 0;

}

h1 {
  margin: 0;
  padding-bottom: 0.5rem;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--gold);
  border-bottom: 2px solid var(--gold-dim);
}

/* Post grid */
.posts {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}

@media (min-width: 540px) {
  .posts { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .posts { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
  .posts { grid-template-columns: repeat(4, 1fr); }
}

/* Post card */


.post {
  overflow: hidden;
  border-radius: var(--radius);
  background: repeating-linear-gradient(
    135deg,
    var(--bg-card-a),
    var(--bg-card-a) var(--stripe-size),
    var(--bg-card-b) var(--stripe-size),
    var(--bg-card-b) calc(var(--stripe-size) * 2)
  );
  box-shadow: var(--shadow);
  transition: box-shadow 0.2s, transform 0.2s;
}

.post:hover {
  box-shadow: none;
}

.post img {
  display: block;
  width: 100%;
  object-fit: cover;
}

.post-meta {
    display: inline;
  list-style: none;
  padding: 0;
}
.post-meta li {
  display: inline;
  color: var(--gold-dim);
}

/* Media + play badge */
.post-media {
  position: relative;
  margin: 0;
}

.post-mediaLink {
  display: block;
}

.post-play {
  position: absolute;
  left: 50%;
  bottom: 0.5rem;
  transform: translate(-50%, 50%);

  width: 2.7rem;
  height: 2.7rem;

  border: 2px solid var(--gold-dim);
  border-radius: 50%;

  display: grid;
  place-items: center;

  font-size: 1.3rem;
  line-height: 1;
  padding-left: 0.234rem; /* optical centering for triangle */

  color: var(--gold-bright);
  background: repeating-linear-gradient(
    45deg,
    var(--bg-stripe-a),
    var(--bg-stripe-a) var(--stripe-size),
    var(--bg-stripe-b) var(--stripe-size),
    var(--bg-stripe-b) calc(var(--stripe-size) * 2)
  );

  transition: box-shadow 0.2s, transform 0.1s;


}

.post-play:hover {
  box-shadow: var(--shadow);
  background: var(--purple-dark);
  transform: translate(-50%, 50%) scale(1.3);
  border: 1px solid var(--gold-dim);
}

/* Content */

.horizontal-separator {
    color: var(--text-muted);
}

.post-content {
  padding: 0.75rem 1rem 1rem;
}

.post time {
  display: inline-block;
  font-size: 0.8rem;
  color: var(--gold-dim);
}

.post h2 {
  margin: 0 0 0.25rem;
  font-size: clamp(1.1rem, 1.9vw, 1.5rem);
  font-weight: 300;
  color: var(--gold-bright);
}

.post h2 a {
  color: inherit;
}

.post h2 a:hover {
  color: var(--link);
}

.post-tags {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.post-tags li {
  display: inline;
  color: var(--purple-light);
}

.post-tag {
}

/* Navigation + pager */
nav.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem 0;
  color: var(--text-muted);
}

.pager {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 1.5rem 0;
}

.pager a,
.pager span {
  padding: 0.4rem 0.75rem;
  border-radius: 4px;
  font-size: 0.85rem;
  background: var(--bg-pager);
  color: var(--text-muted);
  transition: background 0.2s, color 0.2s;
}

.pager a:hover {
  background: var(--gold-dim);
  color: var(--bg-deep);
}

.pager [aria-current="true"] {
  background: var(--gold);
  color: var(--bg-deep);
  font-weight: 700;
}

/* Footer */
footer {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}