:root {
  --bg:#fafafa;
  --card:#ffffff;
  --text:#1f1f1f;
  --muted:#656565;
  --border:#e6e6e6;
  --maxw:980px;
  --radius:16px;
  --gap:22px;
  --pad:18px;
}
* {box-sizing:border-box}
html, body {margin:0;padding:0}
body {
  background:var(--bg);
  color:var(--text);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
.wrap {max-width:var(--maxw); margin:0 auto; padding:0 var(--pad)}
.skip {
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip:focus {
  position:static; width:auto; height:auto; padding:8px; background:#fff; border:1px dashed var(--border);
}
.section {margin:42px 0}
.section h2 {margin:0 0 14px; font-size:22px}
.card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:var(--pad);
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.card + .card {margin-top:var(--gap)}
.card.featured {
  display:grid;
  grid-template-columns: 1.2fr 1.8fr;
  gap:var(--gap);
}
.card-media img {
  display:block; width:100%; height:100%; object-fit:cover;
  border-radius:12px;
  background:#ddd;
}
.card-body h3 {margin:0 0 6px; font-size:22px}
.muted {color:var(--muted); font-size:14px; margin:0 0 8px}
.card-cta {margin-top:12px; display:flex; gap:10px; flex-wrap:wrap}
.btn {
  display:inline-block; padding:10px 14px; border-radius:12px;
  border:1px solid var(--border); text-decoration:none; color:var(--text); font-weight:600; background:#f5f5f5;
}
.btn:hover {background:#eee}
.btn-ghost {background:transparent}
/* Small cards: equal height + clamped title */
.grid {
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  align-items: stretch;
}
.grid .card + .card { /* kill vertical stacking margin inside grids */
  margin-top: 0;
}
.card.small {
  display:flex;
  flex-direction:column;
  height:100%;
}
.card.small h3 {
  margin:0 0 6px;
  font-size:18px;
  line-height:1.3;
  display:-webkit-box;
  -webkit-line-clamp: 2;         /* <= clamp long titles */
  -webkit-box-orient: vertical;
  overflow:hidden;
}
.card.small p {
  margin:0 0 8px;
}
@media (max-width: 860px){
.grid {grid-template-columns: repeat(2, minmax(0,1fr));}
}
@media (max-width: 560px){
.grid {grid-template-columns:1fr;}
}
.card.small p {margin:0 0 8px}
.text-link {border-bottom:1px solid var(--border); text-decoration:none; color:inherit}
.text-link:hover {border-bottom-color:#000}
.site-footer {padding:28px 0; color:var(--muted); border-top:1px solid var(--border); margin-top:54px}
.site-footer a {color:inherit}
@media (max-width: 860px){
.card.featured {grid-template-columns:1fr}
.grid {grid-template-columns: repeat(2, minmax(0,1fr))}
}
@media (max-width: 560px){
.grid {grid-template-columns:1fr}
}
/* Section title with underline */
.section-list h2 {
  margin-bottom: 18px;
  position: relative;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
/* Remove borders around each stack item */
.stack {
  list-style:none;
  margin:0;
  padding:0;
}
.stack-item {
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 0;
}
.stack-logo {
  width:48px;
  height:48px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid var(--border);
  background:#fff;
}
.stack-body {min-width:0}
.stack-title {
  margin:0 0 2px 0;
  font-weight:800;
}
.stack-sub {
  margin:0;
  color:var(--text);
}
.stack-meta {
  color:var(--muted);
  margin-left:8px;
  white-space:nowrap;
}
@media (max-width:560px){
.stack-item {gap:12px; padding:10px 0}
.stack-logo {width:40px; height:40px}
.stack-title {font-size:16px}
.stack-meta {display:block; margin-left:0}
}
/* Top bar */
.topbar {background:#eee0; border-bottom:1px solid var(--border); backdrop-filter:saturate(140%) blur(6px)}
.topbar__row {display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.topbar__meta a {
  text-decoration:none; color:var(--text); font-weight:600; margin-right:14px;
}
.topbar__meta a {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 0;        /* give vertical room */
  line-height:1;        /* avoid extra baseline space */
}
.topbar__meta .icon {
  width:18px;
  height:18px;
  display:block;        /* no descender clipping */
  flex:0 0 18px;
  overflow:visible;     /* ensure strokes aren’t cut */
  vertical-align:middle;
}
.topbar__meta a:hover {text-decoration:underline}
/* Hero */
.hero {padding:36px 0 24px; background:var(--bg)}
.hero__inner {display:flex; flex-direction:column; align-items:center; text-align:center}
.hero__avatar {
  width:140px;   /* was 108px */
  height:140px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid var(--border);
  background:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
}
.hero__name {
  margin:14px 0 16px;
  font-size:36px;
  line-height:1.15;
  display:inline-block;      /* shrinkwrap to text */
  position:relative;         /* anchor the underline */
  padding-bottom:10px;       /* space for the rule */
}
.hero__name::after {
  content:"";
  position:absolute;
  bottom:0;
  left:-5%;                   /* make it slightly narrower than the text */
  width:110%;                 /* 100% would match the text exactly */
  height:3px;
  background:var(--text);
  border-radius:2px;
}
.hero__rule { display:none; }
.hero__tag {margin:0 0 6px; color:var(--muted)}
.hero__bio {max-width:760px; margin:6px 0 12px; text-align: left;}
.hero__actions {display:flex; gap:10px; flex-wrap:wrap; justify-content:center}
/* Buttons already exist; ensure nicer ghost */
.btn-ghost {background:transparent}
@media (max-width:560px){
.hero__name {font-size:28px}
.topbar__row {flex-direction:column; gap:8px}
.topbar__meta a {margin-left:10px}
}
/* CV button with icon style */
.btn-cv {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  border-radius:12px;
  border:2px solid #12a0ec;
  text-decoration:none;
  color:#12a0ec;
  font-weight:700;
  background:#fff;
  transition:background .2s,color .2s;
}
.btn-cv:hover {
  background:#12a0ec;
  color:#fff;
}
.btn-cv .icon {
  font-size:18px;
  line-height:1;
}

#featured > article.featured:not(:first-of-type) {
  display: grid;
  grid-template-columns: minmax(220px, 34%) 1fr;
  gap: 1rem;
  align-items: stretch;
  border-radius: 14px;
  overflow: hidden;
}

#featured > article.featured:not(:first-of-type) .card-media {
  min-height: 200px;
}
#featured > article.featured:not(:first-of-type) .card-media img, #featured > article.featured:not(:first-of-type) .card-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Body compaction to feel “smaller” than hero */
#featured > article.featured:not(:first-of-type) .card-body {
  padding: .9rem .9rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#featured > article.featured:not(:first-of-type) h3 {
  font-size: 1.05rem;
  line-height: 1.2;
  margin: .2rem 0 .35rem;
}
#featured > article.featured:not(:first-of-type) .muted { font-size: .9rem; }
#featured > article.featured:not(:first-of-type) ul {
  margin: .5rem 0 .85rem;
  padding-left: 1.1rem;
}
#featured > article.featured:not(:first-of-type) li {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#featured > article.featured:not(:first-of-type) .card-cta {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .4rem;
}
@media (max-width: 900px){
#featured > article.featured:not(:first-of-type) {
    grid-template-columns: 1fr;
  }
#featured > article.featured:not(:first-of-type) .card-media {
    min-height: auto;
    aspect-ratio: 16 / 9;
  }
}



/* New “mid” card + two-up layout */
/* :contentReference[oaicite:1]{index=1} */
.featured-pair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  align-items: start;   /* keep tops aligned */
  margin-top: 0;        /* prevent extra offset */
}

.featured-pair article {
  margin-top: 0;        /* override inherited spacing */
}

.card.mid{
  display:grid;
  grid-template-columns: minmax(120px, 0.9fr) 1.6fr; /* thumbnail left */
  gap: var(--gap);
  height:100%;
}

.card.mid .card-media{
  overflow:hidden;
  border-radius:12px;
  min-height:160px; /* ensures a visible thumb even with little copy */
  background:#ddd;
}

.card.mid .card-media img,
.card.mid .card-media video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.card.mid .card-body{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.card.mid h3{
  margin:0 0 6px;
  font-size:20px;
  line-height:1.25;
}

.card.mid .muted{font-size:14px; margin:0 0 8px}

.card.mid ul{
  margin:.4rem 0 .8rem;
  padding-left:1.1rem;
}

.card.mid li{
  display:-webkit-box;
  -webkit-line-clamp: 2;    /* keep bullets tidy */
  -webkit-box-orient: vertical;
  overflow:hidden;
}

.card.mid .card-cta{
  margin-top:auto;          /* push CTAs to the bottom for equalization */
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
}

.card.mid {
  display: grid;
  grid-template-columns: 120px 1fr; /* smaller left thumb */
  gap: 1rem;
  height: 100%;
  min-height: 220px; /* keep them equal and compact */
}

.card.mid .card-media {
  aspect-ratio: 3/4;     /* fixed portrait ratio */
  max-height: 220px;
}

.card.mid .card-body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.card.mid h3 {
  font-size: 18px;
  margin-bottom: 4px;
}

.card.mid .muted {
  font-size: 13px;
  margin-bottom: 6px;
}

.card.mid ul {
  margin: 0 0 6px;
  padding-left: 1rem;
  font-size: 14px;
}

.card.mid li {
  margin-bottom: 4px;
}

.card.mid .card-cta {
  margin-top: auto;
  display: flex;
  gap: .5rem;
}


/* Fix vertical shift in the two-up featured pair */
.featured-pair .card + .card { 
  margin-top: 0; 
}

/* Restore bullets in the mid card list */
.card.mid ul { 
  list-style: disc; 
  padding-left: 1.1rem; 
}

.card.mid li {
  display: list-item;         /* required for list markers */
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  overflow: visible;
}



/* Replace your .feature layout with area-based columns so text is always ~2/3 */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); /* media | body */
  grid-template-areas: "media body";
  gap: var(--gap);
  align-items: center;
  margin: 24px 0;
}
.feature + .feature { margin-top: 32px; }

.feature-media { grid-area: media; }
.feature-body  { grid-area: body; }

/* Alternate layout: swap areas and column fractions so text stays ~2/3 on the left */
.feature--alt {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); /* body | media */
  grid-template-areas: "body media";
}

/* Image sizing (optional cap; adjust as you like) */
.feature-media img {
  width: 100%;
  height: auto;
  max-width: 150px;
  display: block;
  border-radius: var(--radius);
  margin: 0 auto;
}

.feature-caption { margin-top: 6px; font-size: 0.95rem; color: var(--muted); }
.feature h3 { margin: 0 0 8px; }
.feature p { margin: 0 0 8px; }

@media (max-width: 820px) {
  .feature,
  .feature--alt {
    grid-template-columns: 1fr;
    grid-template-areas:
      "media"
      "body";
  }
}


/* Responsive: stack on narrow screens */
@media (max-width: 900px){
  .featured-pair{grid-template-columns:1fr}
  .card.mid{grid-template-columns:1fr}
  .card.mid .card-media{
    min-height:auto;
    aspect-ratio:16/9;
  }
}


/* Add to styles.css */

.feature-duo__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  max-width: 1100px;     /* widen container if needed */
  margin: 0 auto;
}

.feature-duo__grid figure {
  width: 100%;           /* take full half of grid */
  text-align: left;      /* better readability for caption text */
}

.feature-duo__grid img {
  display: block;
  margin: 0 auto 16px;   /* keep image centered at top */
  max-width: 280px;      /* cap screenshot width */
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.feature-duo__grid figcaption {
  color: var(--text);
  max-width: none;       /* let caption use full width of column */
}

.feature-duo__grid h3 {
  margin: 0 0 8px;
}

.feature-duo__grid p {
  margin: 0 0 10px;
}

.feature-duo__grid ul {
  margin: 0;
  padding-left: 18px;
}

@media (max-width: 820px) {
  .feature-duo__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}