# Federico Ramallo

Founder of Density Labs. Host of The PreVetted Podcast. I write economics as fables. Every link in one place: podcast, books, coaching, and Density Labs.

<!DOCTYPE html>
<html lang="en" data-lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="theme-color" id="me-theme-color" content="#f5f1e8" />

  
    /me/ is the link page behind the QR code on Federico's business card.
    Standalone layout on purpose: no site nav, no site footer. A phone scans
    the card, lands here, and taps one thing. Everything else is the shared
    design system (shared.css tokens + Fraunces), scoped under .me-*.

    Bilingual without a second URL: both languages ship in the HTML, Spanish
    is display:none by default, so English renders with JavaScript disabled.
    The head script below applies a stored or browser-detected choice before
    first paint; the toggle at the bottom is revealed only when JS is on.

    Same shape for the theme: the dark palette is a media query on the tokens,
    so prefers-color-scheme works with no JavaScript at all. data-theme is set
    here only when the visitor has actually chosen one, which is what lets the
    page keep following the OS when nothing has been chosen.
  
  <script>
    (function () {
      var d = document.documentElement;
      try {
        var lang = localStorage.getItem('ramallo-me-lang') || (/^es/i.test(navigator.language || '') ? 'es' : 'en');
        if (lang === 'es') { d.setAttribute('data-lang', 'es'); d.setAttribute('lang', 'es'); }
      } catch (e) { /* private mode: stay English */ }
      try {
        var theme = localStorage.getItem('theme');
        if (theme === 'dark' || theme === 'light') { d.setAttribute('data-theme', theme); }
      } catch (e) { /* private mode: follow the OS */ }
      d.className += ' js';
    })();
  </script>

  <link rel="stylesheet" href="?v=">

  

  

  <style>
    /* ============ /me/ LINK PAGE ============ */

    /* ---- palette ----------------------------------------------------------
       Light is the base and is complete on a bare :root, so no colour depends
       on a media query or a [data-theme] block resolving. These repeat the
       shared.css values on purpose: the dark theme is scoped to this page and
       shared.css stays untouched, so the rest of the site is unaffected.
       ---------------------------------------------------------------------- */
    :root {
      --bg: #f5f1e8;
      --paper: #faf6ed;
      --paper-soft: #efe7d4;
      --ink: #1a1612;
      --ink-soft: #3d362d;
      --ink-muted: #6e6457;
      --rust: #9c3f1d;
      --rust-deep: #7a2f15;
      --save-ring: rgba(156,63,29,.14);
      --save-glow: rgba(156,63,29,.30);
      --gold: #a87534;
      --line: #d8cdb8;
      --line-soft: #e8dfc8;
      /* grain: the noise overlay is dark ink, so it has to invert on dark */
      --grain-opacity: 0.04;
      --grain-filter: none;
      --shadow-avatar: 0 6px 24px rgba(26, 22, 18, 0.10);
      --shadow-cover: 0 2px 7px rgba(26, 22, 18, 0.22);
    }

    /* Dark OS preference, unless the visitor has explicitly chosen light. */
    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) {
        --bg: #15120e;
        --paper: #1e1a15;
        --paper-soft: #272119;
        --ink: #f1ece1;
        --ink-soft: #d2c9ba;
        --ink-muted: #9b8f80;
        --rust: #cf7048;
        --rust-deep: #e08a5f;
        --save-ring: rgba(207,112,72,.18);
        --save-glow: rgba(207,112,72,.34);
        --gold: #c69a5a;
        --line: #3a3229;
        --line-soft: #2b251d;
        --grain-opacity: 0.03;
        --grain-filter: invert(1);
        --shadow-avatar: 0 6px 24px rgba(0, 0, 0, 0.5);
        --shadow-cover: 0 2px 8px rgba(0, 0, 0, 0.55);
      }
    }

    /* The toggle wins in both directions. Declared after the media query so it
       outranks it on source order (both selectors weigh the same). */
    :root[data-theme="dark"] {
      --bg: #15120e;
      --paper: #1e1a15;
      --paper-soft: #272119;
      --ink: #f1ece1;
      --ink-soft: #d2c9ba;
      --ink-muted: #9b8f80;
      --rust: #cf7048;
      --rust-deep: #e08a5f;
      --save-ring: rgba(207,112,72,.18);
      --save-glow: rgba(207,112,72,.34);
      --gold: #c69a5a;
      --line: #3a3229;
      --line-soft: #2b251d;
      --grain-opacity: 0.03;
      --grain-filter: invert(1);
      --shadow-avatar: 0 6px 24px rgba(0, 0, 0, 0.5);
      --shadow-cover: 0 2px 8px rgba(0, 0, 0, 0.55);
    }

    /* The page paints its own background from a token: never inherit whatever
       the host default is, or the dark theme shows a white gutter. */
    html { background: var(--bg); }

    body {
      background: var(--bg);
      color: var(--ink);
    }

    body::before {
      opacity: var(--grain-opacity);
      filter: var(--grain-filter);
    }

    .me-wrap {
      position: relative;
      z-index: 2;
      max-width: 440px;
      margin: 0 auto;
      padding: 44px 20px 56px;
    }

    /* ---- identity ---- */
    .me-id { text-align: center; }

    .me-avatar {
      width: 104px;
      height: 104px;
      border-radius: 50%;
      object-fit: cover;
      object-position: 45% 25%;
      border: 1px solid var(--line);
      box-shadow: var(--shadow-avatar);
      display: block;
      margin: 0 auto 22px;
      background: var(--paper-soft);
    }

    .me-id h1 {
      font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif;
      font-weight: 400;
      font-size: clamp(32px, 9vw, 42px);
      line-height: 1.05;
      letter-spacing: -0.025em;
      color: var(--ink);
      margin: 0 0 14px;
    }

    .me-id h1 em {
      font-style: italic;
      color: var(--rust-deep);
    }

    .me-bio {
      font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif;
      font-weight: 300;
      font-size: 17px;
      line-height: 1.5;
      color: var(--ink-soft);
      margin: 0;
      text-wrap: pretty;
    }

    /* ---- round icon rows ---- */
    .me-icons {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      margin: 26px 0 8px;
      padding: 0;
      list-style: none;
    }

    .me-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--paper);
      border: 1px solid var(--line);
      color: var(--ink-soft);
      text-decoration: none;
      transition: color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
    }

    .me-icon svg { width: 18px; height: 18px; display: block; }

    .me-icon:hover {
      color: var(--rust);
      border-color: var(--rust);
      transform: translateY(-2px);
    }

    .me-icons-sm { margin: 12px 0 0; gap: 8px; justify-content: flex-start; }
    .me-icons-sm .me-icon { width: 38px; height: 38px; }
    .me-icons-sm .me-icon svg { width: 15px; height: 15px; }

    /* ---- groups ---- */
    .me-group { margin-top: 38px; }

    .me-label {
      font-family: 'JetBrains Mono', 'JetBrains Mono Fallback', monospace;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--rust);
      margin: 0 0 14px;
      padding-top: 16px;
      border-top: 1px solid var(--line);
    }

    /* ---- link rows ---- */
    .me-row {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr) 14px;
      align-items: center;
      gap: 14px;
      padding: 13px 15px;
      margin-bottom: 9px;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 11px;
      text-decoration: none;
      color: var(--ink);
      transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
    }

    .me-row:hover {
      border-color: var(--rust);
      background: var(--paper-soft);
      transform: translateY(-1px);
    }

    .me-row-ico {
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--rust);
    }

    .me-row-ico svg { width: 20px; height: 20px; display: block; }

    .me-row-cover {
      width: 34px;
      height: auto;
      display: block;
      border-radius: 2px;
      box-shadow: var(--shadow-cover);
      background: var(--paper-soft);
    }

    .me-row-text { min-width: 0; }

    .me-row-title {
      display: block;
      font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif;
      font-weight: 500;
      font-size: 16px;
      line-height: 1.3;
      color: var(--ink);
      letter-spacing: -0.01em;
    }

    .me-row-sub {
      display: block;
      font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif;
      font-weight: 300;
      font-size: 13.5px;
      line-height: 1.4;
      color: var(--ink-muted);
      margin-top: 2px;
    }

    .me-row-chev {
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--line);
      transition: color 0.18s ease, transform 0.18s ease;
    }

    .me-row-chev svg { width: 12px; height: 12px; display: block; }

    .me-row:hover .me-row-chev {
      color: var(--rust);
      transform: translateX(3px);
    }

    /* ---- language + theme toggles (bottom) ---- */
    .me-controls {
      display: none;
      justify-content: center;
      align-items: center;
      gap: 10px;
      margin-top: 40px;
      padding-top: 22px;
      border-top: 1px solid var(--line);
    }

    html.js .me-controls { display: flex; }

    .me-lang {
      display: flex;
      gap: 6px;
    }

    .me-lang-btn,
    .me-theme-btn {
      font-family: 'JetBrains Mono', 'JetBrains Mono Fallback', monospace;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.12em;
      padding: 9px 15px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: var(--paper);
      color: var(--ink-muted);
      cursor: pointer;
      transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    }

    .me-lang-btn:hover,
    .me-theme-btn:hover { color: var(--ink); border-color: var(--rust); }

    .me-lang-btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

    .me-theme-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      padding: 0;
    }

    /* no display here: it would outrank the .me-theme-sun / .me-theme-moon swap below */
    .me-theme-btn svg { width: 15px; height: 15px; }

    /* The icon shows what you get if you press it: moon on light, sun on dark.
       Mirrors the two ways the page can already be dark. */
    .me-theme-sun { display: none; }

    :root[data-theme="dark"] .me-theme-sun { display: block; }
    :root[data-theme="dark"] .me-theme-moon { display: none; }

    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) .me-theme-sun { display: block; }
      :root:not([data-theme="light"]) .me-theme-moon { display: none; }
    }

    .me-foot {
      margin-top: 22px;
      text-align: center;
      font-family: 'JetBrains Mono', 'JetBrains Mono Fallback', monospace;
      font-size: 10px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ink-muted);
    }

    /* ---- bilingual swap: English is the default, Spanish is opt-in ---- */
    .t-es { display: none; }
    html[data-lang="es"] .t-es { display: revert; }
    html[data-lang="es"] .t-en { display: none; }

    /* ---- focus ---- */
    .me-wrap a:focus-visible,
    .me-lang-btn:focus-visible,
    .me-theme-btn:focus-visible {
      outline: 2px solid var(--rust);
      outline-offset: 3px;
    }

    /* Add to contacts: the one action on the card, so it carries weight
       the other icons do not: same diameter as its neighbours, filled and
       ringed. Declared after the base .me-icon rules and outside every
       media query, or the cascade eats it. */
    .me-icons a.me-icon-save {
      background: var(--rust);
      border-color: var(--rust);
      color: var(--paper);
      box-shadow: 0 0 0 4px var(--save-ring), 0 4px 14px var(--save-glow);
    }
    .me-icons a.me-icon-save:hover {
      background: var(--rust-deep);
      border-color: var(--rust-deep);
      color: var(--paper);
      transform: translateY(-2px);
      box-shadow: 0 0 0 5px var(--save-ring), 0 8px 20px var(--save-glow);
    }

    @media (max-width: 360px) {
      .me-wrap { padding-left: 14px; padding-right: 14px; }
      .me-row { grid-template-columns: 30px minmax(0, 1fr) 12px; gap: 11px; padding: 12px; }
      .me-icon { width: 40px; height: 40px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .me-icon, .me-row, .me-row-chev { transition: none; }
      .me-icon:hover, .me-row:hover { transform: none; }
      .me-icons a.me-icon-save:hover { transform: none; }
      .me-row:hover .me-row-chev { transform: none; }
    }
  </style>
</head>
<body>
  

   Bootstrap Icons 1.11.3, inlined as a sprite. No icon-font dependency. 
  <svg aria-hidden="true" focusable="false" style="position:absolute;width:0;height:0;overflow:hidden">
    <symbol id="i-linkedin" viewBox="0 0 16 16"><path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z"/></symbol>
    <symbol id="i-instagram" viewBox="0 0 16 16"><path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334"/></symbol>
    <symbol id="i-twitter-x" viewBox="0 0 16 16"><path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z"/></symbol>
    <symbol id="i-youtube" viewBox="0 0 16 16"><path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z"/></symbol>
    <symbol id="i-spotify" viewBox="0 0 16 16"><path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0m3.669 11.538a.5.5 0 0 1-.686.165c-1.879-1.147-4.243-1.407-7.028-.77a.499.499 0 0 1-.222-.973c3.048-.696 5.662-.397 7.77.892a.5.5 0 0 1 .166.686m.979-2.178a.624.624 0 0 1-.858.205c-2.15-1.321-5.428-1.704-7.972-.932a.625.625 0 0 1-.362-1.194c2.905-.881 6.517-.454 8.986 1.063a.624.624 0 0 1 .206.858m.084-2.268C10.154 5.56 5.9 5.419 3.438 6.166a.748.748 0 1 1-.434-1.432c2.825-.857 7.523-.692 10.492 1.07a.747.747 0 1 1-.764 1.288"/></symbol>
    <symbol id="i-apple" viewBox="0 0 16 16"><path d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516s1.52.087 2.475-1.258.762-2.391.728-2.43m3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422s1.675-2.789 1.698-2.854-.597-.79-1.254-1.157a3.7 3.7 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56s.625 1.924 1.273 2.796c.576.984 1.34 1.667 1.659 1.899s1.219.386 1.843.067c.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758q.52-1.185.473-1.282"/></symbol>
    <symbol id="i-globe2" viewBox="0 0 16 16"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m7.5-6.923c-.67.204-1.335.82-1.887 1.855q-.215.403-.395.872c.705.157 1.472.257 2.282.287zM4.249 3.539q.214-.577.481-1.078a7 7 0 0 1 .597-.933A7 7 0 0 0 3.051 3.05q.544.277 1.198.49zM3.509 7.5c.036-1.07.188-2.087.436-3.008a9 9 0 0 1-1.565-.667A6.96 6.96 0 0 0 1.018 7.5zm1.4-2.741a12.3 12.3 0 0 0-.4 2.741H7.5V5.091c-.91-.03-1.783-.145-2.591-.332ZM8.5 5.09V7.5h2.99a12.3 12.3 0 0 0-.399-2.741c-.808.187-1.681.301-2.591.332zM4.51 8.5c.035.987.176 1.914.399 2.741A13.6 13.6 0 0 1 7.5 10.91V8.5zm3.99 0v2.409c.91.03 1.783.145 2.591.332.223-.827.364-1.754.4-2.741zm-3.282 3.696q.18.469.395.872c.552 1.035 1.218 1.65 1.887 1.855V11.91c-.81.03-1.577.13-2.282.287zm.11 2.276a7 7 0 0 1-.598-.933 9 9 0 0 1-.481-1.079 8.4 8.4 0 0 0-1.198.49 7 7 0 0 0 2.276 1.522zm-1.383-2.964A13.4 13.4 0 0 1 3.508 8.5h-2.49a6.96 6.96 0 0 0 1.362 3.675c.47-.258.995-.482 1.565-.667m6.728 2.964a7 7 0 0 0 2.275-1.521 8.4 8.4 0 0 0-1.197-.49 9 9 0 0 1-.481 1.078 7 7 0 0 1-.597.933M8.5 11.909v3.014c.67-.204 1.335-.82 1.887-1.855q.216-.403.395-.872A12.6 12.6 0 0 0 8.5 11.91zm3.555-.401c.57.185 1.095.409 1.565.667A6.96 6.96 0 0 0 14.982 8.5h-2.49a13.4 13.4 0 0 1-.437 3.008M14.982 7.5a6.96 6.96 0 0 0-1.362-3.675c-.47.258-.995.482-1.565.667.248.92.4 1.938.437 3.008zM11.27 2.461q.266.502.482 1.078a8.4 8.4 0 0 0 1.196-.49 7 7 0 0 0-2.275-1.52c.218.283.418.597.597.932m-.488 1.343a8 8 0 0 0-.395-.872C9.835 1.897 9.17 1.282 8.5 1.077V4.09c.81-.03 1.577-.13 2.282-.287z"/></symbol>
    <symbol id="i-envelope-fill" viewBox="0 0 16 16"><path d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414zM0 4.697v7.104l5.803-3.558zM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586zm3.436-.586L16 11.801V4.697z"/></symbol>
    <symbol id="i-buildings" viewBox="0 0 16 16"><path d="M14.763.075A.5.5 0 0 1 15 .5v15a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5V14h-1v1.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V10a.5.5 0 0 1 .342-.474L6 7.64V4.5a.5.5 0 0 1 .276-.447l8-4a.5.5 0 0 1 .487.022M6 8.694 1 10.36V15h5zM7 15h2v-1.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5V15h2V1.309l-7 3.5z"/><path d="M2 11h1v1H2zm2 0h1v1H4zm-2 2h1v1H2zm2 0h1v1H4zm4-4h1v1H8zm2 0h1v1h-1zm-2 2h1v1H8zm2 0h1v1h-1zm2-2h1v1h-1zm0 2h1v1h-1zM8 7h1v1H8zm2 0h1v1h-1zm2 0h1v1h-1zM8 5h1v1H8zm2 0h1v1h-1zm2 0h1v1h-1zm0-2h1v1h-1z"/></symbol>
    <symbol id="i-clipboard2-check" viewBox="0 0 16 16"><path d="M9.5 0a.5.5 0 0 1 .5.5.5.5 0 0 0 .5.5.5.5 0 0 1 .5.5V2a.5.5 0 0 1-.5.5h-5A.5.5 0 0 1 5 2v-.5a.5.5 0 0 1 .5-.5.5.5 0 0 0 .5-.5.5.5 0 0 1 .5-.5z"/><path d="M3 2.5a.5.5 0 0 1 .5-.5H4a.5.5 0 0 0 0-1h-.5A1.5 1.5 0 0 0 2 2.5v12A1.5 1.5 0 0 0 3.5 16h9a1.5 1.5 0 0 0 1.5-1.5v-12A1.5 1.5 0 0 0 12.5 1H12a.5.5 0 0 0 0 1h.5a.5.5 0 0 1 .5.5v12a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5z"/><path d="M10.854 7.854a.5.5 0 0 0-.708-.708L7.5 9.793 6.354 8.646a.5.5 0 1 0-.708.708l1.5 1.5a.5.5 0 0 0 .708 0z"/></symbol>
    <symbol id="i-compass" viewBox="0 0 16 16"><path d="M8 16.016a7.5 7.5 0 0 0 1.962-14.74A1 1 0 0 0 9 0H7a1 1 0 0 0-.962 1.276A7.5 7.5 0 0 0 8 16.016m6.5-7.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0"/><path d="m6.94 7.44 4.95-2.83-2.83 4.95-4.949 2.83 2.828-4.95z"/></symbol>
    <symbol id="i-people-fill" viewBox="0 0 16 16"><path d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5.784 6A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5"/></symbol>
    <symbol id="i-person-video3" viewBox="0 0 16 16"><path d="M14 9.5a2 2 0 1 1-4 0 2 2 0 0 1 4 0m-6 5.7c0 .8.8.8.8.8h6.4s.8 0 .8-.8-.8-3.2-4-3.2-4 2.4-4 3.2"/><path d="M2 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h5.243c.122-.326.295-.668.526-1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v7.81c.353.23.656.496.91.783Q16 12.312 16 12V4a2 2 0 0 0-2-2z"/></symbol>
    <symbol id="i-person-plus-fill" viewBox="0 0 16 16"><path d="M1 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6"/><path fill-rule="evenodd" d="M13.5 5a.5.5 0 0 1 .5.5V7h1.5a.5.5 0 0 1 0 1H14v1.5a.5.5 0 0 1-1 0V8h-1.5a.5.5 0 0 1 0-1H13V5.5a.5.5 0 0 1 .5-.5"/></symbol>
    <symbol id="i-mic-fill" viewBox="0 0 16 16"><path d="M5 3a3 3 0 0 1 6 0v5a3 3 0 0 1-6 0z"/><path d="M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5"/></symbol>
    <symbol id="i-journal-bookmark-fill" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M6 1h6v7a.5.5 0 0 1-.757.429L9 7.083 6.757 8.43A.5.5 0 0 1 6 8z"/><path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2"/><path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1z"/></symbol>
    <symbol id="i-sun-fill" viewBox="0 0 16 16"><path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0m9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708"/></symbol>
    <symbol id="i-moon-stars-fill" viewBox="0 0 16 16"><path d="M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277q.792-.001 1.533-.16a.79.79 0 0 1 .81.316.73.73 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278"/><path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.73 1.73 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.73 1.73 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.73 1.73 0 0 0 1.097-1.097zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.16 1.16 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.16 1.16 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732z"/></symbol>
    <symbol id="i-chevron-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"/></symbol>
  </svg>

  <main class="me-wrap" id="main">

    <!-- IDENTITY -->
    <header class="me-id">
      <picture>
        <source type="image/webp" srcset="">
        <img class="me-avatar" src="" alt="Federico Ramallo" width="104" height="104" fetchpriority="high" decoding="async">
      </picture>
      <h1>Federico <em>Ramallo</em></h1>
      <p class="me-bio">
        <span class="t-en">Founder of Density Labs. Host of The PreVetted Podcast. I write economics as fables.</span><span class="t-es" lang="es">Fundador de Density Labs. Conductor de The PreVetted Podcast. Escribo economía como fábulas.</span>
      </p>

      <ul class="me-icons">
        <li><a class="me-icon" href="https://www.linkedin.com/in/framallo/" aria-label="Federico Ramallo on LinkedIn" target="_blank" rel="noopener"><svg aria-hidden="true" focusable="false"><use href="#i-linkedin"/></svg></a></li>
        <li><a class="me-icon" href="https://www.instagram.com/framallo_mx/" aria-label="Federico Ramallo on Instagram" target="_blank" rel="noopener"><svg aria-hidden="true" focusable="false"><use href="#i-instagram"/></svg></a></li>
        <li><a class="me-icon" href="https://x.com/framallo" aria-label="Federico Ramallo on X" target="_blank" rel="noopener"><svg aria-hidden="true" focusable="false"><use href="#i-twitter-x"/></svg></a></li>
        <li><a class="me-icon" href="" aria-label="ramallo.io"><svg aria-hidden="true" focusable="false"><use href="#i-globe2"/></svg></a></li>
        <li><a class="me-icon" href="mailto:federico@ramallo.io" aria-label="Email federico@ramallo.io"><svg aria-hidden="true" focusable="false"><use href="#i-envelope-fill"/></svg></a></li>
        <li>
          <a class="me-icon me-icon-save" href="/federico.vcf" download="federico-ramallo.vcf"
             aria-label="Add to contacts">
            <svg aria-hidden="true" focusable="false"><use href="#i-person-plus-fill"/></svg>
          </a>
        </li>
      </ul>
    </header>

    <!-- THE PREVETTED PODCAST -->
    <section class="me-group">
      <h2 class="me-label">The PreVetted Podcast</h2>

      <a class="me-row" href="https://prevetted.fm">
        <span class="me-row-ico"><svg aria-hidden="true" focusable="false"><use href="#i-mic-fill"/></svg></span>
        <span class="me-row-text">
          <span class="me-row-title"><span class="t-en">Listen to the show</span><span class="t-es" lang="es">Escuchá el podcast</span></span>
          <span class="me-row-sub"><span class="t-en">Conversations with engineering leaders</span><span class="t-es" lang="es">Conversaciones con líderes de ingeniería</span></span>
        </span>
        <span class="me-row-chev"><svg aria-hidden="true" focusable="false"><use href="#i-chevron-right"/></svg></span>
      </a>

      <a class="me-row" href="https://prevetted.fm/become-a-guest/">
        <span class="me-row-ico"><svg aria-hidden="true" focusable="false"><use href="#i-person-plus-fill"/></svg></span>
        <span class="me-row-text">
          <span class="me-row-title"><span class="t-en">Pitch yourself as a guest</span><span class="t-es" lang="es">Postulate como invitado</span></span>
          <span class="me-row-sub"><span class="t-en">Come on The PreVetted Podcast</span><span class="t-es" lang="es">Vení a The PreVetted Podcast</span></span>
        </span>
        <span class="me-row-chev"><svg aria-hidden="true" focusable="false"><use href="#i-chevron-right"/></svg></span>
      </a>

      <ul class="me-icons me-icons-sm">
        <li><a class="me-icon" href="https://www.youtube.com/@PreVettedPodcast" aria-label="The PreVetted Podcast on YouTube" target="_blank" rel="noopener"><svg aria-hidden="true" focusable="false"><use href="#i-youtube"/></svg></a></li>
        <li><a class="me-icon" href="https://open.spotify.com/show/6BRsI17RhePRjaHccEJ7md" aria-label="The PreVetted Podcast on Spotify" target="_blank" rel="noopener"><svg aria-hidden="true" focusable="false"><use href="#i-spotify"/></svg></a></li>
        <li><a class="me-icon" href="https://podcasts.apple.com/us/podcast/irregex-podcast/id1704941487" aria-label="The PreVetted Podcast on Apple Podcasts" target="_blank" rel="noopener"><svg aria-hidden="true" focusable="false"><use href="#i-apple"/></svg></a></li>
        <li><a class="me-icon" href="https://www.instagram.com/prevettedpodcast/" aria-label="The PreVetted Podcast on Instagram" target="_blank" rel="noopener"><svg aria-hidden="true" focusable="false"><use href="#i-instagram"/></svg></a></li>
        <li><a class="me-icon" href="https://x.com/PrevettedPod" aria-label="The PreVetted Podcast on X" target="_blank" rel="noopener"><svg aria-hidden="true" focusable="false"><use href="#i-twitter-x"/></svg></a></li>
        <li><a class="me-icon" href="https://www.linkedin.com/company/prevetted-podcast/" aria-label="The PreVetted Podcast on LinkedIn" target="_blank" rel="noopener"><svg aria-hidden="true" focusable="false"><use href="#i-linkedin"/></svg></a></li>
      </ul>
    </section>

    <!-- WORK -->
    <section class="me-group">
      <h2 class="me-label"><span class="t-en">Work</span><span class="t-es" lang="es">Trabajo</span></h2>

      <a class="me-row" href="https://densitylabs.io">
        <span class="me-row-ico"><svg aria-hidden="true" focusable="false"><use href="#i-buildings"/></svg></span>
        <span class="me-row-text">
          <span class="me-row-title">Density Labs</span>
          <span class="me-row-sub"><span class="t-en">AI engineering for US mid-market teams</span><span class="t-es" lang="es">Ingeniería de IA para equipos del mid-market de Estados Unidos</span></span>
        </span>
        <span class="me-row-chev"><svg aria-hidden="true" focusable="false"><use href="#i-chevron-right"/></svg></span>
      </a>

      <a class="me-row" href="https://densitylabs.io/ai-readiness-assessment/">
        <span class="me-row-ico"><svg aria-hidden="true" focusable="false"><use href="#i-clipboard2-check"/></svg></span>
        <span class="me-row-text">
          <span class="me-row-title"><span class="t-en">Get your AI Readiness Assessment</span><span class="t-es" lang="es">Pedí tu AI Readiness Assessment</span></span>
          <span class="me-row-sub"><span class="t-en">A two-week read on what is actually shippable</span><span class="t-es" lang="es">Dos semanas para saber qué se puede llevar a producción</span></span>
        </span>
        <span class="me-row-chev"><svg aria-hidden="true" focusable="false"><use href="#i-chevron-right"/></svg></span>
      </a>
    </section>

    <!-- ENGINEERING LEADERSHIP -->
    <section class="me-group">
      <h2 class="me-label"><span class="t-en">Engineering leadership</span><span class="t-es" lang="es">Liderazgo en ingeniería</span></h2>

      <a class="me-row" href="">
        <span class="me-row-ico"><svg aria-hidden="true" focusable="false"><use href="#i-compass"/></svg></span>
        <span class="me-row-text">
          <span class="me-row-title"><span class="t-en">Work with me</span><span class="t-es" lang="es">Trabajá conmigo</span></span>
          <span class="me-row-sub"><span class="t-en">1:1 coaching for engineering leaders</span><span class="t-es" lang="es">Coaching 1:1 para líderes de ingeniería</span></span>
        </span>
        <span class="me-row-chev"><svg aria-hidden="true" focusable="false"><use href="#i-chevron-right"/></svg></span>
      </a>

      <a class="me-row" href="">
        <span class="me-row-ico"><svg aria-hidden="true" focusable="false"><use href="#i-people-fill"/></svg></span>
        <span class="me-row-text">
          <span class="me-row-title">The Distance Circle</span>
          <span class="me-row-sub"><span class="t-en">50 VPs of Engineering, opening Q4 2026</span><span class="t-es" lang="es">50 VPs de Ingeniería, abre en el Q4 de 2026</span></span>
        </span>
        <span class="me-row-chev"><svg aria-hidden="true" focusable="false"><use href="#i-chevron-right"/></svg></span>
      </a>

      <a class="me-row" href="">
        <span class="me-row-ico"><svg aria-hidden="true" focusable="false"><use href="#i-person-video3"/></svg></span>
        <span class="me-row-text">
          <span class="me-row-title"><span class="t-en">Have me on your show</span><span class="t-es" lang="es">Invitame a tu programa</span></span>
          <span class="me-row-sub"><span class="t-en">Guest one-sheet, topics and questions</span><span class="t-es" lang="es">One-sheet de invitado, temas y preguntas</span></span>
        </span>
        <span class="me-row-chev"><svg aria-hidden="true" focusable="false"><use href="#i-chevron-right"/></svg></span>
      </a>
    </section>

    <!-- WRITING -->
    <section class="me-group">
      <h2 class="me-label"><span class="t-en">Writing</span><span class="t-es" lang="es">Escritura</span></h2>

      
        The fables exist in two editions with different titles, covers and URLs,
        so the whole row list is duplicated rather than swapping strings.
        The Invisible Distance has no Spanish edition; it stays English in both.
      
      <div class="t-en">
        <a class="me-row" href="">
          <picture>
            <source type="image/webp" srcset="">
            <img class="me-row-cover" src="" alt="" width="517" height="800" loading="lazy" decoding="async">
          </picture>
          <span class="me-row-text">
            <span class="me-row-title">The Invisible Distance</span>
            <span class="me-row-sub">Leading teams across borders, pre-order</span>
          </span>
          <span class="me-row-chev"><svg aria-hidden="true" focusable="false"><use href="#i-chevron-right"/></svg></span>
        </a>

        <a class="me-row" href="">
          <picture>
            <source type="image/webp" srcset="">
            <img class="me-row-cover" src="" alt="" width="625" height="1000" loading="lazy" decoding="async">
          </picture>
          <span class="me-row-text">
            <span class="me-row-title">No Silver on Rat Island</span>
            <span class="me-row-sub">Inflation as a fable. EN and ES</span>
          </span>
          <span class="me-row-chev"><svg aria-hidden="true" focusable="false"><use href="#i-chevron-right"/></svg></span>
        </a>

        <a class="me-row" href="">
          <picture>
            <source type="image/webp" srcset="">
            <img class="me-row-cover" src="" alt="" width="750" height="1200" loading="lazy" decoding="async">
          </picture>
          <span class="me-row-text">
            <span class="me-row-title">The Wealth of the Island</span>
            <span class="me-row-sub">Adam Smith for ages 8 to 12</span>
          </span>
          <span class="me-row-chev"><svg aria-hidden="true" focusable="false"><use href="#i-chevron-right"/></svg></span>
        </a>

        <a class="me-row" href="">
          <picture>
            <source type="image/webp" srcset="">
            <img class="me-row-cover" src="" alt="" width="750" height="1200" loading="lazy" decoding="async">
          </picture>
          <span class="me-row-text">
            <span class="me-row-title">From Menger to Milei</span>
            <span class="me-row-sub">The Austrian School, no jargon</span>
          </span>
          <span class="me-row-chev"><svg aria-hidden="true" focusable="false"><use href="#i-chevron-right"/></svg></span>
        </a>

        <a class="me-row" href="">
          <picture>
            <source type="image/webp" srcset="">
            <img class="me-row-cover" src="" alt="" width="617" height="800" loading="lazy" decoding="async">
          </picture>
          <span class="me-row-text">
            <span class="me-row-title">Open the Valve</span>
            <span class="me-row-sub">Creativity, adapted into Spanish</span>
          </span>
          <span class="me-row-chev"><svg aria-hidden="true" focusable="false"><use href="#i-chevron-right"/></svg></span>
        </a>

        <a class="me-row" href="">
          <span class="me-row-ico"><svg aria-hidden="true" focusable="false"><use href="#i-journal-bookmark-fill"/></svg></span>
          <span class="me-row-text">
            <span class="me-row-title">All books</span>
            <span class="me-row-sub">Every title, English and Spanish</span>
          </span>
          <span class="me-row-chev"><svg aria-hidden="true" focusable="false"><use href="#i-chevron-right"/></svg></span>
        </a>
      </div>

      <div class="t-es" lang="es">
        <a class="me-row" href="">
          <picture>
            <source type="image/webp" srcset="">
            <img class="me-row-cover" src="" alt="" width="517" height="800" loading="lazy" decoding="async">
          </picture>
          <span class="me-row-text">
            <span class="me-row-title" lang="en">The Invisible Distance</span>
            <span class="me-row-sub">Liderar equipos a través de fronteras, en preventa</span>
          </span>
          <span class="me-row-chev"><svg aria-hidden="true" focusable="false"><use href="#i-chevron-right"/></svg></span>
        </a>

        <a class="me-row" href="">
          <picture>
            <source type="image/webp" srcset="">
            <img class="me-row-cover" src="" alt="" width="625" height="1000" loading="lazy" decoding="async">
          </picture>
          <span class="me-row-text">
            <span class="me-row-title">No hay plata en la isla de las ratas</span>
            <span class="me-row-sub">La inflación contada como fábula</span>
          </span>
          <span class="me-row-chev"><svg aria-hidden="true" focusable="false"><use href="#i-chevron-right"/></svg></span>
        </a>

        <a class="me-row" href="">
          <picture>
            <source type="image/webp" srcset="">
            <img class="me-row-cover" src="" alt="" width="750" height="1200" loading="lazy" decoding="async">
          </picture>
          <span class="me-row-text">
            <span class="me-row-title">La riqueza de la isla</span>
            <span class="me-row-sub">Adam Smith para chicos de 8 a 12 años</span>
          </span>
          <span class="me-row-chev"><svg aria-hidden="true" focusable="false"><use href="#i-chevron-right"/></svg></span>
        </a>

        <a class="me-row" href="">
          <picture>
            <source type="image/webp" srcset="">
            <img class="me-row-cover" src="" alt="" width="750" height="1200" loading="lazy" decoding="async">
          </picture>
          <span class="me-row-text">
            <span class="me-row-title">De Menger a Milei</span>
            <span class="me-row-sub">La Escuela Austríaca, sin jerga</span>
          </span>
          <span class="me-row-chev"><svg aria-hidden="true" focusable="false"><use href="#i-chevron-right"/></svg></span>
        </a>

        <a class="me-row" href="">
          <picture>
            <source type="image/webp" srcset="">
            <img class="me-row-cover" src="" alt="" width="617" height="800" loading="lazy" decoding="async">
          </picture>
          <span class="me-row-text">
            <span class="me-row-title">Abre la válvula</span>
            <span class="me-row-sub">Creatividad, adaptado al español</span>
          </span>
          <span class="me-row-chev"><svg aria-hidden="true" focusable="false"><use href="#i-chevron-right"/></svg></span>
        </a>

        <a class="me-row" href="">
          <span class="me-row-ico"><svg aria-hidden="true" focusable="false"><use href="#i-journal-bookmark-fill"/></svg></span>
          <span class="me-row-text">
            <span class="me-row-title">Todos los libros</span>
            <span class="me-row-sub">Cada título, en inglés y en español</span>
          </span>
          <span class="me-row-chev"><svg aria-hidden="true" focusable="false"><use href="#i-chevron-right"/></svg></span>
        </a>
      </div>
    </section>

    <!-- LANGUAGE + THEME -->
    <div class="me-controls">
      <div class="me-lang" role="group" aria-label="Language / Idioma">
        <button type="button" class="me-lang-btn" data-set-lang="en" aria-pressed="true">EN</button>
        <button type="button" class="me-lang-btn" data-set-lang="es" aria-pressed="false">ES</button>
      </div>
      <button type="button" class="me-theme-btn" id="me-theme-toggle" aria-label="Switch to dark theme">
        <svg class="me-theme-moon" aria-hidden="true" focusable="false"><use href="#i-moon-stars-fill"/></svg>
        <svg class="me-theme-sun" aria-hidden="true" focusable="false"><use href="#i-sun-fill"/></svg>
      </button>
    </div>

    <p class="me-foot">ramallo.io/me</p>
  </main>

  <script>
    (function () {
      var d = document.documentElement;
      var btns = document.querySelectorAll('[data-set-lang]');

      function apply(lang) {
        d.setAttribute('data-lang', lang);
        d.setAttribute('lang', lang);
        for (var i = 0; i < btns.length; i++) {
          btns[i].setAttribute('aria-pressed', String(btns[i].getAttribute('data-set-lang') === lang));
        }
      }

      apply(d.getAttribute('data-lang') || 'en');

      for (var i = 0; i < btns.length; i++) {
        btns[i].addEventListener('click', function () {
          var lang = this.getAttribute('data-set-lang');
          apply(lang);
          try { localStorage.setItem('ramallo-me-lang', lang); } catch (e) { /* ignore */ }
        });
      }
    })();
  </script>

  <script>
    (function () {
      var d = document.documentElement;
      var btn = document.getElementById('me-theme-toggle');
      var meta = document.getElementById('me-theme-color');
      var dark = window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)') : null;
      var BAR = { light: '#f5f1e8', dark: '#15120e' };

      // No data-theme means "follow the OS", which is what the CSS already does.
      function effective() {
        var set = d.getAttribute('data-theme');
        if (set === 'dark' || set === 'light') { return set; }
        return dark && dark.matches ? 'dark' : 'light';
      }

      function sync() {
        var now = effective();
        btn.setAttribute('aria-label', now === 'dark' ? 'Switch to light theme' : 'Switch to dark theme');
        btn.setAttribute('title', btn.getAttribute('aria-label'));
        if (meta) { meta.setAttribute('content', BAR[now]); }
      }

      btn.addEventListener('click', function () {
        var next = effective() === 'dark' ? 'light' : 'dark';
        d.setAttribute('data-theme', next);
        try { localStorage.setItem('theme', next); } catch (e) { /* ignore */ }
        sync();
      });

      // Keep the icon honest when the OS flips and nothing has been chosen.
      if (dark) {
        if (dark.addEventListener) { dark.addEventListener('change', sync); }
        else if (dark.addListener) { dark.addListener(sync); }
      }

      sync();
    })();
  </script>
</body>
</html>
