:root {
--bg: #f7f5ef;
--panel: #fffdf8;
--text: #2a1f15;
--muted: #5f4a37;
--accent: #8b3a00;
--line: #eadfce;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }

body {
margin: 0;
color: var(--text);
font-family: Georgia, "Times New Roman", serif;
background:
radial-gradient(circle at 15% 15%, #fff6e8 0%, transparent 30%),
radial-gradient(circle at 85% 5%, #eef5ff 0%, transparent 26%),
var(--bg);
line-height: 1.65;
}

.page-grid {
display: grid;
min-height: 100vh;
grid-template-columns: minmax(1rem, 1fr) minmax(0, 980px) minmax(1rem, 1fr);
grid-template-areas:
". header ."
". nav ."
". main ."
". footer .";
gap: 1rem;
padding: 1rem 0 2rem;
}

header, main, footer {
grid-column: 2;
background: var(--panel);
border: 1px solid var(--line);
border-radius: 8px;
padding: 1rem 1.2rem;
}

header { grid-area: header; }
main { grid-area: main; }
footer { grid-area: footer; }

nav {
grid-area: nav;
grid-column: 2;
position: sticky;
top: 0.6rem;
z-index: 50;
background: rgba(255, 253, 248, 0.92);
backdrop-filter: saturate(140%) blur(6px);
border: 1px solid var(--line);
border-radius: 8px;
padding: 0.5rem 1rem;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.banner {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.6rem;
}

.banner h1 { margin: 0.2rem 0; }

.banner .tagline {
white-space: nowrap;
overflow-x: auto;
max-width: 100%;
margin: 0;
}

.insignia {
width: 320px;
max-width: 100%;
border: 1px solid var(--line);
border-radius: 8px;
}

.nav-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: space-evenly;
}

.nav-list li { flex: 1; text-align: center; }

.nav-list a {
display: inline-block;
text-decoration: none;
color: #ffffff;
background: var(--accent);
border-radius: 6px;
padding: 0.35rem 1.1rem;
font-size: 0.95rem;
transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.nav-list a:hover {
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(139, 58, 0, 0.25);
}

.nav-list a.active {
background: #fff;
color: var(--accent);
box-shadow: inset 0 0 0 2px var(--accent);
}

.main-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}

.main-grid > section {
border: 1px solid var(--line);
border-radius: 8px;
padding: 0.85rem;
background: #fff;
margin-bottom: 1rem;
}

.main-grid section > h2 { text-align: center; }

#summary,
#skills,
#education,
#projects,
#certifications {
grid-column: 1;
}

.main-grid section > h2::before {
content: attr(data-icon);
margin-right: 0.45rem;
font-size: 0.95em;
filter: saturate(0) brightness(0.8);
}

.full-width { grid-column: 1 / -1; }

.profile {
width: 210px;
height: 280px;
max-width: 100%;
object-fit: cover;
border-radius: 10px;
border: 2px solid var(--line);
margin-top: 0.4rem;
transition: filter 0.25s ease, transform 0.25s ease;
filter: grayscale(20%);
}

.profile:hover {
filter: grayscale(0%);
transform: translateY(-2px);
}

.top-hero {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
justify-content: center;
align-items: center;
margin-top: 0.1rem;
}

.top-hero .profile {
width: 150px;
height: 200px;
margin-top: 0;
}

.top-hero .insignia { margin: 0; }

.stat-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.7rem;
margin: 0.4rem 0 1rem;
}

.stat {
background: #fff8ef;
border: 1px solid var(--line);
border-radius: 8px;
padding: 0.85rem 0.5rem;
text-align: center;
}

.stat .num {
display: block;
font-family: Georgia, serif;
font-size: 1.9rem;
color: var(--accent);
font-weight: 700;
line-height: 1;
}

.stat .label {
display: block;
margin-top: 0.35rem;
font-size: 0.82rem;
color: var(--muted);
letter-spacing: 0.04em;
}

.skill-group { margin-bottom: 0.85rem; }
.skill-group:last-child { margin-bottom: 0; }

.skill-group .label {
display: block;
font-weight: bold;
color: var(--accent);
margin-bottom: 0.35rem;
font-size: 0.95rem;
}

.pill-row {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}

.pill {
background: #fff8ef;
border: 1px solid var(--line);
color: var(--text);
border-radius: 999px;
padding: 0.22rem 0.7rem;
font-size: 0.86rem;
line-height: 1.4;
transition: background 0.12s ease, border-color 0.12s ease;
}

.pill:hover {
background: #fff1dc;
border-color: var(--accent);
}

#skills {
display: flex;
flex-direction: column;
gap: 0.95rem;
}

#skills .skill-group {
margin-bottom: 0;
text-align: center;
}

#skills .pill-row { justify-content: center; }

#certifications .pill-row {
display: grid;
grid-template-columns: repeat(3, minmax(150px, 1fr));
gap: 0.6rem;
align-items: center;
max-width: 720px;
margin: 0 auto;
}

#certifications .pill {
width: 100%;
text-align: center;
border-radius: 8px;
}

#education .card,
#education .card h3,
#education .card p,
#projects .card,
#projects .card h3,
#projects .card p {
text-align: center;
}

.card {
background: #fff8ef;
border: 1px solid var(--line);
border-radius: 8px;
padding: 0.85rem 1rem;
margin-bottom: 0.85rem;
}

.card h3 {
margin: 0 0 0.15rem;
color: var(--accent);
}

/* Flexbox card row required by assignment */
.card-row {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
justify-content: center;
align-items: stretch;
}

.mini-card {
flex: 1 1 250px;
max-width: 320px;
background: #fff8ef;
border: 1px solid var(--line);
border-radius: 8px;
padding: 0.85rem 1rem;
text-align: center;
}

.mini-card h3 {
margin: 0 0 0.35rem;
color: var(--accent);
}

.mini-card p { margin: 0; }

#contact ul,
#attribution ul {
margin: 0.3rem 0 0;
padding-left: 1.2rem;
}

a { color: var(--accent); }

.resume-box { text-align: center; }

.resume-btn {
display: inline-block;
background: var(--accent);
color: #fff;
text-decoration: none;
padding: 0.55rem 1.2rem;
border-radius: 6px;
margin: 0.3rem 0.4rem;
font-size: 1rem;
transition: opacity 0.15s ease, transform 0.12s ease;
}

.resume-btn:hover {
opacity: 0.9;
transform: translateY(-1px);
}

.to-top {
position: fixed;
bottom: 1.2rem;
right: 1.2rem;
background: var(--accent);
color: #fff;
width: 42px;
height: 42px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-size: 1.2rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
z-index: 60;
}

.to-top.show {
opacity: 1;
pointer-events: auto;
}

.to-top:hover { transform: translateY(-2px); }

@media (max-width: 820px) {
.main-grid { grid-template-columns: 1fr; }
#certifications .pill-row { grid-template-columns: 1fr; max-width: 360px; }
}

@media (max-width: 720px) {
.stat-row { grid-template-columns: repeat(2, 1fr); }
.card-row { flex-direction: column; }
.mini-card { max-width: 100%; }
}

@media print {
body {
background: #fff;
color: #000;
font-size: 10.5pt;
line-height: 1.4;
}

.page-grid {
display: block;
padding: 0;
}

header, main, footer, nav,
.main-grid > section,
.card,
.mini-card {
box-shadow: none;
border: none !important;
border-radius: 0;
background: #fff !important;
page-break-inside: avoid;
}

nav, .to-top, .resume-btn { display: none !important; }

.main-grid { display: block; }

#highlights .card {
padding: 0.4rem 0 0.35rem 0;
margin-bottom: 0.7rem;
}

#highlights .card ul {
list-style: none !important;
margin: 0.25rem 0 0.4rem 0 !important;
padding-left: 0 !important;
}

#highlights .card li {
margin: 0 0 0.22rem 0 !important;
padding-left: 0 !important;
}

#highlights .card li::before { content: "- "; }

.full-width { display: block; }
.insignia { width: 180px; }
.profile { width: 130px; height: 170px; }

a {
color: #000;
text-decoration: none;
}

.pill { background: #fff !important; }

h1 { font-size: 18pt; }
h2 { font-size: 12pt; }
h3 { font-size: 11pt; }
}