:root{
  --bg:#ffffff;
  --text:#1a1a1a;
  --muted:#4a4a4a;
  --link:#003366; /* UWEC blue-ish */
  --accent:#FFD100; /* UWEC gold */
  --border:#e8e8e8;
  --max:1100px;
  --serif: 'Merriweather', Georgia, 'Times New Roman', serif;
  --sans: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--sans);}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--max);margin:0 auto;padding:24px}
.header{
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,#fff, #fafafa);
}
.brand{display:flex; align-items:center; gap:14px;}
.brand .dot{width:14px;height:14px;border-radius:50%;background:var(--accent);}

.brand h1 {
  font-family: var(--serif);
  font-size: 2.2rem; /* Larger name */
  line-height: 1.2;
  margin: 0;
}
.brand .sub {
  color: var(--muted);
  font-size: 1.2rem; /* Larger subtitle */
  margin-top: 4px;
}

nav.site-nav{display:flex;gap:16px;flex-wrap:wrap}
nav.site-nav a {
  font-size: 1.0rem; /* Larger text */
  padding: 0.7rem 1.2rem; /* More clickable area */
}

.topbar{display:flex;justify-content:space-between; align-items:center; gap:16px}
.icon-links{display:flex;gap:10px; align-items:center}
.icon{display:inline-flex; align-items:center; justify-content:center; width:28px;height:28px; border-radius:6px; border:1px solid var(--border); background:#fff}
.icon svg{width:18px;height:18px}
main{padding:24px 0}
h2,h3,h4{font-family:var(--serif);margin-top:30px}
h2{font-size:28px} h3{font-size:20px} h4{font-size:16px}
.section{margin-top:16px}
.card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:16px}
.grid{display:grid;grid-template-columns: repeat(12, 1fr); gap:16px}
.left{grid-column: span 4}
.right{grid-column: span 8}
@media (max-width: 900px){
  .left,.right{grid-column: span 12}
  .topbar{flex-direction:column; align-items:flex-start}
}
small.muted{color:var(--muted)}
footer.footer{border-top:1px solid var(--border);padding:20px 0;margin-top:30px;color:var(--muted); font-size:13px}
.searchbar{margin:10px 0; display:flex; gap:8px}
input[type="search"]{width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:8px; font-size:14px}
.badge{display:inline-block; padding:3px 8px; border-radius:999px; border:1px solid var(--border); background:#fff; font-size:12px; color:#333}
.list{display:flex; flex-direction:column; gap:10px}
.citation{padding:10px; border:1px solid var(--border); border-radius:8px; background:#fff;}
.citation .meta{color:var(--muted); font-size:13px}
.table{width:100%; border-collapse:collapse}
.table th, .table td{border-bottom:1px solid var(--border); padding:10px; text-align:left; vertical-align:top}
.kicker{font-size:12px; letter-spacing:.1em; color:#6b7280; text-transform:uppercase}
.hero{padding:22px 18px; border:1px solid var(--border); border-radius:12px; background:#fff}
.update{padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:#fff}
.tagbar{display:flex; gap:8px; flex-wrap:wrap}
blockquote{border-left:3px solid var(--accent); margin:0; padding:12px; background:#fffef5}

.brand .avatar {
  width: 100px; /* Bigger profile image */
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
  background: #f2f2f2;
}
@media (max-width: 900px) {
  .brand .avatar {
    width: 80px;
    height: 80px;
  }
}



.projects-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:18px;
}
@media (max-width:900px){
  .projects-grid{ grid-template-columns:1fr; }
}
.project-card{
  display:flex; flex-direction:column; gap:10px;
}
.project-card .thumb{
  width:100%; aspect-ratio: 16/9; overflow:hidden; border-radius:12px; border:1px solid var(--border);
  background:#f6f6f8;
}
.project-card .thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.project-meta{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:6px;
}
.badge{
  display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; border:1px solid var(--border); background:#fafafa;
}
.project-card h3{ margin:6px 0 4px; }
.project-card .section-title{ font-weight:700; margin-top:6px; }


/* --- Landing hero --- */
.hero-landing{
  position:relative;
  border:1px solid var(--border);
  border-radius:16px;
  padding:28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(250,250,250,.9)),
    url('hero-bg.jpg');
  background-size:cover;
  background-position:center;
}
.hero-content{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:24px;
  align-items:center;
}
.hero-landing h1{
  font-family:var(--serif);
  font-size:34px;
  line-height:1.2;
  margin:6px 0 12px;
}
.hero-landing .lead{
  font-size:16px;
  color:var(--muted);
  margin:0 0 14px;
}
.hero-cta{ display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 4px; }
.btn{
  display:inline-block; padding:10px 14px; border-radius:10px;
  border:1px solid var(--border); background:#fff; font-weight:600;
  text-decoration:none; transition:transform .06s ease;
}
.btn:hover{ transform:translateY(-1px); text-decoration:none; }
.btn.ghost{ background:#fafafa; }
.quick-links{ list-style:none; padding:0; margin:14px 0 0; display:grid; gap:10px; }
.quick-links li{ background:#fff; border:1px solid var(--border); border-radius:12px; padding:10px 12px; }
.pill{
  display:inline-block; margin-right:8px; padding:2px 8px; border-radius:999px;
  font-size:12px; background:var(--accent); color:#111;
}
.hero-visual{
  margin:0; border-radius:12px; overflow:hidden; border:1px solid var(--border);
  background:#fff;
}
.hero-visual img{ display:block; width:100%; height:auto; }

@media (max-width: 900px){
  .hero-content{ grid-template-columns:1fr; }
  .hero-landing{ padding:20px; }
  .hero-landing h1{ font-size:28px; }
}

.media-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:16px;
}
@media (max-width: 900px){
  .media-grid{ grid-template-columns: 1fr; }
}
.media-item{
  display:grid;
  grid-template-columns: 160px 1fr;
  gap:14px;
  align-items:start;
}
@media (max-width: 700px){
  .media-item{ grid-template-columns: 1fr; }
}
.media-item .thumb{
  width:100%;
  aspect-ratio: 16/9;
  border-radius:12px;
  border:1px solid var(--border);
  overflow:hidden;
  background:#f6f7fb;
}
.media-item .thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.thumb-placeholder{
  background: repeating-linear-gradient(
    45deg, #f4f4f8, #f4f4f8 10px, #ececf3 10px, #ececf3 20px
  );
}
.media-item .media-body h3{
  margin:0 0 6px;
  font-size:18px;
}
.media-item .media-body .small.muted{
  margin-bottom:8px;
}

/* Media layout: when no thumbnail, use single-column */
.media-item.no-thumb {
  grid-template-columns: 1fr;
}


/* Teaching cards grid: max 4 per row, responsive down to 1 */
.courses-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:16px;
}
@media (max-width: 1200px){
  .courses-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px){
  .courses-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .courses-grid{ grid-template-columns: 1fr; }
}

/* Course card layout */
.course-card{
  display:flex; flex-direction:column; gap:10px;
  overflow:hidden; /* keep inner content clipped */
}
.course-card .thumb{
  width:100%;
  aspect-ratio: 16 / 9;
  border-radius:12px;
  border:1px solid var(--border);
  overflow:hidden;
  background:#f6f6f8;
}
.course-card .thumb img{
  display:block; width:100%; height:100%; object-fit:cover;
}

/* Text safety: prevent long strings from blowing out layout */
.course-card h4, .course-card p, .course-card .small, .course-card .project-meta{
  overflow-wrap:anywhere; /* avoids horizontal scroll from long tokens */
}

.project-meta{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:4px;
}
.badge{
  display:inline-block; padding:2px 8px; border-radius:999px;
  font-size:12px; border:1px solid var(--border); background:#fafafa;
  white-space:nowrap; /* nicer badges */
}

/* Ensure image icons fit like your old SVGs */
.icon img {
  width: 18px;
  height: 18px;
  display: block;
}

/* Highlight current page in nav */
.site-nav a.active {
  font-weight: 700;
  text-decoration: none;
  background: rgba(0,0,0,0.04);
  border-radius: 6px;
}