/* Favorites reuse the site typography, paper and culture palette. */
.favorites-ui, .favorites-links {
    --favorites-accent: var(--realm-world, var(--sub-realm-color, #53634f));
}
.favorites-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .25rem 1.5rem;
    padding: .35rem 0;
}
.favorites-nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    box-sizing: border-box;
    font: .68rem var(--font-mono);
    letter-spacing: .08em;
    border-color: transparent;
}
.favorites-nav a[aria-current], .favorites-nav a:hover { color: var(--favorites-accent); border-color: var(--favorites-accent); }
.favorites-ui :focus-visible, .favorites-links :focus-visible {
    outline: 2px solid var(--favorites-accent);
    outline-offset: 5px;
}
.favorites-ui #subpage-fragments { display: none; }
.favorites-ui main > p { text-align: center; }
.favorites-ui .favorites-collection { max-width: 640px; margin-inline: auto; }
.favorites-ui .content-blog-post { max-width: 640px; }
.favorites-ui .wide-figure { width: 100%; max-width: 100%; margin: 2rem auto; transform: none; }
.favorites-ui .wide-figure .wide-image { display: block; margin: 1rem auto 0; transform: none; }
/* Culture is a navigable spiderweb at every screen size. */
.web-map {
    position: relative;
    width: 100%;
    max-width: 560px;
    aspect-ratio: 1;
    margin: 0 auto;
    isolation: isolate;
}
.web-map::before {
    content: '';
    position: absolute;
    inset: 12%;
    background: radial-gradient(#53634f30 .7px, transparent .7px) 0 0 / 6px 6px;
    mask-image: radial-gradient(ellipse, #000, transparent 65%);
    pointer-events: none;
}
.web-strands { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.web-spider { position: absolute; width: 36px; height: 36px; left: calc(50% - 18px); top: calc(50% - 18px); color: #53634f; transform: scale(1.6); filter: drop-shadow(0 2px 1px #53634f25); }
.web-node {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .25rem;
    min-width: 104px;
    min-height: 58px;
    padding: .35rem .5rem;
    box-sizing: border-box;
    background: var(--color-paper);
    border: 1px solid #1a1a1a35;
    border-top: 2px solid #53634f;
    border-radius: 2px;
    box-shadow: 3px 3px 0 #1a1a1a12;
    font-size: 1.05rem;
    transition: color .2s, border-color .2s, box-shadow .2s;
}
.web-node span { font: .55rem var(--font-mono); color: #53634f; letter-spacing: .12em; }
.web-node:nth-of-type(1) { left: 50%; top: 8%; }
.web-node:nth-of-type(2) { left: 88%; top: 38%; }
.web-node:nth-of-type(3) { left: 74%; top: 83%; }
.web-node:nth-of-type(4) { left: 26%; top: 83%; }
.web-node:nth-of-type(5) { left: 12%; top: 38%; }
.web-node:hover, .web-node:focus-visible {
    color: #53634f;
    border-color: #53634f;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--favorites-accent) 8%, transparent);
}
.favorites-collection { display: grid; grid-template-columns: 1fr; gap: 1.5rem; padding: 0; margin: 0; list-style: none; }
.favorites-collection > li, .favorites-collection > .embed-item {
    min-width: 0;
    position: relative;
    padding: 0 0 1.25rem !important;
    margin: 0 !important;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent);
    background: transparent;
}
.favorites-collection .bold, .favorites-collection h3 { display: block; font-size: 1.1rem !important; font-weight: 700; line-height: 1.2; margin: 0 0 .5rem; }
.favorites-collection h3::before { content: none; }
.favorites-collection .italic { color: var(--color-muted); font-size: .9rem; }
.favorites-collection p { line-height: 1.6; }
.favorites-ui .fav-pick .fav-whisper { opacity: 1; max-height: none; margin: .75rem 0; color: var(--color-muted); font-size: .68rem; }
.favorites-ui .fav-pick:hover .fav-title { color: var(--favorites-accent); letter-spacing: normal; }
.favorites-ui .fav-pick:hover { box-shadow: none; }
.favorites-ui .trailer-btn { min-height: 44px; }
.favorites-ui .summary-btn::before { content: '↗'; }
.favorites-ui iframe { border: 0; border-radius: 4px; display: block; }
.favorites-ui .embed-item iframe { margin-top: 1rem; }
.favorite-dialog { border: 0; padding: 3rem 0 0; width: min(90vw, 800px); max-height: 90dvh; background: transparent; overflow: visible; }
.favorite-dialog::backdrop { background: rgba(26, 26, 26, .85); backdrop-filter: blur(5px); }
.favorite-dialog .modal-content { width: 100%; transform: none; }
.favorite-dialog .summary-container { padding: 2rem; max-height: 65dvh; box-sizing: border-box; overflow-y: auto; }
.favorite-dialog .close-btn { top: -44px; min-width: 44px; min-height: 44px; right: 0; }
.favorite-dialog .summary-container .close-btn { position: sticky; top: 0; float: right; color: var(--color-ink); margin: -.75rem -.75rem 0 .5rem; }
@media (max-width: 600px) {
    .favorites-nav { gap: 0 1rem; }
    .favorites-nav a { font-size: .6rem; }
    .web-node { min-width: 82px; min-height: 52px; font-size: .9rem; }
    .web-node:nth-of-type(1) { top: max(8%, 34px); }
    .web-node:nth-of-type(2) { left: min(85%, calc(100% - 48px)); }
    .web-node:nth-of-type(5) { left: max(15%, 48px); }
}

/* A selected thread leads the spider toward the actual link position. */
.web-thread { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; }
.web-thread line { stroke: #53634f; stroke-width: 1.5; stroke-dasharray: 5 4; }
.web-engaged .web-thread { opacity: .8; }
.web-engaged .web-thread line { animation: web-signal .8s linear infinite; }
@keyframes web-signal { to { stroke-dashoffset: -18; } }
.web-spider { pointer-events: none; transition: left .35s ease, top .35s ease; }
/* Songs: record sleeves with a grooved vinyl detail. */
[data-media="music"] .embed-item { padding: 1.25rem 1.25rem 1.25rem 6rem !important; border: 1px solid #1a1a1a20; background: #f5f4ef80; }
[data-media="music"] .embed-item::before { content: ''; position: absolute; left: 1rem; top: 1.25rem; width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle, var(--color-paper) 0 3px, #53634f 3px 13px, transparent 14px), repeating-radial-gradient(circle, #252525 0 2px, #41413d 3px, #252525 4px); box-shadow: 1px 2px 4px #1a1a1a30; }
/* Books: cloth spines, a cover edge, and the thin lines of a page block. */
[data-media="books"] .favorites-collection > li { padding: 1.25rem 1.5rem !important; border: 1px solid #1a1a1a20; border-left: 8px solid #53634f; border-radius: 2px 5px 5px 2px; background: linear-gradient(90deg, #53634f0b, transparent 20%), var(--color-paper); box-shadow: 3px 0 var(--color-paper-deep), 4px 0 #1a1a1a25; }
[data-media="books"] .favorites-collection > li:nth-child(3n + 2) { border-left-color: #53634f; }
[data-media="books"] .favorites-collection > li:nth-child(3n) { border-left-color: #53634f; }
/* Movies: film frames; television: an episode guide on a softly rounded screen. */
[data-media="movies"] .favorites-collection > li { padding: 1.75rem 1.25rem !important; border-inline: 1px solid #1a1a1a35; background: linear-gradient(90deg, #1a1a1a22 50%, transparent 50%) top left / 20px 6px repeat-x, linear-gradient(90deg, #1a1a1a22 50%, transparent 50%) bottom left / 20px 6px repeat-x; }
[data-media="tv_shows"] .favorites-collection { counter-reset: episode; }
[data-media="tv_shows"] .favorites-collection > li { counter-increment: episode; padding: 1.5rem !important; border: 1px solid #1a1a1a30; border-radius: 18px / 12px; background: radial-gradient(ellipse at center, #f5f4ef, #e8e6dc80); }
[data-media="tv_shows"] .favorites-collection > li::before { content: 'EP. ' counter(episode, decimal-leading-zero); display: block; margin-bottom: .75rem; font: .6rem var(--font-mono); color: var(--color-muted); letter-spacing: .1em; }
[data-media="images"] .wide-figure { padding: .75rem .75rem 1.25rem; box-sizing: border-box; background: var(--color-paper); box-shadow: 0 2px 7px #1a1a1a18; }
@media (max-width: 600px) {
    [data-media="music"] .embed-item { padding: 1rem !important; }
    [data-media="music"] .embed-item::before { width: 42px; height: 42px; left: auto; right: 1rem; top: 1rem; }
    [data-media="music"] .embed-item h3, [data-media="music"] .spotify-meta { padding-right: 3.5rem; }
}
@media (prefers-reduced-motion: reduce) { .web-spider { transition: none; } }