/* =========================
   Brand & base
   ========================= */
:root{
  --navy:#0A1B3D;
  --silver:#C0C7D1;
  --off:#F7F9FC;
  --mint:#8EE3C5;
  --text:#212529;
}

html {
  scroll-behavior: smooth;
}

*{ box-sizing:border-box }

body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.65;
  margin:0;
}

/* Accessibility: skip link */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position:static; width:auto; height:auto; padding:.5rem; background:#fff; color:#000;
}

/* =========================
   Navbar & hero
   ========================= */
.bg-navy{ background:var(--navy) !important }
.text-silver{ color:var(--silver) !important }

.navbar .btn{ font-weight:600 }
.navbar-dark .navbar-toggler-icon{
  /* ensure visible hamburger */
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.hero{
  background:linear-gradient(180deg, rgba(10,27,61,.98), rgba(10,27,61,.92));
  padding:3.5rem 0;
}
.hero .hero-photo{
  width:min(380px, 90%);
  height:auto;
  object-fit:cover;
}

/* =========================
   Buttons
   ========================= */
.btn-mint{
  background:var(--mint); color:#06362a; border:none;
}
.btn-mint:hover{ filter:brightness(0.95) }
.btn-outline-light{ border-color:#ffffffcc }
.btn-success {
    background-color: #1DB954;
    border-color: #1DB954;
}
.btn-success:hover {
    background-color: #1ED760;
    border-color: #1ED760;
}
.media-btn {
    display: flex;
    align-items: center;
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
    color: #fff;
    text-decoration: none;
}
.media-btn-icon {
    width: 24px;
    height: 24px;
    margin-right: 8px;
}

/* =========================
   Sections
   ========================= */
.bg-offwhite{ background:var(--off) }
section h2{ font-weight:700 }
.eyebrow{ letter-spacing:.03em; text-transform:uppercase; font-size:.85rem }

/* Adding scroll offset for sticky nav */
#about, #projects, #media, #resources, #contact {
    scroll-margin-top: 80px; /* Adjust this value based on the actual height of your navbar */
}


/* Metrics */
.metrics-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  grid-gap:14px;
}
.metric{
  background:#fff;
  border:1px solid #e6e9ef;
  border-radius:12px;
  padding:16px;
  text-align:center;
}
.metric-value{
  font-size:1.6rem;
  font-weight:800;
  color:var(--navy);
}
.metric-label{ color:#4b5563; font-size:.95rem; }

/* Skills */
.skills-list{
  display:flex; flex-wrap:wrap; gap:10px;
  list-style:none; padding:0; margin:0;
}
.skills-list li{
  background:var(--off);
  border:1px solid #e6e9ef;
  padding:.45rem .75rem;
  border-radius:999px;
  font-weight:600;
  color:#0f172a;
}

/* Projects */
.projects a.text-dark:hover{
  text-decoration: none;
  color: var(--navy) !important;
}

/* Media */
.media-row {
  align-items: flex-start;
}
.media-row > div {
  display: flex;
  flex-direction: column;
}

.portrait-container {
    max-width: 60%;
    margin: 0 auto;
}
.portrait-container img {
    display: block;
    width: 100%;
}

.media-button-container {
    background: #fff;
    border: 1px solid #e6e9ef;
    padding: 2rem 1rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Images */
img.rounded{ border-radius:12px }

/* Contact */
.contact-links {
  gap: 1.5rem;
}
.contact-link {
  display: flex;
  align-items: center;
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
}
.contact-link:hover {
  color: var(--navy);
  text-decoration: underline;
}
.contact-icon {
  font-size: 1.25rem;
  margin-right: .5rem;
}
.contact-icon.youtube-icon {
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='%23FF0000' d='M549.655 124.083c-6.281-23.65-24.761-42.274-48.242-48.601C497.887 64 288 64 288 64S78.113 64 48.587 75.482c-23.481 6.327-41.961 24.951-48.242 48.601C0 146.066 0 256 0 256s0 109.934 30.345 131.917c6.281 23.65 24.761 42.274 48.242 48.601C78.113 448 288 448 288 448s209.887 0 239.413-11.482c23.481-6.327 41.961-24.951 48.242-48.601C576 365.934 576 256 576 256s0-109.934-30.345-131.917zM232 329.833V182.167L384 256l-152 73.833z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: .5rem;
}
.contact-icon.instagram-icon {
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23E4405F' d='M224.1 123.6c-5.8-3.4-14.7-5.5-24.9-5.5-12.7 0-23.3 2.5-31.9 7.6-8.5 5-15.6 12.3-21.2 21.6-5.7 9.3-8.5 20.3-8.5 33.1v173.8c0 12.8 2.8 23.8 8.5 33.1 5.7 9.3 12.7 16.6 21.2 21.6 8.6 5.1 19.2 7.6 31.9 7.6 10.2 0 19.1-2.1 24.9-5.5s10.3-8.1 14.1-14.4c3.8-6.3 5.7-13.8 5.7-22.6V152.1c0-8.8-1.9-16.3-5.7-22.6-3.7-6.3-8.3-11.2-14.1-14.4zM448 118.8c0-30.4-12.3-57.5-36.9-79.6-24.5-22.1-53.5-33.1-87-33.1H123.5c-33.4 0-62.4 11-87 33.1-24.6 22.1-36.9 49.2-36.9 79.6v274.4c0 30.4 12.3 57.5 36.9 79.6 24.6 22.1 53.6 33.1 87 33.1h200.6c33.4 0 62.4-11 87-33.1 24.6-22.1 36.9-49.2 36.9-79.6V118.8z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: .5rem;
}

/* Footer */
footer a{ color:var(--silver) }
footer a:hover{ text-decoration:underline }

/* =========================
   Responsive tweaks
   ========================= */
@media (max-width:992px){
  .metrics-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width:576px){
  .metrics-grid{ grid-template-columns: 1fr; }
  .display-4{ font-size:2rem }
  .contact-links {
    flex-direction: column;
    align-items: flex-start;
  }
}