/* Simplified 2000-era white theme */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  background:#ffffff;
  color:#000000;
}
.container{max-width:1000px;margin:0 auto;padding:10px}
.site-header{position:static;background:#f0f0f0;border-bottom:1px solid #ccc;padding: 10px;}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.brand{color:#000;text-decoration:none;font-weight:700;font-size:15px}
.site-header .brand .logo{height:10px;vertical-align:middle;margin-right:8px}
.site-footer .brand .logo{height:20px;vertical-align:middle;margin-right:8px}
.header-contact{text-align:right;font-size:15px}
.header-contact p{margin:0}
.header-contact a{color:#0000EE;text-decoration:underline}
.nav-toggle{display:none;background:none;border:0;color:#000;font-size:20px}
.site-nav a{color:#0000EE;margin-left:16px;text-decoration:underline}

.hero{padding:20px 0}
.hero-inner{display:flex;align-items:flex-start;gap:20px}
.hero-copy{flex:1}
.hero-copy h1{font-size:28px;margin:0 0 10px}
.lead{color:#333;margin:0 0 12px}
.hero-avatar img{width:150px;height:150px;border:2px solid #000;background:none;padding:0}
.btn{display:inline-block;background:#0000EE;color:#fff;padding:6px 10px;text-decoration:none}

.about{padding:0px 0;font-size: 12px;}
.projects{padding:0px 0}
.grid{overflow:hidden}
.card{float:left;width:30%;margin-right:3.333%;border:1px solid #ccc;padding:10px;background:#fff}
.card:nth-child(3n){margin-right:0}
.card img{width:100%;height:120px;object-fit:cover;border:1px solid #000;margin-bottom:8px}
.link{color:#0000EE;text-decoration:underline}

.site-footer{padding:16px 0;color:#333;border-top:1px solid #ccc}

/* Slider styles */
.slider{position:relative;margin:12px 0;border:1px solid #000;padding:0;background:#fff}
.slides{position:relative;overflow:hidden;width:100%; /* height will be set by JS to match active image */}
.slides .slide{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;transition:opacity .6s ease;display:block}
.slides .slide.active{opacity:1}
.slide{position:relative} /* ensure caption can be absolute */
.slide img{width:100%;height:auto;display:block} /* image drives height */
.caption{position:absolute;top:16px;left:16px;max-width:60%;background:rgba(255,255,255,0.8);padding:12px;border:1px solid #000;z-index:2}
.slider-controls{margin-top:8px;display:flex;justify-content:space-between}
.slider-controls button{background:#f0f0f0;border:1px solid #000;padding:6px 10px;cursor:pointer}

@media (max-width:900px){
  .hero-inner{flex-direction:column;align-items:center;text-align:left}
  .card{width:48%;margin-right:4%}
  .card:nth-child(2n){margin-right:0}
}
@media (max-width:600px){
  .nav-toggle{display:inline-block}
  .site-nav{display:block}
  .card{width:100%;margin-right:0}
  .caption{position:static;max-width:100%;margin-top:8px}
  .header-contact{text-align:left;font-size:12px}
}
@media (max-width:480px){
  .header-inner{flex-direction:column;align-items:flex-start;gap:10px}
  .brand{font-size:12px}
  .about{font-size:14px}
  .container{padding:5px}
}

/* heading scale used across the site */
h1 { font-size: 2.25rem; }   /* e.g. 36px on a 16px root */
h2 { font-size: 1rem; }   /* 28px */
h3 { font-size: .75rem; }    /* 24px */
h4 { font-size: 1.25rem; }   /* 20px */
h5 { font-size: 1rem; }      /* 16px */
h6 { font-size: 0.875rem; }  /* 14px */

h2, h3, h4 { font-weight: 600; }         /* whatever weight you prefer */
h1, h2, h3 { line-height: 1.2; }        /* tighter spacing for headings */