/* events.css — "poetic" artistic theme (non-destructive)
   Applies only visual styling: colors, spacing, typography, subtle paper feel.
   No content or links are altered.
*/

/* --------- Base --------- */
:root{
  --ink:#1f3c88;
  --ink2:#0f1f4d;
  --red:#b33939;
  --green:#2d6a4f;
  --violet:#5f3dc4;
  --gold:#b08900;

  --paper:#faf9f7;
  --paper2:#ffffff;
  --line:#e6e3de;
  --shadow:0 2px 10px rgba(0,0,0,.06);

  --radius:12px;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  color:#222;
  background:
    radial-gradient(900px 500px at 10% 0%, rgba(31,60,136,.06), transparent 60%),
    radial-gradient(700px 450px at 95% 10%, rgba(179,57,57,.05), transparent 55%),
    radial-gradient(900px 600px at 60% 100%, rgba(45,106,79,.05), transparent 60%),
    var(--paper);
}

.wrap{
  max-width: 980px;
  margin:0 auto;
  padding: 0 16px;
}

/* --------- Header --------- */
.top{
  position:sticky;
  top:0;
  z-index:10;
  background: rgba(250,249,247,.92);
  backdrop-filter: blur(6px);
  border-bottom:1px solid var(--line);
}

.brand{
  padding: 18px 0 14px;
}

.brand-title{
  font-family: "Roboto Slab", ui-serif, Georgia, serif;
  color: var(--ink);
  letter-spacing:.04em;
  font-size: 1.55rem;
  line-height:1.1;
}

.brand-sub{
  margin-top:6px;
  color:#555;
  font-size:.95rem;
}

.navlink{
  display:inline-block;
  margin: 8px 0 16px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--paper2);
  text-decoration:none;
  color: var(--ink);
  transition: transform .12s ease, box-shadow .12s ease, color .12s ease;
}
.navlink:hover{
  color: var(--red);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

/* --------- Intro --------- */
.intro{
  padding: 22px 0 12px;
}
h1, h2{
  font-family: "Roboto Slab", ui-serif, Georgia, serif;
}
h1{
  margin:0 0 6px;
  color: var(--ink2);
}
.muted{ color:#777; }
.subtitle{ margin:0; color:#555; }

/* --------- Year index chips --------- */
.year-index{
  margin: 14px 0 22px;
  padding: 14px 14px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.6);
}

.index-label{
  color:#444;
  font-weight:600;
  margin-bottom:8px;
}

.chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:10px;
}

.chip{
  display:inline-block;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #fff, rgba(255,255,255,.85));
  color: var(--ink);
  text-decoration:none;
  font-size:.92rem;
  transition: transform .12s ease, box-shadow .12s ease, color .12s ease;
}
.chip:hover{
  color: var(--red);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.hint{
  color:#666;
  font-size:.9rem;
}

/* --------- Year blocks (poetic rhythm) --------- */
.year-block{
  margin: 0 0 34px;
  padding-left: 16px;
  border-left: 5px solid rgba(31,60,136,.18);
  position: relative;
}
.year-block:before{
  content:"";
  position:absolute;
  left:-8px;
  top: 10px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(179,57,57,.45);
  box-shadow: 0 0 0 4px rgba(179,57,57,.12);
}

.year{
  margin: 0 0 12px;
  color: var(--ink);
  padding-bottom: 6px;
  border-bottom: 2px solid rgba(0,0,0,.06);
}

/* --------- Event cards --------- */
.events{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.event{
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: 0 1px 8px rgba(0,0,0,.04);
}

.event-title{
  font-weight: 700;
  color:#222;
  margin-bottom:2px;
}

.event-place{
  color:#444;
}

.event-place a{
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px dotted rgba(31,60,136,.35);
}
.event-place a:hover{
  color: var(--red);
  border-bottom-color: rgba(179,57,57,.6);
}

.event-meta{
  margin-top: 10px;
}

/* --------- Badges as chromatic "signs" --------- */
.badge{
  display:inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .82rem;
  letter-spacing: .02em;
  border: 1px solid rgba(0,0,0,.06);
  background: #f3f3f3;
  color:#333;
}

.badge.exhibition{ background: rgba(31,60,136,.10); color: var(--ink); }
.badge.performance{ background: rgba(179,57,57,.12); color: var(--red); }
.badge.installation{ background: rgba(45,106,79,.12); color: var(--green); }
.badge.review{ background: rgba(95,61,196,.12); color: var(--violet); }
.badge.participation{ background: rgba(176,137,0,.14); color: var(--gold); }
.badge.concert{ background: rgba(106,27,154,.12); color: #6a1b9a; }
.badge.interview{ background: rgba(0,0,0,.06); color:#333; }
.badge.publication{ background: rgba(0,0,0,.05); color:#333; }

/* --------- Footer + Back to top --------- */
.footer{
  padding: 26px 0 48px;
  color:#666;
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.35);
}

.back-to-top{
  position: fixed;
  right: 14px;
  bottom: 14px;
  width: 42px;
  height: 42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration:none;
  box-shadow: var(--shadow);
  transition: transform .12s ease, color .12s ease;
}
.back-to-top:hover{
  transform: translateY(-2px);
  color: var(--red);
}

/* --------- Small screens --------- */
@media (max-width: 560px){
  .brand-title{ font-size: 1.3rem; }
  .year-index{ padding: 12px; }
  .event{ padding: 12px; }
}


/* --------- Visual Music signature (poetic level 1) --------- */
/* Adds rhythmic separators, subtle “score” feeling, and a gentle kinetic hint. */

.year-block::after{
  content:"";
  display:block;
  margin-top:22px;
  height:6px;
  background: repeating-linear-gradient(
    90deg,
    rgba(31,60,136,.25),
    rgba(31,60,136,.25) 12px,
    transparent 12px,
    transparent 24px
  );
  border-radius:6px;
  opacity:.6;
}

.year{
  font-size:1.6rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.event{
  position:relative;
  overflow:hidden;
  transition: transform .2s ease;
}

.event::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:6px;
  height:100%;
  background: linear-gradient(
    180deg,
    rgba(31,60,136,.6),
    rgba(179,57,57,.6),
    rgba(45,106,79,.6)
  );
  opacity:.45;
}

.event:hover{
  transform: translateX(3px);
}

/* Optional poetic footer line */
.footer::after{
  content:"Visual Music · Intermedia · Poetics of Time";
  display:block;
  margin-top:10px;
  font-style:italic;
  color: rgba(0,0,0,.38);
}


/* --------- Uniform performance badge links --------- */
.badge.performance a{
  color: var(--red);
  text-decoration: none;
}
.badge.performance a:hover{
  text-decoration: none;
}