/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       🎨  COLOR PALETTE  —  tweak any value here to change the whole site.
       Every color used elsewhere references one of these variables.
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    :root {

      /* — Background — */
      --cream:        #e8e2d2;   /* main page background */
      --cream-soft:   #f0ebdb;   /* slightly lighter; available for layered surfaces */
      --card:         #dbd2bd;   /* hero card — slightly darker than cream, layered over network */

      /* — Text — */
      --ink:          #004225;   /* primary: name, headings, CV button border */
      --ink-body:     #2d3329;   /* body paragraphs */
      --ink-mute:     #6b6e5e;   /* meta info: dates, captions, eyebrow labels */
      --ink-hair:     rgba(32, 35, 30, 0.12);   /* hairline dividers between list items */

      /* — Accents (each color is used in exactly one place) — */
      --pine:         #871626;   /* small green tags in Research & Professional lists */
      --ochre:        #B18C35;   /* warm status labels in Writing ("Working paper" etc.) */

      /* — Network (the animated transit map behind the hero) —
         Four route "families". Each has a MAIN line color (the primary
         line of that family uses this), a SOFT shade (the family's
         secondary lines), and a PULSE color (slightly brighter, for the
         flowing dots). Tweak any value to repaint the whole family. */
      --line-red:           #871626;
      --line-red-soft:      #b85067;
      --line-red-pulse:     #d63a52;

      --line-purple:        #4c0e69;
      --line-purple-soft:   #7e3eaa;
      --line-purple-pulse:  #7d2da8;

      --line-blue:          #3f7a8f;
      --line-blue-soft:     #6ba3b8;
      --line-blue-pulse:    #2e8aa3;

      --line-yellow:        #b18c35;
      --line-yellow-soft:   #d4b87a;
      --line-yellow-pulse:  #daad48;

      /* Text accents that aren't part of the network itself
         (link hover, eyebrow coords, tagline emphasis). */
      --river-deep:         #3f7a8f;

      /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
         Typography & layout — usually no need to change
         ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
      --font-display: 'Instrument Serif', 'Times New Roman', serif;
      --font-body:    'IBM Plex Sans', system-ui, sans-serif;
      --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

      --max-w: 1200px;
      --col-w: 640px;
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       Below this line: layout & component styles.
       You usually won't need to edit anything here for color tweaks.
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

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

    body {
      background: var(--cream);
      color: var(--ink-body);
      font-family: var(--font-body);
      font-weight: 300;
      font-size: 17px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
    }

    a {
      color: var(--ink);
      text-decoration: none;
      border-bottom: 1px solid var(--ink-hair);
      transition: border-color 0.2s ease, color 0.2s ease;
    }
    a:hover { color: var(--river-deep); border-bottom-color: var(--river-deep); }
    a:focus-visible { outline: 2px solid var(--river-deep); outline-offset: 3px; border-radius: 1px; }

    /* ---------- NAV ---------- */
    nav.top {
      position: fixed; top: 0; left: 0; right: 0; z-index: 50;
      display: flex; justify-content: space-between; align-items: center;
      padding: 1.5rem 2.5rem;
      font-family: var(--font-mono);
      font-size: 0.78rem;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      background: linear-gradient(to bottom, rgba(232, 226, 210, 0.92), rgba(232, 226, 210, 0));
      backdrop-filter: blur(2px);
    }
    nav.top .brand { color: var(--ink); border: none; font-weight: 500; letter-spacing: 0.08em; }
    nav.top ul { list-style: none; display: flex; gap: 1.75rem; }
    nav.top ul a { border: none; color: var(--ink); opacity: 0.7; }
    nav.top ul a:hover { opacity: 1; color: var(--river-deep); }

    /* ---------- SECTION SCAFFOLD ---------- */
    section { position: relative; padding: 7rem 2.5rem; max-width: var(--max-w); margin: 0 auto; }

    .eyebrow {
      font-family: var(--font-mono);
      font-size: 0.72rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ink-mute);
      margin-bottom: 2rem;
      display: flex; align-items: center; gap: 1rem;
    }
    .eyebrow::before { content: ''; width: 36px; height: 1px; background: var(--ink-hair); }
    .eyebrow .coord { color: var(--river-deep); margin-left: auto; }

    h2 {
      font-family: var(--font-display);
      font-style: italic;
      font-weight: 400;
      font-size: clamp(2.2rem, 5vw, 3.4rem);
      line-height: 1.05;
      letter-spacing: -0.01em;
      margin-bottom: 2.5rem;
      max-width: 18ch;
      color: var(--ink);
    }
    h3 {
      font-family: var(--font-display);
      font-style: italic;
      font-weight: 400;
      font-size: 1.5rem;
      line-height: 1.2;
      margin-bottom: 0.4rem;
      color: var(--ink);
    }
    p { max-width: var(--col-w); color: var(--ink-body); opacity: 0.92; }
    p + p { margin-top: 1.1rem; }
    .lead { font-size: 1.15rem; opacity: 1; color: var(--ink); }

    /* ---------- HERO ---------- */
    .hero {
      min-height: 100vh; max-width: none; padding: 0;
      display: flex; flex-direction: column; justify-content: center;
      position: relative; overflow: hidden;
    }
    .hero .network-wrap { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
    .hero .network-wrap svg { width: 100%; height: 100%; display: block; }

    /* The card itself provides text legibility now, so the strong vignette
       is gone. We keep just a very soft cream fog at the far left edge so the
       network doesn't run hard against the page margin. */
    .hero::before {
      content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
      background: linear-gradient(
        to right,
        rgba(232, 226, 210, 0.35) 0%,
        rgba(232, 226, 210, 0) 12%
      );
    }

    .hero-content {
      position: relative; z-index: 2;
      padding: 0 2.5rem;
      max-width: var(--max-w);
      margin: 0 auto; width: 100%;
    }

    /* The card laid over the network — slightly darker than the page so it
       reads as a separate plane while keeping palette harmony. */
    .hero-card {
      display: inline-block;
      font-family: 'Lora';
      background: var(--card);
      border-radius: 6px;
      padding: 3rem 3.5rem;
      max-width: 640px;
      opacity: 0.97;
      box-shadow:
        0 1px 0 rgba(32, 35, 30, 0.04),
        0 24px 48px -28px rgba(32, 35, 30, 0.25);
    }

    .hero h1 {
      font-family: 'Lora';
      font-weight: 400;
      font-size: clamp(2.6rem, 7vw, 4.5rem);
      line-height: 1;
      letter-spacing: -0.015em;
      margin-bottom: 1.75rem;
      color: var(--ink);
    }
    .hero h1 .italic { font-style: italic; color: var(--ink); }

    .hero .tagline {
      font-family: var(--font-body);
      font-weight: 300;
      font-size: clamp(1.05rem, 1.6vw, 1.2rem);
      line-height: 1.5;
      max-width: 38ch;
      color: var(--ink-body);
      opacity: 1;
      margin: 0;
    }
    .hero .tagline .em {
      color: var(--river-deep);
      font-style: italic;
      font-family: var(--font-display);
      font-size: 1.15em;
    }

    .scroll-cue {
      position: absolute !important; 
      bottom: 2.5rem !important; 
      top: auto !important; 
      left: 50% !important; /* Centers the starting point */
      transform: translateX(-50%) !important; /* Pulls it exactly into the middle */
      font-family: var(--font-mono);
      font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
      color: var(--ink-mute);
      z-index: 2;
      display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
      text-decoration: none;
      border: none;
      cursor: pointer;
      transition: color 0.25s ease;
    }
    .scroll-cue:hover { color: var(--ink); }
    .scroll-cue:focus-visible {
      outline: 2px solid var(--river-deep);
      outline-offset: 6px;
      border-radius: 2px;
    }
    .scroll-cue::after {
      content: '';
      width: 1px; height: 32px;
      background: linear-gradient(to bottom, var(--ink-mute), transparent);
      animation: scroll-bounce 1.8s ease-in-out infinite;
      transform-origin: top;
    }
    @keyframes scroll-bounce {
      0%   { transform: translateY(-6px) scaleY(0.6); opacity: 0.25; }
      50%  { transform: translateY(6px)  scaleY(1);   opacity: 1;    }
      100% { transform: translateY(-6px) scaleY(0.6); opacity: 0.25; }
    }

    /* ---------- ABOUT ---------- */
    .about-grid {
      display: grid;
      grid-template-columns: 320px 1fr;
      gap: 3.5rem;
      align-items: start;
      max-width: 1000px;
    }
    .portrait { margin: 0; position: relative; }
    .portrait img {
      display: block; 
      width: 100%; 
      height: auto;
      border-radius: 6px; /* Adds the rounded corners */
      filter: saturate(0.92) contrast(1.02);
      box-shadow:
        0 1px 0 rgba(32, 35, 30, 0.04),
        0 12px 28px -16px rgba(32, 35, 30, 0.35);
    }
    .portrait::after {
      content: 'Paris · 2026';
      display: block;
      margin-top: 0.9rem;
      padding-top: 0.7rem;
      border-top: 1px solid var(--ink-hair);
      font-family: var(--font-mono);
      font-size: 0.68rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ink-mute);
    }
    .about-text { max-width: var(--col-w); }
    .about-text h2 { margin-bottom: 2rem; }

    /* ---------- LISTS (research, professional, writing share style) ---------- */
    .item-list { max-width: 820px; border-top: 1px solid var(--ink-hair); }
    .item {
      display: grid;
      grid-template-columns: 140px 1fr;
      gap: 2rem;
      padding: 1.75rem 0;
      border-bottom: 1px solid var(--ink-hair);
      align-items: baseline;
    }
    .item .tag {
      font-family: var(--font-mono);
      font-size: 0.7rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--pine);
      padding-top: 0.4rem;
    }
    .item .body h3 {
      font-style: normal;
      font-family: var(--font-body);
      font-weight: 500;
      font-size: 1.05rem;
      color: var(--ink);
      margin-bottom: 0.35rem;
    }
    .item .body .role-meta {
      font-family: var(--font-mono);
      font-size: 0.72rem;
      letter-spacing: 0.04em;
      color: var(--ink-mute);
      margin-bottom: 0.6rem;
      text-transform: none;
    }
    .item .body p {
      font-size: 0.95rem;
      opacity: 0.82;
      margin: 0;
      max-width: 56ch;
    }

    /* ---------- WRITING (slight variation: serif titles, ochre status) ---------- */
    /* Add this new class to handle the right-aligned tab text */
    .tab-meta-right {
      position: absolute;
      top: 1.85rem; /* Aligns perfectly with the first item's heading */
      right: 0;
      font-family: var(--font-mono);
      font-size: 0.72rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--river-deep);
      text-align: right;
    }

    /* ---------- WRITING (Updated: Sans-serif, normal style, thicker) ---------- */
    .writing-list .item .body h3 {
      font-style: normal; /* Removes the italic */
      font-family: var(--font-body); /* Switches to your main font to allow for thickness */
      font-weight: 500; /* Makes the text thicker */
      font-size: 1.15rem; /* Adjusted slightly for the new font family */
      margin-bottom: 0.5rem;
      line-height: 1.3;
      max-width: 40ch;
      color: var(--ink);
    }

    .writing-list .item .body .status {
      font-family: var(--font-mono);
      font-size: 0.7rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ochre);
    }

    /* ---------- CONTACT ---------- */
    .contact { padding-bottom: 7rem; }
    .contact-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 2.5rem 4rem;
      max-width: 820px;
    }
    .contact-grid .label {
      font-family: var(--font-mono);
      font-size: 0.7rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ink-mute);
      margin-bottom: 0.6rem;
    }
    .contact-grid .value {
      font-family: var(--font-display);
      font-style: italic;
      font-size: 1.25rem;
      line-height: 1.3;
      color: var(--ink);
    }

    .cv-button {
      display: inline-block;
      margin-top: 1.5rem;
      padding: 0.85rem 1.6rem;
      border: 1px solid var(--ink);
      border-radius: 0;
      font-family: var(--font-mono);
      font-size: 0.78rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink);
      background: transparent;
      transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    }
    .cv-button:hover {
      background: var(--ink);
      color: var(--cream);
      border-color: var(--ink);
    }

    /* ---------- Slot machine ---------- */

    /* New specific styling for the cycler text */
    .em-cycler {
      font-style: normal;
      font-family: var(--font-mono);
      font-size: 1.05em;
      color: #b07300; /* Try var(--line-purple) or var(--ink) as alternatives */
    }

    /* Slot machine text cycler */
    #focus-cycler {
      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
    }

    .slot-slide-up {
      opacity: 0;
      transform: translateY(-10px);
    }

    .slot-prepare-bottom {
      transition: none !important; 
      opacity: 0;
      transform: translateY(10px);
    }

    /* --- Image Cycler Box --- */
    .cycler-viz .slide {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 1s ease-in-out;
      pointer-events: none; /* Lets clicks pass through to the main link */
    }
    
    .cycler-viz .slide.active {
      opacity: 1;
    }

    .cycler-viz .slide img {
      width: 100%;
      height: 100%;
      object-fit: cover; 
      display: block;
    }


    /* --- The Glowing Text Trigger --- */
    .alive-text {
      /* Blends in with normal paragraph text */
      color: var(--ink-body); 
      cursor: pointer;
      position: relative;
      display: inline-block;
      
      /* A very faint, mysterious dark glow */
      animation: alive-pulse 2.5s infinite alternate;
      transition: transform 0.2s ease, text-shadow 0.2s ease;
      
      /* --- The Barber Pole Setup --- */
      /* We use your exact accent palette for a cohesive rainbow */
      background-image: repeating-linear-gradient(
        -45deg, 
        var(--line-red) 0%, 
        var(--ochre) 15%, 
        var(--line-blue) 30%, 
        var(--line-purple) 45%,
        var(--line-red) 60%
      );
      background-size: 200% auto;
      -webkit-background-clip: text;
      background-clip: text;
    }

    .alive-text:hover {
      /* Making the text transparent reveals the moving background */
      color: transparent; 
      transform: scale(1.02);
      /* Removes the dark shadow so the colors pop cleanly */
      text-shadow: none; 
      /* Triggers the sliding gradient */
      animation: barber-pole 1.5s linear infinite; 
    }

    /* Subtle idle glow */
    @keyframes alive-pulse {
      0% { text-shadow: 0 0 2px rgba(45, 51, 41, 0.1); }
      100% { text-shadow: 0 0 10px rgba(45, 51, 41, 0.25); }
    }

    /* Sliding background animation */
    @keyframes barber-pole {
      to {
        background-position: 200% center;
      }
    }

    /* --- The Woven Bar Graph --- */
    #data-matrix {
      position: fixed;
      inset: 0;
      z-index: 9999;
      pointer-events: none;
      display: none;
      background: transparent;
      overflow: hidden;
      transition: transform 1.5s cubic-bezier(0.65, 0, 0.35, 1), opacity 1.5s ease;
      
      /* --- ADD THESE 4 LINES FOR GPU ACCELERATION --- */
      will-change: transform, opacity;
      transform: translate3d(0, 0, 0);
      backface-visibility: hidden;
      perspective: 1000px;
    }

    #data-matrix.flush {
      opacity: 0;
    }

    .data-bar {
      position: absolute;
      /* Adds physical depth to the overlapping layers */
      box-shadow: 0 4px 15px rgba(0, 40, 20, 0.15); 
      will-change: transform;
    }

    /* ---------- FOOTER ---------- */
    footer {
      border-top: 1px solid var(--ink-hair);
      padding: 2rem 2.5rem;
      font-family: var(--font-mono);
      font-size: 0.72rem;
      color: var(--ink-mute);
      letter-spacing: 0.06em;
      display: flex;
      justify-content: space-between;
      max-width: var(--max-w);
      margin: 0 auto;
    }

    /* ---------- TABBED WORK SECTION ---------- */
    .tab-bar {
      display: flex;
      gap: 0;
      border-bottom: 1px solid var(--ink-hair);
      margin-bottom: 3rem;
      flex-wrap: wrap;
    }
    .tab {
      background: transparent;
      border: none;
      padding: 1rem 1.75rem;
      font-family: var(--font-mono);
      font-size: 0.8rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ink-mute);
      cursor: pointer;
      border-bottom: 2px solid transparent;
      margin-bottom: -1px;
      transition: color 0.25s ease, border-color 0.25s ease;
    }
    .tab:first-child { padding-left: 0; }
    .tab:hover { color: var(--ink); }
    .tab.active {
      color: var(--ink);
      border-bottom-color: var(--ink);
    }
    .tab-panel { 
      display: none; 
      position: relative; /* Added so the absolute text positions relative to this box */
    }
    
    .tab-panel.active {
      display: block;
      animation: tab-fade-in 0.35s ease both;
    }
    @keyframes tab-fade-in {
      from { opacity: 0; transform: translateY(4px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ---------- IADB NESTED SUB-ROLES ---------- */
    .sub-roles {
      margin-top: 1.4rem;
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }
    .sub-role {
      padding-left: 1.4rem;
      border-left: 1px solid var(--ink-hair);
    }
    .sub-role-header {
      display: flex;
      align-items: baseline;
      gap: 1rem;
      margin-bottom: 0.35rem;
      flex-wrap: wrap;
    }
    .sub-role h4 {
      font-family: var(--font-body);
      font-weight: 500;
      font-size: 0.98rem;
      color: var(--ink);
      margin: 0;
      line-height: 1.3;
    }
    .sub-role .sub-date {
      font-family: var(--font-mono);
      font-size: 0.68rem;
      color: var(--pine);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .sub-role p {
      margin: 0;
      font-size: 0.92rem;
      opacity: 0.8;
      max-width: 56ch;
    }

    /* ---------- PROFESSIONAL VISUALIZATIONS ---------- */
    .sub-role.with-viz {
      display: grid;
      grid-template-columns: 1fr 260px;
      gap: 2rem;
      align-items: start;
    }
    .sub-role.with-viz .sub-role-header,
    .sub-role.with-viz > p { grid-column: 1; }
    .sub-role-viz {
      grid-column: 2;
      grid-row: 1 / span 2;
      align-self: start;
      position: relative;
      display: block;
      width: 100%;
      aspect-ratio: 5 / 4;
      background: var(--cream-soft, #f0ebdb);
      border: 1px solid var(--ink-hair);
      border-radius: 4px;
      overflow: hidden;
      text-decoration: none;
      transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    }
    .sub-role-viz.linked:hover {
      border-color: var(--ink-mute);
      transform: translateY(-1px);
      box-shadow: 0 8px 20px -14px rgba(32, 35, 30, 0.35);
    }
    .viz-canvas {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      pointer-events: none;
    }
    .viz-canvas canvas { display: block; width: 100% !important; height: 100% !important; }
    .viz-fallback {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-mono);
      font-size: 0.68rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ink-mute);
      pointer-events: none;
      transition: opacity 0.5s ease;
    }
    .viz-canvas.viz-loaded ~ .viz-fallback { opacity: 0; }
    .viz-year-badge {
      position: absolute;
      bottom: 0.6rem; left: 0.7rem;
      z-index: 3;
      font-family: var(--font-mono);
      font-size: 0.68rem;
      letter-spacing: 0.12em;
      color: var(--ink);
      background: rgba(232, 226, 210, 0.85);
      padding: 0.2rem 0.5rem;
      border-radius: 2px;
      pointer-events: none;
    }
    .viz-overlay {
      position: absolute; inset: 0;
      display: flex; flex-direction: column; justify-content: flex-end;
      padding: 0.75rem 0.9rem;
      font-family: var(--font-mono);
      font-size: 0.62rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink);
      background: linear-gradient(to top,
        rgba(232, 226, 210, 0.85) 0%,
        rgba(232, 226, 210, 0.4) 45%,
        rgba(232, 226, 210, 0) 75%);
      opacity: 0;
      transition: opacity 0.25s ease;
      pointer-events: none;
    }
    .sub-role-viz:hover .viz-overlay { opacity: 1; }
    .viz-overlay .viz-label { color: var(--ink-body); font-weight: 500; }
    .viz-overlay .viz-cta   { color: var(--river-deep); margin-top: 0.15rem; }

    /* Voxmapp item viz */
    .item.with-viz .body {
      display: grid;
      grid-template-columns: 1fr 260px;
      column-gap: 2rem;       /* space between text and logo/viz only */
      row-gap: 0;             /* let each element's own margin control vertical spacing */
      align-items: start;
      align-content: start;
    }
    /* Title + role-meta stay tight (their own margins already do this);
       the space appears once, right before the body paragraphs begin. */
    .item.with-viz .body > p:first-of-type {
      margin-top: 1rem;
    }
    /* Space between paragraphs themselves */
    .item.with-viz .body > p + p {
      margin-top: 0.9rem;
    }
    .item.with-viz .body > h3,
    .item.with-viz .body > .role-meta,
    .item.with-viz .body > p { grid-column: 1; }
    .item-viz {
      grid-column: 2;
      grid-row: 1 / span 3;
      align-self: start;
      width: 100%;
      aspect-ratio: 5 / 4;
      background: var(--cream-soft, #f0ebdb);
      border: 1px solid var(--ink-hair);
      border-radius: 4px;
      padding: 0.9rem 0.9rem 0.7rem;
      display: flex; flex-direction: column; gap: 0.7rem;
    }
    .dash-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
    .dash-card {
      background: var(--cream);
      border: 1px solid var(--ink-hair);
      border-radius: 3px;
      padding: 0.55rem 0.65rem;
      display: flex; flex-direction: column; gap: 0.15rem;
      min-width: 0;
    }
    .dash-label {
      font-family: var(--font-mono);
      font-size: 0.52rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink-mute);
    }
    .dash-value {
      font-family: var(--font-display);
      font-style: italic;
      font-size: 1.4rem;
      line-height: 1;
      color: var(--ink);
      font-variant-numeric: tabular-nums;
      transition: color 0.6s ease;
    }
    .dash-delta {
      font-family: var(--font-mono);
      font-size: 0.6rem;
      letter-spacing: 0.04em;
      transition: color 0.6s ease;
    }
    .dash-donut { align-items: center; text-align: center; justify-content: center; }
    .dash-donut svg { width: 44px; height: 44px; }
    .dash-donut .donut-arc { transition: stroke-dashoffset 0.9s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.6s ease; }
    .dash-donut-label {
      font-family: var(--font-body);
      font-weight: 500;
      font-size: 0.7rem;
      color: var(--ink);
      margin-top: -0.15rem;
    }
    .dash-chart { flex: 1; min-height: 0; }
    .dash-chart svg { width: 100%; height: 100%; display: block; }
    #vox-bars rect {
      transition: y 0.7s cubic-bezier(0.4, 0, 0.2, 1),
                  height 0.7s cubic-bezier(0.4, 0, 0.2, 1),
                  fill 0.6s ease, opacity 0.6s ease;
    }


    /* RIU geographic-context overlays */
    .viz-map-label {
      position: absolute;
      top: 0.55rem; left: 0.7rem;
      z-index: 3;
      font-family: var(--font-mono);
      font-size: 0.6rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ink-body);
      background: rgba(232, 226, 210, 0.82);
      padding: 0.22rem 0.5rem;
      border-radius: 2px;
      pointer-events: none;
    }
    .viz-map-compass {
      position: absolute;
      top: 0.55rem; right: 0.7rem;
      z-index: 3;
      width: 22px; height: 22px;
      color: var(--ink-mute);
      opacity: 0.75;
      pointer-events: none;
    }
    .viz-map-compass svg { width: 100%; height: 100%; }
    .viz-map-coords {
      position: absolute;
      bottom: 0.55rem; right: 0.7rem;
      z-index: 3;
      font-family: var(--font-mono);
      font-size: 0.52rem;
      letter-spacing: 0.06em;
      color: var(--ink-mute);
      background: rgba(232, 226, 210, 0.75);
      padding: 0.15rem 0.45rem;
      border-radius: 2px;
      pointer-events: none;
    }

    /* Voxmapp cycling dashboard */
    .voxmapp-dash {
      aspect-ratio: 5 / 6;         /* taller than default 5/4 to fit more cards */
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: minmax(0, 1fr);
      gap: 0.5rem;
      padding: 0.7rem;
      overflow: hidden;
    }
    .voxmapp-dash .dash-card {
      padding: 0.4rem 0.55rem;
      gap: 0.1rem;
      opacity: 1;
      transform: scale(1);
      transition: opacity 0.4s ease, transform 0.4s ease;
      overflow: hidden;
      min-height: 0;
    }
    .voxmapp-dash .dash-card.dash-hidden {
      opacity: 0;
      transform: scale(0.85);
      pointer-events: none;
      display: none;
    }
    .voxmapp-dash .dash-value       { font-size: 1.15rem; }
    .voxmapp-dash .dash-value-sm    { font-size: 1rem; }
    .voxmapp-dash .dash-value-tiny  { font-size: 0.7rem; font-style: normal; letter-spacing: 0.02em; }
    .voxmapp-dash .dash-label       { font-size: 0.48rem; }
    .voxmapp-dash .dash-donut svg   { width: 32px; height: 32px; }
    .voxmapp-dash .dash-donut-label { font-size: 0.62rem; }

    /* CIEP specific visual box */
    .sub-role-viz img {
      width: 100%;
      height: 100%;
      object-fit: contain; /* Changed from cover to contain */
      display: block;
      padding: 12px; /* Adds a nice little visual frame around it */
      box-sizing: border-box;
    }
    .ciep-viz img {
      width: 100%;
      height: 100%;
      object-fit: cover; /* Ensures the image fills the box without stretching */
      display: block;
    }


    /* Map card spans both columns */
    .dash-card-map {
      grid-column: 1 / span 2;
      display: flex;
      flex-direction: column;
    }
    .dash-card-map svg {
      flex: 1;
      min-height: 0;
      width: 100%;
      height: 100%;
    }
    .dash-card-map .map-dot {
      transform-origin: center;
      transform-box: fill-box;
      animation: map-dot-pulse 2.4s ease-in-out infinite;
    }
    .dash-card-map .map-dot-1 { animation-delay: 0.3s; }
    .dash-card-map .map-dot-2 { animation-delay: 0.6s; }
    .dash-card-map .map-dot-3 { animation-delay: 0.9s; }
    .dash-card-map .map-dot-4 { animation-delay: 1.2s; }
    .dash-card-map .map-dot-5 { animation-delay: 1.5s; }
    .dash-card-map .map-dot-6 { animation-delay: 1.8s; }
    .dash-card-map .map-dot-7 { animation-delay: 2.1s; }
    @keyframes map-dot-pulse {
      0%, 100% { transform: scale(1); opacity: 0.85; }
      50%      { transform: scale(1.6); opacity: 0.4; }
    }

    /* Bar chart spans both columns */
    .dash-card-bars {
      grid-column: 1 / span 2;
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
    }
    .dash-card-bars svg {
      flex: 1;
      min-height: 0;
      width: 100%;
    }

    /* Sparkline card */
    .dash-card-spark svg {
      width: 100%;
      height: 22px;
      margin-top: 0.15rem;
    }
    .dash-card-spark #vox-spark-path,
    .dash-card-spark #vox-spark-fill {
      transition: d 0.9s ease, stroke 0.6s ease, fill 0.6s ease;
    }

    /* Progress list card */
    .progress-list {
      display: flex;
      flex-direction: column;
      gap: 0.28rem;
      margin-top: 0.15rem;
    }
    .progress-row {
      display: grid;
      grid-template-columns: 30px 1fr;
      gap: 0.4rem;
      align-items: center;
    }
    .progress-name {
      font-family: var(--font-mono);
      font-size: 0.5rem;
      color: var(--ink-body);
    }
    .progress-track {
      height: 4px;
      background: var(--ink-hair);
      border-radius: 2px;
      overflow: hidden;
    }
    .progress-fill {
      height: 100%;
      background: var(--line-purple);
      border-radius: 2px;
      transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1), background 0.6s ease;
    }


    /* Voxmapp: title + role-meta grouped at top, paragraph centered in the rest */
    .item.with-viz .body.voxmapp-body {
      display: grid;
      grid-template-columns: 1fr 260px;
      gap: 2rem;
      align-items: stretch;
    }
    .item.with-viz .body.voxmapp-body > .vox-text {
      grid-column: 1;
      display: flex;
      flex-direction: column;
      min-height: 100%;
    }
    .item.with-viz .body.voxmapp-body > .item-viz { grid-column: 2; grid-row: 1; }
    .vox-text-head { margin-bottom: 0; }
    .vox-text-head h3 { margin: 0; }
    .vox-text > p {
      margin: 0;
      flex: 1;
      display: flex;
      align-items: center;   /* vertically center the paragraph in leftover space */
    }

    @media (max-width: 900px) {
      .voxmapp-dash { aspect-ratio: 5 / 6; }
    }

    @media (max-width: 900px) {
      .sub-role.with-viz,
      .item.with-viz .body,
      .item.with-viz .body.voxmapp-body { grid-template-columns: 1fr; }
      .item.with-viz .body.voxmapp-body > .vox-text { min-height: 0; }
      .vox-text > p { align-items: start; }
      .sub-role-viz, .item-viz {
        grid-column: 1; grid-row: auto; max-width: 340px;
      }
    }


    /* Institution logo squares (Education) — square logo fit without cropping,
       vertically centered beside top-aligned text. */
    .item.with-viz .body > h3,
    .item.with-viz .body > .role-meta,
    .item.with-viz .body > p,
    .item.with-viz .body > .status { grid-column: 1; }
    .item.with-viz .body > .logo-box {
      grid-column: 2;
      grid-row: 1 / span 6;
      align-self: center;       /* center the logo against the text block */
      justify-self: center;
      width: 82%;
      max-width: 215px;
      aspect-ratio: 5 / 4;
      border: 1px solid var(--ink-hair);
      border-radius: 4px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--cream-soft, #f0ebdb);
    }
    .item.with-viz .body > .logo-box img {
      width: 100%;
      height: 100%;
      object-fit: contain;      /* whole logo visible, never cropped */
      display: block;
    }

    /* Publications thesis: cycler square sits to the right, centered on the text */
    .item.with-viz .body > .cycler-viz {
      grid-column: 2;
      grid-row: 1 / span 6;
      align-self: center;
      justify-self: center;
      width: 82%;
      max-width: 215px;
    }

    @media (max-width: 900px) {
      .item.with-viz .body > .logo-box,
      .item.with-viz .body > .cycler-viz {
        grid-column: 1;
        grid-row: auto;
        justify-self: start;
        margin-top: 0.6rem;
      }
    }

    /* ---------- SECTION DIVIDERS ---------- */
    .divider {
      border: 0;
      height: 1px;
      background: rgba(32, 35, 30, 0.08);
      max-width: 1000px;
      margin: 0 auto;
      width: calc(100% - 5rem);
    }

    /* ---------- SECTION CONTINUITY: faint background lines ---------- */
    .section-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
    }
    .section-bg svg {
      width: 100%;
      height: 100%;
      display: block;
    }
    /* Push real content above the background lines */
    section > *:not(.section-bg) { position: relative; z-index: 1; }

        /* ---------- RESPONSIVE ---------- */
    @media (max-width: 720px) {
      nav.top { padding: 1rem 1.25rem; }
      nav.top ul { gap: 1rem; font-size: 0.7rem; }
      section { padding: 5rem 1.5rem; }
      .hero-content { padding: 0 1.5rem; }
      .hero-card { padding: 2rem 1.75rem; }
      .eyebrow .coord { display: none; }
      .item { grid-template-columns: 1fr; gap: 0.5rem; }
      .item .tag { padding-top: 0; }
      .about-grid { grid-template-columns: 1fr; gap: 2rem; }
      .portrait { max-width: 260px; }
      .tab { padding: 0.75rem 1rem; font-size: 0.72rem; }
      .tab:first-child { padding-left: 0; }
      .sub-role { padding-left: 1rem; }
      .divider { width: calc(100% - 3rem); }
      footer { flex-direction: column; gap: 0.5rem; padding: 2rem 1.5rem; }
      .tab-meta-right {
        position: relative;
        top: 0;
        margin-bottom: 1rem;
        text-align: left;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }