/* ============================================================
   Nico Rueda — portfolio · "el cuaderno"
   The page is a page of his notebook: plain white paper, blue biro,
   a garnet pen for corrections and selection, green only for "ok",
   graphite for construction. Every hand stroke on the page is a real
   scan from his notebook used as a mask; the figure frames and the
   drawings inside the figures are drawn by code with the same habits
   (single strokes, corners that cross, 60° hatching).
     PAPEL (light) → white page, navy biro, garnet.
     TINTA (dark)  → the ink becomes the page: deep navy, pale strokes.
   ============================================================ */

:root {
  color-scheme: light;
  /* surfaces */
  --paper: #f6f6f2;
  --sheet: #fdfdfb;
  --rule: #cfd2da;
  --rule-2: #e2e4ea;
  /* text */
  --ink: #161c3b;
  --ink-2: #3b4363;
  --ink-3: #5b6072;           /* graphite: labels, pencil scans */
  /* tools */
  --pen: #243291;             /* blue biro; also what is selected */
  --red: #9b1c33;             /* garnet pen: focus, rival, "not yet" */
  --ok: #1d6a41;              /* green crosses: accepted, copied */
  --pencil: #868a96;          /* graphics only, never text */
  --hatch-a: .16;             /* hatch opacity for hover fills */
  /* aliases the figures read (core.js tokens) */
  --ally: var(--pen);
  --rival: var(--red);
  --marker: var(--red);
  --marker-ink: var(--red);
  --hand: var(--pen);
  --hand-mark: var(--red);
  --sheet-2: var(--sheet);
  /* type */
  --f-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  /* layout */
  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1240px;
  --bar-h: 56px;
  --os: 5px;                  /* how far a hand line runs past a corner */
  /* his ruled underline, pre-inked per theme (an inline background can break across lines) */
  --u-pen: url(../cuaderno/u-long-pen-l.webp);
  --u-red: url(../cuaderno/u-long-red-l.webp);
  --r-ink: url(../cuaderno/r-ink-l.webp);        /* ruled lines, real strokes from the notebook */
  --r-pencil: url(../cuaderno/r-pencil-l.webp);
  --r-red: url(../cuaderno/r-red-l.webp);
  --v-pencil: url(../cuaderno/v-pencil-l.webp);
  --hl: url(../cuaderno/hl-pink-l.webp);         /* his pink highlighter */
  --desk: #e4e3dc;                               /* the table the notebook lies on */
  --papel: url(../cuaderno/papel-l.webp);        /* grain from a blank patch of one of his pages */
  --page-m: clamp(10px, 1.6vw, 24px); --page-r: clamp(14px, 2.8vw, 40px); --page-gap: clamp(12px, 1.8vw, 26px);
  --sel: #f7c1ee;                                /* text selection: his pink highlighter */
  --cut: transparent;                            /* paper scrap behind colour pieces (dark only) */
  --cut-k: var(--ink);
  /* his boxes, cut into nine-slice masks: «consola» (notebook page 12) and a storyboard panel (page 05) */
  --hbs-tl: url("data:image/webp;base64,UklGRl4BAABXRUJQVlA4WAoAAAAQAAAAGwAAGwAAQUxQSBIBAAARkCrbtmpH6+x9w6wZHIOKY7LsIukH4lP5gjSzbNWKLJNmZnLM3feefVbTvS/oI2ICsFNKpKKRqq6HYAMFPRdX245dGBwZzk209x1TAeeyObxibOa9mUEAzRJhKY7535AA5dVwGfKxxu8kgxnpWp5wHpIm6PvBxCckPx/BHMPrAkgKBCNnSb69c7wa2BdiHih1LgURClb6+5o76qB4QO+55DQNIvjXOeAMLbF9kAyAqooDgIngjXer4LJkHGRCcgqyHq72gVkSTqyPFpyjp/3ogqwDOknSOOh0HbTiGj091xCtB04yodnLRpHcnF6nJ2MuQ3NTjDOQPsyuh6CKJI17IOtR+7+7WEdB9T+Bbzbk1XoAVlA4ICYAAADQAgCdASocABwAPlEkj0WjoiEUBAA4BQS0gAAe0dAAAP78+EAAAA==");
  --hbs-tr: url("data:image/webp;base64,UklGRoQBAABXRUJQVlA4WAoAAAAQAAAAGwAAGwAAQUxQSDcBAAARkLpt2/m/4u/n/Xx+tm3O9iqbjbS0xVXbSc1m/tXZNiuT9eoeP583IiZAAIgAEAUIUld2AlEsglhBUnSNnjekvBAA6oB6SLKFy47v23N39/pFZ/zmvRdGQBJ9vfWDnqTj319XZkESvD+w+T3586c31MaSCxAl6DNy7IanV0jSk9R+TSJAtfWdsPfsqQ/0pOHSRCoCkIMdl0f0eEvDJYkAiAhWf8F2ahouTgOIFI9ruElHzemI0wAKm2jp/IMikVSi4svO0vI8YqSPpIeWjs8KIekycJKGluckRojT/7gOkQBy5i//MBchcIKG1H4q4lQieTdpSc1ZASJMoiW9f90fKsBkGtJyMyIEGPevSxKHGPKvPQigcIiWdL4VKsQrOtJxUJh7dPT+XWOYB3Q0PA6RUJq7JQNJAQBWUDggJgAAANACAJ0BKhwAHAA+USSPRaOiIRQEADgFBLSAAB7R0AAA/vz4QAAA");
  --hbs-bl: url("data:image/webp;base64,UklGRo4BAABXRUJQVlA4WAoAAAAQAAAAGwAAGwAAQUxQSEEBAAARkGttmyIp3181q5G7RVjkEDlchEUQsURk7pK7u7uTuXs0h8zd3aGr6v+QNu4gIiYA/5ZgEiMy4iqUIHOKlf9lbT5d/zgegslj8j8R16Ikm8GgT6qMuAyl2WBQZKDjYWMkB7nFQM+LFnkg7jDyU33TCZNHMeZdRz53Geh5RiDZLCbQkcH1gMljMB29Xqqzks3gJgMjLkaJCCBGIGKTttAz4hJUAiVWAINki/H0DOFeL5TVABjYjPbarqRh6sjAZ3OvvZi3Yj8frr39ikmj6EgGpg5xUqg6p56kRkEj56kueBeHEuyiY1rVQCbJMY1TJQNJ3tiYIDKOGkN6ZSgentgfKZoDHVX57Rn98aOLOtFSkgCL4b/oqNxup5xYvLA3jCClwehr/DSgtVYwZEb/ghGkLqBmWDcAUrDNdRZZLQAjgpQAVlA4ICYAAADQAgCdASocABwAPlEkj0WjoiEUBAA4BQS0gAAe0dAAAP78+EAAAA==");
  --hbs-br: url("data:image/webp;base64,UklGRgoBAABXRUJQVlA4WAoAAAAQAAAAGwAAGwAAQUxQSL0AAAARgGJr2yLk/f+ZwWUD7u7QqdDcqiaSswZL7hote+IQ2YC7JJLz//MiY5UWERMAIKvikJq+ld2MrdGN62cGqD9ZBwZofymtyKs4qL+2B1sr/t3ur4qF/UVSfyonTfJpfarrqAMASHV7QlJ/fX2S5EFvBgCZLA2By6HWTLO1e41/X44HowDLNOBYJNMjAUQuz49NtFR3GtKUAIT4g/xyCMMMiQKAtMoICHiNjIajaVkiIgbBCgQqhIOjEH7+fQEAVlA4ICYAAADQAgCdASocABwAPlEkj0WjoiEUBAA4BQS0gAAe0dAAAP78+EAAAA==");
  --hbs-t: url("data:image/webp;base64,UklGRgQGAABXRUJQVlA4WAoAAAAQAAAA0wAAGwAAQUxQSKkFAAARoIf+/5tG+/7ID3PDigyKFSuiWOxJxSApNig5VBoqLUoMxeJVeiOHzU0pFq883t57773ns0evz9577733vL0vN5J4+98nIhy4bRtJ8Nx7KXYms2+AWy2k+iYESPk5FQZSMCg4NFhAg0mNrKBDBAJEqMtAmnwKBm2KSiXfOmvQrT5CqusaEEAOBrdNhYVBBwCWCsVjuCZCDwQJGIOWjCbAWAmKENZCUoZSkUIjDqQJAYAwJhAiQAGHkAIC32QTaBBrFEEAWLHi+2ymITYAuwlMQjrQMpJx1bqNZCQ/kbMgZ7MJSBLARQNCOn2Ytvo9TV69z2sbRjvsFtIazFkg1kebFE5TdosBFCK4oCHjB7U42pChKpgxWOEAWcGTG4BARkJnr8Si7jR03XbiupSBqJD9HipSXyWw1XSApql0Pt9ZmFUuS2IpHY/726XiujzfGOHjEGo32ONSHTj9XirFc5keLp6jvH6abkwIU+auu3/6K8f6d4vitFmrpGyejRV6iqXyklPzsr1Mao0tNdjoyy0/sSBbZNvW2lJDDPViwmBAVE8dGOob+KybtQAgEjmhoZzjWbanzFuHGMBiFJst1R4uvKistg7UnwV9gMTajpsAQO8KeCHSu2ZisFVIjgjTLB1OrBmYNHp3uWvb8i5RzEjjxfKqYnMiIbiHZNLptJ+Jd2ZrnBRNc/zwRGFS+WgIahmqJZWeMrd04P7zpy/Kl+Xr+nznri/+kmX52Jnfxk4s5I5dzhV6ppd3nPotf43iH7lrcnF636ElqU4pO769V0qNLN2/tyyyTjaRnyY+L597q//+P4/+0EdveuGvbd99e2BOTurt/wtAR1ZoHwSxDDiD/JQV3bFcrjDR1j/Q156cGAtQfc8+E/c2hhlzNRNmwo3c7r62/OhMqZhtT0WpZFtyTlfI4AhVQctojosF2FA0EwjzcTaYjEZGznmoM5wKsTxDt0uieOi3Ta+c/3Pg1U8OLNl9qP8z+dihV959ZtOmHeX9/24Tsms28fz+Hdco9h7bKXSs2pQSioVM/7evP//zG69/9saBZzfPaOU4et7aWa1vXF4jLbt/0f2Lmp+S5Q07ZHl3d2pZ+aFylTfNWt0Y6asomi1O2d//0KZ3Vj3+1u+yUvOSH0+TDrAcWZtmRy7h/FF6MJA2M9XCVPs7sj3pYFSaHB3ehjEJtMuKFd8BYIpbAJDbVU9XG7ArRnWUOsQeFmp8VmtDguNGtxI41UJP2zS9IzYrSq9dEfcKcf+KuYI0NpQQu5aMiF+jmCdI+WsUuSU5Nl8U+I+eX7Bt4Jj8eWnRQ6VgyAzNyRwb/mDHuscXlfJ9QmtxhGnkt2t8VLabScgnnv/p9PEzby0+fkw+c0bW0qvvyC8/8N2iOc8utzE5j5PwtvjpdMKsx4pbQ2+y+9FgJloN4A3Za8wEQMUhqbz5LTpA4BhmtYLDDwoSs5cOOAwIgKxB2N7o8wACvXIEN7pdDVyiwcuyPqykaL5GERle11bIhASJi3aKy3fxiU5vsMmEwC800yOnlflYjM/HFZOuBoPThGqN52WFzn8knx+Q5a+ef/ar37YVH/gun8mOLCeiXH3PfYFIssllBjJQ5yAJtVuq9+FKcw9pIGhOaUC4Ep5iTKgZSauSDiEEBACuwiR5nVtNobtOMYRymXUNTEMAgdXXGjL6vDUI6j1WOtJqxxiZhllAGTFWPMCuX3nluz/nzrksj+4qLOhOhDs7mHiHuabdTrKpesYO4HZoeYEqPlFVNqBb8t9AjaABjTTp1RwVR4q2DHoAwGBxEEinQiHJCvWpokOHdm2VKJeJ6ZV2iqBPCR6odtXqmzxGOwGArYMV5arTRnAnClXEuNEotLzSDEQdRmVDSABw2HGtjyCqCICqIUjLbq1WuCdIq8FuDSICsDtVuKr+1GrLe7OQupfUzf1/FgIAVlA4IDQAAAAwBACdASrUABwAPlEokkajoqGhISgAcAoJaQAACLUStWrVq1atWrVq00AA/vz4QAAAAAAA");
  --hbs-b: url("data:image/webp;base64,UklGRrwFAABXRUJQVlA4WAoAAAAQAAAA0wAAGwAAQUxQSGIFAAARBm/s/69S3P/f85mTFxaY7KSTJTDZsJUpWcIGqMymVNjQkNSNtxuNu/vb3V3g7e93ffXtdXd3dzdS8iY7YTPkdU5eF+bMHNZql+7PiJgA3tdrauRAwRwIOHl/rgKmGE6yt44UJDey1/shBQQVrSsNdhodxfJ+F69bf/0N/z7p8vXrHg7PfPnRwPsPBVEgMjMwMwRQJyp1W1EZ36vtO3/5RtWufC5k9IDF2zCFGgUi16igTjK2OtoFFdeD7PaXS7960Rtmwb9D/cSnYlb1gBnbHgVcrYBGSPZCr7B4eLT/e9ccf+IOTZ+95cu/evLOe7984s0P3337q289OBvSk4A3s6RKSEISiKmbEGBrp1GjmAFSv90MwMxsv8nfkD7Fy+Gfk2+E9OfuJruPfWzmk9gDAUhCEjCSyv/nptdfe33g4Qse3dpoXReRKgvYGrnlJx5/0olfrtj0z773h/UVe2tDyJ5AbBDwFluCYT72sZknJEaof+X4n1b96r3w5L67fX3voRv/u2y/I4eveqYofVsHdXVVMreP7E3qypHDbjxnX3v8sZeesw0hu280wcwIiWE2HwfwsU8IdeM34d2jrr1y5frLL/jiWE5YlutfXRSgbeJw+eR53Z1LC0W2CHV16zVq3VZbnjp27Tpj/brHwsL6qvn0eRKIPSE2S4CQ+c135kNtZaY6O/fe9KpTPz3xqQOXllYs6yysGBaNnEBBwamAdvcJuEg2R61vrtaQrCq5b6Z+21aFJGT1sW809hZ7s9jAkgBmgCUBktBgEmZXPRdmL7nzoh9OndPTOjT1t58dd/rXjz71T8cW8xJ1AuQ+XcoXe0qRCgqSrgigCLoA2qhLlezLxw8H+CQPvpH+bmg8CRAnPjXGAj4mIQBG3VffCNx21QOBx254J/DSlY9y1/V8auyoTw4VrXtnZOLQUu6TOwqsPKrYKtBWzqk5QYXImbQYDWsaoEhmBQdI9lx/H8Dy/otuufkWuI1KyL7RzOaTeZ8EDJL0kF59k9q52cerYfr+R5+xx1/68q57H/f90a7yBT8qdE+MXrif9P9QGC5KfVdeLKXddnRofmSoUx2SqggqqVpbZ+E1wiS9PbWjvdgyOvnbSaZ4PGT3Zlb1Vk1i87GZEWo3gp+rhPnXQt2NFV9595IDD528PHnmbzeOySf/e/wXrp8QOgAO/dlR+5XycmBZyn3R0uM7FKeRkSqoy0vDCqKyGbtUAbSr90Q4Z7aSumHjc4+F9NjMEjPzNl/1VjXiBEJiwUhP/jb52z/9qHjs+FAh96vRFS89N3OlXfTtg4qLBva6sCD3DuT3WrLDX0aj1v2Hevv3Gs6LQuRKOxbyTl1kgkpnHpVGVUARUEC22NJJt5z6h3dmQlZfOx9qYzK/DE+yYeZXe3xq4vghyVgYOL1vsNcJsGjIRV1Sm+tpkdRCq0pGlYVV2ZLXpc6GVG82b0mMgWEeswCVmXenCXM2/dyDU9/+zgVf/uz4b1+dvaZ40iWLxiiLNhV2U9fkUCIDnCIteYBIQZoEtFZADZD6CqTU6gJs2SHd27yZxQkBMBo01vaWBvoGVh1d2q28X6+29AhQ2KFfoh2GnaACimRUQQEBVEClVpF0rbNV92ZV80mo/9ptE/8Mzz378KoDP33UKf+5eElRpX/vQweHR4eKi3fI9fUucqACiuvKK4LKAiqyjQ/pc49fdOYIRz64duygwwf3Kxy1nzSoHdst7WjqLOTbBUVqFUTlfewcfO+CGY/0DAr0rCz3jncKoyWiWqcgDapk1PcvXYUlQmmw3NbSHplJqqlTpEEFBEXeV5sT8k5qFVH5AKggKPKBVD+QfEwXVlA4IDQAAAAwBACdASrUABwAPlEokkajoqGhISgAcAoJaQAACLUStWrVq1atWrVq00AA/vz4QAAAAAAA");
  --hbs-l: url("data:image/webp;base64,UklGRsQBAABXRUJQVlA4WAoAAAAQAAAAGwAAMQAAQUxQSHYBAAAZkCPbtmorc517Pu7unllEEUFG7O7WAG8C5N4Cb4BrE9wid3d4du/ZyC3Ofj2IiAkIaeIzwPR2xg/y1XhNAmKBslL4sLqJyQYuxTHx4GeAqtdClGd8bvDvFxzF1NFAwcoxSVmmh+cwxKgGjoWdpgKzlR7GBARJO2TKgu8AxkOiZaVw7E6sgF8msi38+gyENGdUGbJAH2tmzjXlJduHQDY1JmVBvwSgkZUsSwwOgFhk5Ffx2hmVQC881XgoA8wF9aaLZt3ocqoxp/41vQpzqDjQiKZy+nqLeca9UsjiNCwP+gkomN8reSRqJ0bkgAEV+39Fc1AP/w7EtfW6JvkMeoN5iaHzEGIolme8/sG/fTxAA4GC7UMrZVlsHKUCRhU4qryOAa2mB/SntuWTAJX991J41FqYgTzCP9DAsdTpJzEBwcP08ZvwV6Abqkk+qVPT1yPagqmlrEgXSXlmmwYjhfANx4rxFqBkPZbXw3lVYHQIedCh9hf6L1ZQOCAoAAAAEAMAnQEqHAAyAD5RKJFGI6KhoSQIAHAKCWkAAB9gPLRgAP78+EAAAA==");
  --hbs-r: url("data:image/webp;base64,UklGRgYCAABXRUJQVlA4WAoAAAAQAAAAGwAAMQAAQUxQSLcBAAARkHPbtrG9A9oXT2zbpa2KP8B2Ujrp3Nm2039dUqlLadu289znnl28T757ImICUGlNx7cU5tyFDIruHiMlvu9qbJJFp7cSyci+SMuwgDkZ5XpzYxTmVuTcgwzJzu5hIAM3mzSD+v8opHASnELNbxWRi+GTLDr9oTDyelMYhYGh5BwUDRr/pDDnCuM1mv4umY8szWMdA5lziUaG/cwp8etguDSPBYyMvA9Ng8kkRd52gE1zGCkkA5fCp1n0ChRGqYJihi0MZM5lyDTWMzDKm86waQ6jSUZeg4XGuJIbRsNiQCiBhkHNnxQtj+UsGHlTJcNh5iy4VsWiioEFZ8Cp7I4FC05XcRgXIiNPwCpk2MOckQ+U9pbc8kZlX8m9mjr7S67BquxiTuGnbrBpvsYZBka+bAqTZNGdkYy8AguFnhUFT6mY1o8YWfB8bWuSkGEnc0ZebgeV/SVP2+jsY07h18FwavJvOLwWA7fAqQl/NnZWYU+J/O0DZ9KOVzDK28mAdd5Vx2NuUbD8dBsA8N6aMmva/qVUiPDT6cVjBqOaBr3/lJEFSRaXzg7zMICB73GDwv9KEXKS3O8NAFZQOCAoAAAAEAMAnQEqHAAyAD5RKJFGI6KhoSQIAHAKCWkAAB9gPLRgAP78+EAAAA==");
  --hbl-tl: url("data:image/webp;base64,UklGRogBAABXRUJQVlA4WAoAAAAQAAAALwAALwAAQUxQSDgBAAARkHPbtrE9+9x7P9u2bds2Y9s2u7S2bZZJ+XVhZ5Tp8gvy3SJ8dlBHxATgP1CxCb6VHzsmYlo9wSxYtTdcm+jSytiq7OwFOUlOaQzb4xJdV923ZsfmZXv2L9/ilMFFu6KxbsaMaWvXbl22e8HsfU4JCqeE1qW3FGY09pTmZQbkNzkjgm+98a2fgFNpACIigHzriEpMdAcAwbcCpwU+y7aGQkCr5NhEOgREeGazoHkUQj/ZeiaNMvs5DMJUO/nKh6vTvvNiUlhrX2ohMjhqH0OBV+O63QhDpHDh60Imgc8X2wHN5Ppwwh3C80cqxfbf78ol8E6BcPlkcAGu3VBcfsu5BMGruRR6jsEwaSy9wmVw6DqXxiMyg7s3qESpZ1e44GNPUSkETZ7kcj9rjzKJuD+xR5hgMMMe+l1WUDggKgAAADADAJ0BKjAAMAA+USiRRiOioaEjiABwCglpAAAbgb0+DgAA/vz4QAAAAA==");
  --hbl-tr: url("data:image/webp;base64,UklGRjgCAABXRUJQVlA4WAoAAAAQAAAALwAALwAAQUxQSOgBAAARkGvb1rE9ez/v+9u2bdu2bf/JFaRC7c5lWlsXYNtm7fw+wc+nSxcRE4D/3wTUPyQBAiS5GEESXImCBQATxKIkFlVYLhchoQjkpdS01DW3VLSlxLk6Jbmm5vjbevjC0ikYlrZ0j/CxdbHHkgZgIru+uqOjtKVvtCY/NaGgvKyzvbm9La8sKiG9oLIkv6w2OTs/zgaEa1ZwSHtqCNLT0zJSw3OKi8oTwlIyK5rbu7NsYlv6aouyPbM3DGcUp0YFFoaCsK/Ztf/DiwT6OVoaHv7WfilJyohPSk6MCrU23Z0j8kp84VqRneYWYQ1rE4RLbvObmbkahaUVoBSWdnFVxOLEv87eE1/nFtaDBEgQi5MESCxKgljmmEzJGFadxEoNxk/PyPrVW0UDIzL/K1ojE3tk4ZurRso8KwtTXvoQjt9FXnnooxA7My8noLQhXL6I7IOhjULIlEimViUyJ8UamRiVKanQarNMLfTC1MbAYZmWPhjamNgk85/9oLQxcEDkMhS0Vbgtcp36kLwucg36QGGfyFW9zoo8cwB1IXlT5L6hD4ibMv/ag/ooXJS5hVQY+vCayHMrUBfC8onIEwt9QD4QuQEFbU3sEbmukzIOilzSicZ9kZ0w9FE4K7JFrwsiG2HqY+C4yH4YAFZQOCAqAAAAMAMAnQEqMAAwAD5RKJFGI6KhoSOIAHAKCWkAABuBvT4OAAD+/PhAAAAA");
  --hbl-bl: url("data:image/webp;base64,UklGRnQCAABXRUJQVlA4WAoAAAAQAAAALwAALwAAQUxQSCMCAAARoCzZtmnb6nOOeW3btm2WbNu2bds2H4tWzbb9XukaS2fP/rDvwfiCiJgAQHCDqagaLLT+L4m7Q1TFfqAii+eYSjVU9SITdtdjgLeY4TvpgeA6/V8lYNRY9yL9w7KwWgyKvkU+UlXgG/JxRT0WpR+Rj8ppqvWIvF8MRk/dv8igOqwWg3y/kGENPRYVAzKorsegeUg+KaPHokHs+WkuGD11E8/XoEfQkzEvwEGrRY3HKa7S9cSzC0SNw2yGHKRqDkPOh1O0liH7QtQIBjLmWFXLGXEanKJdjNgDosZhMwMegFO0kAHXKRKsZchREDUOyxjwIpyihQw5BKJGsJUR+ypyWM2A1+AUrWPItarmMeQIiKIVDHjTODW5zHKGfAGixmIpI36RCyIi1lqxxpickIIFzvjEc2oJZFog1ok1xsBYk7n8vcf+yBQ9P1u8os/onV2nDWibKxcyawEYsSIiTqyxKDzqtmeSJEz7wDN86+buQzdGj14zqU2hEhb5qjtk2qBdq553mDaJYqZipk/I+IUtL2x9KXh28+jjCzqNWbFpWJ1izWEKAwNXHDrz8q1PmT5FH8WJ51M9M/nXHxEAY5A2z4IDb7/50Xvf8+/7JPnjL+n+772PwiCDzAAMIM45I0ibu1qTGn2Hd5ncv0DlOa9++P07t4/+EKaSiE9FZo2ItQaZl7y2MFpU61y/ZqtFc2cN7DZlaabSG2OtiDgxRvB/QeYBAFZQOCAqAAAAMAMAnQEqMAAwAD5RKJFGI6KhoSOIAHAKCWkAABuBvT4OAAD+/PhAAAAA");
  --hbl-br: url("data:image/webp;base64,UklGRsQBAABXRUJQVlA4WAoAAAAQAAAALwAALwAAQUxQSHQBAAARkHPbtrE9+5x73+/7Ytu2U2Wkszt+ZhXzZ9i2bZQ2KquznTza8fuOM9KliYgJQKYV3b5G3AQHqx4V/MJdpsr5hTtMTeJnroc3o+j+KeJmcWYcRoffeCwFseJRwa88Wd2OoMGHhI87Q+1Ue0OGfZ3YqfGG/DqyiqGaH5gwF2oF6o4y4BxDDhsYBROzIFYk+zKTb7kpsSKo+pIMC1RgVbGfUTwOZkRxhgFnO7UCtAuSkMsqQ2ykamM6w5ALoTApbu6JXYxj3qgMMSDwq8mEjHkrR9Jyzv/Wee+9c94756RWGH9LyCT+3AqaToYrPeKvITeIQ7qjRpeXlZVWjBmeN23i9NxBZRNzx/Rv2iB366mPScA7jUXTCu+QDMnP0emDF6dO2rsyf1jjqvXrN6oygfzSE4q0999/vm/n6Zu7igfUqJuFFP7Sn13cEYr023eqX71Rg5b4rUIAFciv/WrCIfPqREQgEPxRqlZSZFJ+q/gXirn/RQFWUDggKgAAADADAJ0BKjAAMAA+USiRRiOioaEjiABwCglpAAAbgb0+DgAA/vz4QAAAAA==");
  --hbl-t: url("data:image/webp;base64,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");
  --hbl-b: url("data:image/webp;base64,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");
  --hbl-l: url("data:image/webp;base64,UklGRmgFAABXRUJQVlA4WAoAAAAQAAAALwAA6QAAQUxQSAMFAAAZsGzbtqnN0lh7n/N9f3zfr3D81zYC96bNkktmNd8na/kErNm27Qw74tfHc/aeacwniIgJ4H/b9B/66Ec+3PQY93iLTa8ozTtITtAexXy25/bwgySnxOF1zBt5Vd4eViFeCI0RMQY+hXzUnkTncb6vVYyNEve0XDtHtQkeIc5eCNmUOAXXI+EaymfgoKqNot+G35BsgsN3ia8RNkmn7mTydYoN7CuW1/AN3hgabBrBfRBYF+Ibl0I2YhXOkXGNsvko5muPy2x7FmY5YV6q20Yrs4dGlWKUeFEUfopsggz8DOfLQDEqvAlojBJT2j/9nGoTfA421nBegaa1CuJ350M2hTthNRM2mX2YV2QD21CF8xxvxQvNan6tGf22Wwy8QnkEMiLKEgZOWt2An5J8qAW+QRh1FRLOJ+/qWDdKHBpWeiPoCRqrCTCxOgAsrE7STj5HsancRXT7ON8HKRllrkIOo9I8DLc6n9DGS+Ark0YuMKjiIr6JxweVryKb4AVtYR/fwkmCziixC+qNgrO0l/5MtYEKO7s4j6HJRoXXQ1eMiICawkg9TCtyCQ6eEJ2wTXro/o6PkW1gLDHB+VBAWM1J7CKjJajiPKGdfo1qE7wYxQhf8TJC20aVHbjZG2V+D1+dZNkUXgVzAuMJBMbpn5yjbD7jBUefFLIqPaxY3V4Ef7JaaeC3yCbx7FCMcB7lygWj4BEKrRGMQLeNRIHAN0o8S759heqi0EPks38NuQBLONAoXELNKvQE5sK49DAtyGdjU3yFjGvimTs7buO8gbhhdRDIRpUlA/6EbBIjYvEHqk3wcrSc4isGkLJRHTxFlIlPaPQQ/G4WNqAF/KFP8vnnTOC7ORK/wPnOBJ9GNpk3tB0NzitAWO1A6XyiDIYMfv7zKC6iOwqjIlyD/DL4HtkGrY1hK6oPT58oHBe2icG4coFkAxXpezi/m4hvGVUO0f7q51SX0OYjcO06coE7nxA1IlwSa+r5orJcYBSJzyFcg5MUhviKNUILIzhB+6ffRLWpnII/z5ENMYRvkHENbd0rMr6Jrc2qXyIbSJHn36EaPQTdDNsoB94PzdgHygHo930UywKl+ITI8I29kAtsnRT7JFwTb1rvuEnYBCeAzyAb4iYi8C16Oanc9gk98Fraq7+husDGEK7uYbwzg9+WkM/pox2/JuOamIZwrmwibhslXkzqfoVsgk3a2U+oNqJFeYRvpSO6qU+Ie6ANH0UU2C5hE1o/A5/ey3L518J53IhstZZhapR5wbDnM8gGhlT2cF6n2VtQbQonSNrFOLagm/uE1l9KfP5slgssK3wtAtfEix9YUoTxSoiEb2VE4hqyScxJTPGtnCAtz1JtUrwGFrcw1oAoS58od79MXJz4wKEjgfesFz/us3zGA7ibGj7qYQPhmlhrKxcIm8q1JVwgywWmfaLBeSHMBw3IKHFX6mmM4FQLj+ViU/n8ouWpVYVL4tFBx5f2s1yCU1GppeJbgDWc14E9ko34rhKXCZvKr/qG7yAbWAdu4Zt4SdPzFGETbEblEZwD+CayEWsE1/CtDAm2fUJsgOZUFwV30m5fw/kITFurDppiBdy8EvKJFvZ6bEOsQMI5J8yHAzey28GhV+JFx4oVTKPwB5JRBWY49wQHrI4gLhJGb0dcxbeyB0yNMpdpum9SbGCL1O/i3NOvPEgyClJ/hWoECPM62CLZiDHN8gLVBABWUDggPgAAAFAFAJ0BKjAA6gA+USiSRyOioaEgyABwCglpChagAT30bUOcZQD3U30bUOcZQD3U30bEAAD+/6lGAAAAAAAA");
  --hbl-r: url("data:image/webp;base64,UklGRlIFAABXRUJQVlA4WAoAAAAQAAAALwAA6QAAQUxQSO4EAAAZsHbbtrFJsv617/O8jgwVgtW2bdvu/qZ/5892l2070J3hDL7xPu9z72ljR8QE4CrufTs//2KVXUQIXsB5OIRN5BPDOZjgfHIMxWrQh2SUePVNDSdGgCB52c8QZmNEsWroTG4mG62h8TbOAnWMxA0QYQQfga6sTuDFRj7BzfB8k8JGfAA+cyXLBubg+UthPIV7xymMEkywbiAhG+Xhp2GXsAnKGP6Er0gD+DSyITQLRzjXPdixQjAlnIDXI6OlQeB9rRG/IYzOpjDF+YZe0Deq+MywIYz+WexYdQjWrArdrT9TjAbodIxvqx9AhbGSYGeisCGfQjewVay/PlioQi7o7BQezAqbODsXt1Phmnjz61o6+BYmjTgySlRVsGQEw5p4jDDK1M0DFCNACecEEVazgIzEB4gyNYIl1BwbBTcDYSReifsriWpgNSWP1khGCZUJxQjSxSHOU+gNfJT7H4Rx60P0XoV++6LChmEOCgnftUFhRDF69LRih8pooRMskm0qPjiTmQG5ZDYCXqAKl8SKCvcSuIplgqdxzkBtBeLELJi1EuLYKNglURuJBIRR8CEKl0aFt5DwHgDJKHEXMDUST1JIRsEbSJNzik3hfdQbOzjXxMqCj6KeReMLH1RvwO5Vn+ASQD6g6+AiFC6K+RuwTrxsOZOMoKPMT6iM/vkI5xuAJSPxFTIHRsGdJLpG4l1Yqx19mTo/TLiEzl+gap+juCjqBZhOMF57LeSxEw2MFp2uTeHqgU/FF2Yn3HxchQvMCd41X+RTgLvOCJ8B8Is24Zr5MhVnOC8Ce1ZTYNYK6idvVXFRDBfg5JRw+dfzdcgldHEEJyFcFd05uDOncAG68CEKvh9abtnAt+Kbg8zPqWygCwxxbsiMjbJeQzc/RLgolj5Mlbo4N+RyxekkU1/8luKSeOdM5iJhK15Zt/z8tAoX6FAA4ZxYIhsJ+CHOLeJRktEc0MU3821SNEZoQL19SPGJCfQKtoq5lWB/R+GSeO1LMicNxgVIOM8AtZH4EIUDI3gFwQMko4bCHrIJFkns4yvOgRUjOKXK95JdlPvvo8qP4xv9tyCuGBEXQHFKCaLxSbxyNsiXPoWrY+F93MD03CkJOrNO//z7bZkdtyl8SkAX57WZ4AQZjafQJ4z2J2KRYtSpIOObeOuwZUyyEW+oMgOKDbTAAPe7qcz+grOAY8LoEujgG3wC8YJR4e0kBkYwpnC9VSLxuFWhujiiuIjhItp8DtsUb3h1ZpJlA4lgHIRLoQA/o8I1MaEwxFd8gsD7vXSbn5BtggtojrFVHn0WMfaBzjzcfSyjaQtPRRUuiY/NNVT4ileopRjBBhU9o+D1KP5M2BS+Q9L9GKul2tuj+ESLtrYULuJlrwum+KZYX8jMETZQAn5PZSNeoswmvsElYmQELwJbyEZ8l8A5WKFqnyJsxISKpyg2oS568ki4Ks9+Dh4+J1wSb5xtmVDhKl5RFW4mbIJrJHbxFetkxkYwRUythoCMsr5D568PUmyILto6UrgoblwP+gq5JF6+mukljEcBG1nhcy54EeSTKWxThYt4HcENBL7LwB4yehWwgXMFTK2g29xPtpp23kgyyngHM3SaxykuyqNPIU4xrmugdjrfASWfUPs0QfFR9F+PousD/VXoLjtFC0895oTg+UMroN9za8/d9toqvAr/Q1ZQOCA+AAAAUAUAnQEqMADqAD5RKJJHI6KhoSDIAHAKCWkKFqABPfRtQ5xlAPdTfRtQ5xlAPdTfRsQAAP7/qUYAAAAAAAA=");
  /* the ring he draws around a node in his AVL notes (page 14), cut the same way: it stretches into an oval */
  --hbc-tl: url("data:image/webp;base64,UklGRnABAABXRUJQVlA4WAoAAAAQAAAAGwAAGwAAQUxQSCMBAAARkCPbtmor6+x97tfI/Wf+498LwSWG0F064A6phRQxkbtLROSQuTscW+g7TzoQEROA2rRaNiMCFOUxBYD5m16WQwSom7xMsgwKjG++QP5Ix7MMMHHwDRldetqRo2iY+YOkDz7dRKai5RoDtz8k+cOfKEnqsOkZf3I5Wlae/Uy+K0WAdeR3rkA9gImFCztLUIzvondcgjoYsShZ0PuGPnAlCvyt1sp/jHZcpQtciQL5gqP0IVxHYfIs5vFnShwxgnwt7jD6cASKfMEMxsh7sCbP2OabwccP00aQb3VG8i7uRR3Kepchfu8QUwbVRT467oAiX8wAGcPLQZEyWBxLIfAALPJNITeSJ7tFyqBYEV1wM1SRbzDwMnkuhqKMUn+Kjl9GtCwAVlA4ICYAAADQAgCdASocABwAPlEkj0WjoiEUBAA4BQS0gAAe0dAAAP78+EAAAA==");
  --hbc-tr: url("data:image/webp;base64,UklGRvoAAABXRUJQVlA4WAoAAAAQAAAAGwAAGwAAQUxQSK4AAAARgJpt27Llfp7nd0n/DyRYwKUzgVS3ZkO4zkBz98wA7rqCe5Qb54nEiJgA/MsGAyJ+XzXoNdwdjQNi4kK+cKAZgHmUVJ4dk7sLSaj+7Wv5KrldA+ifzNSAsiVyJReBv3w1AEPkTQnMAVBDyz4vSqHiAASQec7nmYCJB0LIWifnYeIBAarISZh4QAz19+xAQDyAENb42g71kWDOKe/zoS4QpDY5Egr4IIiKN2ZDvgFWUDggJgAAANACAJ0BKhwAHAA+USSPRaOiIRQEADgFBLSAAB7R0AAA/vz4QAAA");
  --hbc-bl: url("data:image/webp;base64,UklGRnQBAABXRUJQVlA4WAoAAAAQAAAAGwAAGwAAQUxQSCgBAAARkHLbtrKtC9rnPPd+34e7RXdL8APcE3SyS3N3qjeNVCe5e4TmNEvf1Y28j0XEBOAVY+IaKBo9nmPg8wFGGpnExMBlYprQoU8ZE69Cm7A4SZ/zj76QJuRU9oz5Tpc2IBj+O2Um7pWiHgQvmRjzXdgGVKd/8jnFD2Ot1kOBeUz0PAjbgHT13GJg4DrYeigw33vmyI2wUguKx0zMnpshpp4d+S5E5sB1XRBVrYQCixjJHPl+LQDYSjDYT08yk+dnzBkDlSpQ7KdLZPYkvxyAFFWkC7tJTzKlRF4BuqQMsDjwnWQgmQOfrQZMBRQYua+XjCGE7JmODUNlBcbMvcaOrpePVlSCGAALVy3f/vkj/68GiBp03Hb00IVaAIwxBTpOaKCzsVbRqrbSMlZQOCAmAAAA0AIAnQEqHAAcAD5RJI9Fo6IhFAQAOAUEtIAAHtHQAAD+/PhAAAA=");
  --hbc-br: url("data:image/webp;base64,UklGRnQBAABXRUJQVlA4WAoAAAAQAAAAGwAAGwAAQUxQSCcBAAARkGNb27E914P3/2PbqZyMARNISpZGlU7138a2pmFXNkqndB6d8H2ffwYRMQGqaTQZMvNVaVJ/mOn94HWBmPO8KsYPvlJSZmEVr2XExI1Rrs4SYqBPTQ1rTpADp00V6RM5fV4qV6HRxhBK+aqa1g95QY7s8a6CtI5c0qdZpptxw86RSuKwvLqaXvWRIJfJ1nbx0pocCoGtzquj05iNpELkUWPU3jpte0GCyMOJxrZz0gFIEHkxXlZtjdfk3YQMkUdj5NTSOKNFn4lA5NFEOf3XNI00aHUgAZnn4+T0XyNpxKa7UHLKhTvj5dRyxM5tryGUCLBcMmr58g3wIwIvLi6eKRm1hR8Anz5uGS3Jqj1wbNfeDc0AyVurjvPnz9M/nVFV3zReRjUBAFZQOCAmAAAA0AIAnQEqHAAcAD5RJI9Fo6IhFAQAOAUEtIAAHtHQAAD+/PhAAAA=");
  --hbc-t: url("data:image/webp;base64,UklGRrgAAABXRUJQVlA4WAoAAAAQAAAAFQAAGwAAQUxQSGsAAAARcFNt27I8r+3/+QMIvmkACGJdoID7xEYMdk9AAkK824/DGhETwIYHB+VSf18hTtcYXNx3LWWkd/fbFCDcee02SyDBIxX3kwjjW7LIXaRqeHBUr91BCMejrbvfAWg27m2W67seTqRmdt8/DABWUDggJgAAANACAJ0BKhYAHAA+USSPRaOiIRQEADgFBLSAAB7R0AAA/vz4QAAA");
  --hbc-b: url("data:image/webp;base64,UklGRtQAAABXRUJQVlA4WAoAAAAQAAAAFQAAGwAAQUxQSIgAAAAVgJpt27LseoWD6u42AiNwMAMLUEk0zXSiwwYcjECjEqGS3PkNl/q3iJgA/kHV3/kjvxj4Ob+Xq80BKeD3iRRQWVUN7fEB0IjzWZ7FNxA1lSOj1WD2PRvyOO47iwn36Wxi2ouLTT/1RdIGEiH++ENqV8l43mQU93/c6x8eu0z+vJJdXhQa+OYhVlA4ICYAAADQAgCdASoWABwAPlEkj0WjoiEUBAA4BQS0gAAe0dAAAP78+EAAAA==");
  --hbc-l: url("data:image/webp;base64,UklGRuYAAABXRUJQVlA4WAoAAAAQAAAAGwAAFAAAQUxQSJkAAAARgFNt2/Lm/WlPNmYYSUGmnCiICqaJ44HKFdFTC1wBzBYYvu971icOImICJPkLhYE4wnTdQyj4xaLY/lOjdYQkefybuuUKN2eMLotDqkGrCm0NPHqWkC+Aa6HtwbyXxCYtNnIEXIsl5Crw4NDiwK3QhtBvAcsiXeIbc/FIXfxgZLGO8Y22sC7xhyufbXFOoICokE6hoMObAAsAVlA4ICYAAADQAgCdASocABUAPlEkj0WjoiEUBAA4BQS0gAAe0dAAAP78+EAAAA==");
  --hbc-r: url("data:image/webp;base64,UklGRvAAAABXRUJQVlA4WAoAAAAQAAAAGwAAFAAAQUxQSKMAAAARgFtt2/Lk+STSuVUZILjDCmwBJZW7ywq0lA4VfRZAau3cpYrnKXmyQURMAP7tsMxTeGiNib3+dDinQcDMcg9WBIQ/awOwIo8xbiIosi51dZ52RgOPM2ZhRdYM1Y4jzmgMEhWOWK/Ksf4AtQ/ssD4OrwlgkiyErWqDJbZA6zFaKrNVBIMbNsHfNwPXZF7kMPxXZY8ogG0WWZDNN4q8lC2yyF0AAFZQOCAmAAAA0AIAnQEqHAAVAD5RJI9Fo6IhFAQAOAUEtIAAHtHQAAD+/PhAAAA=");
  --w-pen: 1.5px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0f1326;
    --sheet: #151a31;
    --rule: #2f3654;
    --rule-2: #232945;
    --ink: #e9ebf3;
    --ink-2: #b7bdd3;
    --ink-3: #9298b0;
    --pen: #a9b6ff;
    --red: #ff8e9c;
    --ok: #74d3a0;
    --pencil: #6d748f;
    --hatch-a: .24;
    --u-pen: url(../cuaderno/u-long-pen-d.webp);
    --u-red: url(../cuaderno/u-long-red-d.webp);
    --r-ink: url(../cuaderno/r-ink-d.webp);
    --r-pencil: url(../cuaderno/r-pencil-d.webp);
    --r-red: url(../cuaderno/r-red-d.webp);
    --v-pencil: url(../cuaderno/v-pencil-d.webp);
    --hl: url(../cuaderno/hl-pink-d.webp);
    --desk: #080b17;
    --papel: url(../cuaderno/papel-d.webp);
    --sel: #7a2f6e;
    --cut: #eeede6;
    --cut-k: #1c2140;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0f1326;
  --sheet: #151a31;
  --rule: #2f3654;
  --rule-2: #232945;
  --ink: #e9ebf3;
  --ink-2: #b7bdd3;
  --ink-3: #9298b0;
  --pen: #a9b6ff;
  --red: #ff8e9c;
  --ok: #74d3a0;
  --pencil: #6d748f;
  --hatch-a: .24;
  --u-pen: url(../cuaderno/u-long-pen-d.webp);
  --u-red: url(../cuaderno/u-long-red-d.webp);
  --r-ink: url(../cuaderno/r-ink-d.webp);
  --r-pencil: url(../cuaderno/r-pencil-d.webp);
  --r-red: url(../cuaderno/r-red-d.webp);
  --v-pencil: url(../cuaderno/v-pencil-d.webp);
  --hl: url(../cuaderno/hl-pink-d.webp);
  --desk: #080b17;
  --papel: url(../cuaderno/papel-d.webp);
  --sel: #7a2f6e;
  --cut: #eeede6;
  --cut-k: #1c2140;
}

/* ---------- language switch: both languages ship in the markup ---------- */
:root[data-lang="es"] body [lang="en"],
:root[data-lang="en"] body [lang="es"] { display: none !important; }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video, canvas, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration-color: var(--pen); text-decoration-thickness: 1.5px; text-underline-offset: .22em; }
a:hover { color: var(--red); text-decoration-color: var(--red); }
p, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; line-height: 1.05; text-wrap: balance; letter-spacing: -.015em; }
ul, ol { margin: 0; padding: 0; }
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
abbr { text-decoration: none; }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 0; }
::selection { background: color-mix(in srgb, var(--pen) 22%, transparent); color: var(--ink); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--gutter); top: -60px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: .6rem 1rem; text-decoration: none;
  font-family: var(--f-mono); font-size: .8rem;
}
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 8px); }

/* ---------- type roles ---------- */
.mono, .label, .kicker, .readout, code, kbd {
  font-family: var(--f-mono);
  font-variation-settings: "wdth" 87.5;
  font-feature-settings: "tnum" 1;
}
.label {
  font-size: .75rem;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: lowercase;
  color: var(--ink-3);
  font-weight: 400;
}
.num { font-feature-settings: "tnum" 1; }

/* ---------- layout ---------- */
.wrap {
  width: 100%;
  max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2.2vw, 32px);
}

/* ============================================================
   His marks
   ============================================================ */

/* single glyphs, cut from the scans: × -> ? └> */
.mk {
  display: inline-block; flex: none; vertical-align: -.1em;
  background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
}
.mk--x { --m: url(../cuaderno/g-x.webp); width: .8em; height: .9em; }
.mk--arrow { --m: url(../cuaderno/g-arrow.webp); width: 1.4em; height: .6em; vertical-align: .05em; }
.mk--q { --m: url(../cuaderno/g-q.webp); width: .62em; height: 1em; }
.mk--hook { --m: url(../cuaderno/g-hook.webp); width: 1.05em; height: .95em; color: var(--red); }

/* external links: his arrow, turned up and right */
.ext {
  display: inline-block; width: 1.15em; height: .5em; margin-left: .25em; vertical-align: .1em;
  font-size: inherit; color: transparent; overflow: hidden;
  background: currentColor; background: var(--pen);
  -webkit-mask: url(../cuaderno/g-arrow.webp) center / contain no-repeat; mask: url(../cuaderno/g-arrow.webp) center / contain no-repeat;
  transform: rotate(-35deg);
}
a:hover .ext { background: var(--red); }

/* underlines: his ruled stroke (07). A background on an inline box, cloned
   per line, so a title that wraps gets one stroke under each line. */
.u {
  background: var(--u-img, var(--u-pen)) 0 100% / 100% .15em no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding-bottom: .1em; padding-right: .12em;
}
.u--red { --u-img: var(--u-red); }

/* the box: four single lines that run past each other at the corners,
   like the screen rectangles in his storyboards (05) and «consola» (12) */
.box { position: relative; }
.box::before {
  content: ""; position: absolute; pointer-events: none;
  inset: calc(-1 * var(--os-b, 3px));
  --c: var(--box-c, currentColor); --w: var(--box-w, 1.5px); --o: var(--os-b, 3px);
  background:
    linear-gradient(var(--c), var(--c)) 0 var(--o) / calc(100% - 1px) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) 2px calc(100% - var(--o)) / calc(100% - 2px) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) var(--o) 1px / var(--w) calc(100% - 1px) no-repeat,
    linear-gradient(var(--c), var(--c)) calc(100% - var(--o)) 0 / var(--w) calc(100% - 3px) no-repeat;
}

/* hatching for hover and "on" states: straight 60° strokes */
.hatch, .btn:hover, .tgl:hover, .copy:hover, .vid__play:hover {
  background-image: repeating-linear-gradient(-60deg, color-mix(in srgb, var(--pen) calc(var(--hatch-a) * 100%), transparent) 0 1px, transparent 1px 5px);
}

/* scans of the notebook, recoloured per tool through masks */
.hand, .scan__img { position: relative; display: block; }
.hand > i, .scan__img > i {
  position: absolute; inset: 0; display: block;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.hand > i.ink, .scan__img > i.ink { background: var(--pen); }
.hand > i.mark, .scan__img > i.red { background: var(--red); }
.scan__img > i.green { background: var(--ok); }
.scan__img > i.black { background: var(--ink); }
.scan__img > i.pencil { background: var(--ink-3); }
/* the 2022 level sketch */
.hand--level { aspect-ratio: 1369 / 448; }
.hand--level > i.ink { -webkit-mask-image: url(../hand/level-ink.webp); mask-image: url(../hand/level-ink.webp); }
.hand--level > i.mark { -webkit-mask-image: url(../hand/level-mark.webp); mask-image: url(../hand/level-mark.webp); }
.hand--frame { aspect-ratio: 320 / 185; }
.hand--frame > i.ink { -webkit-mask-image: url(../hand/frame-ink.webp); mask-image: url(../hand/frame-ink.webp); }
.hand--frame > i.mark { -webkit-mask-image: url(../hand/frame-mark.webp); mask-image: url(../hand/frame-mark.webp); }
.hand--legend { aspect-ratio: 387 / 320; }
.hand--legend > i.ink { -webkit-mask-image: url(../hand/legend-ink.webp); mask-image: url(../hand/legend-ink.webp); }
.hand--legend > i.mark { -webkit-mask-image: url(../hand/legend-mark.webp); mask-image: url(../hand/legend-mark.webp); }
/* notebook pages */
.scan--story .scan__img { aspect-ratio: 860 / 797; }
.scan--story i { -webkit-mask-image: url(../cuaderno/story.webp); mask-image: url(../cuaderno/story.webp); }
.scan--hexes .scan__img { aspect-ratio: 820 / 629; }
.scan--hexes i { -webkit-mask-image: url(../cuaderno/hexes.webp); mask-image: url(../cuaderno/hexes.webp); }
.scan--screens .scan__img { aspect-ratio: 780 / 475; }
.scan--screens i { -webkit-mask-image: url(../cuaderno/screens.webp); mask-image: url(../cuaderno/screens.webp); }
.scan--binary .scan__img { aspect-ratio: 420 / 503; }
.scan--binary i { -webkit-mask-image: url(../cuaderno/binary.webp); mask-image: url(../cuaderno/binary.webp); }
.scan--controls .scan__img { aspect-ratio: 640 / 937; }
.scan--controls i { -webkit-mask-image: url(../cuaderno/controls.webp); mask-image: url(../cuaderno/controls.webp); }
.scan--croc .scan__img { aspect-ratio: 720 / 560; }
.scan--croc i { -webkit-mask-image: url(../cuaderno/croc.webp); mask-image: url(../cuaderno/croc.webp); }
.scan--pipe .scan__img { aspect-ratio: 560 / 592; }
.scan--pipe i { -webkit-mask-image: url(../cuaderno/pipe.webp); mask-image: url(../cuaderno/pipe.webp); }
.scan--so .scan__img { aspect-ratio: 520 / 192; }
.scan--so i { -webkit-mask-image: url(../cuaderno/so.webp); mask-image: url(../cuaderno/so.webp); }
.scan--murio .scan__img { aspect-ratio: 720 / 303; }
.scan--murio i { -webkit-mask-image: url(../cuaderno/murio.webp); mask-image: url(../cuaderno/murio.webp); }
.scan--rooms .scan__img { aspect-ratio: 560 / 872; }
.scan--rooms i.black { -webkit-mask-image: url(../cuaderno/rooms-dark.webp); mask-image: url(../cuaderno/rooms-dark.webp); }
.scan--rooms i.red { -webkit-mask-image: url(../cuaderno/rooms-red.webp); mask-image: url(../cuaderno/rooms-red.webp); }
.scan--rooms i.green { -webkit-mask-image: url(../cuaderno/rooms-green.webp); mask-image: url(../cuaderno/rooms-green.webp); }

.scan { display: flex; flex-direction: column; gap: 10px; }
.scan__img { width: 100%; }
.scan figcaption { font-size: .86rem; line-height: 1.5; color: var(--ink-2); max-width: 46ch; text-wrap: pretty; }
.scan figcaption .label { display: block; margin-bottom: 2px; }

/* ============================================================
   Controls
   ============================================================ */
.btn {
  --box-c: var(--ink); --box-w: 1.75px;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 44px; padding: 0 1.1rem;
  font-weight: 650; font-size: .98rem; text-decoration: none; cursor: pointer;
  border: 0; background: transparent; color: var(--ink);
}
.btn::before {
  content: ""; position: absolute; pointer-events: none; inset: -4px;
  --c: var(--box-c); --w: var(--box-w);
  background:
    linear-gradient(var(--c), var(--c)) 0 4px / calc(100% - 1px) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) 3px calc(100% - 4px) / calc(100% - 3px) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) 4px 1px / var(--w) calc(100% - 2px) no-repeat,
    linear-gradient(var(--c), var(--c)) calc(100% - 4px) 0 / var(--w) calc(100% - 4px) no-repeat;
}
.btn:hover { color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn--go::after { content: ""; width: 1.25em; height: .55em; background: var(--red); -webkit-mask: url(../cuaderno/g-arrow.webp) center / contain no-repeat; mask: url(../cuaderno/g-arrow.webp) center / contain no-repeat; }
.btn--down::after { content: ""; width: 1.25em; height: .55em; background: var(--red); -webkit-mask: url(../cuaderno/g-arrow.webp) center / contain no-repeat; mask: url(../cuaderno/g-arrow.webp) center / contain no-repeat; transform: rotate(90deg); }
.btn--ghost { --box-c: var(--pencil); --box-w: 1px; font-weight: 500; }
.btn--sm { min-height: 36px; padding: 0 .8rem; font-size: .88rem; }
.btn--sm::before { inset: -3px; }
.btn .ext { background: var(--pen); }

/* segmented words: the chosen one gets boxed */
.seg { display: inline-flex; align-items: center; gap: 2px; }
.seg button {
  position: relative; appearance: none; border: 0; background: transparent; cursor: pointer;
  font-family: var(--f-mono); font-variation-settings: "wdth" 87.5; font-size: .75rem; text-transform: lowercase;
  padding: 0 .55rem; min-height: 32px; color: var(--ink-3);
  display: inline-flex; align-items: center; gap: .35rem;
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { color: var(--ink); }
.seg button[aria-pressed="true"]::before {
  content: ""; position: absolute; inset: 1px 0; pointer-events: none;
  --c: var(--pen); --w: 1.5px;
  background:
    linear-gradient(var(--c), var(--c)) 0 3px / calc(100% - 1px) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) 2px calc(100% - 3px) / calc(100% - 2px) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) 3px 0 / var(--w) calc(100% - 1px) no-repeat,
    linear-gradient(var(--c), var(--c)) calc(100% - 3px) 1px / var(--w) calc(100% - 1px) no-repeat;
}
.seg button:focus-visible { z-index: 1; }
.seg button svg { width: 14px; height: 14px; flex: none; }

.tgl, .copy {
  position: relative; appearance: none; cursor: pointer; border: 0; background: transparent;
  min-height: 36px; padding: 0 .75rem;
  font-family: var(--f-mono); font-variation-settings: "wdth" 87.5; font-size: .75rem; text-transform: lowercase; color: var(--ink-2);
}
.tgl::before, .copy::before {
  content: ""; position: absolute; pointer-events: none; inset: -2px;
  --c: var(--pencil); --w: 1px;
  background:
    linear-gradient(var(--c), var(--c)) 0 3px / calc(100% - 1px) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) 2px calc(100% - 3px) / calc(100% - 2px) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) 3px 0 / var(--w) calc(100% - 1px) no-repeat,
    linear-gradient(var(--c), var(--c)) calc(100% - 3px) 1px / var(--w) calc(100% - 1px) no-repeat;
}
.tgl:hover, .copy:hover { color: var(--ink); }
.tgl[aria-pressed="true"] { color: var(--ink); }
.tgl[aria-pressed="true"]::before { --c: var(--pen); --w: 1.5px; }
.tgl:disabled { opacity: .45; cursor: default; }
.copy.is-done { color: var(--ok); }

.chip { font-family: var(--f-mono); font-variation-settings: "wdth" 87.5; font-size: .75rem; text-transform: lowercase; color: var(--ink-3); white-space: nowrap; }
.chip + .chip::before { content: "/"; margin: 0 .5em; color: var(--pencil); }
.chip--state { position: relative; padding: .2rem .5rem; color: var(--ink-2); }
.chip--state::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; --c: var(--pencil);
  background:
    linear-gradient(var(--c), var(--c)) 0 2px / calc(100% - 1px) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 2px calc(100% - 2px) / calc(100% - 2px) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 2px 0 / 1px calc(100% - 1px) no-repeat,
    linear-gradient(var(--c), var(--c)) calc(100% - 2px) 1px / 1px calc(100% - 1px) no-repeat;
}

.range { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-variation-settings: "wdth" 87.5; font-size: .75rem; text-transform: lowercase; color: var(--ink-2); }
/* slider: a pencil line, a biro stroke for the filled part, his ○ as the thumb */
input[type="range"] {
  -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer;
  min-height: 32px; width: min(220px, 40vw); --p: 0%;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 2px; background: linear-gradient(var(--pen), var(--pen)) 0 0 / var(--p) 100% no-repeat, linear-gradient(var(--pencil), var(--pencil)) 0 50% / 100% 1px no-repeat;
}
input[type="range"]::-moz-range-track { height: 1px; background: var(--pencil); }
input[type="range"]::-moz-range-progress { height: 2px; background: var(--pen); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -7px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--pen);
}
input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 2px solid var(--pen); }
input[type="range"]:focus-visible { outline-offset: 2px; }

/* ============================================================
   Header
   ============================================================ */
.bar {
  position: sticky; top: 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule-2);
}
.bar__in { height: var(--bar-h); display: flex; align-items: center; gap: clamp(12px, 2vw, 26px); }
.brand { display: flex; align-items: baseline; gap: .6rem; text-decoration: none; white-space: nowrap; }
.brand b { font-weight: 800; font-size: 1.08rem; letter-spacing: -.01em; }
.brand span { font-family: var(--f-mono); font-size: .72rem; color: var(--ink-3); }
.nav { display: flex; gap: clamp(10px, 1.6vw, 22px); margin-left: auto; }
.nav a { text-decoration: none; font-size: .95rem; font-weight: 500; color: var(--ink-2); padding: .35rem 0; position: relative; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="true"] { color: var(--ink); }
.nav a[aria-current="true"]::after {
  content: ""; position: absolute; left: -2px; right: -6px; bottom: -3px; height: 6px;
  background: var(--u-pen) 0 50% / 100% 100% no-repeat;
}
.controls { display: flex; align-items: center; gap: 10px; }
.menu-btn { display: none; }
@media (max-width: 1020px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; }
  .bar__mail { display: none; }
  .controls { margin-left: auto; }
}
@media (max-width: 1120px) { .brand span { display: none; } }
@media (max-width: 520px) {
  .seg button { padding: 0 .4rem; }
  .seg .seg__txt-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 359px) {
  .bar__in { gap: 6px; }
  .controls { gap: 4px; }
  .brand b { font-size: .98rem; }
  .menu-btn { padding: 0 .55rem; }
}

.sheet-menu {
  position: fixed; inset: 0; z-index: 60; background: var(--paper);
  padding: calc(env(safe-area-inset-top, 0px) + 16px) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 24px);
  display: flex; flex-direction: column; gap: 4px; overflow-y: auto;
}
.sheet-menu__head { display: flex; justify-content: space-between; align-items: center; min-height: 44px; margin-bottom: 12px; }
.sheet-menu a.sheet-menu__link {
  display: flex; align-items: baseline; gap: 1rem; text-decoration: none; padding: .7rem 0;
  border-bottom: 1px solid var(--rule-2);
  font-weight: 800; font-size: 1.9rem; line-height: 1.1; letter-spacing: -.02em;
}
.sheet-menu a.sheet-menu__link .label { min-width: 2.6rem; font-size: .8rem; }
.sheet-menu a.sheet-menu__link:hover .label::before, .sheet-menu a.sheet-menu__link:focus-visible .label::before { content: ""; }
.sheet-menu .btn { margin-top: 20px; align-self: flex-start; }

/* ============================================================
   Section openers: number, underlined title, lead
   ============================================================ */
.sheet { padding-block: clamp(72px, 10vw, 136px); position: relative; }
.sheet__head { align-items: start; margin-bottom: clamp(32px, 4.5vw, 64px); row-gap: 16px; }
.sheet__no { grid-column: 1 / span 3; display: flex; flex-direction: column; gap: 4px; padding-top: .55rem; }
.sheet__no .num { font-family: var(--f-mono); font-variation-settings: "wdth" 87.5; font-size: .95rem; color: var(--red); }
.sheet__title { grid-column: 4 / span 6; }
.sheet__title h2 { font-size: clamp(2.4rem, 1.5rem + 3.2vw, 4.4rem); line-height: 1; letter-spacing: -.03em; }
.sheet__title p { margin-top: 22px; max-width: 56ch; color: var(--ink-2); font-size: 1.15rem; line-height: 1.55; text-wrap: pretty; }
.sheet__side { grid-column: 10 / -1; }
.sheet__side .scan { max-width: 300px; margin-left: auto; }
@media (max-width: 1020px) {
  .sheet__title { grid-column: 4 / -1; }
  .sheet__side { grid-column: 4 / -1; }
  .sheet__side .scan { margin-left: 0; max-width: 360px; }
}
@media (max-width: 760px) {
  .sheet__no, .sheet__title, .sheet__side { grid-column: 1 / -1; }
  .sheet__no { flex-direction: row; gap: 12px; align-items: baseline; padding-top: 0; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero { padding-top: clamp(28px, 4vw, 56px); position: relative; }
.hero__grid { row-gap: 32px; align-items: start; }
.hero__text { grid-column: 1 / span 6; display: flex; flex-direction: column; gap: 18px; }
.hero__fig { grid-column: 7 / -1; }
.kicker { font-size: .78rem; color: var(--ink-2); display: flex; flex-direction: column; gap: .2rem; text-transform: lowercase; }
.kicker .num { color: var(--red); }
.hero h1 { font-size: clamp(3.6rem, 2rem + 6.4vw, 7.4rem); line-height: .92; letter-spacing: -.045em; font-weight: 800; margin-left: -.03em; }
.hero h1 .u { background-size: 100% .09em; padding-bottom: .06em; }
.js .hero h1 .u:not(.is-seen) { background-size: 0% .09em; }
.js .hero h1 .u.is-seen { background-size: 100% .09em; }
.role { font-size: clamp(1.25rem, 1rem + .9vw, 1.6rem); font-weight: 650; line-height: 1.25; max-width: 28ch; letter-spacing: -.01em; margin-top: 10px; }
.lead { font-size: clamp(1.06rem, .98rem + .35vw, 1.22rem); color: var(--ink-2); max-width: 46ch; text-wrap: pretty; }
.proof { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; padding-top: 6px; }
.proof li { font-size: .9rem; line-height: 1.35; color: var(--ink-2); padding-left: 14px; border-left: 1.5px solid var(--pencil); }
.proof b { display: block; color: var(--ink); font-weight: 800; font-size: 1.7rem; line-height: 1.05; letter-spacing: -.02em; font-feature-settings: "tnum" 1; }
.cta { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; margin-top: 4px; }
.play { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; font-size: .95rem; }
.play a { font-weight: 600; }
.play__size { font-family: var(--f-mono); font-size: .75rem; color: var(--ink-3); }
.mailline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--f-mono); font-size: .85rem; }
.mailline a { word-break: break-all; }
@media (min-width: 1021px) { .hero .mailline { display: none; } }
.hero__level { margin-top: clamp(40px, 6vw, 72px); position: relative; }
.hero__level .hand { width: 100%; }
.hero__level figcaption { margin-top: 10px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
@media (max-width: 1020px) {
  .hero__text, .hero__fig { grid-column: 1 / -1; }
  .hero__fig { max-width: 640px; }
}
@media (max-width: 520px) {
  .hero h1 { font-size: clamp(3.3rem, 20vw, 5.6rem); }
  .proof b { font-size: 1.4rem; }
  .proof li { font-size: .85rem; }
  .hero__level { overflow: hidden; }
  .hero__level .hand { width: 175%; margin-left: -4%; }
}
@media (max-width: 340px) { .proof { grid-template-columns: 1fr; } }

/* ============================================================
   Figures: a screen rectangle drawn by the pen, notes below
   ============================================================ */
.plate { margin: 0; position: relative; }
.plate__stage { position: relative; background: transparent; touch-action: pan-y; }
.plate__stage canvas { width: 100%; height: 100%; }
.plate__stage.is-grab { cursor: grab; }
.plate__stage.is-grab:active { cursor: grabbing; }
/* the frame drawn by pen.js (ink-frame); before JS, a plain hairline box */
.plate__stage, .game__media { outline: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); outline-offset: -1px; }
.js .plate__stage, .js .game__media { outline: 0; }
.js .plate__stage:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.ink-frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
.ink-frame path { fill: var(--frame-c, var(--ink)); stroke: none; }
/* controls drawn with the pen: the CSS box is only the no-JS fallback */
.has-ink::before { display: none !important; }
.btn > .ink-frame, .tgl > .ink-frame, .copy > .ink-frame, .vid__play > .ink-frame { z-index: 0; }
.btn--ghost, .tgl, .copy, .chip--state { --frame-c: var(--ink-3); }
.tgl[aria-pressed="true"], .seg button { --frame-c: var(--pen); }
.seg button > .ink-frame { opacity: 0; width: 100%; height: 100%; }
.seg button[aria-pressed="true"] > .ink-frame { opacity: 1; }
.shot, .mtg, .ci { --frame-c: var(--ink); }
.plate__bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 16px 2px 10px;
}
.plate__bar + .plate__bar { padding-top: 4px; }
.plate__bar .readout { font-size: .75rem; color: var(--ink-2); margin-right: auto; line-height: 1.5; }
.plate__cap { padding: 12px 2px 0; margin-top: 6px; border-top: 1px solid var(--rule); font-size: .92rem; color: var(--ink-2); line-height: 1.55; text-wrap: pretty; }
.plate__cap .label { display: block; margin-bottom: 4px; color: var(--red); }
.plate__cap .src { display: block; margin-top: 8px; font-family: var(--f-mono); font-variation-settings: "wdth" 87.5; font-size: .72rem; color: var(--ink-3); overflow-wrap: anywhere; }
.plate__cap .src::before { content: ""; display: inline-block; width: .95em; height: .85em; margin-right: .4em; vertical-align: -.05em; background: var(--red); -webkit-mask: url(../cuaderno/g-hook.webp) center / contain no-repeat; mask: url(../cuaderno/g-hook.webp) center / contain no-repeat; }
.plate__hint { font-family: var(--f-mono); font-variation-settings: "wdth" 87.5; font-size: .72rem; color: var(--ink-3); }
.legend-row { display: flex; flex-wrap: wrap; gap: 6px 16px; font-family: var(--f-mono); font-variation-settings: "wdth" 87.5; font-size: .72rem; color: var(--ink-2); text-transform: lowercase; }
.legend-row > span { display: inline-flex; align-items: center; gap: 6px; }
.legend-row svg { width: 22px; height: 14px; overflow: visible; }
.legend-row svg * { fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* FIG. 0 */
.fig0 .plate__stage { aspect-ratio: 1 / 1; }
.fig0 .rest { position: absolute; inset: 14%; width: 72%; height: 72%; object-fit: contain; transition: opacity .6s ease; }
.fig0.is-live .rest { opacity: 0; }
.fig0 .axes { position: absolute; left: 12px; top: 10px; font-family: var(--f-mono); font-size: .72rem; color: var(--ink-3); pointer-events: none; }

/* ============================================================
   Ficha
   ============================================================ */
.ficha { padding-top: clamp(64px, 8vw, 104px); padding-bottom: clamp(72px, 10vw, 136px); }
.ficha__grid { row-gap: 24px; }
.ficha__who { grid-column: 1 / span 3; display: flex; flex-direction: column; gap: 10px; }
.ficha__who .hand { width: 100%; max-width: 240px; }
.ficha__who p { font-size: .86rem; color: var(--ink-3); max-width: 28ch; }
.facts { grid-column: 4 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); }
.facts > div { padding: 14px 0 18px; border-top: 1px solid var(--rule); }
.facts dt { margin-bottom: 4px; }
.facts dd { margin: 0; font-size: 1rem; line-height: 1.55; }
.stack { display: flex; flex-wrap: wrap; row-gap: 4px; margin-top: 2px; }
.stack .chip { font-size: .8rem; color: var(--ink); }
@media (max-width: 860px) {
  .ficha__who, .facts { grid-column: 1 / -1; }
  .ficha__who { flex-direction: row; align-items: center; }
  .ficha__who .hand { max-width: 150px; flex: none; }
}
@media (max-width: 620px) { .facts { grid-template-columns: 1fr; } }

/* ============================================================
   Work index: «seleccionado └> desactivar resto»
   ============================================================ */
.index { list-style: none; margin-bottom: clamp(56px, 7vw, 96px); border-top: 1.5px solid var(--ink); }
.index li { border-bottom: 1px solid var(--rule); }
.index a {
  display: grid; grid-template-columns: 3.4rem minmax(0, 1.1fr) minmax(0, 1fr) 15rem; gap: 16px; align-items: baseline;
  padding: 18px 0; text-decoration: none; position: relative; transition: color .16s;
}
.index a .label { color: var(--red); font-size: .8rem; }
.index__name { font-weight: 800; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem); line-height: 1.05; letter-spacing: -.025em; display: inline-flex; align-items: baseline; gap: .35em; }
.index__name::before {
  content: ""; width: 0; height: .7em; flex: none; background: var(--red); opacity: 0;
  -webkit-mask: url(../cuaderno/g-hook.webp) left center / contain no-repeat; mask: url(../cuaderno/g-hook.webp) left center / contain no-repeat;
  transition: width .16s ease, opacity .16s ease;
}
.index__desc { color: var(--ink-2); font-size: 1rem; text-wrap: balance; }
.index__tags { font-family: var(--f-mono); font-variation-settings: "wdth" 87.5; font-size: .75rem; color: var(--ink-3); text-align: right; text-transform: lowercase; }
@media (hover: hover) {
  .index:hover a:not(:hover) { color: var(--ink-3); }
  .index:hover a:not(:hover) .index__desc { color: var(--ink-3); }
}
.index a:hover .index__name::before, .index a:focus-visible .index__name::before { width: .8em; opacity: 1; }
@media (max-width: 1100px) and (min-width: 861px) {
  .index a { grid-template-columns: 3.4rem minmax(0, 1fr) minmax(0, 1fr); row-gap: 2px; }
  .index__tags { grid-column: 3; text-align: left; }
}
@media (max-width: 860px) {
  .index a { grid-template-columns: 2.6rem minmax(0, 1fr); row-gap: 4px; }
  .index__desc, .index__tags { grid-column: 2; text-align: left; }
}

/* ============================================================
   Case studies
   ============================================================ */
.case { padding-block: clamp(56px, 7vw, 104px); border-top: 1px solid var(--rule); row-gap: 28px; }
.case:first-of-type { border-top: 0; }
.case__head { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 24px; align-items: end; }
.case__head > .label { grid-column: 1 / -1; }
.case__head > .label .n { color: var(--red); }
.case__head h3 { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.6rem); line-height: 1; letter-spacing: -.035em; }
.case__head .desc { grid-column: 1 / -1; font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); font-weight: 600; max-width: 48ch; line-height: 1.3; text-wrap: balance; color: var(--ink-2); }
.case__links { display: flex; flex-wrap: wrap; gap: 12px 16px; align-self: end; align-items: center; }
.case__fig { grid-column: 1 / span 7; grid-row: 2 / span 2; }
.case > .standfirst { grid-column: 8 / -1; grid-row: 2; }
.case__body { grid-column: 8 / -1; grid-row: 3; align-self: start; display: flex; flex-direction: column; gap: 22px; }
@media (min-width: 1021px) { .case { grid-template-rows: auto auto 1fr; } }
@media (min-width: 1021px) and (min-height: 760px) { .case__body { position: sticky; top: calc(var(--bar-h) + 32px); } }
.case__under { margin-top: 28px; display: flex; flex-direction: column; gap: 24px; }
.standfirst { font-size: 1.14rem; line-height: 1.55; text-wrap: pretty; }
.more { font-size: .95rem; color: var(--ink-2); text-wrap: pretty; }
.case__note { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.case__under > .scan { max-width: 440px; }

/* Problem └> Decision └> Result */
.pdr { display: flex; flex-direction: column; gap: 16px; }
.pdr > div { display: grid; grid-template-columns: 7.2rem minmax(0, 1fr); gap: 12px; }
.pdr .label { padding-top: 4px; display: inline-flex; align-items: flex-start; gap: .35em; color: var(--red); }
.pdr > div + div .label::before {
  content: ""; width: .95em; height: .9em; flex: none; margin-top: .05em; background: var(--red);
  -webkit-mask: url(../cuaderno/g-hook.webp) center / contain no-repeat; mask: url(../cuaderno/g-hook.webp) center / contain no-repeat;
}
.pdr p { font-size: 1rem; color: var(--ink-2); text-wrap: pretty; }

/* what it doesn't do yet: his «?» */
.notyet { position: relative; padding: 14px 0 0 2.6rem; border-top: 1.5px solid var(--red); font-size: .95rem; color: var(--ink-2); line-height: 1.55; }
.notyet::before {
  content: ""; position: absolute; left: .2rem; top: 16px; width: 1.4rem; height: 2.2rem; background: var(--red);
  -webkit-mask: url(../cuaderno/g-q.webp) center / contain no-repeat; mask: url(../cuaderno/g-q.webp) center / contain no-repeat;
}
.notyet .label { color: var(--red); display: block; margin-bottom: 4px; }

.score { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 20px; }
.score:has(> :nth-child(3):last-child), .score:has(> :nth-child(6)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.score div { padding-left: 12px; border-left: 1.5px solid var(--pencil); }
.score b { display: block; font-weight: 800; font-size: 1.7rem; line-height: 1; letter-spacing: -.02em; font-feature-settings: "tnum" 1; }
.score span { display: block; margin-top: 4px; line-height: 1.35; font-family: var(--f-mono); font-variation-settings: "wdth" 87.5; font-size: .72rem; color: var(--ink-3); text-transform: lowercase; }
@media (max-width: 520px) { .score:not(:has(> :nth-child(3):last-child)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.quote { font-size: 1.1rem; line-height: 1.45; font-weight: 600; border-left: 1.5px solid var(--pencil); padding-left: 16px; text-wrap: pretty; }
.quote cite, .rule blockquote cite { display: block; margin-top: 6px; font-style: normal; font-family: var(--f-mono); font-variation-settings: "wdth" 87.5; font-size: .72rem; color: var(--ink-3); font-weight: 400; }
.evo { list-style: none; display: grid; font-size: .92rem; }
.evo li { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--rule-2); color: var(--ink-2); }
.evo li .mono { font-size: .75rem; color: var(--ink); padding-top: 2px; }
.aside-img { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.aside-img figcaption, .tool__media figcaption { font-size: .82rem; color: var(--ink-3); }
.shot { display: block; position: relative; }
.shot img { width: 100%; }
.shot::before, .mtg::before, .ci::before {
  content: ""; position: absolute; inset: -5px; pointer-events: none; z-index: 1; --c: var(--ink); --w: 1.25px;
  background:
    linear-gradient(var(--c), var(--c)) 0 5px / calc(100% - 2px) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) 3px calc(100% - 5px) / calc(100% - 3px) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) 5px 1px / var(--w) calc(100% - 2px) no-repeat,
    linear-gradient(var(--c), var(--c)) calc(100% - 5px) 0 / var(--w) calc(100% - 4px) no-repeat;
}
.pix { image-rendering: pixelated; image-rendering: crisp-edges; }
@media (max-width: 1020px) {
  .case__fig, .case__body, .case > .standfirst { grid-column: 1 / -1; grid-row: auto; }
  /* phones and tablets: figure, then the argument, then the side notes and scans */
  .case__fig { display: contents; }
  .case__fig > * { grid-column: 1 / -1; min-width: 0; }
  .case__under { order: 1; margin-top: 0; }
  .case__head { grid-template-columns: 1fr; }
}
@media (min-width: 1021px) and (max-width: 1279px) { .pdr > div { grid-template-columns: 1fr; gap: 2px; } }
@media (max-width: 520px) {
  .pdr > div { grid-template-columns: 1fr; gap: 2px; }
  .case__note { grid-template-columns: 1fr; }
}

/* ============================================================
   FIG. 1 — scouting bands
   ============================================================ */
.scout { padding: 18px 16px 10px; display: grid; gap: 10px; }
.scout__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.scout__player { font-weight: 800; font-size: 1.5rem; line-height: 1; letter-spacing: -.02em; }
.scout__tag { font-family: var(--f-mono); font-variation-settings: "wdth" 87.5; font-size: .72rem; font-weight: 400; color: var(--ink-3); text-transform: lowercase; letter-spacing: 0; margin-left: .4rem; }
.scout__margin { font-family: var(--f-mono); font-variation-settings: "wdth" 87.5; font-size: .8rem; color: var(--ink-2); }
.scout__margin b { color: var(--pen); font-size: 1.15rem; font-weight: 600; }
.scout__row, .scout__axis { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) 6rem; align-items: center; gap: 12px; }
.scout__row { font-size: .9rem; min-height: 26px; }
.scout__row .nm { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scout__axis { font-family: var(--f-mono); font-size: .68rem; color: var(--ink-3); }
.scout__axis div { display: flex; justify-content: space-between; }
/* pencil track with five ticks */
.scout__track { position: relative; height: 20px; background:
  linear-gradient(var(--pencil), var(--pencil)) 0 50% / 100% 1px no-repeat,
  linear-gradient(var(--pencil), var(--pencil)) 0 50% / 1px 7px no-repeat,
  linear-gradient(var(--pencil), var(--pencil)) 24.5% 50% / 1px 7px no-repeat,
  linear-gradient(var(--pencil), var(--pencil)) 50% 50% / 1px 7px no-repeat,
  linear-gradient(var(--pencil), var(--pencil)) 75.5% 50% / 1px 7px no-repeat,
  linear-gradient(var(--pencil), var(--pencil)) 100% 50% / 1px 7px no-repeat; }
/* the band: hatched, closed by his room-corner brackets */
.scout__band {
  position: absolute; top: 3px; bottom: 3px;
  background:
    linear-gradient(var(--pen), var(--pen)) 0 0 / 1.5px 100% no-repeat,
    linear-gradient(var(--pen), var(--pen)) 0 0 / 4px 1.5px no-repeat,
    linear-gradient(var(--pen), var(--pen)) 0 100% / 4px 1.5px no-repeat,
    linear-gradient(var(--pen), var(--pen)) 100% 0 / 1.5px 100% no-repeat,
    linear-gradient(var(--pen), var(--pen)) 100% 0 / 4px 1.5px no-repeat,
    linear-gradient(var(--pen), var(--pen)) 100% 100% / 4px 1.5px no-repeat,
    repeating-linear-gradient(-60deg, color-mix(in srgb, var(--pen) 70%, transparent) 0 1px, transparent 1px 5px);
  transition: left .45s cubic-bezier(.2,.8,.2,1), width .45s cubic-bezier(.2,.8,.2,1);
}
.scout__real {
  position: absolute; top: 50%; width: 12px; height: 13px; margin: -6.5px 0 0 -6px; background: var(--red); opacity: 0;
  -webkit-mask: url(../cuaderno/g-x.webp) center / contain no-repeat; mask: url(../cuaderno/g-x.webp) center / contain no-repeat;
  transition: opacity .3s, left .3s;
}
.scout.show-real .scout__real { opacity: 1; }
.scout__val { font-family: var(--f-mono); font-variation-settings: "wdth" 87.5; font-size: .78rem; text-align: right; color: var(--ink); font-feature-settings: "tnum" 1; }
@media (max-width: 520px) { .scout__row, .scout__axis { grid-template-columns: 6.6rem minmax(0, 1fr) 5rem; gap: 8px; font-size: .8rem; } }
@media (max-width: 380px) {
  .scout__row { grid-template-columns: minmax(0, 1fr) 5rem; row-gap: 0; }
  .scout__row .nm { grid-column: 1 / -1; }
  .scout__axis { grid-template-columns: minmax(0, 1fr) 5rem; }
  .scout__axis > span:first-child { display: none; }
}

/* FIG. 2 / FIG. 5 stages */
.fig-replay .plate__stage { aspect-ratio: 947 / 832; }
.fig-hex .plate__stage { aspect-ratio: 16 / 11; }
@media (max-width: 520px) { .fig-hex .plate__stage { aspect-ratio: 3 / 4; } }

/* FIG. 4 */
.fig-face .plate__stage { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 20px; padding: 18px; align-items: start; }
.fig-face canvas { width: 100%; aspect-ratio: 1; height: auto; }
.fig-face .face-canvas { position: relative; }
.fig-face .face-form { display: flex; flex-direction: column; gap: 12px; }
.fig-face label { font-family: var(--f-mono); font-variation-settings: "wdth" 87.5; font-size: .75rem; text-transform: lowercase; color: var(--ink-3); }
.fig-face input[type="text"] {
  width: 100%; min-height: 44px; padding: 0 .2rem; background: transparent; border: 0; border-bottom: 1.5px solid var(--pen); border-radius: 0;
  font-size: 1.15rem; font-weight: 650;
}
.fig-face .code { font-family: var(--f-mono); font-size: .72rem; line-height: 1.5; word-break: break-all; color: var(--ink-2); overflow-wrap: anywhere; }
/* FaceDNA: the descriptor table from his OS notes, filled by value */
.bits { display: flex; height: 24px; border: 1.25px solid var(--ink); }
.bits span { flex: var(--w) 1 0; border-right: 1px solid var(--ink); position: relative;
  background: repeating-linear-gradient(-60deg, color-mix(in srgb, var(--pen) calc(var(--v) * .9%), transparent) 0 1px, transparent 1px 4px); }
.bits span:last-child { border-right: 0; }
.bits-legend { font-family: var(--f-mono); font-size: .68rem; color: var(--ink-3); line-height: 1.5; }
@media (max-width: 560px) { .fig-face .plate__stage { grid-template-columns: 1fr; } .fig-face canvas { max-width: 240px; } }

/* video plates */
.vid { position: relative; background: var(--sheet); aspect-ratio: var(--ar, 16 / 9); }
.vid img, .vid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vid__play {
  position: absolute; left: 12px; bottom: 12px; z-index: 4;
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 .9rem;
  background-color: var(--paper); color: var(--ink); border: 0; cursor: pointer;
  font-family: var(--f-mono); font-variation-settings: "wdth" 87.5; font-size: .75rem; text-transform: lowercase;
}
.vid__play::before {
  content: ""; position: absolute; inset: -3px; pointer-events: none; --c: var(--ink); --w: 1.5px;
  background:
    linear-gradient(var(--c), var(--c)) 0 3px / calc(100% - 1px) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) 2px calc(100% - 3px) / calc(100% - 2px) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) 3px 0 / var(--w) calc(100% - 1px) no-repeat,
    linear-gradient(var(--c), var(--c)) calc(100% - 3px) 1px / var(--w) calc(100% - 1px) no-repeat;
}
.vid video { cursor: pointer; }
@media (hover: hover) {
  .vid.is-playing .vid__play { opacity: 0; pointer-events: none; }
  .vid.is-playing:hover .vid__play, .vid.is-playing .vid__play:focus-visible { opacity: 1; pointer-events: auto; }
}

/* FIG. 6 — bytes */
.bytes { padding: 18px 16px; display: grid; gap: 16px; }
.bytes__files { display: flex; flex-wrap: wrap; gap: 10px; }
.bytes__drop { padding: 12px 0; border-top: 1px dashed var(--pencil); border-bottom: 1px dashed var(--pencil); font-size: .9rem; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.bytes__pick { position: relative; display: inline-flex; align-items: center; }
.bytes__pick:focus-within { outline: 2px solid var(--red); outline-offset: 3px; }
.bytes__drop.is-over { background: repeating-linear-gradient(-60deg, color-mix(in srgb, var(--pen) calc(var(--hatch-a) * 100%), transparent) 0 1px, transparent 1px 5px); }
.bytes__out { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 96px; }
.hex { font-family: var(--f-mono); font-size: .82rem; line-height: 1.9; word-break: break-all; overflow-wrap: anywhere; }
.hex span { display: inline-block; padding: 0 2px; }
.hex .m { outline: 1.5px solid var(--ok); outline-offset: 1px; }
.hex .x { outline: 1.5px solid var(--red); outline-offset: 1px; }
.hex .struck { text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 1.5px; }
/* verdict: a line of notation, not a rubber stamp */
.stamp { font-family: var(--f-mono); font-variation-settings: "wdth" 87.5; font-size: .95rem; font-weight: 600; text-transform: lowercase; white-space: nowrap; display: inline-flex; align-items: center; gap: .4rem; }
.stamp::before { content: ""; width: 1.3em; height: .6em; background: currentColor; -webkit-mask: url(../cuaderno/g-arrow.webp) center / contain no-repeat; mask: url(../cuaderno/g-arrow.webp) center / contain no-repeat; }
.stamp.ok { color: var(--ok); }
.stamp.no { color: var(--red); }
.bytes__why { font-size: .9rem; color: var(--ink-2); grid-column: 1 / -1; }

/* ============================================================
   Games shelf
   ============================================================ */
.shelf { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(40px, 5vw, 64px) clamp(20px, 2.6vw, 40px); }
.game { grid-column: span 4; display: flex; flex-direction: column; }
.game--wide { grid-column: span 6; }
.game__media { position: relative; aspect-ratio: 16 / 9; background: var(--sheet); container-type: inline-size; }
.game__media > img:not(.pix) { width: 100%; height: 100%; object-fit: cover; }
.game__media .vid { position: absolute; inset: 0; aspect-ratio: auto; }
.game__body { padding: 18px 0 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.game__meta { display: flex; flex-wrap: wrap; row-gap: 2px; }
.game h3 { font-size: 1.45rem; line-height: 1.1; letter-spacing: -.02em; font-weight: 800; }
.game__body p { font-size: .96rem; color: var(--ink-2); text-wrap: pretty; }
.game__links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: auto; padding-top: 6px; font-size: .95rem; font-weight: 600; }
.game--sketch .game__media { background: transparent; }
.game--sketch .scan__img { position: absolute; inset: 8% 10%; width: auto; }
.stage-sapo { position: absolute; inset: 0; background: url(../img/sapo-harbour.webp) center / cover; }
.stage-sapo .sapo { position: absolute; left: 50%; bottom: 6%; width: 34%; aspect-ratio: 179 / 280; transform: translateX(-50%); background: url(../img/sapo-idle.webp) 0 0 / 400% 100% no-repeat; }
.term {
  position: absolute; inset: 0; padding: 14px; background: #0b0d10; color: #d6dde8; font-family: var(--f-mono); font-size: .75rem; line-height: 1.55;
  display: flex; flex-direction: column; gap: 8px; overflow: hidden;
}
.term__log { flex: 1; overflow-y: auto; }
.term__log p { margin: 0 0 4px; }
.term__log .pir { color: #ff9d7a; }
.term__log .you { color: #7fd0ff; }
.term__log .sys { color: #9aa3b2; }
.term__opts { display: grid; gap: 4px; }
.term__opts button { text-align: left; background: transparent; border: 1px solid #2a303c; color: #d6dde8; font-family: inherit; font-size: .72rem; padding: 6px 8px; cursor: pointer; }
.term__opts button:hover, .term__opts button:focus-visible { border-color: #ff8e9c; color: #fff; }
.term__bar { display: flex; gap: 4px; align-items: center; color: #9aa3b2; }
.term__bar i { display: inline-block; height: 8px; width: 10px; background: #ff8e9c; }
.term__bar i.off { background: #2a303c; }
.game__media:has(.term) { aspect-ratio: 16 / 10; }
.formula { position: absolute; inset: 0; padding: 16px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.formula code { white-space: nowrap; font-size: clamp(.6rem, 3.5cqi, .92rem); color: var(--ink); }
.formula svg { width: 100%; height: auto; }
.races { position: absolute; inset: 0; padding: 12px 14px; display: grid; gap: 6px; align-content: center; font-family: var(--f-mono); font-size: .66rem; color: var(--ink-2); }
.races div { display: grid; grid-template-columns: 4.8rem repeat(5, minmax(0, 1fr)); gap: 4px; align-items: center; }
.races .hd span { text-align: center; color: var(--ink-3); }
.races .hd span:first-child { text-align: left; }
.races i { font-style: normal; min-height: 22px; display: flex; align-items: center; justify-content: center; color: var(--pencil); }
.races i::before { content: "·"; }
.races i[data-v]::before { content: attr(data-v); }
.races i[data-v] { position: relative; color: var(--pen); font-weight: 600; }
.races i.neg[data-v] { color: var(--red); }
.races i[data-v]::after {
  content: ""; position: absolute; inset: 1px -1px; pointer-events: none; --c: currentColor; --w: 1.25px;
  background:
    linear-gradient(var(--c), var(--c)) 0 3px / calc(100% - 1px) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) 2px calc(100% - 3px) / calc(100% - 2px) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) 3px 0 / var(--w) calc(100% - 1px) no-repeat,
    linear-gradient(var(--c), var(--c)) calc(100% - 3px) 1px / var(--w) calc(100% - 1px) no-repeat;
}
.races__note { margin: 4px 0 0; color: var(--ink-3); font-size: .64rem; }
.game--row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.6vw, 40px); }
.game--row .game__media { grid-column: 1 / span 6; aspect-ratio: 2 / 1; }
.game--row .game__body { grid-column: 7 / -1; padding-top: 0; }
@media (max-width: 1020px) {
  .game, .game--wide { grid-column: span 6; }
  .game--row { grid-column: 1 / -1; display: flex; flex-direction: column; }
  .game--row .game__media { aspect-ratio: 16 / 10; }
  .game--row .game__body { padding-top: 18px; }
}
@media (max-width: 640px) {
  .game, .game--wide { grid-column: 1 / -1; }
}

/* ============================================================
   Tools
   ============================================================ */
.tools { list-style: none; border-top: 1.5px solid var(--ink); }
.tool { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.2vw, 32px); row-gap: 16px; padding: 28px 0; border-bottom: 1px solid var(--rule); align-items: start; }
.tool > :nth-child(1) { grid-column: 1 / span 3; }
.tool > :nth-child(2) { grid-column: 4 / span 5; }
.tool > :nth-child(3) { grid-column: 9 / -1; }
.tool--more > :nth-child(2) { grid-column: 4 / -1; columns: 2; column-gap: clamp(16px, 2.2vw, 32px); }
.tool--more p { break-inside: avoid; margin-bottom: 10px; }
.tool h3 { font-size: 1.4rem; line-height: 1.1; letter-spacing: -.02em; margin-bottom: 8px; }
.tool p:not(.label):not(.plate__hint) { font-size: .98rem; color: var(--ink-2); text-wrap: pretty; }
.tool p + p { margin-top: 10px; }
.tool__media { display: flex; flex-direction: column; gap: 8px; }
.tool__links { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px 14px; font-weight: 600; font-size: .95rem; }
.mtg { padding: 14px 12px; display: grid; gap: 12px; position: relative; }
.mtg .seg { justify-self: start; }
.mtg__bars { display: grid; gap: 10px; }
.mtg__bar { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) 4.6rem; gap: 10px; align-items: center; font-family: var(--f-mono); font-size: .75rem; }
.mtg__bar .t { height: 12px; position: relative; background: linear-gradient(var(--pencil), var(--pencil)) 0 50% / 100% 1px no-repeat; }
.mtg__bar .t i { position: absolute; top: 0; bottom: 0; transition: width .5s cubic-bezier(.2,.8,.2,1), left .5s;
  background: linear-gradient(var(--pen), var(--pen)) 0 0 / 1.5px 100% no-repeat, linear-gradient(var(--pen), var(--pen)) 100% 0 / 1.5px 100% no-repeat,
    repeating-linear-gradient(-60deg, color-mix(in srgb, var(--pen) 75%, transparent) 0 1px, transparent 1px 4px); }
.mtg__bar .t .zero { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--ink-3); }
.mtg__card { display: flex; justify-content: space-between; gap: 10px; align-items: center; border-top: 1px solid var(--rule); padding-top: 10px; font-size: .9rem; }
.mtg__card b { font-family: var(--f-mono); font-size: 1rem; white-space: nowrap; }
.ci { position: relative; display: grid; gap: 6px; background: #0e1116; color: #d7dde8; padding: 12px; font-family: var(--f-mono); font-size: .72rem; }
.ci div { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.ci .pill { padding: 1px 8px; border-radius: 99px; font-size: .66rem; color: #0b0d10; font-weight: 600; }
.ci .ok { background: #10b981; } .ci .run { background: #3b82f6; } .ci .ko { background: #ef4444; }
@media (max-width: 1020px) {
  .tool > :nth-child(1) { grid-column: 1 / span 5; }
  .tool > :nth-child(2), .tool--more > :nth-child(2) { grid-column: 6 / -1; columns: 1; }
  .tool > :nth-child(3) { grid-column: 1 / -1; order: 3; max-width: 560px; }
}
@media (max-width: 640px) { .tool > :nth-child(n) { grid-column: 1 / -1; } }

/* ============================================================
   Method
   ============================================================ */
.rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); border-top: 1.5px solid var(--ink); }
.rule { padding: 24px 0 30px; border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 10px; }
.rule > .label { color: var(--red); font-size: .8rem; display: inline-flex; align-items: center; gap: .4em; }
.rule > .label::after { content: ""; width: 1.3em; height: .55em; background: var(--red); -webkit-mask: url(../cuaderno/g-arrow.webp) center / contain no-repeat; mask: url(../cuaderno/g-arrow.webp) center / contain no-repeat; }
.rule h3 { font-size: 1.35rem; line-height: 1.12; letter-spacing: -.02em; }
.rule p { font-size: .98rem; color: var(--ink-2); text-wrap: pretty; }
.rule blockquote { margin: 6px 0 0; font-weight: 600; font-size: 1rem; line-height: 1.45; border-left: 1.5px solid var(--pencil); padding-left: 14px; text-wrap: pretty; }
.rule--paper { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.2vw, 32px); align-items: start; }
.rule--paper > .label, .rule--paper > h3, .rule--paper > p { grid-column: 1 / span 5; }
.rule--paper > .scan { grid-column: 7 / -1; grid-row: 1 / span 4; }
.rule--paper .scan__img { max-width: 480px; }
@media (max-width: 980px) {
  .rules { grid-template-columns: 1fr 1fr; }
  .rule--paper > .label, .rule--paper > h3, .rule--paper > p { grid-column: 1 / span 6; }
  .rule--paper > .scan { grid-column: 7 / -1; }
}
@media (max-width: 640px) {
  .rules { grid-template-columns: 1fr; }
  .rule--paper { display: flex; }
  .rule--paper > .scan { order: 4; }
  .rule--paper .scan__img { max-width: 300px; }
}

/* ============================================================
   Timeline
   ============================================================ */
.tl { list-style: none; border-top: 1.5px solid var(--ink); }
.tl li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.2vw, 32px); padding: 16px 0; border-bottom: 1px solid var(--rule); }
.tl .when { grid-column: 1 / span 3; font-family: var(--f-mono); font-variation-settings: "wdth" 87.5; font-size: .8rem; color: var(--ink); padding-top: 3px; text-transform: lowercase; }
.tl .what { grid-column: 4 / span 6; color: var(--ink-2); }
.tl .what span { color: inherit; }
.tl .what b { color: var(--ink); font-weight: 700; }
.tl li.is-now .when { color: var(--red); display: inline-flex; gap: .4em; align-items: flex-start; }
.tl li.is-now .when::before { content: ""; width: 1em; height: .95em; flex: none; background: var(--red); -webkit-mask: url(../cuaderno/g-hook.webp) center / contain no-repeat; mask: url(../cuaderno/g-hook.webp) center / contain no-repeat; }
.tl .aside { grid-column: 10 / -1; grid-row: 1 / span 2; }
.tl .aside .scan__img { max-width: 220px; }
@media (max-width: 860px) {
  .tl .what { grid-column: 4 / -1; }
  .tl .aside { grid-column: 4 / -1; grid-row: auto; margin-top: 12px; }
}
@media (max-width: 520px) { .tl .when, .tl .what, .tl .aside { grid-column: 1 / -1; } }

/* ============================================================
   Contact
   ============================================================ */
.boss { padding-bottom: clamp(80px, 10vw, 144px); }
.boss__grid { row-gap: 32px; align-items: start; }
.boss__text { grid-column: 1 / span 7; display: flex; flex-direction: column; gap: 24px; }
.boss__text .big { font-size: clamp(2.5rem, 1.4rem + 4.4vw, 5.4rem); line-height: .98; letter-spacing: -.04em; }
.boss__text .big .s { display: block; }
.boss__text .big .s + .s { color: var(--red); }
.boss__mail { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.boss__mail a { font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem); font-weight: 700; word-break: break-all; text-decoration: none; }
.boss__mail a .u { background-size: 100% .12em; }
.js .boss__mail a .u:not(.is-seen) { background-size: 0% .12em; }
.links { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 40px); }
.links li { border-top: 1px solid var(--rule); }
.links a { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; text-decoration: none; font-weight: 600; min-height: 44px; align-items: center; }
.links a .mono { font-size: .78rem; color: var(--ink-3); font-weight: 400; }
.links__copy { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding: 6px 0; font-weight: 600; }
.links__copy .mono { font-size: .78rem; color: var(--ink-3); font-weight: 400; margin-left: .5rem; }
.boss__art { grid-column: 9 / -1; display: flex; flex-direction: column; gap: 16px; }
.boss__art .scan__img { max-width: 360px; }
@media (max-width: 900px) {
  .boss__text, .boss__art { grid-column: 1 / -1; }
  .boss__art .scan { max-width: 420px; }
}
@media (max-width: 520px) { .links { grid-template-columns: 1fr; } }

/* ============================================================
   Colophon
   ============================================================ */
.colo { border-top: 1.5px solid var(--ink); padding-block: 44px calc(44px + env(safe-area-inset-bottom, 0px)); font-size: .9rem; color: var(--ink-2); }
.colo__grid { row-gap: 28px; }
.colo__col { grid-column: span 4; display: flex; flex-direction: column; gap: 10px; }
.colo__col p { line-height: 1.55; }
.swatches { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.swatches span { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: .72rem; color: var(--ink-3); }
.swatches i { width: 14px; height: 14px; display: inline-block; outline: 1px solid var(--rule); outline-offset: 1px; }
.colo .hand--legend { width: min(100%, 280px); }
@media (max-width: 900px) { .colo__col { grid-column: 1 / -1; } }

/* ---------- hitbox debug mode (his H / F1 toggle, as a page feature) ---------- */
html.hitbox body * { outline: 1px solid color-mix(in srgb, var(--red) 70%, transparent) !important; outline-offset: -1px !important; }
html.hitbox [data-hb]::after {
  content: attr(data-hb); position: absolute; z-index: 40; left: 0; top: 0; transform: translateY(-100%);
  font-family: var(--f-mono); font-size: 10px; line-height: 1; padding: 3px 4px; background: var(--ink); color: var(--paper); pointer-events: none; white-space: nowrap;
}
html.hitbox [data-hb]:not(.bar) { position: relative; }
html.hitbox .bar::after { top: 100%; transform: none; }
html.hitbox body :focus-visible, html.hitbox body .bytes__pick:focus-within { outline: 2px solid var(--red) !important; outline-offset: 3px !important; }

/* ============================================================
   Motion: the only animation is a mark being drawn
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__level .hand > i { clip-path: inset(0 100% 0 0); animation: draw 1.8s .25s cubic-bezier(.6, .1, .2, 1) forwards; }
  .js .hero__level .hand > i.mark { animation-delay: 1.1s; animation-duration: .9s; }
  .js .u { background-size: 0% .15em; transition: background-size .6s cubic-bezier(.3, .7, .2, 1) .1s; }
  .js .u.is-seen { background-size: 100% .15em; }
  /* a big frame draws itself in once, left to right, the first time it is seen */
  .js .plate__stage > .ink-frame:not(.is-drawn), .js .game__media > .ink-frame:not(.is-drawn) { clip-path: inset(-20px 100% -20px -20px); }
  .js .plate__stage > .ink-frame.is-drawn, .js .game__media > .ink-frame.is-drawn { clip-path: inset(-20px -20px -20px -20px); transition: clip-path .7s cubic-bezier(.3, .7, .2, 1); }
}
@keyframes draw { to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* print: a clean CV */
@media print {
  .bar, .plate__bar, .vid__play, .skip, .controls, .copy, .hero__level, .case__fig, .game__media, .tool__media, .boss__art, .scan { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .sheet { padding-block: 16pt; }
  .case__body { grid-column: 1 / -1; }
  a { text-decoration: none; }
}

/* ============================================================
   Phones and touch
   ============================================================ */
@media (max-width: 600px) {
  :root { --os: 4px; }
  .plate__bar .readout { flex: 1 0 100%; }
  .fig-replay .plate__bar .readout { min-height: 3em; }
  .plate__bar .range { flex: 1 1 12rem; }
  .plate__bar input[type="range"] { flex: 1; width: auto; min-width: 0; min-height: 44px; }
  .plate__bar .seg[data-brushes] { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); width: 100%; row-gap: 4px; }
  .plate__bar .seg[data-brushes] button { grid-column: span 2; justify-content: center; min-height: 40px; }
  .plate__bar .seg[data-brushes] button:nth-child(n+4) { grid-column: span 3; }
  .plate__bar .range:has([data-scout-q]) { flex: 1 0 100%; flex-wrap: wrap; gap: 6px; }
  .plate__bar .seg[data-scout-q] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .plate__bar .seg[data-scout-q] button { justify-content: center; min-height: 40px; white-space: nowrap; }
}
@media (max-width: 360px) { .plate__bar .seg[data-brushes] button, .plate__bar .seg[data-scout-q] button { padding: 0 .3rem; } }
@media (orientation: landscape) and (max-height: 520px) {
  .fig0 .plate__stage, .fig-replay .plate__stage, .fig-hex .plate__stage { aspect-ratio: auto; height: calc(100svh - var(--bar-h) - 96px); }
}
@media (pointer: coarse) {
  .seg button, .btn--sm, .copy, .tgl, input[type="range"] { min-height: 44px; }
  .game__links a, .tool__links a, .mailline a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (pointer: coarse) and (min-width: 390px) { .bar .seg button { min-width: 40px; justify-content: center; } }

/* below-the-fold art waits until it is near the screen (JS adds .is-near) */
.js .stage-sapo:not(.is-near), .js .stage-sapo:not(.is-near) .sapo { background-image: none; }
.js .scan:not(.is-near) .scan__img > i, .js .boss__art:not(.is-near) .hand > i, .js .colo:not(.is-near) .hand > i { -webkit-mask-image: none; mask-image: none; background: transparent; }

/* forced colours (Windows high contrast) */
@media (forced-colors: active) {
  .seg button[aria-pressed="true"], .tgl[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .hand > i[class], .scan__img > i[class], .mk, .ext { forced-color-adjust: none; background: CanvasText; }
  .hand > i.mark, .scan__img > i.red { background: Highlight; }
  .btn, .tgl, .copy, .vid__play { border: 1px solid ButtonText; }
  .ink-frame path { fill: CanvasText; }
  /* drawn marks keep their drawing, in system colours */
  .scout__track, .scout__real, .mtg__bar .t, .bits span, input[type="range"],
  .btn--go::after, .btn--down::after, .stamp::before, .notyet::before, .pdr .label::before,
  .plate__cap .src::before, .rule > .label::after, .tl li.is-now .when::before, .index__name::before {
    forced-color-adjust: none; --pen: CanvasText; --pencil: GrayText; --red: Highlight; --ink-3: GrayText;
  }
}


/* ============================================================
   v3 · the hand-made layer
   Every ruled line is a real stroke from the notebook (07, 05),
   stretched to the row; numbers are written with digits cut from
   his AVL-tree pages; the pink is his highlighter (06).
   ============================================================ */


/* ruled lines */
.index, .tools, .rules, .tl { border-top: 0; background: var(--r-ink) 0 0 / 100% 5px no-repeat; }
.colo { border-top: 0; }
.index { padding-top: 2px; }
.index li, .tool, .rule, .tl li, .evo li { border-bottom: 0; background: var(--r-pencil) 0 100% / 100% 4px no-repeat; }
.facts > div, .links li, .mtg__card, .plate__cap { border-top: 0; background: var(--r-pencil) 0 0 / 100% 4px no-repeat; }
.case { border-top: 0; background: var(--r-pencil) 0 0 / 100% 4px no-repeat; }
.case:first-of-type { background: none; }
.notyet { border-top: 0; background: var(--r-red) 0 0 / 100% 4px no-repeat; }
.bar { border-bottom: 0; background: var(--r-pencil) 0 100% / 100% 3px no-repeat, color-mix(in srgb, var(--paper) 92%, transparent); }
/* the same stroke, shifted and stretched differently row to row, so it never repeats exactly */
.index li:nth-child(3n+2), .tool:nth-child(3n+2), .rule:nth-child(3n+2), .tl li:nth-child(3n+2), .evo li:nth-child(3n+2), .facts > div:nth-child(3n+2), .links li:nth-child(3n+2) { background-size: 112% 4px; background-position: 70% 100%; }
.index li:nth-child(3n), .tool:nth-child(3n), .rule:nth-child(3n), .tl li:nth-child(3n), .evo li:nth-child(3n), .facts > div:nth-child(3n), .links li:nth-child(3n) { background-size: 96% 5px; background-position: 30% 100%; }
.facts > div:nth-child(3n+2), .facts > div:nth-child(3n), .links li:nth-child(3n+2), .links li:nth-child(3n) { background-position-y: 0; }
/* vertical strokes */
.proof li, .score div, .quote, .rule blockquote { border-left: 0; background: var(--v-pencil) 0 0 / 4px 100% no-repeat; }
.score div:nth-child(even), .proof li:nth-child(even) { background-size: 4px 112%; background-position: 0 60%; }

/* his handwritten digits */
.hw { display: inline-flex; align-items: flex-end; height: 1em; vertical-align: -.12em; line-height: 1; }
.hw i { display: block; height: 100%; width: calc(var(--w) / 64 * 1em); background: currentColor;
  -webkit-mask: var(--g) center / 100% 100% no-repeat; mask: var(--g) center / 100% 100% no-repeat; }
.hw i + i { margin-left: .05em; }
.hw .gd { height: .2em; width: .2em; margin: 0 .04em; }
.hw .g0 { --g: url(../cuaderno/cifras/d0.webp); --w: 64; }
.hw .g1 { --g: url(../cuaderno/cifras/d1.webp); --w: 20; }
.hw .g2 { --g: url(../cuaderno/cifras/d2.webp); --w: 42; }
.hw .g3 { --g: url(../cuaderno/cifras/d3.webp); --w: 64; }
.hw .g4 { --g: url(../cuaderno/cifras/d4.webp); --w: 63; }
.hw .g5 { --g: url(../cuaderno/cifras/d5.webp); --w: 39; }
.hw .g6 { --g: url(../cuaderno/cifras/d6.webp); --w: 39; }
.hw .g7 { --g: url(../cuaderno/cifras/d7.webp); --w: 34; }
.hw .g8 { --g: url(../cuaderno/cifras/d8.webp); --w: 43; }
.hw .g9 { --g: url(../cuaderno/cifras/d9.webp); --w: 45; }
.hw .gd { --g: url(../cuaderno/cifras/dot.webp); }
.sheet__no .num { font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem); line-height: 1; color: var(--red); }
.kicker .num { font-size: 1.6rem; vertical-align: -.2em; }
.case__no { font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); line-height: 1; color: var(--red); margin-bottom: -4px; }
.index a .label { font-size: 1.7rem; line-height: 1; }
.rule > .label { font-size: 1.5rem; line-height: 1; }
.rule > .label::after { width: .9em; height: .4em; }

/* his pink highlighter */
.hl { background: var(--hl) 0 72% / 100% .78em no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .18em; margin: 0 -.12em; }

/* headings pressed into the paper: the edge of each letter picks up the paper's tooth */
h1, h2, .case__head h3, .boss__text .big { filter: url(#ink); }

@media (forced-colors: active) {
  .hw i { forced-color-adjust: none; background: CanvasText; }
  .hl { background: none; text-decoration: underline; }
  h1, h2, .case__head h3, .boss__text .big { filter: none; }
}
@media print { main > section, .colo { background: none; margin: 0; } }
.case__head > .case__no { grid-column: 1 / -1; }

/* hero: the frog as he first drew it, next to the frog his tool turned into voxels */
.hero__fig { position: relative; }
.hero__sketch { position: absolute; z-index: 5; left: -64px; top: -46px; width: clamp(150px, 15vw, 220px); transform: rotate(-6deg); pointer-events: none; }
.hero__sketch .scan__img { aspect-ratio: 720 / 527; }
.hero__sketch .scan__img > i { -webkit-mask-image: url(../cuaderno/sapo-boli.webp); mask-image: url(../cuaderno/sapo-boli.webp); }
.hero__sketch .mk--arrow { position: absolute; right: -18px; bottom: -8px; width: 46px; height: 20px; color: var(--red); transform: rotate(38deg); }
.fig0 .axes { left: auto; right: 12px; }
@media (max-width: 1020px) { .hero__sketch { left: auto; right: -6px; top: -54px; width: 150px; transform: rotate(5deg); } .hero__sketch .mk--arrow { right: auto; left: -20px; transform: rotate(140deg) scaleY(-1); } .fig0 .axes { right: auto; left: 12px; } }

/* ============================================================
   1.4 · Del cuaderno — a spread of his pages
   ============================================================ */
.bk--robots .scan__img { aspect-ratio: 760 / 557; }
.bk--robots i.black { -webkit-mask-image: url(../cuaderno/p2/robots-rojo-k.webp); mask-image: url(../cuaderno/p2/robots-rojo-k.webp); }
.bk--robots i.col { background: url(../cuaderno/p2/robots-rojo-c.webp) center / 100% 100% no-repeat; }
.bk--cangrejo .scan__img { aspect-ratio: 640 / 619; }
.bk--cangrejo i.black { -webkit-mask-image: url(../cuaderno/p2/cangrejo.webp); mask-image: url(../cuaderno/p2/cangrejo.webp); }
.bk--cocina .scan__img { aspect-ratio: 720 / 602; }
.bk--cocina i.ink { -webkit-mask-image: url(../cuaderno/p2/cocina.webp); mask-image: url(../cuaderno/p2/cocina.webp); }
.bk--cajas .scan__img { aspect-ratio: 300 / 259; }
.bk--cajas i.black { -webkit-mask-image: url(../cuaderno/p2/robot-d.webp); mask-image: url(../cuaderno/p2/robot-d.webp); }
.bk--coche .scan__img { aspect-ratio: 680 / 212; }
.bk--coche i.ink { -webkit-mask-image: url(../cuaderno/p2/coche.webp); mask-image: url(../cuaderno/p2/coche.webp); }
.bk--cebolla .scan__img { aspect-ratio: 520 / 661; }
.bk--cebolla i.pencil { -webkit-mask-image: url(../cuaderno/p2/cebolla.webp); mask-image: url(../cuaderno/p2/cebolla.webp); }
.bk--huevo .scan__img { aspect-ratio: 520 / 514; }
.bk--huevo i.pencil { -webkit-mask-image: url(../cuaderno/p2/huevo.webp); mask-image: url(../cuaderno/p2/huevo.webp); }
.bk--flores .scan__img { aspect-ratio: 520 / 742; }
.bk--flores i.pencil { -webkit-mask-image: url(../cuaderno/p2/flores.webp); mask-image: url(../cuaderno/p2/flores.webp); }
.bk--cactus .scan__img { aspect-ratio: 420 / 697; }
.bk--cactus i.pencil { -webkit-mask-image: url(../cuaderno/p2/cactus.webp); mask-image: url(../cuaderno/p2/cactus.webp); }
.bk--ala .scan__img { aspect-ratio: 420 / 396; }
.bk--ala i.black { -webkit-mask-image: url(../cuaderno/p2/ala-k.webp); mask-image: url(../cuaderno/p2/ala-k.webp); }
.bk--ala i.col { background: url(../cuaderno/p2/ala-c.webp) center / 100% 100% no-repeat; }
.bk--anatomia .scan__img { aspect-ratio: 520 / 796; }
.bk--anatomia i.pencil { -webkit-mask-image: url(../cuaderno/p2/anatomia.webp); mask-image: url(../cuaderno/p2/anatomia.webp); }
.bk--musculos .scan__img { aspect-ratio: 560 / 684; }
.bk--musculos i.ink { -webkit-mask-image: url(../cuaderno/p2/musculos.webp); mask-image: url(../cuaderno/p2/musculos.webp); }
.bk--avl .scan__img { aspect-ratio: 760 / 576; }
.bk--avl i.black { -webkit-mask-image: url(../cuaderno/p2/avl.webp); mask-image: url(../cuaderno/p2/avl.webp); }
.bk--tasio .scan__img { aspect-ratio: 640 / 292; }
.bk--tasio i.black { -webkit-mask-image: url(../cuaderno/p2/tasio-k.webp); mask-image: url(../cuaderno/p2/tasio-k.webp); }
.bk--tasio i.col { background: url(../cuaderno/p2/tasio-c.webp) center / 100% 100% no-repeat; }
.bk--badrole .scan__img { aspect-ratio: 760 / 341; }
.bk--badrole i.black { -webkit-mask-image: url(../cuaderno/p2/badrole-k.webp); mask-image: url(../cuaderno/p2/badrole-k.webp); }
.bk--badrole i.col { background: url(../cuaderno/p2/badrole-c.webp) center / 100% 100% no-repeat; }
.bk--dungeon .scan__img { aspect-ratio: 760 / 400; }
.bk--dungeon i.black { -webkit-mask-image: url(../cuaderno/p2/dungeon-k.webp); mask-image: url(../cuaderno/p2/dungeon-k.webp); }
.bk--dungeon i.col { background: url(../cuaderno/p2/dungeon-c.webp) center / 100% 100% no-repeat; }

.bk--er .scan__img { aspect-ratio: 640 / 621; }
.bk--er i.black { -webkit-mask-image: url(../cuaderno/p2/er-k.webp); mask-image: url(../cuaderno/p2/er-k.webp); }
.bk--er i.col { background: url(../cuaderno/p2/er-c.webp) center / 100% 100% no-repeat; }
.bk--lvl2 .scan__img { aspect-ratio: 420 / 388; max-width: 300px; }
.bk--lvl2 i.black { -webkit-mask-image: url(../cuaderno/p2/lvl2-k.webp); mask-image: url(../cuaderno/p2/lvl2-k.webp); }
.bk--lvl2 i.col { background: url(../cuaderno/p2/lvl2-c.webp) center / 100% 100% no-repeat; }
.scan__img > i.col { -webkit-mask: none; mask: none; }
/* coloured pieces keep their real black: on the dark theme they sit on a scrap of paper cut out with scissors */
.bk--ala .scan__img::before { content: ""; position: absolute; inset: -6% -5% -4%; background: var(--cut); clip-path: polygon(3% 5%, 41% 0, 72% 4%, 99% 1%, 96% 47%, 100% 98%, 61% 95%, 24% 100%, 1% 96%, 4% 51%); }
.bk--ala i.black { background: var(--cut-k); }
.bk--ala figcaption { margin-top: 20px; }

.cuaderno { overflow-x: clip; }
.spread { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 96px); position: relative; }
/* the fold between the two pages: one of his pencil strokes, standing up */
.spread:not(.spread--studies)::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; transform: translateX(-50%); background: var(--v-pencil) 0 0 / 4px 100% no-repeat; opacity: .7; }
.spread__page { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 36px 24px; align-items: start; align-content: start; }
.bk { margin: 0; transform: rotate(var(--r, 0deg)); }
.bk figcaption { font-size: .86rem; line-height: 1.5; color: var(--ink-2); display: block; max-width: 44ch; }
.bk figcaption .label { display: block; margin-bottom: 2px; }
.bk--robots { grid-column: 1 / -1; --r: -.5deg; }
.bk--cangrejo { grid-column: 1 / span 4; --r: .8deg; }
.bk--cajas { grid-column: 5 / span 2; align-self: center; --r: -2.5deg; }
.bk--cocina { grid-column: 1 / -1; --r: -.7deg; }
.bk--coche { grid-column: 2 / span 5; --r: .5deg; }
.bk--cebolla { grid-column: 1 / span 3; --r: -.8deg; }
.bk--huevo { grid-column: 4 / span 3; margin-top: 48px; --r: 1.4deg; }
.bk--flores { grid-column: 1 / span 3; --r: .6deg; }
.bk--cactus { grid-column: 4 / span 2; margin-top: 72px; --r: 2deg; }
.bk--ala { grid-column: 1 / span 4; --r: -1.8deg; }
.chars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 36px 24px; margin-top: clamp(48px, 6vw, 88px); align-items: center; }
.bk--lanza { grid-column: 1 / span 5; --r: -1deg; }
.bk--lanza .scan__img { aspect-ratio: 591 / 560; }
.bk--lanza i.ink { -webkit-mask-image: url(../cuaderno/p2/lanza-ink.webp); mask-image: url(../cuaderno/p2/lanza-ink.webp); }
.bk--lanza i.pencil { -webkit-mask-image: url(../cuaderno/p2/lanza-pencil.webp); mask-image: url(../cuaderno/p2/lanza-pencil.webp); }
.bk--cabezas { grid-column: 7 / -1; --r: .8deg; }
.bk--cabezas .scan__img { aspect-ratio: 760 / 560; }
.bk--cabezas i.pencil { -webkit-mask-image: url(../cuaderno/p2/cabezas.webp); mask-image: url(../cuaderno/p2/cabezas.webp); }
@media (max-width: 640px) { .chars { gap: 28px 16px; } .bk--lanza { grid-column: 2 / span 10; } .bk--cabezas { grid-column: 1 / -1; } }
.spread--studies { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 36px 24px; margin-top: clamp(40px, 5vw, 72px); align-items: start; }
.bk--anatomia { grid-column: 1 / span 3; }
.bk--musculos { grid-column: 4 / span 3; --r: -1deg; }
.bk--avl { grid-column: 7 / -1; --r: -.6deg; }
.ideas { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px clamp(20px, 2.6vw, 40px); margin-top: clamp(48px, 6vw, 88px); align-items: start; }
.ideas__head { grid-column: 1 / -1; }
.bk--screen { grid-column: span 4; }
.bk--screen .scan__img { position: relative; margin: 10px; width: calc(100% - 20px); }
@media (max-width: 1099px) {
  .spread { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .spread:not(.spread--studies)::before { display: none; }
  .spread--studies { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bk--anatomia, .bk--musculos { grid-column: span 3; }
  .bk--avl { grid-column: 1 / -1; }
  .bk--screen { grid-column: 1 / -1; max-width: 640px; }
}
@media (max-width: 640px) {
  .spread__page, .spread--studies { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 16px; }
  .spread__page > .bk, .spread--studies > .bk { grid-column: auto; margin-top: 0; }
  .bk--robots, .bk--cangrejo, .bk--cocina, .bk--coche, .bk--avl, .bk--ala { grid-column: 1 / -1 !important; }
  .bk figcaption { font-size: .8rem; }
}

/* margin doodles: robots from his notebook page, walking around the site */
.doodle { display: block; background: var(--pen); -webkit-mask: var(--d) center / contain no-repeat; mask: var(--d) center / contain no-repeat; pointer-events: none; }
.doodle--b { --d: url(../cuaderno/p2/robot-b.webp); width: clamp(110px, 11vw, 150px); aspect-ratio: 300 / 267; margin-top: 36px; transform: rotate(-6deg); }
.doodle--c { --d: url(../cuaderno/p2/robot-c.webp); width: clamp(110px, 10vw, 140px); aspect-ratio: 300 / 464; margin-left: auto; transform: rotate(4deg); }
.doodle--e { --d: url(../cuaderno/p2/robot-e.webp); width: 120px; aspect-ratio: 300 / 232; margin: -8px 0 -18px auto; transform: rotate(-3deg); }
@media (max-width: 760px) { .doodle--b, .doodle--c { display: none; } .doodle--e { width: 96px; } }
@media (forced-colors: active) { .doodle { forced-color-adjust: none; background: CanvasText; } .bk--ala .scan__img::before { display: none; } .bk--ala i.black { background: CanvasText; } }

/* ------------------------------------------------------------------------
   Boxes drawn by his hand. Controls get the box he drew around «consola»
   in his operating-systems notes; screenshots and cards get a panel from
   his storyboard. Each box is cut into four corners and four sides, so it
   keeps its corners at any size and only the sides stretch.
   ------------------------------------------------------------------------ */
.btn::before, .tgl::before, .copy::before, .chip--state::before, .vid__play::before, .shot::before, .mtg::before, .ci::before,
.nav a[aria-current="true"]::after, .seg button[aria-pressed="true"]::before {
  --k: var(--hb-k, 12px);
  --tl: var(--hbs-tl); --tr: var(--hbs-tr); --bl: var(--hbs-bl); --br: var(--hbs-br);
  --t: var(--hbs-t); --b: var(--hbs-b); --l: var(--hbs-l); --r: var(--hbs-r);
  background: var(--hb-c, var(--ink));
  -webkit-mask:
    var(--tl) 0 0 / var(--k) var(--k) no-repeat, var(--tr) 100% 0 / var(--k) var(--k) no-repeat,
    var(--bl) 0 100% / var(--k) var(--k) no-repeat, var(--br) 100% 100% / var(--k) var(--k) no-repeat,
    var(--t) var(--k) 0 / calc(100% - 2 * var(--k)) var(--k) no-repeat, var(--b) var(--k) 100% / calc(100% - 2 * var(--k)) var(--k) no-repeat,
    var(--l) 0 var(--k) / var(--k) calc(100% - 2 * var(--k)) no-repeat, var(--r) 100% var(--k) / var(--k) calc(100% - 2 * var(--k)) no-repeat;
  mask:
    var(--tl) 0 0 / var(--k) var(--k) no-repeat, var(--tr) 100% 0 / var(--k) var(--k) no-repeat,
    var(--bl) 0 100% / var(--k) var(--k) no-repeat, var(--br) 100% 100% / var(--k) var(--k) no-repeat,
    var(--t) var(--k) 0 / calc(100% - 2 * var(--k)) var(--k) no-repeat, var(--b) var(--k) 100% / calc(100% - 2 * var(--k)) var(--k) no-repeat,
    var(--l) 0 var(--k) / var(--k) calc(100% - 2 * var(--k)) no-repeat, var(--r) 100% var(--k) / var(--k) calc(100% - 2 * var(--k)) no-repeat;
}
.shot::before, .mtg::before, .ci::before {
  --hb-k: 22px; inset: -7px;
  --tl: var(--hbl-tl); --tr: var(--hbl-tr); --bl: var(--hbl-bl); --br: var(--hbl-br);
  --t: var(--hbl-t); --b: var(--hbl-b); --l: var(--hbl-l); --r: var(--hbl-r);
}
.btn { --hb-c: var(--ink); }
.btn::before { inset: -5px -6px; }
.btn--ghost { --hb-c: var(--pencil); }
.btn--sm { --hb-k: 10px; }
.tgl, .copy { --hb-c: var(--pencil); --hb-k: 9px; }
.tgl[aria-pressed="true"] { --hb-c: var(--pen); }
.chip--state { --hb-c: var(--pencil); --hb-k: 8px; }
.vid__play { --hb-c: var(--ink); --hb-k: 10px; }
/* the same box turned over, so neighbouring controls are never identical */
.btn:nth-of-type(2n)::before, .tgl:nth-of-type(2n)::before, .copy:nth-of-type(2n)::before, .chip--state:nth-of-type(2n)::before { transform: scaleX(-1); }
.btn:nth-of-type(3n)::before, .tgl:nth-of-type(3n)::before, .chip--state:nth-of-type(3n)::before { transform: scale(-1, -1); }
.mtg:nth-of-type(2n)::before, .ci:nth-of-type(2n)::before, .shot:nth-of-type(2n)::before { transform: scaleX(-1); }
@media (forced-colors: active) {
  .btn::before, .tgl::before, .copy::before, .chip--state::before, .vid__play::before { display: none; }
  .shot::before, .mtg::before, .ci::before { -webkit-mask: none; mask: none; background: none; border: 1px solid CanvasText; }
}
/* chosen = circled, the way he rings a node in his AVL notes */
.nav a[aria-current="true"]::after, .seg button[aria-pressed="true"]::before {
  --tl: var(--hbc-tl); --tr: var(--hbc-tr); --bl: var(--hbc-bl); --br: var(--hbc-br);
  --t: var(--hbc-t); --b: var(--hbc-b); --l: var(--hbc-l); --r: var(--hbc-r);
  --hb-c: var(--pen); --hb-k: 12px;
}
.nav a[aria-current="true"]::after { left: -11px; right: -11px; top: -1px; bottom: -2px; height: auto; }
.seg button[aria-pressed="true"]::before { inset: 0 -2px; --hb-k: 11px; }
.seg + .seg button[aria-pressed="true"]::before, .seg button:nth-child(2)[aria-pressed="true"]::before { transform: scaleX(-1); }
@media (forced-colors: active) {
  .nav a[aria-current="true"]::after, .seg button[aria-pressed="true"]::before { -webkit-mask: none; mask: none; background: none; border: 1px solid Highlight; border-radius: 999px; }
}

/* ------------------------------------------------------------------------
   Pages on a desk: every section is a sheet of his paper, grain included,
   with the rounded corners of his notebook (about 3.5 % of the page width
   in the photos). No shadows, no binding: just paper on a table.
   ------------------------------------------------------------------------ */
body { background: var(--desk); }
main > section, .colo { background: var(--papel) 0 0 / 512px 512px, var(--paper); margin-inline: var(--page-m); border-radius: var(--page-r); }
main > section + section { margin-top: var(--page-gap); }
.colo { margin-block: var(--page-gap) var(--page-m); }
@media (max-width: 719px) {
  main > section, .colo { margin-inline: 0; border-radius: 0; }
  main > section + section, .colo { margin-top: 10px; }
  .colo { margin-bottom: 0; }
}
@media (forced-colors: active) { main > section, .colo { border: 1px solid CanvasText; } }
.hero { padding-bottom: clamp(20px, 2.6vw, 36px); }

/* selecting text marks it with his pink highlighter */
::selection { background: var(--sel); color: var(--ink); }
/* margin notes cut from his pages */
.scan--controles { margin-top: 28px; max-width: 560px; }
.scan--controles .scan__img { aspect-ratio: 900 / 105; }
.scan--controles .scan__img > i { -webkit-mask-image: url(../cuaderno/p2/controles.webp); mask-image: url(../cuaderno/p2/controles.webp); }
.scan--controles figcaption { font-size: .82rem; color: var(--ink-3); margin-top: 8px; }
.doodle--gato { --d: url(../cuaderno/p2/gato.webp); width: 40px; aspect-ratio: 160 / 276; background: var(--ink); margin-top: 18px; }

/* ------------------------------------------------------------------------
   Titles in his hand (Spanish; the English titles stay typeset). Each word
   is its own mask, so a title wraps like text; the real words stay in the
   page for screen readers, search and copy. Words written on one line
   share a scale, so his own size changes survive; each sits on its baseline.
   ------------------------------------------------------------------------ */
.hwt { --k: .8em; word-spacing: .34em; letter-spacing: 0; }
.hwt i {
  display: inline-block; vertical-align: calc(var(--d) / var(--c) * var(--k) * -1);
  height: calc(var(--h) / var(--c) * var(--k)); aspect-ratio: var(--w) / var(--h);
  background: currentColor;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
#h-name .hwt { --k: .74em; }
h1:has(.hwt), h2:has(.hwt), .boss__text .big { filter: none; }
h2:has(.hwt) [lang="en"], .boss__text .big [lang="en"] { filter: url(#ink); }
@media (forced-colors: active) { .hwt i { forced-color-adjust: none; background: CanvasText; } }
.sheet__title h2 .hwt { --k: .74em; }

/* ------------------------------------------------------------------------
   Icons he drew for the site (parte 4): play, pause, outbound arrow, tick,
   and a block of ink. «Papel» is an empty box: his «consola» box, small.
   ------------------------------------------------------------------------ */
.ico { display: inline-block; flex: none; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.ico--play { --i: url(../cuaderno/iconos/play.webp); width: .8em; height: .9em; }
.ico--play.ico--pause, .ico--pause { --i: url(../cuaderno/iconos/pause.webp); }
.ico--tinta { --i: url(../cuaderno/iconos/tinta.webp); width: 18px; height: 9px; }
.ico--papel {
  width: 14px; height: 13px; --k: 5px;
  -webkit-mask:
    var(--hbs-tl) 0 0 / var(--k) var(--k) no-repeat, var(--hbs-tr) 100% 0 / var(--k) var(--k) no-repeat,
    var(--hbs-bl) 0 100% / var(--k) var(--k) no-repeat, var(--hbs-br) 100% 100% / var(--k) var(--k) no-repeat,
    var(--hbs-t) var(--k) 0 / calc(100% - 2 * var(--k)) var(--k) no-repeat, var(--hbs-b) var(--k) 100% / calc(100% - 2 * var(--k)) var(--k) no-repeat,
    var(--hbs-l) 0 var(--k) / var(--k) calc(100% - 2 * var(--k)) no-repeat, var(--hbs-r) 100% var(--k) / var(--k) calc(100% - 2 * var(--k)) no-repeat;
  mask:
    var(--hbs-tl) 0 0 / var(--k) var(--k) no-repeat, var(--hbs-tr) 100% 0 / var(--k) var(--k) no-repeat,
    var(--hbs-bl) 0 100% / var(--k) var(--k) no-repeat, var(--hbs-br) 100% 100% / var(--k) var(--k) no-repeat,
    var(--hbs-t) var(--k) 0 / calc(100% - 2 * var(--k)) var(--k) no-repeat, var(--hbs-b) var(--k) 100% / calc(100% - 2 * var(--k)) var(--k) no-repeat,
    var(--hbs-l) 0 var(--k) / var(--k) calc(100% - 2 * var(--k)) no-repeat, var(--hbs-r) 100% var(--k) / var(--k) calc(100% - 2 * var(--k)) no-repeat;
}
.vid__play .ico { color: var(--red); }
/* outbound links: his ↗, drawn as one arrow instead of a turned → */
.ext { -webkit-mask-image: url(../cuaderno/iconos/ext.webp); mask-image: url(../cuaderno/iconos/ext.webp); width: .95em; height: .85em; transform: none; vertical-align: -.02em; }
/* the replay's play/pause */
.tgl[data-play] { display: inline-flex; align-items: center; gap: .45em; }
.tgl[data-play]::after { content: ""; order: -1; width: .75em; height: .85em; background: currentColor; -webkit-mask: url(../cuaderno/iconos/play.webp) center / contain no-repeat; mask: url(../cuaderno/iconos/play.webp) center / contain no-repeat; }
.tgl[data-play][data-state="pause"]::after { -webkit-mask-image: url(../cuaderno/iconos/pause.webp); mask-image: url(../cuaderno/iconos/pause.webp); }
/* copied: his tick */
.copy.is-done::after { content: ""; display: inline-block; width: .7em; height: 1em; margin-left: .4em; vertical-align: -.15em; background: currentColor; -webkit-mask: url(../cuaderno/iconos/ok.webp) center / contain no-repeat; mask: url(../cuaderno/iconos/ok.webp) center / contain no-repeat; }
@media (forced-colors: active) { .ico, .tgl[data-play]::after, .copy.is-done::after { forced-color-adjust: none; background: ButtonText; } }