/* Portfolio styles - light theme */

:root {
  --bg: #faf9f7;
  --bg-alt: #f1efeb;
  --card: #ffffff;
  --ink: #26333f;
  --ink-soft: #55636f;
  --accent: #1d4e79;
  --accent-dark: #163b5c;
  --accent-soft: #e3ecf4;
  --line: #e2ded7;
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  font-size: 16.5px;
}

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- icons ---------- */
/* Sized by font-size, coloured by currentColor, so each one matches the
   text it sits beside. */

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  vertical-align: -0.13em;
}

.icon svg { width: 100%; height: 100%; display: block; }

/* ---------- top bar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 249, 247, 0.94);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.brand {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.2px;
}

.nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.92rem;
  margin-left: 22px;
}

.nav a:hover { color: var(--accent); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 1.2rem;
  color: var(--ink);
  padding: 4px 10px;
  cursor: pointer;
}

/* ---------- hero ---------- */

.hero { border-bottom: 1px solid var(--line); }

.hero-inner {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 56px;
  align-items: center;
  padding: 72px 0 64px;
}

.hero-greeting {
  color: var(--accent);
  font-size: 1rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.hero-name {
  font-family: var(--serif);
  font-size: clamp(2.3rem, 5vw, 3.4rem);
  line-height: 1.12;
  margin-bottom: 14px;
}

.hero-roles {
  color: var(--accent-dark);
  font-weight: 600;
  font-size: 1.02rem;
  margin-bottom: 18px;
}

.hero-tagline {
  color: var(--ink-soft);
  max-width: 560px;
  margin-bottom: 26px;
}

.hero-meta {
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin-bottom: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

/* Each item stays on one line, but the row wraps and long values can break
   rather than pushing the page wider than the screen. */
.hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  max-width: 100%;
  overflow-wrap: break-word;
}

.hero-meta .icon { color: var(--accent); font-size: 15px; }

.hero-actions a { margin-right: 12px; margin-bottom: 10px; display: inline-block; }

.btn {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid var(--accent);
  transition: background 0.15s ease, color 0.15s ease;
}

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); }

.btn-outline { color: var(--accent); background: transparent; }
.btn-outline:hover { background: var(--accent-soft); }

/* Selector matches .hero-actions a so the flex display is not overridden */
.hero-actions a.btn-icon,
.btn-icon {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.btn-icon .icon { font-size: 16px; }

.hero-photo-wrap { text-align: center; }

.hero-photo {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top center;
  border-radius: 10px;
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(38, 51, 63, 0.16);
  background: var(--bg-alt);
}

/* ---------- sections ---------- */

.section { padding: 72px 0; }
.section.alt { background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.section-heading {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  margin-bottom: 8px;
}

.section-heading .icon {
  color: var(--accent);
  font-size: 0.78em;
  margin-right: 12px;
  vertical-align: -0.04em;
}

.section-subheading {
  color: var(--ink-soft);
  margin-bottom: 36px;
  max-width: 640px;
}

.section-heading::after {
  content: "";
  display: block;
  width: 52px;
  height: 3px;
  background: var(--accent);
  margin-top: 10px;
  border-radius: 2px;
}

/* about */

/* Text runs full width at a readable measure, with the stats as a row
   underneath. Side by side left one column much taller than the other. */
.about-grid { display: block; }

.about-text { max-width: 830px; }
.about-text p { margin-bottom: 16px; color: var(--ink-soft); }
.about-text p:first-child { color: var(--ink); font-size: 1.05rem; }

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 40px;
}

.stat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 20px;
}

.stat-value {
  font-family: var(--serif);
  font-size: 1.9rem;
  color: var(--accent);
  font-weight: 700;
}

.stat-label { color: var(--ink-soft); font-size: 0.9rem; }

/* experience */

.timeline { position: relative; }

.timeline::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--line);
}

.job {
  position: relative;
  padding: 0 0 36px 56px;
}

.job:last-child { padding-bottom: 0; }

/* The marker sits on the timeline and carries the icon */
.job-marker {
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--accent);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.job-period {
  color: var(--accent);
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.4px;
}

.job-title {
  font-family: var(--serif);
  font-size: 1.28rem;
  margin: 4px 0 2px;
}

.job-company { color: var(--ink); font-weight: 600; font-size: 0.98rem; }

.job-client {
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.job-client .icon { color: var(--accent); font-size: 14px; }

.job ul { margin: 10px 0 0 18px; }
.job li { color: var(--ink-soft); margin-bottom: 7px; font-size: 0.96rem; }

/* skills */

/* Columns rather than a grid: the groups hold different numbers of tags, and
   grid rows would size to the tallest card and leave gaps under the rest.
   Cards pack up the columns instead, and the count adapts to the width. */
.skills-grid {
  columns: 320px;
  column-gap: 20px;
}

.skill-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px 24px;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  display: inline-block;
  vertical-align: top;
  width: 100%;
  margin-bottom: 20px;
}

.skill-card h3 {
  font-family: var(--serif);
  font-size: 1.08rem;
  margin-bottom: 14px;
  color: var(--accent-dark);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* Aligned to the first line so a heading that wraps keeps the icon at the top */
.skill-card h3 .icon { color: var(--accent); font-size: 18px; margin-top: 5px; }

.tags { display: flex; flex-wrap: wrap; gap: 8px; }

.tag {
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 0.83rem;
}

/* sectors */

/* Two per row so four cards fill both rows evenly instead of leaving an
   orphan. Drops to one column under about 820px. */
.sectors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 20px;
  margin-bottom: 26px;
}

.sector-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px 24px;
}

.sector-card h3 {
  font-family: var(--serif);
  font-size: 1.1rem;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 11px;
}

.sector-card h3 .icon {
  color: var(--accent);
  font-size: 20px;
  background: var(--accent-soft);
  border-radius: 8px;
  width: 36px;
  height: 36px;
}

.sector-card h3 .icon svg { width: 20px; height: 20px; }

.sector-card p { color: var(--ink-soft); font-size: 0.94rem; }

.sectors-note {
  border-left: 3px solid var(--accent);
  background: var(--card);
  border-radius: 0 8px 8px 0;
  padding: 14px 20px;
  color: var(--ink-soft);
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 12px;
}

.sectors-note .icon { color: var(--accent); font-size: 19px; }

/* education */

.edu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.edu-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px 24px;
}

.edu-year {
  color: var(--accent);
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.edu-year .icon { font-size: 17px; }
.edu-degree { font-family: var(--serif); font-size: 1.05rem; margin: 6px 0 4px; }
.edu-school { color: var(--ink-soft); font-size: 0.94rem; }

/* certifications */

.cert-list { display: flex; flex-wrap: wrap; gap: 12px; }

.cert {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 18px;
  font-weight: 600;
  font-size: 0.93rem;
  color: var(--accent-dark);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.cert .icon { color: var(--accent); font-size: 16px; }

/* contact */

.contact-section { border-top: 1px solid var(--line); }

/* Intro above, contact cards in a row beneath. A side by side split left
   half the section empty because the intro is short. */
.contact-grid { display: block; }

.contact-text { color: var(--ink-soft); margin-bottom: 30px; max-width: 700px; }

.contact-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 16px;
}

.contact-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 13px;
}

.contact-item:hover { border-color: var(--accent); }

.contact-item > .icon {
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 9px;
  width: 40px;
  height: 40px;
  font-size: 19px;
}

.contact-item > .icon svg { width: 19px; height: 19px; }

.contact-item-text { min-width: 0; }

.contact-item .label {
  color: var(--ink-soft);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* Sized so a full email address fits the card without breaking mid-word */
.contact-item .value {
  color: var(--accent-dark);
  font-weight: 600;
  font-size: 0.9rem;
  overflow-wrap: break-word;
}

/* footer */

.footer {
  border-top: 1px solid var(--line);
  padding: 26px 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
}

.footer .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; align-items: center; }

.footer-right { display: flex; align-items: center; gap: 16px; }

.footer-social {
  color: var(--accent);
  font-size: 19px;
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.footer-social:hover { border-color: var(--accent); background: var(--accent-soft); }

/* ---------- responsive ---------- */

@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; gap: 36px; padding: 48px 0; }
  .hero-photo-wrap { order: -1; }
  .hero-photo { max-width: 250px; }
  .stats { grid-template-columns: 1fr 1fr; margin-top: 30px; }

  .nav {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 12px 24px 18px;
  }
  .nav.open { display: block; }
  .nav a { display: block; margin: 10px 0 0; font-size: 1rem; }
  .nav-toggle { display: block; }
}

@media (max-width: 480px) {
  .stats { grid-template-columns: 1fr; }
  .section { padding: 52px 0; }
  .job { padding-left: 46px; }
  .job-marker { width: 27px; height: 27px; font-size: 13px; }
  .timeline::before { left: 12.5px; }
}