/* Minimal black & white portfolio — full width + tuned performance */
:root {
  --bg: #000;
  --fg: #fff;
  --muted: #bfbfbf;
  --line: rgba(255,255,255,0.08);
  --gap: clamp(16px, 3vw, 32px);
  --radius: 16px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: auto; } /* use native scroll for anchors (avoid conflicts) */
body {
  margin: 0;
  font-family: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Layout: full-width shell */
.shell { width: 100%; max-width: none; margin: 0 auto; padding: 0 clamp(12px, 3vw, 40px); }
.row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--gap); }
.stack { padding: calc(var(--gap) * 2) 0; border-top: 1px solid var(--line); }
.stack:first-of-type { border-top: none; }
.eyebrow { color: var(--muted); font-size: 0.95rem; margin: 0 0 0.75rem 0; letter-spacing: .02em; }
.lead { font-size: clamp(1.05rem, 1.1vw + .6rem, 1.3rem); color: #ddd; max-width: 120ch; }

/* Header */
.head { padding: calc(var(--gap) * 2) 0 var(--gap); }
.title { font-size: clamp(2.2rem, 3.6vw + 1rem, 4rem); line-height: 1.05; margin: 0 0 .25rem 0; }
.tag { margin: 0; color: var(--muted); }
.nav { display: flex; gap: .75rem; align-items: center; color: var(--muted); flex-wrap: wrap; }
.nav a { color: var(--fg); text-decoration: none; opacity: .9; border-bottom: 1px solid transparent; }
.nav a:hover { border-bottom-color: var(--fg); }

/* Cards/list — stretch across width responsively */
.list.cards {
  display: grid;
  gap: calc(var(--gap) * 1.25);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.card { padding: calc(var(--gap) * 0.9); border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,0.02); }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gap); margin-bottom: .25rem; }
.card h3 { margin: 0; font-size: clamp(1.05rem, .7vw + .95rem, 1.35rem); }
.meta { color: var(--muted); font-size: .9rem; white-space: nowrap; }
.tags { display: flex; gap: .5rem; list-style: none; padding: 0; margin: .5rem 0 0; flex-wrap: wrap; }
.tags li { border: 1px solid var(--line); border-radius: 999px; padding: .2rem .6rem; font-size: .8rem; color: var(--muted); }

/* Experience grid uses full width */
.jobs {
  display: grid;
  gap: calc(var(--gap) * 1.25);
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}
.job-line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gap); }
.job h3 { margin: 0 0 .25rem 0; font-size: clamp(1rem, .5vw + 1rem, 1.25rem); }
.job ul { margin: .25rem 0 0 0; padding-left: 1.2rem; color: #ddd; }
.job li { margin: .2rem 0; }

/* Skills grid spans full width */
.grid.two { 
  display: grid; 
  gap: var(--gap); 
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
}
.grid.two h4 { margin: 0 0 .25rem 0; }
.grid.two p { margin: 0; color: #ddd; }

/* Education */
.edu { list-style: none; padding: 0; margin: 0; color: #ddd; }
.edu li { margin: .35rem 0; }

/* Links */
.link { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--fg); }
.link:hover { opacity: .85; }

/* Footer */
.foot { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); padding: calc(var(--gap) * 2) 0; border-top: 1px solid var(--line); color: var(--muted); }
.top { color: var(--fg); text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: .4rem .65rem; }
.top:hover { background: rgba(255,255,255,0.04); }

/* Accessibility */
.skip { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.skip:focus { position: static; width: auto; height: auto; background: #111; color: #fff; padding: .5rem .75rem; border-radius: .5rem; }

/* Responsive tweaks */
@media (max-width: 720px) {
  .card-head { flex-direction: column; align-items: flex-start; }
  .job-line { flex-direction: column; align-items: flex-start; }
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}