/* Michael Denis — static portfolio/resume
   Dark-first theme. No JS. Semantic HTML. A11y. Print-friendly. */

/* ===== Tokens (DARK default) */
:root{
  --bg:        #0b1220;     /* dark slate */
  --bg-2:      #0e1627;
  --fg:        #e7ecf6;     /* near-white */
  --muted:     #9fb0c9;
  --line:      #1f2a44;
  --accent:    #8b95ff;     /* periwinkle */
  --accent-2:  #4de2c1;     /* mint */
  --card:      #0f172a;
  --shadow:    0 2px 16px rgba(0,0,0,.25);

  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;

  --step--1: clamp(.78rem, .74rem + .2vw, .88rem);
  --step-0 : clamp(.95rem, .90rem + .3vw, 1.05rem);
  --step-1 : clamp(1.15rem, 1.02rem + .6vw, 1.35rem);
  --step-2 : clamp(1.35rem, 1.15rem + .9vw, 1.7rem);
  --step-3 : clamp(1.6rem, 1.25rem + 1.3vw, 2.1rem);
}

@media (prefers-color-scheme: light){
  :root{
    --bg:#f8fbff; --bg-2:#eef4ff; --fg:#0b1220; --muted:#42546f;
    --line:#d8e2f3; --card:#ffffff; --shadow:0 2px 14px rgba(7, 20, 35, .08);
    --accent:#4a56ff; --accent-2:#00c7a5;
  }
}

*{ box-sizing:border-box; }
html{ color-scheme:dark light; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  background:linear-gradient(180deg, var(--bg), var(--bg-2));
  color:var(--fg);
  font:400 var(--step-0)/1.55 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ===== Focus & skip */
:where(a, .btn, [tabindex]):focus-visible{
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius:.4rem;
}
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:50%; transform:translateX(-50%);
  top:1rem; width:auto; height:auto; padding:.5rem .75rem; z-index:9999;
  background:var(--accent); color:white; border-radius:.4rem;
}

/* ===== Sticky top bar */
.topbar{
  position:sticky; top:0; z-index:999;
  border-bottom:1px solid var(--line);
  backdrop-filter: blur(8px);
  background: color-mix(in oklab, var(--bg), transparent 10%);
}
.topbar-inner{
  max-width:1200px; margin-inline:auto;
  display:grid; grid-template-columns: 1fr auto auto;
  gap:1rem; align-items:center;
  padding:.75rem 1rem;
}
.brand{
  text-decoration:none; font-weight:800; letter-spacing:.2px;
  color:var(--fg);
}
.primary-nav a{
  text-decoration:none; color:var(--fg); opacity:.9; margin-inline:.75rem;
  padding:.35rem .25rem; border-radius:.35rem;
}
.primary-nav a:hover{ color:var(--accent); }

.quick-nav{ display:flex; gap:.5rem; }
.btn{
  --b: 2px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:.5rem .85rem; border-radius:.6rem; text-decoration:none;
  background:linear-gradient(180deg, var(--accent), color-mix(in oklab, var(--accent), black 8%));
  color:white; font-weight:700; box-shadow: var(--shadow);
  border:var(--b) solid transparent; white-space:nowrap;
}
.btn.ghost{
  background:transparent; color:var(--accent);
  border-color: color-mix(in oklab, var(--accent), transparent 60%);
}

/* ===== Sections */
.section{
  padding: clamp(2rem, 2vw + 1rem, 3rem) 1rem;
  scroll-margin-top: 84px;  /* offset for sticky header */
}
.content{ max-width:1200px; margin-inline:auto; }

/* ===== About / hero */
.hero{
  display:grid; gap:2rem;
  grid-template-columns: 160px minmax(0,1fr);
  align-items:start;
}
.headshot{
  margin:0; aspect-ratio:1/1; border-radius:1rem; overflow:hidden;
  box-shadow: var(--shadow); background:var(--card); border:1px solid var(--line);
}
.headshot img{ width:100%; height:100%; object-fit:cover; display:block; }

.hero-copy h1{ margin:.25rem 0 .5rem; font-size:var(--step-3); }
.lede{ margin:.25rem 0 1rem; color:var(--fg); opacity:.9; }
.meta-inline{
  margin:0 0 1rem; display:grid; gap:.5rem;
}
.meta-inline dt{ font-weight:700; color:var(--muted); }
.meta-inline dd{ margin:0; }
.meta-inline a{ color:var(--fg); text-decoration:none; border-bottom:1px dashed color-mix(in oklab, var(--fg), transparent 60%); }
.meta-inline a:hover{ color:var(--accent); border-bottom-color:transparent; }

.snapshot{ margin: 0 0 1rem; padding-left:1.1rem; }
.snapshot li{ margin:.15rem 0; }

.skills{ display:grid; gap:1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.badges{ list-style:none; padding:0; margin:.4rem 0 0; display:flex; flex-wrap:wrap; gap:.5rem; }
.badges li{
  background:color-mix(in oklab, var(--accent), transparent 85%);
  color:color-mix(in oklab, var(--accent), black 40%);
  padding:.25rem .5rem; border-radius:.4rem; border:1px solid color-mix(in oklab, var(--accent), transparent 60%);
  font-weight:700; font-size:.85em;
}

/* ===== Experience */
h2{
  font-size:var(--step-2);
  margin:0 0 1rem 0;
  line-height:1.15;
  border-bottom:1px solid var(--line);
  padding-bottom:.5rem;
}
.xp{
  background: var(--card);
  border:1px solid var(--line);
  border-radius:1rem; padding: 1.25rem;
  box-shadow: var(--shadow);
}
.xp + .xp{ margin-top:1rem; }
.xp-h{ display:flex; flex-direction:column; gap:.25rem; margin-bottom:.5rem; }
.xp h3{ margin:0; font-size:var(--step-1); }
.xp-meta{ color:var(--muted); font-size:var(--step--1); }
.xp-bullets{ margin:.5rem 0 0; padding-left:1.2rem; }
.stack{ list-style:none; display:flex; gap:.5rem; padding:0; margin:.75rem 0 0; flex-wrap:wrap; }
.stack li{
  border:1px solid var(--line); padding:.2rem .5rem; border-radius:.4rem;
  font-size:.85em; color:var(--muted); background:color-mix(in oklab, var(--card), white 3%);
}

/* ===== Portfolio */
.project-grid{
  display:grid; gap:1rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.project-card{
  text-decoration:none; color:inherit;
  border-radius:1rem; overflow:hidden; border:1px solid var(--line);
  background:var(--card); box-shadow: var(--shadow); display:block;
}
.project-card figure{ margin:0; position:relative; }
.project-card img{
  width:100%; height:220px; object-fit:cover; display:block;
  filter:saturate(1.06);
}
.project-card figcaption{
  position:absolute; inset:auto 0 0 0;
  padding:.9rem;
  backdrop-filter: blur(4px);
  background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.45));
  color:#fff;
}
.project-card .title{ display:block; font-weight:800; }
.project-card .meta{ font-size:.9em; opacity:.9; }

/* ===== Footer */
.site-footer{
  margin-top: 2rem;
  color:var(--muted);
  border-top:1px solid var(--line);
  padding:1rem;
  text-align:center;
}

/* ===== Mobile */
@media (max-width: 920px){
  .topbar-inner{ grid-template-columns: 1fr auto; gap:.5rem; }
  .primary-nav{ display:none; }   /* lean header on small screens; links remain reachable via content */
  .hero{ grid-template-columns: 120px minmax(0,1fr); }
}

/* ===== Print: tight, ATS-friendly */
@media print{
  html, body{ background:#fff; color:#000; }
  .topbar, .quick-nav, .project-grid img, .site-footer{ display:none !important; }
  .section{ padding:.5rem 0; }
  .headshot{ float:right; width:120px; height:120px; margin:0 0 .5rem .75rem; border:1px solid #000; box-shadow:none; }
  .headshot img{ object-fit:cover; }
  h2{ border:none; margin:.5rem 0 .25rem; padding:0; }
  .xp{ border:1px solid #000; box-shadow:none; padding:.5rem .6rem; border-radius:.3rem; }
  .badges li, .stack li{ border:1px solid #000; background:#fff; color:#000; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:.8em; }
}