/* Resources page */
.res-index{display:grid;border-radius:var(--r-card);background:var(--ink-2);border:1px solid var(--ink-line);overflow:hidden}
.res-index a{display:grid;grid-template-columns:24px minmax(0,1fr);gap:.9rem;align-items:center;padding:1rem 1.25rem;text-decoration:none;color:var(--ink-text);transition:background-color 160ms ease}
.res-index a+a{border-top:1px solid var(--ink-line)}
.res-index .i{width:22px;height:22px;color:var(--hl)}
.res-index b{display:block;font-weight:680}
.res-index span{font-size:.88rem;color:var(--ink-muted)}
@media (hover:hover) and (pointer:fine){.res-index a:hover{background:var(--ink-3)}}

.res-book{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.res-book figure img{width:100%;max-width:320px;height:auto;border-radius:12px;box-shadow:var(--shadow-exhibit)}
.res-book .lede{margin-top:1rem}
.res-p{margin-top:.9rem;max-width:62ch}
.checks-inline{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin-top:1.25rem}
.checks-inline li{display:flex;align-items:center;gap:.4rem;font-weight:600;font-size:.95rem}
.checks-inline .i{width:18px;height:18px;color:var(--done)}
@media (max-width:820px){.res-book{grid-template-columns:1fr}.res-book figure img{max-width:220px}}

.yt{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.yt-card{display:flex;flex-direction:column;border-radius:var(--r-surface);background:var(--surface);border:1px solid var(--line);overflow:hidden;text-decoration:none;color:var(--text);transition:transform 200ms var(--ease-out),border-color 200ms ease}
.yt-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}
.yt-thumb img{width:100%;height:100%;object-fit:cover}
.yt-play{position:absolute;inset:0;display:grid;place-items:center;color:#fff;background:linear-gradient(0deg,rgba(11,10,18,.45),transparent 60%)}
.yt-play .i{width:52px;height:52px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.5));transition:transform 200ms var(--ease-out)}
.yt-count{position:absolute;right:10px;bottom:10px;font-size:.78rem;font-weight:650;color:#fff;background:rgba(11,10,18,.75);padding:.2rem .55rem;border-radius:8px}
.yt-body{display:flex;flex-direction:column;gap:.4rem;padding:1.2rem 1.25rem 1.3rem;flex:1}
.yt-body b{font-size:1.1rem;font-weight:700;letter-spacing:-.015em}
.yt-body>span:not(.link-arrow){color:var(--muted);font-size:.93rem}
.yt-body .link-arrow{margin-top:auto;padding-top:.4rem}
@media (hover:hover) and (pointer:fine){.yt-card:hover{transform:translateY(-3px);border-color:var(--line-strong)}.yt-card:hover .yt-play .i{transform:scale(1.08)}}
@media (max-width:900px){.yt{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.yt{grid-template-columns:1fr}}

.repos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.repo{display:flex;flex-direction:column;gap:.9rem;padding:1.6rem;border-radius:var(--r-card);background:var(--surface);border:1px solid var(--line)}
.repo-h{display:flex;gap:.8rem;align-items:center}
.repo-h>.i{width:32px;height:32px;flex:none}
.repo-h h3{font-size:1.25rem}
.repo-h span{font-family:var(--mono);font-size:.75rem;color:var(--muted);word-break:break-all}
.repo p{color:var(--muted)}
.repo .tags{display:flex;flex-wrap:wrap;gap:.4rem}
.repo .tags code{font-family:var(--mono);font-size:.78rem;padding:.2rem .5rem;border-radius:6px;background:var(--accent-soft);color:var(--link)}
.repo .tags span{font-size:.8rem;color:var(--muted);align-self:center}
.repo .link-arrow{margin-top:auto}
@media (max-width:820px){.repos{grid-template-columns:1fr}}

.channels{list-style:none;display:grid;border-top:1px solid var(--line)}
.channels a{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:1.1rem;align-items:center;padding:1.25rem .25rem;border-bottom:1px solid var(--line);text-decoration:none;color:var(--text);transition:background-color 160ms ease}
.channels .i{width:28px;height:28px;color:var(--purple)}
.channels b{display:block;font-size:1.1rem;font-weight:700}
.channels span{color:var(--muted)}
.channels em{font-style:normal;font-weight:650;color:var(--link);display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap}
.channels em .i{width:16px;height:16px;color:currentColor}
:root[data-theme="dark"] .channels .i{color:var(--purple-ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .channels .i{color:var(--purple-ink)}}
@media (hover:hover) and (pointer:fine){.channels a:hover{background:var(--surface)}}
@media (max-width:620px){.channels a{grid-template-columns:32px minmax(0,1fr)}.channels em{grid-column:2}}

/* Hero with the teaching photo; section links run along the bottom */
.res-hero{padding-bottom:0}
.res-hero .page-hero-grid{min-height:min(520px,58vh);align-items:center;padding-bottom:clamp(2.5rem,5vw,3.5rem)}
.res-strip{border-top:1px solid var(--ink-line);background:color-mix(in srgb,var(--ink) 70%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.res-strip .res-index{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:none;border:0;border-radius:0;overflow:visible}
.res-strip .res-index a{padding:1.1rem 1rem 1.1rem 0;border-top:0;align-items:start}
.res-strip .res-index a+a{border-top:0;border-left:1px solid var(--ink-line);padding-left:1rem}
@media (hover:hover) and (pointer:fine){.res-strip .res-index a:hover{background:none}.res-strip .res-index a:hover b{color:var(--link-g)}}
@media (max-width:980px){.res-strip .res-index{grid-template-columns:1fr 1fr}.res-strip .res-index a:nth-child(odd){border-left:0;padding-left:0}.res-strip .res-index a:nth-child(n+3){border-top:1px solid var(--ink-line)}}
@media (max-width:560px){.res-strip .res-index{grid-template-columns:1fr}.res-strip .res-index a{border-left:0!important;padding-left:0}.res-strip .res-index a+a{border-top:1px solid var(--ink-line)}}
/* Teaching photo: right 62% of the hero, cropped on Victor, the laptop and the room, faded in from the left */
.res-hero .page-bg img{position:absolute;right:0;top:0;width:62%;height:100%;object-fit:cover;object-position:55% 58%;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.6) 10%,#000 22%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.6) 10%,#000 22%)}
.res-hero .page-bg::after{background:linear-gradient(90deg,var(--ink) 0%,color-mix(in srgb,var(--ink) 82%,transparent) 36%,color-mix(in srgb,var(--ink) 20%,transparent) 58%,color-mix(in srgb,var(--ink) 8%,transparent) 100%),linear-gradient(0deg,color-mix(in srgb,var(--ink) 70%,transparent) 0%,transparent 12%)}
@media (max-width:900px){.res-hero .page-bg img{width:100%;object-position:70% 40%;-webkit-mask-image:none;mask-image:none}.res-hero .page-bg::after{background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 60%,transparent) 0%,color-mix(in srgb,var(--ink) 88%,transparent) 45%,var(--ink) 85%)}}
@media (max-width:560px){.res-strip .res-index a,.res-strip .res-index a+a{padding-left:0}}