/* CV page layout on MarsTech-Skin (MARSTECH-894), adapted from MarsTech-Skin/prototypes/cv.html.
   The CV body is Markdown rendered by Remarkable, then shaped by js/cv.js. */

.mt-header { position: sticky; top: 0; background: var(--bg); z-index: 10; }
html { scroll-padding-top: 80px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

.hero { padding-block: var(--section-y-phone); border-bottom: 1px solid var(--border-soft); }
@media (min-width: 1024px) { .hero { padding-block: var(--section-y-desktop) var(--space-12); } }
.hero h1 { font-size: clamp(var(--text-3xl), 7vw, var(--text-4xl)); text-transform: uppercase; margin-top: var(--space-3); }
.hero .role { margin-top: var(--space-4); font: 500 var(--text-lg)/1.45 var(--font-display); letter-spacing: var(--tracking-display); color: var(--fg-2); max-width: 60ch; }
.hero .contacts { margin-top: var(--space-5); font: var(--text-sm)/1.8 var(--font-mono); color: var(--muted); overflow-wrap: anywhere; }
.mt-clip:focus-visible { clip-path: none; } /* the clip path would hide the focus ring (PR #9 review) */
.hero .actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

.body { display: grid; gap: var(--space-8); padding-block: var(--space-8) var(--space-12); }
@media (min-width: 1024px) { .body { grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-12); } }
.toc { display: none; }
@media (min-width: 1024px) {
  .toc { display: block; position: sticky; top: 96px; align-self: start; }
  .toc ol { list-style: none; margin: var(--space-3) 0 0; padding: 0; border-left: 1px solid var(--border); }
  .toc a { display: flex; align-items: center; min-height: 44px; padding-left: var(--space-4); margin-left: -1px; border-left: 1px solid transparent; color: var(--fg-2); }
  .toc a[aria-current="true"] { color: var(--accent); border-left-color: var(--accent); }
}
@media (min-width: 1024px) and (hover: hover) { .toc a:hover { color: var(--fg); } }

section.block + section.block { margin-top: var(--space-12); }
section.block > h2 { font-size: var(--text-2xl); text-transform: uppercase; margin-bottom: var(--space-5); }
section.block ul { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-2); max-width: 75ch; }
section.block li::marker { color: var(--accent); content: "▪  "; }
section.block p { max-width: 75ch; }

/* Timeline: one .job per ### heading */
.timeline { border-left: 1px solid var(--border); }
.job { position: relative; padding: 0 0 var(--space-8) var(--space-6); }
.job::before { content: ""; position: absolute; left: -5px; top: 8px; width: 9px; height: 9px; background: var(--bg); border: 1px solid var(--accent); }
.job:first-child::before { background: var(--accent); }
.job h3 { font-size: var(--text-xl); }
.job h3 + p { margin-top: var(--space-2); color: var(--fg-2); }
.job h3 + p em { font-style: normal; }
.job ul { margin-top: var(--space-4); }

.job > .mt-label { margin-top: var(--space-4); }
.job > .mt-label + .stack { margin-top: var(--space-2); }
.stack { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-4); }
.badge.is-key { color: var(--fg); border-color: var(--fg-2); }

/* Skills: one panel per category */
.skills { display: grid; gap: var(--space-3); }
@media (min-width: 768px) { .skills { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.skill-cat { padding: var(--space-4); }
.skill-cat h3 { font-size: var(--text-base); text-transform: uppercase; }
.skill-cat .stack { margin-top: var(--space-3); }

footer.mt-foot { border-top: 1px solid var(--border-soft); padding-block: var(--space-6); }
footer.mt-foot .wrap { display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
footer.mt-foot a { display: inline-flex; align-items: center; min-height: 44px; }