/* --- variables --- */
:root {
  --bg:        #f4f4f4;
  --surface:   #ffffff;
  --border:    #aaaaaa;
  --text:      #111111;
  --text-sub:  #555555;
  --link:      #0000cc;
  --link-vis:  #551a8b;
  --accent:    #cc0000;
  --nav-bg:    #ddeeff;

  --font-body: "MS Gothic", "ＭＳ ゴシック", "Osaka", "Osaka-Mono", monospace;
  --font-head: "MS Mincho", "ＭＳ 明朝", "游明朝", "Yu Mincho", serif;

  --size-sm:   11px;
  --size-base: 12px;
  --size-lg:   14px;
}

/* --- reset --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* --- base --- */
body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--size-base);
  line-height: 1.6;
}

a {
  color: var(--link);
  text-decoration: underline;
}

a:visited {
  color: var(--link-vis);
}

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

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: normal;
}

h2 {
  font-size: var(--size-lg);
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
  margin-bottom: 6px;
}

ul {
  list-style: none;
}

/* --- layout --- */
#wrapper {
  width: 750px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
}

#content {
  display: flex;
  gap: 0;
}

#main-col {
  flex: 1;
  padding: 10px;
  border-right: 1px solid var(--border);
}

#side-col {
  width: 180px;
  padding: 10px;
}

/* --- header --- */
#site-header {
  padding: 8px 10px;
  border-bottom: 2px solid var(--border);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

#site-header h1 {
  font-size: 20px;
  font-family: var(--font-head);
}

#site-tagline {
  font-size: var(--size-sm);
  color: var(--text-sub);
  margin-left: 8px;
}

#site-meta {
  font-size: var(--size-sm);
  color: var(--text-sub);
}

/* --- nav --- */
#site-nav {
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border);
  padding: 4px 10px;
}

#site-nav ul {
  display: flex;
  gap: 16px;
}

#site-nav a {
  font-size: var(--size-sm);
  text-decoration: none;
}

#site-nav a:hover {
  text-decoration: underline;
}

/* --- sections --- */
section {
  margin-bottom: 14px;
}

.heading-en {
  font-family: var(--font-body);
  font-size: var(--size-sm);
  color: var(--text-sub);
}

/* --- updates list --- */
.update-list li {
  font-size: var(--size-sm);
  border-bottom: 1px dotted var(--border);
  padding: 3px 0;
}

/* --- profile box --- */
#profile-box {
  font-size: var(--size-sm);
}

/* --- footer --- */
#site-footer {
  border-top: 1px solid var(--border);
  padding: 6px 10px;
  font-size: var(--size-sm);
  color: var(--text-sub);
  text-align: center;
}
/* --- music cards --- */
.music-card {
  border: 1px solid var(--border);
  background-color: var(--bg);
  padding: 8px;
  margin-bottom: 12px;
}

.music-card h3 {
  font-size: var(--size-lg);
  font-family: var(--font-head);
  border-bottom: 1px dotted var(--border);
  padding-bottom: 2px;
  margin-bottom: 6px;
}

.music-meta {
  font-family: var(--font-body);
  font-size: var(--size-sm);
  color: var(--text-sub);
  margin-bottom: 6px;
}

.music-player {
  width: 100%;
  height: 28px; /* Slimmer profile fits the retro styling better */
  margin-bottom: 6px;
}