/* Jonathan Rose Portfolio Styles, accessible first, SEO friendly */
:root{
  --rose:#E20025;
  --gold:#FFED10;
  --blue:#0060AA;
  --ink:#010101;
  --paper:#ffffff;
  --muted:#5b6166;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Atkinson Hyperlegible", sans-serif;
  color:var(--ink);
  background:#fffef6;
  line-height:1.6;
  text-rendering:optimizeLegibility;
}

a{color:var(--blue); text-decoration:underline; text-underline-offset:2px}
a.button{ text-decoration:none }

.container{max-width:1180px; margin-inline:auto; padding:clamp(16px,3vw,24px)}

header.site-header{
  position:sticky; top:0; z-index:50; background:#fffffff0; backdrop-filter:saturate(1.2) blur(6px); border-bottom:1px solid #eee;
}
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px}
.brand img{width:28px; height:28px}
nav ul{list-style:none; display:flex; gap:18px; margin:0; padding:0}
nav a{color:var(--ink); font-weight:600}
nav a:hover{color:var(--rose)}

.hero{
  background: radial-gradient(120% 80% at 50% 0%, #fff 0%, #fff8d4 60%, #fff 100%);
  border-bottom:1px solid #f0e9a0;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:clamp(16px,3vw,28px);
  align-items:center;
}
@media (max-width: 900px){
  .hero-grid{grid-template-columns:1fr}
}
.kicker{color:var(--rose); font-weight:800; text-transform:uppercase; letter-spacing:.12em; font-size:.85rem}
h1{font-size: clamp(2rem, 4.5vw, 3.2rem); line-height:1.15; margin:.2em 0 .6em}
.hero p{color:var(--muted); font-size:clamp(1rem,1.7vw,1.125rem)}
.badges{display:flex; flex-wrap:wrap; gap:10px; margin:20px 0}
.badges .tag{
  border:1px solid #ffd400; color:#3b3b3b; background:#fffaf0; padding:6px 10px; border-radius:999px; font-weight:700; font-size:.9rem
}

.cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:22px}
.button{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 18px; border-radius:12px; border:2px solid var(--rose); color:#fff; background:var(--rose);
  font-weight:800; letter-spacing:.4px;
}
.button.secondary{background:#fff; color:var(--rose)}
.button:hover{transform:translateY(-2px) scale(1.01)}

.figure{
  background:#fff; border:1px solid #eee; border-radius:18px; padding:14px;
  box-shadow:0 8px 26px rgba(0,0,0,.06);
}
.figure img{width:100%; border-radius:12px}

.section{padding: clamp(48px, 8vw, 92px) 0}
.section h2{font-size: clamp(1.6rem, 3.6vw, 2.4rem); margin:.2em 0 .8em}
.sub{color:var(--muted)}

.metrics{display:grid; grid-template-columns: repeat(4,1fr); gap:16px}
@media (max-width:900px){ .metrics{grid-template-columns:repeat(2,1fr)} }
.metric{background:#fff; border:1px solid #eee; border-radius:14px; padding:18px; text-align:center}
.metric .num{font-size:clamp(1.6rem,3.4vw,2.2rem); font-weight:900; color:var(--rose)}
.metric .label{color:#333; font-weight:700}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width:900px){ .cards{grid-template-columns:1fr} }
.card{
  background:#fff; border:1px solid #eee; border-radius:14px; padding:18px; display:flex; flex-direction:column; gap:10px
}
.card h3{margin:.2em 0}
.card .tags{display:flex; flex-wrap:wrap; gap:8px}
.tag{font-size:.82rem; font-weight:700; background:#eef6ff; color:#174ea6; border:1px solid #c9dcff; padding:4px 8px; border-radius:999px}

.resume-grid{display:grid; grid-template-columns:1fr 2fr; gap:24px}
@media (max-width:900px){ .resume-grid{grid-template-columns:1fr} }
.resume-aside{background:#fff; border:1px solid #eee; border-radius:14px; padding:18px}
.resume-main .role{border-left:4px solid var(--blue); padding-left:14px; margin-bottom:18px}
.resume-main .role h3{margin:.1em 0}
.resume-main .role .when{color:var(--muted); font-weight:700}
.resume-main ul{padding-left:18px}

.portfolio-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width:900px){ .portfolio-grid{grid-template-columns:1fr} }
.portfolio-item{background:#fff; border:1px solid #eee; border-radius:14px; overflow:hidden}
.portfolio-item img{width:100%; height:auto; display:block}
.portfolio-item .cap{padding:12px; font-weight:700}

.faq dt{font-weight:800; margin-top:14px}
.faq dd{margin:0 0 14px 0; color:#333}

footer{
  background:#0c0c0c; color:#fff; padding:28px 0; margin-top:32px
}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:16px}
@media (max-width:900px){ .footer-grid{grid-template-columns:1fr} }
small, .legal{color:#c9c9c9}