*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }

    :root {
      --bg:     #ffffff;
      --bg2:    #f5f5f7;
      --bg3:    #e8e8ed;
      --text:   #1d1d1f;
      --text2:  #6e6e73;
      --text3:  #aeaeb2;
      /* TO REVERT THE 2026-08-19 CONTRAST FIX: set both of the lines below to
         var(--text3), here and in the dark block. That restores the exact
         previous appearance in one edit and changes nothing else.
         Why they exist: --text3 measures 2.21:1 on white and 2.84:1 on the dark
         background. WCAG AA needs 4.5:1 for body text, so anything a reader has
         to actually read (years, supervisors, captions, footer) was failing.
         --text3 itself is untouched and stays correct for decorative use. */
      --meta:   #6e6e73;  /* readable secondary: 5.07:1 on white */
      --badge:  #66666b;  /* gray badge + its arrow: 4.68:1 on --bg3 */
      --accent: #007aff;
      --asoft:  #e8f0fe;
      --border: #d2d2d7;
      --card:   #f5f5f7;
      --shadow: rgba(0,0,0,0.07);
      --font:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }
    [data-theme="dark"] {
      --bg:     #1c1c1e;
      --bg2:    #2c2c2e;
      --bg3:    #3a3a3c;
      --text:   #f5f5f7;
      --text2:  #98989d;
      --text3:  #636366;
      --meta:   #98989d;  /* 5.93:1 on the dark background */
      --badge:  #aeaeb2;  /* 5.13:1 on the dark --bg3 */
      --accent: #2997ff;
      --asoft:  #0a2040;
      --border: #3a3a3c;
      --card:   #2c2c2e;
      --shadow: rgba(0,0,0,0.4);
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: var(--font);
      font-size: 16px;
      line-height: 1.6;
      transition: background 0.25s, color 0.25s;
      overflow-x: hidden;
    }

    /* Theme toggle - icon only */
    .theme-toggle {
      position: fixed; bottom: 1.25rem; right: 1.5rem; z-index: 999;
      background: var(--bg2); border: 1px solid var(--border);
      border-radius: 50%; padding: 0.55rem; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: all 0.2s; box-shadow: 0 2px 10px var(--shadow);
      color: var(--text2);
    }
    .theme-toggle:hover { color: var(--text); border-color: var(--accent); }
    .theme-toggle svg { width: 17px; height: 17px; display: block; }

    /* Scroll nav */
    .scroll-nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 998;
      background: var(--bg); border-bottom: 1px solid var(--border);
      padding: 0.55rem 0; transform: translateY(-100%);
      transition: transform 0.3s ease, background 0.25s, border-color 0.25s;
      backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    }
    .scroll-nav.visible { transform: translateY(0); }
    .scroll-nav .nav-inner {
      max-width: 1060px; margin: 0 auto; padding: 0 5vw;
      display: flex; align-items: center; justify-content: space-between;
    }
    .scroll-nav .nav-name {
      font-size: 0.82rem; font-weight: 600; color: var(--text);
      letter-spacing: -0.01em; text-decoration: none;
    }
    .scroll-nav .nav-links { display: flex; gap: 1.5rem; align-items: center; }
    .scroll-nav .nav-links a {
      font-size: 0.75rem; font-weight: 500; color: var(--text2);
      text-decoration: none; letter-spacing: 0.01em;
      transition: color 0.15s;
    }
    .scroll-nav .nav-links a:hover { color: var(--accent); }

    /* Layout */
    .container { max-width: 1060px; margin: 0 auto; padding: 0 5vw; }

    /* Typography */
    h1 {
      font-size: clamp(3.2rem, 9vw, 6.5rem);
      font-weight: 700; line-height: 1.0; letter-spacing: -0.03em;
    }
    h2 {
      font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700;
      letter-spacing: -0.02em; line-height: 1.15; color: var(--accent);
    }
    h3 { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }

    /* Scroll reveal */
    .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.55s ease, transform 0.55s ease; }
    .reveal.visible { opacity: 1; transform: translateY(0); }

    /* ── WAVE ANIMATION ── */
    @keyframes wave {
      0%   { transform: rotate(0deg); }
      10%  { transform: rotate(14deg); }
      20%  { transform: rotate(-8deg); }
      30%  { transform: rotate(14deg); }
      40%  { transform: rotate(-4deg); }
      50%  { transform: rotate(10deg); }
      60%  { transform: rotate(0deg); }
      100% { transform: rotate(0deg); }
    }
    .wave-emoji {
      display: inline-block;
      animation: wave 2s ease 0.6s 1;
      transform-origin: 70% 70%;
    }
    /* The intro's two waving spans. These were style="animation-delay:..."
       attributes in the markup until 2026-08-09; a CSP hash cannot cover a
       style attribute, so they became classes to let 'unsafe-inline' leave
       style-src. Later than .wave-emoji on purpose: same specificity, so
       source order is what makes these win. */
    .wave-delay-0 { animation-delay: 0s; }
    .wave-delay-1 { animation-delay: 0.15s; }
    .name-accent { color: var(--accent); font-weight: 700; }

    /* ── INTRO ── */
    #intro {
      max-width: 1060px; margin: 0 auto;
      padding: 5rem 5vw 4rem;
      min-height: 100svh; display: flex; align-items: center;
    }
    .intro-main {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: center;
    }
    /* Left column: name + bio, left-aligned, centered vertically vs right col */
    .intro-left {
      display: flex; flex-direction: column;
    }
    .intro-left h1 { margin-bottom: 1.25rem; }
    .i-bio p {
      font-size: 0.97rem; color: var(--text2); line-height: 1.8;
      margin-bottom: 1rem;
    }
    .i-bio p:last-child { margin-bottom: 0; }
    .i-bio strong { color: var(--text); font-weight: 600; }
    /* Right column: photo + tag + cta, all centered */
    .intro-right {
      display: flex; flex-direction: column;
      align-items: center; gap: 0.9rem;
    }
    .intro-right .cta-link { margin-top: 1.3rem; }
    .i-photo {
      width: 100%; max-width: 420px; aspect-ratio: 3/4;
      object-fit: cover; object-position: center top;
      /* Polaroid: frame stays white in dark mode on purpose */
      --rot: -2.5deg;
      padding: 14px 14px 58px; background: #fff;
      border-radius: 4px; box-shadow: 0 5px 14px rgba(0,0,0,0.16), 0 28px 70px var(--shadow);
      transform: rotate(var(--rot));
      opacity: 0;
    }
    .i-photo.landed {
      opacity: 1;
      animation: slap-down 0.55s cubic-bezier(0.2, 1.5, 0.35, 1) 0.25s backwards;
    }
    @keyframes slap-down {
      from { opacity: 0; transform: scale(1.28) rotate(calc(var(--rot, 0deg) + 6deg)); }
      70%  { opacity: 1; }
      to   { transform: scale(1) rotate(var(--rot, 0deg)); }
    }
    /* Covers EVERY animation and transition, not a named list. The list form
       shipped with .i-photo and the carousel on it and never gained .wave-emoji,
       so a visitor who asked for less motion still got a 2s waving hand. A rule
       that has to be edited every time somebody adds an animation is a rule that
       will be wrong again; this one cannot go stale.
       .i-photo keeps its own line because it starts at opacity 0 and only the
       animation makes it visible, so killing the animation without this would
       leave the portrait blank. Anything added later that starts hidden needs
       the same treatment. */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
      .i-photo { opacity: 1 !important; }
    }
    .cta-link {
      display: inline-flex; align-items: center; gap: 0.35rem;
      padding: 0.6rem 1.35rem; border-radius: 2rem;
      background: var(--accent); color: #fff;
      font-size: 0.875rem; font-weight: 500; font-family: var(--font);
      text-decoration: none; transition: opacity 0.15s, transform 0.15s;
      box-shadow: 0 4px 14px rgba(0,122,255,0.25);
    }
    .cta-link:hover { opacity: 0.85; transform: translateY(-1px); }

    [data-theme="dark"] .section-title {
      color: var(--text);
      border-left: 3px solid var(--accent);
      padding-left: 0.6rem;
    }
    [data-theme="dark"] h2 { color: var(--text); }

    /* ── EDUCATION ── */
    .section-title { color: var(--accent); font-size: clamp(1.5rem, 3.5vw, 2rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
    #education { padding: 3rem 0; }
    .edu-list { margin-top: 1.5rem; }
    .edu-row {
      display: grid; grid-template-columns: 96px 1fr;
      gap: 1.5rem; padding: 0.9rem 0;
      border-bottom: 1px solid var(--border); align-items: baseline;
    }
    .edu-row:first-child { border-top: none; }
    .edu-row:last-child { border-bottom: none; }
    .edu-yr { font-size: 0.75rem; font-weight: 600; color: var(--meta); letter-spacing: 0.04em; white-space: nowrap; padding-top: 0.1rem; }
    .edu-deg { display: block; font-size: 0.92rem; font-weight: 600; line-height: 1.3; margin-bottom: 0.2rem; }
    .edu-inst { display: block; font-size: 0.82rem; color: var(--text2); }

    /* ── RESEARCH ── */
    #research { padding: 3rem 0; }

    /* Selected publications - always visible */
    .sel-pubs { margin-top: 1.75rem; }
    .pub-list { display: flex; flex-direction: column; }
    .pub-item {
      font-size: 0.865rem; color: var(--text2); line-height: 1.75;
      padding: 0.9rem 0; border-bottom: 1px solid var(--border);
    }
    .pub-item:last-child { border-bottom: none; }
    .pub-group { padding: 1.4rem 0 0.2rem; border-bottom: none; }
    .pub-group:first-child { padding-top: 0.9rem; }
    .pub-group .badge { margin-left: 0; font-size: 0.72rem; font-weight: 700; padding: 0.22rem 0.65rem; }
    .pub-item:has(+ .pub-group) { border-bottom: none; }
    .doi-link {
      color: var(--accent); text-decoration: none; white-space: nowrap;
      display: inline-flex; align-items: center; gap: 0.3rem;
      border-radius: 0.35rem; padding: 0.05rem 0.1rem;
    }
    /* beats .pub-item a:hover, which was drawing an underline across the badge */
    .pub-item a.doi-link:hover, .doi-link:hover, .pub-item a.badge-link:hover { text-decoration: none; opacity: 1; }
    .doi-link .badge { margin-left: 0; transition: background 0.15s ease, color 0.15s ease; }
    .doi-link:hover .badge { background: var(--accent); color: #fff; }
    .doi-link .doi-arrow { display: inline-block; transition: transform 0.15s ease; }
    .doi-link:hover .doi-arrow { transform: translate(1.5px, -1.5px); }
    .doi-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    .badge-link { text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.25rem; border-radius: 999px; }
    .badge-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
    .theme-toggle:focus-visible, .nav-links a:focus-visible, .nav-name:focus-visible,
    .acc-btn:focus-visible, .car-btn:focus-visible, .lb-btn:focus-visible,
    .icon-link:focus-visible, .cta-link:focus-visible, .orcid-btn:focus-visible {
      outline: 2px solid var(--accent); outline-offset: 3px;
    }
    .badge-link .arrow-gray { display: inline-block; color: var(--badge); transition: color 0.15s, transform 0.15s ease; }
    .badge-link:hover .arrow-gray { color: var(--accent); transform: translate(1.5px, -1.5px); }
    .badge-link:hover { text-decoration: none; }
    .pub-item strong { color: var(--text); }
    .pub-item a { color: var(--accent); text-decoration: none; }
    .pub-item a:hover { text-decoration: underline; }
    .badge {
      display: inline-block; font-size: 0.68rem; font-weight: 600;
      letter-spacing: 0.04em; padding: 0.15rem 0.5rem; border-radius: 0.3rem;
      margin-left: 0.3rem; vertical-align: middle;
    }
    .b-blue { background: var(--asoft); color: var(--accent); }
    .b-gray { background: var(--bg3); color: var(--badge); }
    /* Live citation count, appended to a .pub-item by site.js. Plain text, not a
       link: the DOI badge next to it already navigates, and a second arrow on the
       line read as a second destination rather than as a fact. The number sits at
       full --text weight so it leads and the word falls back to badge grey. A
       paper with no citations gets no element at all, so there is no empty state
       to style. */
    /* Its own line, left aligned, rather than trailing the citation inline. The
       entry wraps to three lines at desktop width, so an inline badge sat wherever
       the text happened to break: a different spot on every paper, and it moved
       with the window. On its own line the position is fixed. It costs one line of
       height, and only on the rows that have a number. */
    /* flex, not block, so the pill and its arrow sit together on the line while
       the element itself still starts a new one. fit-content keeps the focus ring
       and the hover target around the badge rather than across the whole row. */
    .cite-link {
      display: flex; align-items: center; gap: 0.25rem;
      width: fit-content; max-width: 100%;
      margin-top: 0.4rem; margin-left: 0;
      animation: citeIn 0.28s ease both;
    }
    .cite-link .badge { margin-left: 0; }
    .cite-link b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
    /* The two profile buttons beside the Research heading are a pair, so they sit
       closer to each other than the heading's 0.9rem gap puts them. */
    .sec-head .orcid-btn + .orcid-btn { margin-left: -0.35rem; }
    @keyframes citeIn {
      from { opacity: 0; transform: translateY(2px); }
      to   { opacity: 1; transform: none; }
    }
    @media (prefers-reduced-motion: reduce) {
      .cite-link { animation: none; }
    }
    .sec-head {
      display: flex; align-items: center; gap: 0.9rem;
    }
    .orcid-btn {
      display: inline-flex; align-items: center; justify-content: center;
      width: 26px; height: 26px; border-radius: 50%;
      background: transparent; text-decoration: none;
      color: var(--text2);
      transition: color 0.15s, transform 0.15s;
    }
    .orcid-btn:hover { color: var(--text); transform: translateY(-1px); }

    /* Accordion */
    .accordion { margin-top: 2rem; border: 1px solid var(--border); border-radius: 1rem; overflow: hidden; }
    .acc-item { border-bottom: 1px solid var(--border); }
    .acc-item:last-child { border-bottom: none; }
    .acc-btn {
      width: 100%; background: var(--card); border: none;
      padding: 1.2rem 1.6rem; display: flex;
      justify-content: space-between; align-items: center;
      cursor: pointer; font-family: var(--font); font-size: 0.88rem;
      font-weight: 600; color: var(--text); text-align: left;
      transition: background 0.2s;
    }
    .acc-btn:hover { background: var(--bg3); }
    .acc-btn.open { background: var(--bg); }
    .acc-chev {
      width: 16px; height: 16px; fill: none; stroke: var(--text2);
      stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
      transition: transform 0.25s ease; flex-shrink: 0;
    }
    .acc-btn.open .acc-chev { transform: rotate(180deg); }
    .acc-panel { max-height: 0; overflow: hidden; visibility: hidden;
                 transition: max-height 0.35s ease, visibility 0s linear 0.35s; }
    .acc-panel.open { max-height: 5000px; visibility: visible;
                      transition: max-height 0.35s ease, visibility 0s; }
    .acc-body { padding: 0.25rem 1.6rem 1.6rem; }

    /* Research cards inside accordion */
    .r-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding-top: 1rem; }
    .r-card {
      background: var(--bg2); border-radius: 0.75rem;
      padding: 1.3rem; border: 1px solid var(--border);
    }
    .r-tag { font-size: 0.67rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.4rem; }
    .r-card h3 { font-size: 0.9rem; font-weight: 600; line-height: 1.35; margin-bottom: 0.4rem; letter-spacing: -0.01em; }
    .r-card p { font-size: 0.81rem; color: var(--text2); line-height: 1.65; }
    .r-super { font-size: 0.76rem; color: var(--meta); margin-top: 0.45rem; font-style: italic; }

    /* ── COMMUNITY ── */
    #community { padding: 3rem 0; }
    .comm-list { margin-top: 2.5rem; border: 1px solid var(--border); border-radius: 1rem; overflow: hidden; }
    .comm-item {
      display: block; padding: 1.5rem 1.6rem; background: var(--card);
      border-bottom: 1px solid var(--border); transition: background 0.2s;
    }
    .comm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
    .comm-head h3 { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.015em; }
    .comm-item:last-child { border-bottom: none; }
    .comm-item:hover { background: var(--bg2); }
    .comm-org { font-size: 0.87rem; color: var(--text); line-height: 1.4; margin-top: 0.15rem; }
    .comm-body { margin-top: 0.5rem; }
    .comm-body p { font-size: 0.82rem; color: var(--text2); line-height: 1.65; }
    .comm-body a { color: var(--accent); text-decoration: none; }
    .comm-body a:hover { text-decoration: underline; }
    .ext-link .ext-arrow { display: inline-block; color: var(--meta); transition: color 0.15s, transform 0.15s ease; }
    .ext-link:hover .ext-arrow { color: var(--accent); transform: translate(1.5px, -1.5px); }
    .ext-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    .comm-yr { font-size: 0.72rem; color: var(--meta); white-space: nowrap; }

    /* ── PHOTOGRAPHY ── */
    #photography { padding: 3rem 0; }
    .car-wrap {
      position: relative; margin: 2.5rem auto 0;
      max-width: 800px; cursor: pointer;
    }
    .car-slides { position: relative; }
    /* The stack: white polaroid edges peeking out behind the current print */
    .car-slides::before, .car-slides::after {
      content: ''; position: absolute; inset: 0; background: #fff; border-radius: 4px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.14), 0 18px 44px var(--shadow);
    }
    .car-slides::before { transform: rotate(2.2deg) translate(6px, 4px); }
    .car-slides::after  { transform: rotate(-1.6deg) translate(-5px, 7px); }
    .car-sizer { display: block; width: 100%; padding-bottom: 66.67%; transition: padding-bottom 0.42s ease; }
    .car-slide {
      position: absolute; top: 0; left: 0; width: 100%; height: 100%;
      opacity: 0; transition: opacity 1.6s ease; pointer-events: none;
      z-index: 1;
    }
    .car-slide.active { opacity: 1; pointer-events: auto; }
    .car-slide img {
      width: 100%; height: 100%; object-fit: cover; display: block;
      padding: 12px 12px 48px; background: #fff;
      border-radius: 4px; box-shadow: 0 5px 14px rgba(0,0,0,0.16), 0 28px 70px var(--shadow);
      transform: rotate(var(--rot, 0deg));
    }
    .car-btn {
      position: absolute; top: 50%; transform: translateY(-50%);
      background: rgba(0,0,0,0.28); backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: none; color: #fff; width: 40px; height: 40px;
      border-radius: 50%; cursor: pointer; display: flex;
      align-items: center; justify-content: center;
      transition: background 0.2s; z-index: 10;
    }
    .car-btn:hover { background: rgba(0,0,0,0.52); }
    .car-btn.prev { left: 0.9rem; }
    .car-btn.next { right: 0.9rem; }
    .car-btn svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
    .car-count {
      position: absolute; bottom: 0.9rem; right: 1.1rem;
      background: rgba(0,0,0,0.36); backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      color: rgba(255,255,255,0.9); font-size: 0.72rem; font-weight: 500;
      padding: 0.26rem 0.62rem; border-radius: 2rem; font-family: var(--font);
      pointer-events: none;
    }
    .photo-cap { font-size: 0.79rem; color: var(--meta); margin-top: 1.9rem; font-style: italic; }

    /* Lightbox */
    #lightbox {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,0.94); z-index: 9999;
      align-items: center; justify-content: center;
    }
    #lightbox.active { display: flex; }
    #lb-img { max-width: 94vw; max-height: 92vh; object-fit: contain; display: block; user-select: none; }
    .lb-btn {
      position: absolute; background: rgba(255,255,255,0.12);
      border: none; color: #fff; cursor: pointer; border-radius: 50%;
      width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
      transition: background 0.2s; font-family: var(--font);
    }
    .lb-btn:hover { background: rgba(255,255,255,0.22); }
    .lb-btn svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
    #lb-close { top: 1.25rem; right: 1.25rem; font-size: 1.4rem; font-weight: 300; }
    #lb-close svg { width: 22px; height: 22px; }
    #lb-prev { left: 1.25rem; top: 50%; transform: translateY(-50%); }
    #lb-next { right: 1.25rem; top: 50%; transform: translateY(-50%); }
    #lb-count { position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.6); font-size: 0.78rem; font-family: var(--font); }

    /* ── CONTACT removed, icons moved to footer ── */

    /* Footer */
    footer {
      padding: 1.5rem 5vw; font-size: 0.77rem; color: var(--meta);
      display: flex; flex-direction: column; align-items: center;
      gap: 0.6rem; border-top: 1px solid var(--border); text-align: center;
    }
    footer a { color: var(--meta); text-decoration: none; }
    footer a:hover { color: var(--accent); }
    .footer-icons {
      display: flex; gap: 0.5rem; align-items: center;
    }
    .footer-icons .icon-link {
      width: 34px; height: 34px; border-radius: 50%;
      border: 1px solid var(--border); background: var(--bg);
      color: var(--text2); display: inline-flex;
      align-items: center; justify-content: center;
      text-decoration: none;
      transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.15s;
    }
    .footer-icons .icon-link:hover { border-color: var(--accent); background: var(--asoft); color: var(--accent); transform: translateY(-1px); }
    /* The two brand marks in this row (ORCID green, Scholar blue) are drawn in
       their own colours and greyscaled back, so the row reads as one set and each
       brand only shows itself on hover. Miss the grayscale line and the icon sits
       there as a loud coloured disc among four quiet ones. */
    .footer-icons .icon-link.orcid-link,
    .footer-icons .icon-link.scholar-link { filter: grayscale(1); }
    .footer-icons .icon-link.orcid-link:hover { filter: none; border-color: #a6ce39; background: #f5fde8; color: #3d6e00; }
    [data-theme="dark"] .footer-icons .icon-link.orcid-link:hover { background: rgba(166,206,57,0.15); color: #a6ce39; }
    .footer-icons .icon-link.scholar-link:hover { filter: none; border-color: #4285f4; background: #e8f0fe; color: #1a4fb4; }
    [data-theme="dark"] .footer-icons .icon-link.scholar-link:hover { background: rgba(66,133,244,0.15); color: #4285f4; }

    /* RESPONSIVE */
    /* Medium: keep 2-col hero but compact it; stack cards/community */
    @media (max-width: 780px) {
      .scroll-nav .nav-links { gap: 1rem; }
      .scroll-nav .nav-links a { font-size: 0.68rem; }
      .intro-main { gap: 2rem; }
      h1 { font-size: clamp(2.2rem, 6vw, 3.8rem); }
      .r-cards { grid-template-columns: 1fr; }
      .comm-head { flex-wrap: wrap; gap: 0.25rem 0.75rem; }
      .car-wrap { max-width: 100%; }
    }
    /* Small: collapse hero to single column */
    @media (max-width: 560px) {
      #intro { padding-top: 4rem; padding-bottom: 3rem; min-height: auto; align-items: flex-start; }
      .intro-main { grid-template-columns: 1fr; gap: 0; }
      /* Unwrap nested divs so children can be individually ordered */
      .intro-left, .intro-right { display: contents; }
      /* Mobile order: photo(1) → name(2) → bio(3) → button(4) */
      .i-photo                { order: 1; max-width: 260px; margin: 0 auto 1.5rem; }
      .intro-left h1          { order: 2; text-align: center; margin-bottom: 1.25rem; }
      .i-bio                  { order: 3; margin-bottom: 1.5rem; }
      .i-bio p                { text-align: center; margin-left: auto; margin-right: auto; }
      .intro-right .cta-link  { order: 4; margin: 0 auto; }
      h1 { font-size: clamp(2.5rem, 10vw, 3.5rem); }
    }
    @media (max-width: 480px) {
      .scroll-nav .nav-links { gap: 0.6rem; }
      .scroll-nav .nav-name { font-size: 0.75rem; }
      .acc-btn { padding: 1rem 1.25rem; }
      .acc-body { padding: 0.25rem 1.25rem 1.25rem; }
      .comm-item { padding: 1.25rem; }
    }

    /* TOUCH TARGETS, measured 2026-08-25. Three icon-only controls on this page
       are drawn smaller than the 44px a finger reliably hits: the carousel
       arrows at 40, the four footer icons at 34, and the two ORCID and Scholar
       marks beside the Publications heading at 26.
       This grows the TARGET without moving a drawn pixel: a transparent centred
       ::after, sized to the space that is actually free beside each control.
       The carousel arrows sit alone at the two edges of the strip, so they take
       the full 44 in both directions. The footer icons sit in a row with an 8px
       gap, which puts their centres 42px apart, so 44 tall is free and 42 wide
       is the widest that fits WITHOUT two targets overlapping and the wrong link
       winning a tap on the boundary. A dead 4px band between links is a smaller
       fault than a link that silently opens its neighbour.
       The ORCID pair beside the heading is deliberately NOT here. Those two
       overlap by design (margin-left: -0.35rem), so their centres are about
       20px apart and any target over 20px wide would make each one cover half
       of the other. Fixing them means changing that layout, which is a design
       decision and not a mechanical one.
       pointer: coarse only, so a mouse keeps exactly the hover geometry it has
       today and nothing about the desktop page changes at all. */
    @media (pointer: coarse) {
      .footer-icons .icon-link { position: relative; }
      /* .car-btn is already position: absolute, which is enough to anchor its
         own ::after. Do not add position: relative to it: that would drop the
         absolute positioning that puts it over the carousel. */
      .car-btn::after,
      .footer-icons .icon-link::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 44px;
        height: 44px;
      }
      .footer-icons .icon-link::after { width: 42px; }

      /* THE FIVE NAV CONTROLS, measured 2026-08-31 on a 375x812 phone viewport
         with pointer: coarse live, on the served page and not read off this
         file: Education 53x17, Research 50x17, Community 61x17, Photography
         68x17, the "Freddy Bishay" name 77x38, and the theme toggle 37x37.
         Seventeen pixels tall inside a bar that is 57 tall, so the room was
         already there and nothing was using it.
         VERTICAL ONLY FOR THE NAV LINKS. The horizontal gaps between the four
         section links are 9.7, 9.6 and 9.5 pixels, so any target wider than the
         link would overlap its neighbour and a tap on the boundary would open
         the wrong section. left: 0; right: 0 takes the link's own width and not
         a pixel more. 44 tall fits inside 57 with room to spare.
         AND AT 375 THE BAR IS FULL: the name's right edge is 96.3 and
         Education's left edge is 96.2, so those two are already edge to edge in
         the drawn layout, before any of this. This change does not widen either
         one, so it does not make that boundary worse; it is written down here
         because a later reader measuring the targets will find them touching and
         should know it came from the nav's own spacing at this width.
         THE THEME TOGGLE IS ALONE, so it takes the full 44 in both directions.
         IT IS ALSO ALREADY position: fixed, which is its own containing block,
         so it gets NO position declaration here. Adding position: relative would
         drop the fixed positioning and drop the button into the page flow on
         every touch device, which is the same trap the .car-btn note above
         names, arriving from the other side. */
      nav a { position: relative; }
      nav a::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        height: 44px;
      }
      .theme-toggle::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 44px;
        height: 44px;
      }
    }