@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300&display=swap');

/* ── VARIABLES ── */
:root {
  --bg:       #343230;
  --surface:  #2A2826;
  --surface2: #3E3A38;
  --rule:     #504C48;
  --rule-thin:#403C3A;
  --text:     #F0EBE0;
  --muted:    #C0BAB0;
  --dim:      #8A8278;
  --pink:     #E8327A;
  --pink-dim: rgba(232, 50, 122, 0.12);
}

/* ── RESET & BASE ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Mono', monospace;
  font-size: 14px;
  line-height: 1.6;
}
img { display: block; max-width: 100%; }
a { color: var(--pink); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── UTILITY ──
   .lbl is a micro-label — uppercase + tracking does the hierarchy work,
   not tiny size. Minimum 13px. */
.lbl {
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim);
}
.rule  { height: 2px; background: var(--rule); }
.rule-thin { height: 1px; background: var(--rule-thin); }
.pink  { color: var(--pink); }

/* ── NAVIGATION ── */
.nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: .8rem 2rem;
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  letter-spacing: .18em;
  color: var(--text);
  text-decoration: none;
}
.nav-centre {
  font-size: 13px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--dim);
  text-align: center;
}
.nav-links {
  display: flex;
  gap: 1.4rem;
  list-style: none;
  align-items: center;
}
.nav-links a {
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color .15s;
}
.nav-links a:hover,
.nav-links a.active { color: var(--pink); }
.nav-links .btn-ticket {
  color: var(--surface);
  background: var(--pink);
  padding: .3rem .85rem;
}
.nav-links .btn-ticket:hover { opacity: .85; text-decoration: none; }

/* ── TICKER ── */
.ticker {
  background: var(--pink);
  color: var(--surface);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .5rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ticker-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--surface);
  display: inline-block;
  margin-right: 6px;
  animation: blink 1.3s step-end infinite;
}
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0;} }

/* ── BUTTONS ── */
.btn-primary {
  display: inline-block;
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--surface);
  background: var(--pink);
  padding: .7rem 1.25rem;
  text-decoration: none;
  transition: opacity .15s;
  border: none;
  cursor: pointer;
}
.btn-primary:hover { opacity: .85; text-decoration: none; }

.btn-secondary {
  display: inline-block;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--rule);
  padding: .6rem 1.25rem;
  text-decoration: none;
  transition: border-color .15s, color .15s;
  cursor: pointer;
}
.btn-secondary:hover { border-color: var(--pink); color: var(--pink); text-decoration: none; }

/* ── PAGE SPINE (left column on inner pages) ── */
.page-spine {
  border-right: 1px solid var(--rule);
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--surface);
}
.spine-vert {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rule);
}
.spine-meta { display: flex; flex-direction: column; gap: .75rem; }
.spine-item { border-top: 1px solid var(--rule-thin); padding-top: .5rem; }
.spine-key {
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: .2rem;
}
.spine-val {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: .08em;
}
.spine-coord { font-size: 13px; color: var(--dim); letter-spacing: .05em; line-height: 1.9; }

/* ── ASIDE BLOCKS ── */
.aside-block { border-top: 2px solid var(--pink); padding-top: .6rem; margin-top: 1.25rem; }
.aside-block:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.aside-title {
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: .4rem;
}
.aside-body { font-size: 13px; color: var(--dim); line-height: 1.7; }
.aside-body b { color: var(--text); font-weight: 500; }

/* ── CARDS (blog, artists, gallery) ── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.card {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
  overflow: hidden;
  transition: background .15s;
}
.card:hover { background: var(--surface2); }
.card:nth-child(3n) { border-right: none; }
.card-img {
  height: 200px;
  background-size: cover;
  background-position: center;
  background-color: var(--surface2);
  position: relative;
}
.card-body { padding: 1.25rem 1.25rem 1.5rem; }
.card-label { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--pink); margin-bottom: .4rem; }
.card-title { font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: .04em; color: var(--text); margin-bottom: .4rem; line-height: 1.1; }
.card-excerpt { font-size: 13px; color: var(--dim); line-height: 1.6; }
.card-meta { font-size: 13px; color: var(--dim); margin-top: .75rem; }
.card a.read-more {
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pink);
  display: inline-block;
  margin-top: .75rem;
}

/* ── SECTION HEADERS ── */
.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 1.25rem 2rem;
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
}
.section-header h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: .06em;
  color: var(--text);
}

/* ── TAGS ── */
.tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.tag {
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .25rem .6rem;
  border: 1px solid var(--rule);
  color: var(--dim);
}
.tag-hi { border-color: var(--pink); color: var(--pink); }

/* ── FOOTER ── */
.site-footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--surface);
  border-top: 1px solid var(--rule);
}
.footer-cell {
  padding: 1rem 1.5rem;
  border-right: 1px solid var(--rule);
  font-size: 13px;
  color: var(--dim);
  line-height: 1.8;
}
.footer-cell:last-child { border-right: none; }
.footer-cell strong {
  display: block;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: .3rem;
}

/* ── RESPONSIVE — basic mobile fallback ── */
@media (max-width: 768px) {
  .nav { grid-template-columns: 1fr; gap: .5rem; }
  .nav-centre { display: none; }
  .nav-links { flex-wrap: wrap; gap: .75rem; justify-content: center; }
  .card-grid { grid-template-columns: 1fr; }
  .card { border-right: none; }
  .site-footer { grid-template-columns: 1fr; }
  .footer-cell { border-right: none; border-bottom: 1px solid var(--rule); }
}