/* ─────────────────────────────────────────────
   Recent (rebuild) — design tokens
   Measured from the live site: Inter 13px,
   sidebar 220px fixed, chip pill #202020,
   card bg #f7f7f7 radius 12px, gutter 12px.
   ───────────────────────────────────────────── */
:root {
  --font: Inter, -apple-system, system-ui, "SF Pro Text", "SF Pro Display", sans-serif;
  --text: #202020;
  --text-muted: #8a8a8a;
  --text-soft: #666;
  --bg: #fff;
  --card-bg: #f7f7f7;
  --chip-bg: #f2f2f2;
  --chip-active-bg: #202020;
  --chip-active-text: #fcfcfc;
  --radius-card: 12px;
  --gutter: 12px;
  --sidebar-w: 220px;
  --pad: 16px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
}

a { color: inherit; text-decoration: none; }

/* ───────────── Sidebar ───────────── */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  z-index: 45;
}

.logo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}

.logo {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: #000;                 /* the SVG uses currentColor */
  transition: transform .3s var(--ease);
}
.logo:hover { transform: rotate(-8deg) scale(1.05); }
.logo svg { display: block; }

.online {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-soft);
}

.online-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #111;
  position: relative;
}
/* subtle live pulse like the original */
.online-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #111;
  animation: ping 1.6s var(--ease) infinite;
}
@keyframes ping {
  0%   { transform: scale(1);   opacity: .5; }
  75%, 100% { transform: scale(2.4); opacity: 0; }
}

.nav { display: flex; flex-direction: column; gap: 8px; }

.nav-link {
  color: var(--text-soft);
  transition: color .15s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
}

.nav-link:hover, .nav-link.is-active { color: #000; }

.nav-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #000;
  display: none;
}
.nav-link.is-active .nav-dot { display: inline-block; }

.sidebar-bottom { color: var(--text-soft); }
.sidebar-bottom p { margin: 0 0 12px; }
.subtle-link { text-decoration: underline; }
.copyright { color: var(--text-muted); }

.sidebar-controls { margin-bottom: 12px; }
.mute-btn {
  width: 28px; height: 28px;
  border: 1px solid #e4e4e4;
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.mute-btn:hover { background: var(--chip-bg); }
.mute-btn.is-muted { color: var(--text-muted); opacity: .6; }

/* ───────────── Main column ───────────── */
.main {
  margin-left: calc(var(--sidebar-w) + var(--pad));
  padding: var(--pad) var(--pad) 64px 0;
}

.page-header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 20px;
}

.page-header h1 { font-size: 16px; font-weight: 500; margin: 0; }
.tagline { margin: 0; color: var(--text-soft); }
.updated { margin-left: auto; color: var(--text-muted); }

/* ───────────── Toolbar: chips + sort ───────────── */
.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--text-soft);
  font: inherit;
  cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease), transform .1s var(--ease);
}

.chip:hover { color: #000; }
.chip:active { transform: scale(.96); }

.chip.is-active {
  background: var(--chip-active-bg);
  color: var(--chip-active-text);
}

.sort { position: relative; }
.chip-sort { background: transparent; border: 1px solid #e4e4e4; }

.sort-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  padding: 4px;
  z-index: 50;
  animation: menu-in .18s var(--ease);
}
@keyframes menu-in {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.sort-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 12px;
  border: 0;
  background: none;
  font: inherit;
  color: var(--text);
  border-radius: 6px;
  cursor: pointer;
}
.sort-menu button:hover { background: var(--chip-bg); }

/* ───────────── Masonry grid ───────────── */
.masonry { columns: 4 260px; column-gap: var(--gutter); }
.masonry.cols-icons { columns: 6 120px; }

.card-wrap {
  break-inside: avoid;
  margin-bottom: var(--gutter);
  animation: card-in .5s var(--ease) both;
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.card {
  position: relative;
  display: block;
  background: var(--card-bg);
  border-radius: var(--radius-card);
  overflow: hidden;
  cursor: zoom-in;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
}

.card img, .card video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s var(--ease), opacity .4s var(--ease);
}
.card:hover img, .card:hover video { transform: scale(1.03); }

/* fade the main media in once loaded (avatars are never faded) */
.card img.media { opacity: 0; }
.card img.media.loaded { opacity: 1; }

/* app-icon feed: square, rounded like iOS icons */
.cols-icons .card { border-radius: 22%; aspect-ratio: 1 / 1; }

/* avatar bottom-left */
.card .avatar {
  position: absolute;
  bottom: 12px;
  left: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.04);
  pointer-events: none;
}

/* multi-media count badge, top-right */
.card .count {
  position: absolute;
  top: 12px;
  right: 12px;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.92);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text);
}

/* source-link arrow appears on hover, bottom-right */
.card .goto {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(235,235,235,.95);
  color: var(--text);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.card:hover .goto { opacity: 1; transform: none; }
.card .goto:hover { background: #fff; }

/* ───────────── Skills feed (text cards) ───────────── */
.skill-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  background: var(--card-bg);
  border-radius: var(--radius-card);
  cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.skill-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.08); }
.skill-card img { width: 36px; height: 36px; border-radius: 9px; object-fit: cover; flex-shrink: 0; }
.skill-card .skill-body strong { display: block; margin-bottom: 4px; }
.skill-card .skill-body span { color: var(--text-soft); }

/* ───────────── Info page ───────────── */
.info-page { max-width: 560px; line-height: 1.7; }
.info-page h2 { font-size: 15px; font-weight: 600; margin: 24px 0 8px; }
.info-page p { color: var(--text-soft); margin: 0 0 12px; }
.info-page a { text-decoration: underline; }

.empty { color: var(--text-muted); text-align: center; padding: 64px 0; }

/* ───────────── Lightbox ───────────── */
.lightbox { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; }
.lightbox[hidden] { display: none; }

.lightbox-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55);
  animation: fade-in .25s var(--ease);
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.lightbox-card {
  position: relative;
  margin: 0;
  max-width: min(880px, 92vw);
  max-height: 92vh;
  background: #fff;
  border-radius: 16px;
  overflow: auto;
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
}
/* fallback pop animation for browsers without View Transitions */
.lightbox:not(.vt) .lightbox-card { animation: pop-in .32s var(--ease); }
@keyframes pop-in {
  from { opacity: 0; transform: scale(.92) translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.lightbox-media img, .lightbox-media video {
  display: block;
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
  background: var(--card-bg);
}

.lightbox-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  cursor: pointer;
  font-size: 14px;
  z-index: 2;
}

.lightbox-meta { padding: 16px 20px 20px; }

.lightbox-author {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lightbox-author img { border-radius: 50%; object-fit: cover; }
.lightbox-author div { display: flex; flex-direction: column; }
.lightbox-author span { color: var(--text-soft); }
.lightbox-author .chip { margin-left: auto; }

.lightbox-meta p { margin: 12px 0 0; color: var(--text-soft); }

/* ───────────── View Transitions: shared-element morph ─────────────
   The clicked card media and the lightbox media share a
   view-transition-name, so the browser morphs one into the other. */
::view-transition-old(design-media),
::view-transition-new(design-media) {
  animation-duration: .38s;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
  mix-blend-mode: normal;
}
::view-transition-group(design-media) { z-index: 200; }

/* ───────────── Responsive ───────────── */
@media (max-width: 900px) {
  .sidebar {
    position: static;
    width: auto;
    flex-direction: row;
    align-items: flex-start;
  }
  .main { margin-left: 0; padding: var(--pad); }
  .sidebar-bottom { display: none; }
}