:root{
      --accent:#d3423a;
      --ink:#111;
      --muted:#8f8f8f;
      --faint:#cfcfcf;
      --dark:#6a6a6a;
      --maxw:900px;
    }
    html,body{height:100%;}
    body{
      margin:0; padding:0px 24px 96px; color:var(--ink);
      font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
      background:#fff;
    }
    .page{max-width:var(--maxw); margin:0 auto;}

    /* ===== Header ===== */
    header{
      display:grid; grid-template-columns: 1fr 160px; column-gap:28px; align-items:start;
    }
    header h1{
      font-family: Georgia, "Times New Roman", Times, serif;
      font-weight:700; letter-spacing:.2px; margin:0 0 4px;
      font-size: clamp(36px, 6.5vw, 56px);
    }
    header .tagline{ font-style:italic; opacity:.9; margin:0 0 16px; font-size:18px; }
    header .links{ color:var(--muted); font-size:14px; margin-top:6px; }
    header .links a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--faint); }
    header .links a:hover{ color:var(--ink); border-bottom-color:var(--ink); }
    .links.contact { color: var(--ink); }
    .links.contact a { color: inherit; text-decoration: none; border: 0; }
    .links.contact a:hover { text-decoration: underline; }
    .links.contact .sep { color: var(--faint); margin: 0 6px; }
    @media (max-width:720px){ .links.contact { font-size: 15px; } }

    /* contact icons */
    .links.contact{
      display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center;
    }
    .links.contact a{ color:inherit; text-decoration:none; border:0; }
    .links.contact a:hover{ text-decoration:underline; }
    .links.contact .sep{ display:none; }            /* we’ll use icons instead of the dot */
    
    .contact-icon{
      width:16px; height:16px; margin-right:6px;
      vertical-align:-2px;                          /* aligns with text baseline */
      stroke:currentColor; fill:none; stroke-width:1.8;
    }
    
    /* same look in the Contact section */
    #contact .contact-list a{ display:inline-flex; align-items:center; gap:6px; }
    #contact .contact-list svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8; }

    .header-photo{
      width:160px; height:160px; border-radius:50%;
      object-fit:cover; object-position:center;
      border:3px solid #fff; box-shadow:0 6px 18px rgba(0,0,0,.08);
    }

    /* ===== Grid rows (label | content | years) ===== */
    .line{ display:grid; grid-template-columns: 180px 1fr 110px; column-gap:28px; align-items:start; }
    .line + .line{ margin-top:18px; }
    .label{ color:var(--accent); font-weight:600; }
    .content b{ font-weight:600; }

    /* years cell now stacks: date on top, logo under it */
    .years .y{ text-align:right; white-space:nowrap; color:var(--dark); }
    .company-logo{
      display:block;
      margin-top:8px;
      /*margin-left:auto;           keeps it under the right-aligned date */
      max-height:56px;           /* tidy size; adjust if needed */
      width:auto;                /* preserve aspect ratio */
      object-fit:contain;
      filter: none;              /* try: grayscale(100%) opacity(.9) if you want muted logos */
    }

    section{ margin-top:28px; }
    section + section{ margin-top:32px; }

    .content ul{ margin:6px 0 0 18px; padding:0; }
    .content li{ margin:2px 0; }

    .item{ display:grid; grid-template-columns: 1fr; margin:0 0 12px 0; }
    .meta{ color:#444; margin-top:2px; }
    .role{ font-weight:600; }
    .place{ font-weight:600; }

    hr.sep{ border:0; border-top:1px solid #eee; margin:28px 0; }

    /* Inline year (inserted by JS) */
    .when{ display:none; color:var(--muted); font-weight:400; }

    /* ===== Mobile: collapse to single column and show inline year ===== */
    @media (max-width: 720px){
      body{ padding:0px 16px 64px; }
      header{ grid-template-columns:1fr; row-gap:12px; }
      .header-photo{ width:120px; height:120px; }
      .line{ grid-template-columns:1fr; row-gap:6px; }
      .line .label:empty{ display:none; }
      .years{ display:none; }
      /*.when{ display:inline; } */
      .when{
        display:block;
        margin-top:2px;
        font-size:0.95em;
        color:var(--dark);
      }
    }

    /* ===== Language tables ===== */
    .lang-card{ margin:12px 0 18px; }
    .lang-head{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
    .lang-note{ margin-top:8px; font-size:14px; }
    
    .lang-table{
      width:100%;
      border-collapse:collapse;           /* no outer border */
      table-layout:fixed;                 /* even columns */
    }
    .lang-table th,
    .lang-table td{
      padding:8px 10px;
      font-size:14px;
      text-align:center;
    }
    .lang-table thead th{ color:#333; font-weight:600; }

    /* internal lines only */
    .lang-table th + th,
    .lang-table td + td{ border-left:1px solid #eee; }
    .lang-table tr + tr td{ border-top:1px solid #eee; }
    
    /* pretty link for IELTS */
    .link-chip{
      display:inline-flex;              /* enables centering */
      align-items:center;               /* vertical center */
      justify-content:center;           /* horizontal center */
      padding:4px 10px;
      min-height:26px;
      text-align:center;
      border-radius:999px;
      border:1px solid var(--accent);
      color:var(--accent);
      background:#fff;
      text-decoration:none;
      /* optional: keep it on one line */
      /* white-space: nowrap; */
    }
    .link-chip:hover{ background:#fff6f5; }
    
    /* mobile sizing */
    @media (max-width:720px){
      .lang-table th,.lang-table td{ font-size:13px; padding:6px 8px; }
    }

    /* ===== Repo cards ===== */
    :root { --link:#1f6feb; } /* keep */
    
    .repo-list{ display:grid; gap:12px; } /* keep */
    
    .repo-card{
      display:block;
      text-decoration:none; color:inherit;
      border:1px solid #e8e8e8; background:#fff;
      border-radius:6px; padding:12px 14px;
      box-shadow:none;        
      transition:none;         
    }
    
    .repo-card:hover{
      border-color:#e8e8e8;    
      box-shadow:none;        
      transform:none;         
    }
    
    .repo-head{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
    
    /* CHANGED: make the icon tiny */
    .repo-head svg{
      width:16px; height:16px; 
      stroke:currentColor; fill:none; stroke-width:1.8; opacity:.9;
    }
    
    .repo-title{ font-weight:600; }
    .repo-title .owner{ color:#555; font-weight:500; }
    .repo-title .name{ color:var(--link); }
    
    .badge{
      margin-left:auto;
      font-size:12px; padding:2px 8px; border-radius:999px;
      background:#f6f6f6; border:1px solid #e6e6e6; color:#555;
      text-align:center;
    }
    
    .repo-desc{ color:#444; margin:4px 0 8px; }
    .repo-meta{ display:flex; align-items:center; gap:12px; font-size:14px; color:#555; }
    .lang-dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
    .lang{ display:flex; align-items:center; gap:6px; }

    /* title link only */
    .repo-title a.repo-link{
      color: var(--link);
      text-decoration: none;
    }
    .repo-title a.repo-link:hover{
      text-decoration: underline;   /* underline on hover */
    }
    .repo-title a.repo-link:focus-visible{
      outline: 2px solid var(--link);  /* keyboard focus */
      outline-offset: 2px;
      border-radius: 4px;
    }
    
    /* mobile: card fills the single-column content just fine */
    @media (max-width:720px){
      .repo-card{ padding:12px; }
    }

    @media print{
      body{ padding:0; }
      .page{ padding:24px 32px; }
      a{ color:inherit; text-decoration:none; }
    }

    footer.site-foot{
      text-align:center;
      color:var(--muted);
      font-size:13px;
      margin-top:48px;
      padding-top:16px;
      padding-bottom:16px;
      border-top:1px solid #eee;
    }

    /* Let grid items shrink on small screens */
.casegrid > * { min-width: 0; }
.casefig      { min-width: 0; }

/* Make all media responsive (good global safety net) */
img, svg, video { max-width: 100%; height: auto; }

/* ===== Top nav ===== */
.topnav{ position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid #eee; }
.topnav .wrap{ max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; gap:16px; padding:10px 24px; }
.topnav a{ color:#333; text-decoration:none; padding:6px 8px; border-radius:8px; }
.topnav a:hover{ background:#f7f7f7; }
.topnav a.active{ color:var(--accent); font-weight:600; }

/* Page header (projects) */
h1{ font-family:Georgia, "Times New Roman", Times, serif; font-size:clamp(28px, 5vw, 44px); margin:16px 0 8px; }
.lead{ color:#555; margin:0 0 24px; }

/* Job sections */
.job{ margin-top:28px; }
.job h2{ margin:0 0 6px; font-size:22px; }
.job .sub{ color:#6a6a6a; margin:0 0 16px; }

/* Case boxes */
.casegrid{ display:grid; gap:12px; }
.casebox{ border:1px solid #eaeaea; border-radius:8px; padding:16px 18px; background:#fff; }
.casebox h3{ margin:0 0 10px; font-size:16px; letter-spacing:.12em; text-transform:uppercase; color:#555; }
.casebox p{ margin:0; color:#222; }

@media (min-width:920px){
  .casegrid{ grid-template-columns: 1fr 1fr; }
  .casegrid .casebox:nth-child(1){ grid-column:1 / -1; } /* SUMMARY full width */
}

/* ===== Architecture figure card ===== */
.casefig{
  /*border:1px solid #eaeaea;*/
  border-radius:8px;
  padding:12px;
  background:#fff;
  margin-top:12px;
}
.casefig img{
  display:block;
  width:100%;
  height:auto;
  border-radius:6px;
}
.casefig .cap{
  margin-top:8px;
  font-size:14px;
  color:var(--muted);
  text-align:center;        /* center the caption */
}

/* If you want to place the figure *inside* the .casegrid, let it span both cols */
@media (min-width:920px){
  .casegrid .casefig.full{ grid-column: 1 / -1; }
}