:root{
  --bg: #DBD8C7;
  --text-color: #4D4723;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  overflow-x: hidden;
  margin:0;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background:var(--bg);
  color:var(--text-color);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.alegreya{font-family: 'Alegreya', serif; font-weight:400}

.hero{max-width:900px;margin:2.5rem auto}
.hero.block{padding:4rem 1.25rem; text-align:center; color:var(--text-color)}
.music-section{max-width:1100px;margin:0 auto; text-align:center}
.music-section.block{padding:2.5rem 1.25rem}
.music-title{font-size:1.25rem;font-weight:700;margin:0 0 1rem 0; text-align:center}
.marquee{
  overflow:hidden;
  position:relative;
  /* make the marquee full-bleed so items scroll from the very edges of the viewport */
  width:100vw;
  margin-left: calc(50% - 50vw);
  padding:0; /* flush to edges */
}
.marquee-track{display:flex; gap:1rem; align-items:flex-start}
.music-item{width:140px; flex:0 0 auto; text-align:left}
.music-item{width:140px; flex:0 0 auto; text-align:center; position:relative; overflow:hidden}
.music-item .cover{width:140px; height:140px; background:#eee; border-radius:8px; overflow:visible; display:block; margin:0 auto; position:relative; box-sizing:border-box; padding:14px}
.music-item .cover img{display:block;width:100%;height:100%;object-fit:cover;border-radius:6px}

/* torn paper border overlay using provided transparent PNG */
.music-item .cover::after{
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 140%;
  height: 140%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background-image: url('images/torn-paper-border.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  mix-blend-mode: normal;
}
.music-item .meta{font-size:0.85rem; margin-top:1rem; color:var(--text-color); display:flex; flex-direction:column; gap:0.25rem; align-items:center}
.music-item .meta .title{font-weight:700}
.music-item .meta .artist{font-weight:400; font-size:0.85rem; opacity:0.95}

/* torn paper text effect: use an SVG mask and textured background */
.music-item .meta .torn{
  display:inline-block;
  font-weight:600;
  color: var(--text-color);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.0), rgba(0,0,0,0.02));
  -webkit-background-clip: text;
  background-clip: text;
  /* we'll use a small repeating SVG to create roughness behind the text */
  background-repeat: repeat;
  background-size: 6px 6px;
  /* use a darker repeat pattern so the clipped text appears in the dark theme color (torn paper texture) */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='6'><rect width='6' height='6' fill='%234D4723'/><path d='M0 1 L2 1' stroke='%23DBD8C7' stroke-width='0.5' opacity='0.08'/><path d='M3 4 L5 4' stroke='%23DBD8C7' stroke-width='0.5' opacity='0.06'/></svg>");
  -webkit-text-fill-color: transparent; /* show background through text */
  text-fill-color: transparent;
  /* fallback: ensure color appears if background-clip isn't supported */
  color: var(--text-color);
}

/* make sure marquee track is duplicated smoothly by JS — a large padding-right to allow breathing */
.marquee-track[data-duplicate] { /* when JS marks duplication */
  gap:1rem;
}

@media (max-width:600px){
  .music-item{width:110px}
  .music-item .cover{width:110px;height:110px}
  .music-item .cover::after{width:120%;height:120%}
}

/* Projects grid */
.projects-grid{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  justify-content:center; /* center incomplete rows */
  margin-top:1rem;
  align-items:stretch;
}

/* three columns layout: each card is one third minus gaps; prevents cards from stretching */
.projects-grid .project-card{
  flex: 0 0 calc((100% - 2 * 1rem) / 3);
  max-width: calc((100% - 2 * 1rem) / 3);
  box-sizing: border-box;
}

@media (max-width:900px){
  .projects-grid .project-card{
    flex: 0 0 calc((100% - 1 * 1rem) / 2);
    max-width: calc((100% - 1 * 1rem) / 2);
  }
}

@media (max-width:480px){
  .projects-grid .project-card{
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* spacer element used to center last row when incomplete */
.projects-spacer{
  visibility: hidden; /* keep occupying the grid cell but not visible */
  pointer-events: none;
}
.project-card{
  display:block;
  background: rgba(255,255,255,0.02);
  padding:0.6rem;
  border-radius:10px;
  text-decoration:none;
  color:var(--text-color);
  box-shadow: 0 1px 0 rgba(77,71,35,0.03);
  transition: transform 220ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms;
}
.project-card:hover{transform: translateY(-4px); box-shadow: 0 6px 18px rgba(77,71,35,0.06)}
.project-cover{height:140px;border-radius:8px;overflow:hidden;background:linear-gradient(135deg, rgba(77,71,35,0.04), rgba(77,71,35,0.02));display:flex;align-items:center;justify-content:center}
.project-cover img{width:100%;height:100%;object-fit:cover;display:block}
.project-cover.placeholder{background:linear-gradient(135deg, rgba(77,71,35,0.06), rgba(77,71,35,0.02));color:var(--text-color)}
.placeholder-initials{font-weight:700;font-size:1.1rem}
.project-body{padding:0.6rem 0}
.project-title{margin:0;font-size:1.05rem;font-weight:700}
.project-desc{margin:0.35rem 0 0 0;font-size:0.9rem;opacity:0.95}

/* Project repo icon positioned between short and long description */
.project-repo-wrap {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
}

.project-repo {
    margin-top: 1em;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    border-radius: 999px;
}
.project-repo img{width:22px;height:22px;display:none}

/* project-repo-icon uses the GitHub SVG as a mask so it inherits text color */
.project-repo-icon{
  width:22px;
  height:22px;
  display:inline-block;
  background-color:var(--text-color);
  -webkit-mask-image: url('/images/icons/GitHub_Invertocat_Black.svg');
  -webkit-mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  mask-image: url('/images/icons/GitHub_Invertocat_Black.svg');
  mask-size: cover;
  mask-repeat: no-repeat;
}

.project-repo-icon-linkedin {
  width:22px;
  height:22px;
  display:inline-block;
  background-color:var(--text-color);
  -webkit-mask-image: url('/images/icons/InBug-Black.png');
  -webkit-mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  mask-image: url('/images/icons/InBug-Black.png');
  mask-size: cover;
  mask-repeat: no-repeat;
}

/* inline variant for display of social icons in contact page */
.project-repo-wrap.inline .project-repo{ margin-top: 0; width: 44px; height:44px; }
.project-repo-wrap.inline .project-repo + .project-repo{ margin-left: 0; }

/* ensure the wrapper itself centers within its container and overrides absolute positioning */
.project-repo-wrap.inline{
  position: static !important;
  width: auto !important;
  height: auto !important;
  display: flex !important;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
  margin: 0.75rem auto 0 auto;
}

/* stronger rule scoped to hero to ensure centering in the contact hero */
.hero .project-repo-wrap.inline{
  position: static !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.75rem !important;
  margin: 0.75rem auto 0 auto !important;
}
.hero .project-repo-wrap.inline .project-repo{ margin-top: 0 !important; }

/* fallback centering technique: treat wrapper as block and center contents via text-align */
.hero .project-repo-wrap.inline{
  display: block !important;
  text-align: center !important;
}
.hero .project-repo-wrap.inline .project-repo{
  display: inline-flex !important;
  margin: 0 0.6rem !important;
  vertical-align: middle !important;
}

/* Stronger, but non-!important rule: more specific selector to override the global
   .project-repo-wrap positioning on project pages. This centers the inline icons
   inside hero sections without using !important. */
.alegreya.hero .project-repo-wrap.inline{
  position: static; /* override absolute positioning */
  left: auto;
  transform: none;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.35rem;
  margin: 0.75rem auto 0 auto;
}
.alegreya.hero .project-repo-wrap.inline .project-repo{
  display: inline-flex;
  margin: 0 0.35rem;
}

/* media grid */
.project-media-grid{
  display:flex;
  flex-wrap:wrap;
  gap:0.9rem;
  justify-content:center; /* center when fewer items */
}
.media-card{background:rgba(255,255,255,0.02);border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center;height:180px;flex:0 0 calc(33% - 0.9rem)}
.media-card img{max-width:100%;max-height:100%;object-fit:cover}
.media-card iframe{width:100%;height:100%;border:0}

@media (max-width:900px){
  .media-card{flex:0 0 calc(50% - 0.9rem)}
}
@media (max-width:480px){
  .media-card{flex:0 0 100%}
}

.media-title{
  margin:0 0 0.6rem 0;
  font-weight:700;
  font-size:1.15rem; /* slightly bigger */
  text-align:center;
}

/* Image viewer overlay (lightbox) */
/* image viewer styles removed (reverted) */

/* CSS animation for marquee (used when .marquee-track.animate is added) */
.marquee-track.animate{
  display:flex;
  align-items:center;
  animation: marquee-scroll var(--marquee-duration) linear infinite;
}

@keyframes marquee-scroll{
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(-50%,0,0); }
}

/* pause animation on hover/focus of the container */
.marquee:hover .marquee-track.animate,
.marquee:focus-within .marquee-track.animate{
  animation-play-state: paused;
}
.role-line{
  font-size:1.3rem;
  font-weight:700;
  letter-spacing:0.02em;
  opacity:0.98;
  margin:0 0 0.75rem 0;
}
.lead{
  font-size:1.05rem;
  max-width:64ch;
  margin:0.5rem auto 0 auto;
  line-height:1.55;
  color: rgba(77,71,35,0.95);
}
.lead-project{
  font-size:1.05rem;
  /* give project long descriptions ~15% more horizontal room */
  max-width: calc(64ch * 1.15);
  margin:0.5rem auto 0 auto;
  line-height:1.55;
  color: rgba(77,71,35,0.95);
}
.highlight{
  background: transparent; /* remove border box */
  padding: 0;
  border-radius:0;
  font-weight:700;
  color: var(--text-color); /* keep same dark color */
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: var(--text-color);
}

/* Ensure link state styles don't change color/decoration */
.highlight:link,
.highlight:visited,
.highlight:hover,
.highlight:active{
  color: var(--text-color);
  text-decoration-color: var(--text-color);
}

/* Keep keyboard focus visible but don't alter color */
.highlight:focus{
  outline: 3px solid rgba(77,71,35,0.12);
  outline-offset: 4px;
  color: var(--text-color);
  text-decoration-color: var(--text-color);
}





.navbar{
  width:100%;
  border-bottom: 1px solid rgba(77,71,35,0.12);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent);
}
.nav-container{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 1.25rem;
}

.brand{
  font-family: 'Cedarville Cursive', cursive;
  color:var(--text-color);
  font-size:2.1rem;
  text-decoration:none;
  line-height:1;
}

.nav-links{
  list-style:none;
  display:flex;
  gap:1.25rem;
  align-items:center;
  margin:0;
  padding:0;
}
.nav-links a{
  font-family: 'Cedarville Cursive', cursive;
  color:var(--text-color);
  text-decoration:none;
  font-size:1.2rem; /* larger per request */
  padding:8px 6px;
  border-radius:6px;
  position:relative;
  /* keep keyboard users visible */
}

/* animated underline that "draws" left->right */
.nav-links a::after{
  content: "";
  position: absolute;
  left:0;
  right:0;
  bottom:3px;
  height:4px; /* thinner stroke */
  border-radius:2px;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 420ms cubic-bezier(.2,.9,.2,1);
  /* use an embedded SVG as the underline artwork to create a subtle hand-drawn texture */
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 4' preserveAspectRatio='none'><path d='M1 2 C18 1 32 3 50 2 C68 1 82 3 99 2' stroke='%234D4723' stroke-width='1' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

.nav-links a:hover::after,
.nav-links a:focus::after{
  transform: scaleX(1);
}

/* keep an accessible focus ring for keyboard users */
.nav-links a:focus{
  outline: 3px solid rgba(77,71,35,0.12);
  outline-offset: 4px;
}

@media (max-width:600px){
  .nav-container{padding:0.75rem}
  .brand{font-size:1.8rem}
  .nav-links a{font-size:1.05rem}
}
.image-viewer-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 2rem;
}
.image-viewer-overlay.open{display:flex}
.image-viewer-content{position:relative;max-width:95%;max-height:95%;display:flex;align-items:center;justify-content:center}
.image-viewer-img{max-width:100%;max-height:100%;box-shadow:0 10px 30px rgba(0,0,0,0.5);border-radius:8px}
.image-viewer-close{
  position:absolute;top:-10px;right:-10px;background:var(--bg);color:var(--text-color);border-radius:999px;border:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,0.3)
}
.image-viewer-nav{position:absolute;left:8px;right:8px;top:0;bottom:0;pointer-events:none}
.image-viewer-prev,.image-viewer-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.06);border-radius:999px;border:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;pointer-events:auto;cursor:pointer}
.image-viewer-prev{left:8px}
.image-viewer-next{right:8px}
.image-viewer-prev:focus,.image-viewer-next:focus,.image-viewer-close:focus{outline:3px solid rgba(77,71,35,0.12);outline-offset:4px}

/* Contact page: tighten spacing between social icons (scoped and placed last to override earlier rules) */
#main-content .project-repo-wrap.inline{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 0.15rem; /* much tighter spacing */
}
#main-content .project-repo-wrap.inline .project-repo{
  width:40px;
  height:40px;
  margin: 0 0.12rem;
}