/* ===== tokens ===== */
    :root {
      --wallpaper: url('https://mcdn.wallpapersafari.com/medium/73/59/DyVkCG.jpg');
      --glass: rgba(255, 255, 255, .25);
      --glass-strong: rgba(255, 255, 255, .45);
      --shadow-dark: rgba(0, 0, 0, .6);
      --accent: #0b56a2;
      --text: #1f3a59;
      --muted: #4e637a;
      --title-gradient: linear-gradient(180deg, #cce4ff 0%, #99c2ff 40%, #5c9be6 100%);
      --radius: 8px;
      --max-width: 760px;
      --gap: 18px;
      --glass-border: rgba(255, 255, 255, 0.55);
      --w7-font-fallback: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial;
      --focus-ring: rgba(11, 86, 162, .16);
      --viewport-pad: 16px;
      /* distance from viewport edge */
    }

    /* ===== baseline ===== */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
      font-family: var(--w7-font-fallback);
      color: var(--text);
      background-image: var(--wallpaper);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      display: flex;
      align-items: center;
      justify-content: center;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
      min-height: 100vh;
      -webkit-text-size-adjust: 100%;
    }



    .window:focus-visible {
      box-shadow: 0 0 0 4px var(--focus-ring);
    }

    .window:focus {
      box-shadow: 0 0 0 4px rgba(11, 86, 162, .08);
    }

    /* content: scrollable region (fixes missing scrollbar) */
    .content {
      padding: 22px 28px;
      background: var(--glass-strong);
      backdrop-filter: blur(14px) saturate(160%);
      -webkit-backdrop-filter: blur(14px) saturate(160%);
      border-top: 1px solid rgba(255, 255, 255, 0.6);
      border-radius: 0 0 var(--radius) var(--radius);
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      flex: 1 1 auto;
      min-height: 0;
      /* critical for correct flex overflow behavior */
      max-height: calc(100vh - 120px);
      /* fallback; JS can adjust height */
      box-sizing: border-box;
      /* ensures padding is included in height */
      position: relative;
      /* optional, good for absolute children inside */
    }


    /* content elements */
    h1 {
      margin: 0 0 12px;
      font-size: 22px;
      color: var(--text);
      text-shadow: 0 1px 0 rgba(255, 255, 255, .9);
    }

    .byline {
      display: flex;
      gap: 16px;
      align-items: center;
      margin: 14px 0 18px;
    }

.avatar {
  width: 74px;
  height: 74px;
  border-radius: 8px;
  border: 2px groove black;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* ensures the image doesn’t spill out */
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* makes the image cover the avatar box without distortion */
  display: block;
}




    .who {
      font-size: 14px;
      color: var(--muted);
    }

    .who .name {
      font-size: 24px;
      font-weight: 700;
      display: block;
      background: linear-gradient(90deg, #062646, #2e2f97);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .who .meta {
      display: block;
      margin-top: 6px;
      font-size: 16px;
      color: #556a8b;
    }

    .sections {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--gap);
      margin-top: 12px;
    }

    .section {
      background: rgba(255, 255, 255, .35);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, .5);
      padding: 14px 16px;
      border-radius: 6px;
      box-shadow: inset 0 2px 6px rgba(19, 30, 44, .08);
      transition: transform .18s;
    }

    .section:hover {
      transform: translateY(-2px);
    }

    .section h2 {
      font-size: 20px;
      margin: 0 0 8px;
      color: var(--accent);
      border-bottom: 1px solid rgba(12, 32, 56, .06);
      padding-bottom: 6px;
    }

    .section ul {
      list-style: disc outside;
      padding-left: 1.25rem;
      margin: 0;
      font-size: 16px;
      color: #27445f;
    }

    .section li {
      margin: 6px 0;
      padding: calc((var(--touch-size) - 1em) / 2) 0;
      min-height: var(--touch-size);
      line-height: 1.2;
    }

    .section li a {
      color: var(--accent);
      text-decoration: none;
      display: inline-block;
      min-height: var(--touch-size);
      padding: 6px 6px;
      border-radius: 6px;
    }

    .section li a:hover {
      text-decoration: underline;
    }

    .foot {
      text-align: center;
      font-size: 12px;
      color: #000000;
      margin-top: 18px !important;
      padding-top: 6px !important;
      border-top: 1px solid rgba(0, 0, 0, 0.4) !important;
      background: none !important;
      border: none !important;
      box-shadow: none !important;
      position: static !important;
    }

    .title-controls button {
      border-radius: 8px;
      min-width: var(--touch-size);
      min-height: var(--touch-size);
      padding: 6px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      -webkit-tap-highlight-color: transparent;
    }

    button:focus-visible,
    a:focus-visible {
      outline: 3px solid var(--focus-ring);
      outline-offset: 2px;
    }

    /* responsive: tablet & small screens */
    @media (max-width:720px) {
      .window {
        width: calc(100vw - (var(--viewport-pad) * 2));
        min-width: auto;
        max-height: calc(100vh - (var(--viewport-pad) * 2));
      }

      .sections {
        grid-template-columns: 1fr;
      }
    }


    /* Defensive tiny styles to ensure visibility if something else breaks */
    .window {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
    }