/* Shared styles for all portfolio pages */
:root {
  --bg: #0e0f11;
  --surface: #131518;
  --fg: #ececec;
  --fg2: #c9cacd;
  --dim: #7a7d83;
  --dim2: #55585e;
  --border: #22252a;
  --accent: oklch(0.78 0.09 210);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-image: radial-gradient(ellipse at 20% 0%, rgba(255,255,255,0.015), transparent 60%);
}

button, a { font-family: inherit; }
::selection { background: var(--accent); color: var(--bg); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #33373d; }

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr !important; }
  .sidebar {
    position: static !important;
    height: auto !important;
    padding: 32px 24px 0 !important;
  }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .detail-body { grid-template-columns: 1fr !important; }
  .landing { grid-template-columns: 1fr !important; }
  .landing > *:last-child { min-height: 60vh; }
}
@media (max-width: 560px) {
  .card-grid { grid-template-columns: 1fr !important; }
}