:root{
  --yale-blue: #00356b;
  --yale-blue-accent: #0f4d92;
  --bg: #f7f9fc;
  --text: #111827;
  --card-bg: #ffffff;
  --ring: rgba(15,77,146,0.35);
  --right-pane: 880px; /* change me to widen/narrow the right pane */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}
a{color:var(--yale-blue-accent);text-decoration:none}
a:hover{text-decoration:underline}

/* Outer shell margins for BOTH panes */
.shell{max-width: calc(300px + 32px + var(--right-pane) + 80px);margin:0 auto;padding:24px 40px}
.layout{display:flex;min-height:calc(100vh - 48px);align-items:stretch;flex-wrap:nowrap}

.sidebar{
  width:300px;background:var(--yale-blue);color:#fff;
  display:flex;flex-direction:column;padding:24px 20px;
  position:sticky;top:24px;height:calc(100vh - 48px);
  border-radius:16px;
}
.profile{flex:1}
.avatar{width:140px;height:140px;border-radius:50%;object-fit:cover;border:4px solid rgba(255,255,255,0.25);display:block;margin:4px 0 12px 0}
.name{margin:8px 0 4px 0;font-size:24px;line-height:1.2}
.tagline{margin:0 0 16px 0;color:rgba(255,255,255,0.85)}
.contact{list-style:none;margin:0;padding:0}
.contact li{margin:6px 0}
.contact a{color:#fff;opacity:0.95}
.tabs{margin:24px 0 0 0;display:grid;gap:10px}
.tab-btn{
  appearance:none;border:0;padding:10px 12px;border-radius:12px;
  background:rgba(255,255,255,0.12);color:#fff;text-align:left;
  cursor:pointer;font-size:15px
}
.tab-btn[aria-selected="true"]{background:#fff;color:var(--yale-blue);font-weight:600}
.sidebar-footer{margin-top:24px;color:rgba(255,255,255,0.8)}

.content{flex:1;padding-left:32px;height:calc(100vh - 48px);display:flex}
.content-inner{
  background:#fff;border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,0.04);
  padding:24px 24px 48px 24px;width:var(--right-pane);height:100%;display:block;overflow:auto
}

/* Tab panels */
.tab-panel{display:none;height:100%}
.tab-panel.active{display:block;animation:fade .25s ease;height:100%}

/* Home layout: intro, photo, bottom cards; photo expands without causing scroll */
#home.active{display:grid;grid-template-rows:auto 1fr auto}
.home-photo{ min-height: 160px; }
.home-photo img{
  width:100%; height:90%; object-fit:cover; border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,0.06); display:block;
}

/* Cards triplet at bottom, no stretching */
.cards{display:grid;grid-template-columns: repeat(3, 1fr);gap:20px; align-items:start; align-content:start}
.card{
  background:var(--card-bg); border-radius:16px; overflow:hidden; cursor:pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  transition: transform .2s ease, box-shadow .2s ease;
  outline: none; display:block;
}
.card:focus{box-shadow:0 0 0 4px var(--ring)}
.card:hover{transform:translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.12)}
.card img{width:100%; height:160px; object-fit:cover; display:block}
.card-title{padding:12px 14px; font-weight:600; border-top:1px solid #eef2f7; text-align:center}

@keyframes fade{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)}}

/* YouTube grid & hero image */
.video-grid{display:grid; gap:20px; grid-template-columns: repeat(auto-fit,minmax(320px,1fr))}
.video-wrap{position:relative; padding-top:56.25%; overflow:hidden; border-radius:16px; background:#000}
.video-wrap iframe{position:absolute; top:0; left:0; width:100%; height:100%; border:0}
.hero{width:100%; border-radius:16px; box-shadow:0 8px 24px rgba(0,0,0,0.08)}

/* Fallback thumbnail card for non-embeddable videos */
.yt-thumb{
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 16px;
  overflow: hidden;            /* clip overlays to rounded corners */
}

.yt-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Center play button */
.yt-play{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  color: #fff;
  display: grid; place-items: center;
  font-size: 28px; line-height: 1;
}

/* Title overlay (2-line clamp) */
.yt-title{
  position: absolute;
  top: 8px; left: 10px;               /* top-left */
  z-index: 2;
  padding: 10px 12px;
  color: #fff; font-weight: 600;
  background: linear-gradient(to top, rgba(0,0,0,0.65), rgba(0,0,0,0) 60%);
  display: -webkit-box;
  -webkit-line-clamp: 2;       /* clamp to 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.yt-thumb:hover .yt-play{ background: rgba(0,0,0,0.75); }
.yt-thumb:focus-visible{ outline: none; box-shadow: 0 0 0 4px var(--ring); }

/* Mobile */
@media (max-width: 980px){
  .shell{padding:16px}
  .layout{flex-direction:column; min-height:auto}
  .sidebar{position:relative; top:auto; height:auto; border-radius:12px; margin-bottom:16px}
  .content{padding-left:0; height:auto; display:block}
  .content-inner{height:auto; width:100%; max-width:100%; overflow:visible}
  #home.active{min-height:auto; display:block}
  .cards{grid-template-columns: repeat(2, minmax(0,1fr))}
}
@media (max-width: 640px){
  .cards{grid-template-columns: 1fr}
}