/* Shared styles for content pages (about, contact, legal) */
@font-face {
  font-family: 'PPMori';
  src: url('fonts/Mori/web/PPMori-Regular.woff2') format('woff2'),
       url('fonts/Mori/web/PPMori-Regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PPMori';
  src: url('fonts/Mori/web/PPMori-Book.woff2') format('woff2'),
       url('fonts/Mori/web/PPMori-Book.woff') format('woff');
  font-weight: 450; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PPMori';
  src: url('fonts/Mori/web/PPMori-Semibold.woff2') format('woff2'),
       url('fonts/Mori/web/PPMori-Semibold.woff') format('woff');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PPMori';
  src: url('fonts/Mori/web/PPMori-Extrabold.woff2') format('woff2'),
       url('fonts/Mori/web/PPMori-Extrabold.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}

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

:root {
  --bg: #fff;
  --surface: #f5f5f5;
  --line: #e8e8e8;
  --text: #111;
  --muted: #aaa;
}
.dark {
  --bg: #111;
  --surface: #1c1c1c;
  --line: #272727;
  --text: #eee;
  --muted: #555;
}

/* ── Bottom nav ── */
#bottom-nav {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 5px;
  z-index: 100;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.bn-indicator {
  position: absolute;
  top: 5px;
  height: calc(100% - 10px);
  border-radius: 100px;
  background: var(--surface);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: left 0.35s cubic-bezier(0.34, 1.4, 0.64, 1),
              width 0.35s cubic-bezier(0.34, 1.4, 0.64, 1),
              opacity 0.15s;
}

.bn-item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 16px;
  border-radius: 100px;
  text-decoration: none;
  color: var(--muted);
  font-family: 'PPMori', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.18s;
  cursor: pointer;
}
.bn-item:hover, .bn-item.active { color: var(--text); }

/* dot under active item */
.bn-item.active::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--text);
  opacity: 0.5;
}

.bn-item svg { width: 13px; height: 13px; flex-shrink: 0; opacity: 0.7; transition: opacity 0.18s; }
.bn-item:hover svg, .bn-item.active svg { opacity: 1; }

/* external link indicator */
.bn-item[target="_blank"]::before {
  content: '↗';
  font-size: 9px;
  opacity: 0.5;
  margin-left: -2px;
}