:root {
      /* Colors */
      --bg: #f7f7f8;         /* plain grey background */
      --text: #222222;       /* neutral-900 */
      --muted: #6b7280;      /* slate-500 */
      --accent: #1c1d1d;     /* blue-600 */
      --border: #e5e7eb;     /* gray-200 */
      --card: #ffffff;       /* white cards on grey canvas */

      /* Dark mode */
      --bg-dark: #2a2b2c;
      --text-dark: #e5e7eb;
      --muted-dark: #9aa4b2;
      --accent-dark: #e5e7eb;
      --border-dark: #222222;
      --card-dark: #1a1a1b;

      /* Typography & rhythm */
      --font-body: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      --font-ui: var(--font-body);
      --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

      --size-maxw: 1120px;   /* total grid width (sidebar + content) */
      --size-gutter: 24px;   /* page side padding */
      --radius: 14px;        /* soft cards */
      --shadow: 0 10px 25px rgba(0,0,0,.06), 0 3px 6px rgba(0,0,0,.06);

      /* Type scale */
      --fs-0: clamp(14px, 0.85rem + 0.1vw, 16px);
      --fs-1: clamp(16px, 1rem + 0.2vw, 18px);
      --fs-2: clamp(20px, 1.25rem + 0.35vw, 24px);
      --fs-3: clamp(28px, 1.6rem + 0.8vw, 36px);
      --lh: 1.65;
    }

    html.dark {
      color-scheme: dark;
      --bg: var(--bg-dark);
      --text: var(--text-dark);
      --muted: var(--muted-dark);
      --accent: var(--accent-dark);
      --border: var(--border-dark);
      --card: var(--card-dark);
    }

    /* Base */
    * { box-sizing: border-box; }
    html, body { height: 100%; }
    html {
      scroll-behavior: smooth;
    }
    body {
      margin: 0;
      background: var(--bg);
      color: var(--text);
      font: var(--fs-1)/var(--lh) var(--font-body);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    a { color: var(--accent); text-decoration: none;}
    a:hover { text-decoration: underline; }

    /* Layout */
    .wrap { max-width: var(--size-maxw); margin: 0 auto; padding: 0 var(--size-gutter); }
    header.site {
      position: sticky; top: 0; z-index: 10;
      backdrop-filter: saturate(1.2) blur(6px);
      background: color-mix(in oklab, var(--bg) 85%, transparent);
      border-bottom: 1px solid var(--border);
    }
    .site-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; }
    .brand { display: flex; align-items: center; gap: 10px; font: 800 var(--fs-2)/1 var(--font-ui);}
    .brand .logo { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--text); color: var(--bg); font: 800 14px/1 var(--font-ui); }
    nav a { color: inherit; opacity: .9; font: 600 var(--fs-0)/1 var(--font-ui); }
    nav a:hover { opacity: 1; }

    .container { padding: 28px 0 80px; }
    .shell { 
      display: grid; 
      grid-template-columns: 280px minmax(0,1fr); 
      gap: 32px; 
      align-items: start;
      margin: 8px auto;
      justify-self: center;
    }

    /* Sidebar */
    aside.sidebar { position: sticky; top: 76px; }
    .profile { border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); background: var(--card); }
    .avatar { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 12px; border: 1px solid var(--border); box-shadow: var(--shadow); }
    .profile h1 { font: 900 var(--fs-2)/1.2 var(--font-ui); margin: 12px 0 6px; }
    .profile .title { color: var(--muted); font: 600 var(--fs-0)/1.5 var(--font-ui); margin-bottom: 10px; }
    .contacts { display: grid; gap: 8px; margin-top: 10px; text-align: justify;}
    .contact { display:flex; text-align: center;align-items:center; gap:8px; border:1px solid var(--border); border-radius: 10px; padding:10px 10px; font:700 var(--fs-0)/1 var(--font-ui); color:inherit; background: color-mix(in oklab, var(--card) 98%, white 2%); }
    .contact:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow); }
    .profile .blurb { margin-top: 12px; color: var(--muted); font: 500 var(--fs-0)/1.6 var(--font-ui); }

    /* Resume content */
    .section { margin-bottom: 28px; }
    .block { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); padding: 18px; box-shadow: var(--shadow); }
    .section h2 { font: 900 var(--fs-2)/1.2 var(--font-ui); margin: 0 0 10px; }
    .section .sub { color: var(--muted); font: 500 var(--fs-0)/1.6 var(--font-ui); margin-bottom: 8px; }
  /* Use a flexible main column and a content-sized time column so the time doesn't force-wrap the role */
  .item { display: grid; grid-template-columns: 1fr max-content; gap: 6px 18px; padding: 12px 0; border-top: 1px solid var(--border); align-items: start; }
    .item:first-child { border-top: 0; padding-top: 0; }
    .role { font: 800 var(--fs-1)/1.3 var(--font-ui); }
    .org { color: var(--muted); font: 700 var(--fs-0)/1.4 var(--font-ui); }
  /* Allow the time to wrap if necessary but prefer compact layout */
  .time { color: var(--muted); font: 600 var(--fs-0)/1.4 var(--font-ui); white-space: normal; max-width: 200px; word-break: break-word; text-align: right; }
    .desc { grid-column: 1 / -1; color: var(--text); color: var(--muted); font: 600 var(--fs-0)/1.4 var(--font-ui);}
    .pillset { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
    .pill { border: 1px solid var(--border); background: var(--card); padding: 4px 10px; border-radius: 999px; font: 700 12px/1 var(--font-ui); color: var(--muted); }

    /* Footer */
    footer.site { border-top: 1px solid var(--border); color: var(--muted); background: transparent; }
    .site-foot { padding: 28px 0; display: flex; align-items: center; justify-content: space-between; font: 600 var(--fs-0)/1.5 var(--font-ui); }

    /* Toolbar */
    .toolbar { display: flex; align-items: center; gap: 10px; }
    .button { appearance: none; border: 1px solid var(--border); background: var(--card); color: inherit; border-radius: 999px; padding: 6px 12px; cursor: pointer; font: 700 var(--fs-0)/1 var(--font-ui);}
    .button:hover { transform: translateY(-1px); box-shadow: var(--shadow); }

    /* Utilities */
    .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

    /* News section */
    #news-list {
      font-size: 0.85em;
      line-height: 1.4;
      margin: 0;
      padding-left: 1.2em;
    }

    .news-item span {
      color: var(--muted);
      font-weight: 500;
      display: inline-block;
      width: 85px;
    }

    .news-item.hidden {
      display: none;
    }

    .news-toggle-container {
      text-align: right;
      margin-top: 5px;
      margin-bottom: 0px;
    }

    #news-toggle-btn {
      background: none;
      border: 0.5px solid var(--muted);
      color: var(--muted);
      padding: 2px 6px;
      border-radius: 50px;
      font-size: 0.7em;
      cursor: pointer;
      font-family: var(--font-ui);
      opacity: 0.7;
    }

    @media (max-width: 480px){
      .container { 
        display: flex; 
        justify-content:center; 
      }
      .shell { 
        grid-template-columns: 1fr;
        width: 95%;
        margin: 0 auto;
      }
      aside.sidebar { position: static; }

      .copyright {
        margin-left: 20px;
      }
      .b2tbutton {
        margin-right: 20px;
      }
      .brand {
        margin-left: 20px;
      }
      .toolbar {
        margin-right: 20px;
      }
      /* On very small screens, stack the item grid so role and time don't squeeze each other */
      .item { grid-template-columns: 1fr; }
      .time { text-align: left; max-width: none; }
    }