@charset "UTF-8";
/*! sanitize.css v7.0.2 | CC0 License | github.com/csstools/sanitize.css */*,:after,:before{background-repeat:no-repeat;box-sizing:border-box}:after,:before{text-decoration:inherit;vertical-align:inherit}html{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Oxygen,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.15;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:break-word}body{margin:0}h1{font-size:2em;margin:.67em 0}hr{height:0;overflow:visible}main{display:block}nav ol,nav ul{list-style:none}pre{font-family:Menlo,Consolas,Roboto Mono,Ubuntu Monospace,Oxygen Mono,Liberation Mono,monospace;font-size:1em}a{background-color:transparent}abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:Menlo,Consolas,Roboto Mono,Ubuntu Monospace,Oxygen Mono,Liberation Mono,monospace;font-size:1em}small{font-size:80%}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg{fill:currentColor}svg:not(:root){overflow:hidden}table{border-collapse:collapse}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}button,input,select{margin:0}button{overflow:visible;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}fieldset{padding:.35em .75em .625em}input{overflow:visible}legend{color:inherit;display:table;max-width:100%;white-space:normal}progress{display:inline-block;vertical-align:baseline}select{text-transform:none}textarea{margin:0;overflow:auto;resize:vertical}[type=checkbox],[type=radio]{padding:0}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}details,dialog{display:block}dialog{background-color:#fff;border:solid;color:#000;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;left:0;margin:auto;padding:1em;position:absolute;right:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content}dialog:not([open]){display:none}summary{display:list-item}canvas{display:inline-block}template{display:none}[tabindex],a,area,button,input,label,select,summary,textarea{touch-action:manipulation}[hidden]{display:none}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled],[disabled]{cursor:disabled}[aria-hidden=false][hidden]:not(:focus){clip:rect(0,0,0,0);display:inherit;position:absolute}:root{--announcement-bar-height:0px;--show-fade-animation:1}[data-theme=light]{--background-color:#fff;--primary-foreground-color:#4a4a4a;--secondary-foreground-color:#000;--primary-subtle-color:#0470ee;--secondary-subtle-color:#f4f8fd;--titles-color:#333;--link-color:#133467;--primary-border-color:#9b9b9b;--secondary-border-color:#f0f8ff;--article-shadow-normal:0 10px 10px rgba(0,0,0,.08);--article-shadow-hover:0 4px 60px 0 rgba(0,0,0,.2);--transparent-background-color:hsla(0,0%,100%,.99);--footer-background-color:#133467;--submenu-shadow-color-opacity:0.25;--button-shadow-color-normal:hsla(0,0%,42%,.2);--button-shadow-color-hover:hsla(0,0%,42%,.3);--table-background-color-odd:#fafafa;--table-head-border-bottom:#e2e2e2;--toggle-darkmode-button-display-moon:block;--toggle-darkmode-button-display-sun:none;--toggle-darkmode-background-color:rgba(0,0,0,.05);--header-menu-gradient-first-color:hsla(0,0%,100%,0);--header-menu-gradient-second-color:#fff;--kg-card-img-invert-color:0}[data-theme=dark]{--background-color:#111;--primary-foreground-color:#ccc;--secondary-foreground-color:#fff;--primary-subtle-color:#2c2fe6;--secondary-subtle-color:#141920;--titles-color:#b4b4b4;--link-color:#b6b7f6;--primary-border-color:#1d1d1d;--secondary-border-color:#0f0f0f;--article-shadow-normal:0 4px 5px 5px rgba(0,0,0,.1);--article-shadow-hover:0 4px 5px 10px rgba(0,0,0,.1);--transparent-background-color:rgba(0,0,0,.99);--footer-background-color:#080808;--submenu-shadow-color-opacity:0.55;--button-shadow-color-normal:hsla(0,0%,4%,.5);--button-shadow-color-hover:hsla(0,0%,4%,.5);--table-background-color-odd:#050505;--table-head-border-bottom:#1d1d1d;--toggle-darkmode-button-display-moon:none;--toggle-darkmode-button-display-sun:block;--toggle-darkmode-background-color:rgba(0,0,0,.5);--header-menu-gradient-first-color:hsla(0,0%,7%,0);--header-menu-gradient-second-color:hsla(0,0%,7%,.65);--kg-card-img-invert-color:1}.hide{display:none}.sr-only{clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.focusable:focus,.m-button:focus,.m-icon-button:focus,.m-toggle-darkmode input:focus{box-shadow:0 0 0 2px var(--primary-subtle-color)!important}.content-centered,.m-hero,.m-icon-button{align-items:center;display:flex;justify-content:center}.m-button,.m-icon-button,.m-input,.m-toggle-darkmode input,.no-appearance{-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important}.no-padding{padding:0}.no-margin{margin:0}.no-scroll-y{overflow-y:hidden}.align-center{text-align:center}.align-left{text-align:left}.align-right{text-align:right}.pos-relative{position:relative}.pos-absolute{position:absolute}.bold{font-weight:700}.underline{text-decoration:underline}.uppercase{text-transform:uppercase}.pointer{cursor:pointer}.only-desktop{display:none}@media only screen and (min-width:33rem){.only-desktop{display:block}}[class*=" icon-"],[class^=icon-]{speak:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:icomoon!important;font-style:normal;font-variant:normal;font-weight:400;line-height:1;text-transform:none}.icon-moon:before{content:"\e90f"}.icon-sunny:before{content:"\e910"}.icon-chevron-down:before{content:"\e900"}.icon-star:before{content:"\e901"}.icon-arrow-left:before{content:"\e902"}.icon-arrow-right:before{content:"\e903"}.icon-arrow-top:before{content:"\e904"}.icon-close:before{content:"\e905"}.icon-comments:before{content:"\e906"}.icon-facebook:before{content:"\e907"}.icon-globe:before{content:"\e908"}.icon-menu:before{content:"\e909"}.icon-more:before{content:"\e90a"}.icon-search:before{content:"\e90b"}.icon-twitter:before{content:"\e90c"}.icon-imdb:before{content:"\e90d"}.icon-vk:before{content:"\e90e"}.icon-steam:before{content:"\e914"}.icon-twitch:before{content:"\e915"}.icon-youtube:before{content:"\e916"}.icon-vimeo:before{content:"\e917"}.icon-whatsapp:before{content:"\e918"}.icon-reddit:before{content:"\e919"}.icon-rss:before{content:"\e91a"}.icon-spotify:before{content:"\e91b"}.icon-telegram:before{content:"\e91c"}.icon-soundcloud:before{content:"\e91d"}.icon-flickr:before{content:"\e91e"}.icon-letterboxd:before{content:"\e91f"}.icon-odnoklassniki:before{content:"\e920"}.icon-pinterest:before{content:"\e921"}.icon-tiktok:before{content:"\e922"}.icon-tumblr:before{content:"\e923"}.icon-xing:before{content:"\e924"}.icon-mixcloud:before{content:"\e925"}.icon-mixer:before{content:"\e926"}.icon-wechat:before{content:"\e927"}.icon-deviantart:before{content:"\e928"}.icon-discord:before{content:"\e929"}.icon-instagram:before{content:"\e92a"}.icon-linkedin:before{content:"\e92b"}.icon-snapchat:before{content:"\e92c"}.icon-gitlab:before{content:"\e92d"}.icon-github:before{content:"\e930"}.icon-behance:before{content:"\e951"}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--background-color);color:var(--primary-foreground-color);display:flex;flex-direction:column;font-display:swap;font-family:Source Sans Pro,Helvetica,Arial,sans-serif;font-size:1rem;min-height:100vh;overflow-x:hidden;padding-top:var(--announcement-bar-height);transition:padding-top .2s linear;width:100%}body.share-menu-displayed{padding-bottom:45px}@media only screen and (min-width:33rem){body.share-menu-displayed{padding-bottom:0}}.main-wrap{display:flex;flex-direction:column;flex-grow:1}p{line-height:1.5;margin:0}a{color:inherit;text-decoration:none}fieldset{border:0;margin:0;padding:0;position:relative}.tippy-popper *{text-align:left!important}.medium-zoom-overlay{background-color:var(--background-color)!important}.medium-zoom-image,.medium-zoom-overlay{z-index:5}[data-animate^=fade]{-webkit-animation:fadeAnimation .5s linear forwards;animation:fadeAnimation .5s linear forwards;opacity:calc((var(--show-fade-animation) - 1)*-1)}@-webkit-keyframes fadeAnimation{0%{opacity:calc((var(--show-fade-animation) - 1)*-1)}to{opacity:1}}@keyframes fadeAnimation{0%{opacity:calc((var(--show-fade-animation) - 1)*-1)}to{opacity:1}}[data-animate=fade-up]{-webkit-animation:fadeUpAnimation .5s cubic-bezier(.77,0,.18,1) .3s forwards;animation:fadeUpAnimation .5s cubic-bezier(.77,0,.18,1) .3s forwards}@-webkit-keyframes fadeUpAnimation{0%{opacity:calc((var(--show-fade-animation) - 1)*-1);transform:translateY(calc(100px*var(--show-fade-animation)))}to{opacity:1;transform:translateY(0)}}@keyframes fadeUpAnimation{0%{opacity:calc((var(--show-fade-animation) - 1)*-1);transform:translateY(calc(100px*var(--show-fade-animation)))}to{opacity:1;transform:translateY(0)}}[data-animate=fade-down]{-webkit-animation:fadeDownAnimation .5s cubic-bezier(.77,0,.18,1) forwards;animation:fadeDownAnimation .5s cubic-bezier(.77,0,.18,1) forwards}@-webkit-keyframes fadeDownAnimation{0%{opacity:calc((var(--show-fade-animation) - 1)*-1);transform:translateY(calc(-100px*var(--show-fade-animation)))}to{opacity:1;transform:translateY(0)}}@keyframes fadeDownAnimation{0%{opacity:calc((var(--show-fade-animation) - 1)*-1);transform:translateY(calc(-100px*var(--show-fade-animation)))}to{opacity:1;transform:translateY(0)}}.l-wrapper{margin:0 auto;padding:0 20px;position:relative;width:100%}@media only screen and (min-width:33rem){.l-wrapper{max-width:1200px}}@media only screen and (min-width:80rem){.l-wrapper{padding:0}}.l-wrapper.in-submenu{padding:0}@media only screen and (min-width:33rem){.l-wrapper.in-submenu{padding:0 20px}}@media only screen and (min-width:80rem){.l-wrapper.in-submenu{padding:0}}@media only screen and (min-width:33rem){.l-wrapper.in-post{max-width:960px}}.l-wrapper.in-comments{color:var(--primary-foreground-color)}@media only screen and (min-width:33rem){.l-wrapper.in-comments{max-width:820px}}@media only screen and (min-width:64rem){.l-wrapper.in-recommended{max-width:calc(100% - 60px);padding:0}}@media only screen and (min-width:90rem){.l-wrapper.in-recommended{max-width:1200px}}.l-wrapper.in-post.no-image{padding-top:40px}@media only screen and (min-width:33rem){.l-wrapper.in-post.no-image{padding-top:80px}}.l-wrapper.in-caption{padding-top:10px}.l-content{padding:40px 0 20px}@media only screen and (min-width:33rem){.l-content{padding:60px 0 40px}}.m-button{background-color:transparent;border:0;border-radius:5px;color:#333;cursor:pointer;display:inline-block;font-size:1rem;font-weight:600;letter-spacing:.2px;line-height:1;outline:0;padding:13px 25px;position:relative;text-align:center;transition:all .25s cubic-bezier(.02,.01,.47,1)}.m-button.outlined{border:1px solid var(--primary-foreground-color);color:var(--titles-color)}.m-button.filled,.m-button.primary{box-shadow:0 2px 4px var(--button-shadow-color-normal),0 0 0 transparent}.m-button.filled:hover,.m-button.primary:hover{box-shadow:0 4px 8px var(--button-shadow-color-hover),0 0 0 transparent;transform:translateY(-2px)}.m-button.filled{background-color:#fff;border-radius:5px}.m-button.block{display:block;width:100%}.m-button.primary{background-color:var(--primary-subtle-color);color:#fff}.m-button.loading{cursor:default;overflow:hidden}.m-button.loading:after{-webkit-animation:loading 1s infinite;animation:loading 1s infinite;background-color:#fff;bottom:0;content:"";height:2px;left:0;position:absolute;width:25%}@-webkit-keyframes loading{0%{transform:translatex(0)}50%{transform:translatex(300%)}to{transform:translatex(0)}}@keyframes loading{0%{transform:translatex(0)}50%{transform:translatex(300%)}to{transform:translatex(0)}}.m-icon-button{background-color:transparent;border:0;border-radius:50%;color:var(--titles-color);cursor:pointer;font-size:1.125rem;outline:0;padding:0}.m-icon-button.outlined{border:1px solid var(--primary-foreground-color)}.m-icon-button.filled{background-color:var(--background-color);box-shadow:0 2px 4px var(--button-shadow-color-normal),0 0 0 transparent;transition:all .25s cubic-bezier(.02,.01,.47,1)}.m-icon-button.filled:hover{box-shadow:0 4px 8px var(--button-shadow-color-hover),0 0 0 transparent}.m-icon-button:disabled{cursor:default;opacity:.5}.m-icon-button.in-mobile-topbar{height:50px;width:50px}.m-icon-button.as-close-menu{font-size:.625rem;height:32px;position:absolute;right:20px;top:20px;width:32px;z-index:2}@media only screen and (min-width:33rem){.m-icon-button.as-close-menu{display:none!important}}.m-icon-button.as-close-search{font-size:.625rem;height:32px;position:absolute;right:20px;top:20px;width:32px;z-index:2}@media only screen and (min-width:33rem){.m-icon-button.as-close-search{font-size:.875rem;height:42px;right:30px;top:30px;width:42px}}@media only screen and (min-width:80rem){.m-icon-button.as-close-search{height:50px;right:40px;top:40px;width:50px}}.m-icon-button.in-menu-main{display:none}@media only screen and (min-width:33rem){.m-icon-button.in-menu-main{display:flex;height:32px;width:32px}}.m-icon-button.more{font-size:1.25rem;position:relative;z-index:6}.m-icon-button.more.active{color:var(--primary-subtle-color)}.m-icon-button.in-pagination-left,.m-icon-button.in-pagination-right{font-size:.625rem;height:40px;width:40px}@media only screen and (min-width:33rem){.m-icon-button.in-pagination-left,.m-icon-button.in-pagination-right{font-size:.688rem;height:46px;width:46px}}.m-icon-button.in-pagination-left{margin-right:30px}.m-icon-button.in-pagination-right{margin-left:30px}.m-icon-button.in-featured-articles{bottom:5px;color:#fff;font-size:.875rem;height:40px;position:absolute;width:40px;z-index:2}@media only screen and (min-width:33rem){.m-icon-button.in-featured-articles{bottom:26px}}.m-icon-button.in-featured-articles.swiper-button-prev{right:56px}@media only screen and (min-width:33rem){.m-icon-button.in-featured-articles.swiper-button-prev{right:76px}}.m-icon-button.in-featured-articles.swiper-button-next{right:16px}@media only screen and (min-width:33rem){.m-icon-button.in-featured-articles.swiper-button-next{right:36px}}.m-icon-button.in-recommended-articles{font-size:.625rem;height:40px;position:absolute;top:240px;transform:translateY(-50%);width:40px;z-index:2}@media only screen and (min-width:64rem){.m-icon-button.in-recommended-articles{display:none}}.m-icon-button.in-recommended-articles.swiper-button-prev{left:2px}.m-icon-button.in-recommended-articles.swiper-button-next{right:2px}.m-icon-button.as-load-comments{font-size:1.25rem;height:60px;margin:0 auto;position:relative;width:60px;z-index:2}@media only screen and (min-width:33rem){.m-icon-button.as-load-comments{font-size:1.625rem;height:80px;width:80px}}.m-icon-button.in-share{color:var(--titles-color);font-size:.75rem;height:31px;margin:0 25px;text-decoration:none;width:31px}@media only screen and (min-width:64rem){.m-icon-button.in-share{font-size:.875rem;height:40px;margin:0 0 20px;width:40px}}@media only screen and (min-width:80rem){.m-icon-button.in-share{font-size:1rem;height:50px;width:50px}}.m-icon-button.progress{position:relative}.m-icon-button.progress svg{height:100%;left:0;opacity:0;position:absolute;top:0;width:100%}.m-icon-button.progress svg circle{stroke:var(--primary-subtle-color);transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset .2s}.rtl .m-icon-button.in-featured-articles.swiper-button-prev{left:16px;right:auto}@media only screen and (min-width:33rem){.rtl .m-icon-button.in-featured-articles.swiper-button-prev{left:36px;right:auto}}.rtl .m-icon-button.in-featured-articles.swiper-button-next{left:52px;right:auto}@media only screen and (min-width:33rem){.rtl .m-icon-button.in-featured-articles.swiper-button-next{left:72px;right:auto}}.rtl .m-icon-button.in-recommended-articles.swiper-button-prev{left:auto;right:2px;transform:rotate(180deg)}.rtl .m-icon-button.in-recommended-articles.swiper-button-next{left:2px;right:auto;transform:rotate(180deg)}.m-input{background-color:var(--background-color);border:1px solid var(--primary-border-color);border-radius:5px;color:var(--primary-foreground-color);font-size:1rem;letter-spacing:.2px;line-height:1.3;outline:0;padding:11px 15px;width:100%}.m-input:focus{border-color:var(--primary-subtle-color)}.m-input.in-search{font-weight:600;padding-left:40px}@media only screen and (min-width:33rem){.m-input.in-search{font-size:1.25rem;padding:15px 30px 15px 60px}}.m-input.in-subscribe-section{margin-bottom:15px}.m-section-title{color:var(--primary-foreground-color);font-size:1.25rem;font-weight:400;letter-spacing:.3px;line-height:1.3;margin:0 0 30px;text-align:center}@media only screen and (min-width:33rem){.m-section-title{font-size:1.5rem;margin-bottom:40px}}.m-section-title.in-recommended{margin-bottom:0!important}.m-small-text{color:var(--titles-color);font-size:.875rem}.m-small-text.in-subscribe-page{font-weight:600;padding-top:30px}.m-small-text.in-author-along-with{margin-bottom:20px}.m-small-text.in-author-along-with a{text-decoration:underline}.m-not-found{color:var(--primary-foreground-color);font-size:.875rem;font-weight:600;line-height:1.3}.m-not-found.in-recent-articles{margin-left:20px}@media only screen and (min-width:33rem){.m-not-found.in-recent-articles{margin-left:0}}.m-header{background-color:var(--background-color);left:0;position:fixed;top:0;transition:transform .4s cubic-bezier(.165,.84,.44,1);width:100%;will-change:transform;z-index:4}@media only screen and (min-width:33rem){.m-header{padding:15px 0}.m-header.with-announcement-bar{padding:0}.m-header.with-announcement-bar .m-menu{padding:15px 0}}.m-header.mobile-menu-opened{height:100%}@media only screen and (min-width:33rem){.m-header.mobile-menu-opened{height:auto}}.m-header.headroom--pinned{box-shadow:0 4px 8px rgba(0,0,0,.05),0 0 0 transparent;transform:translateY(0)}.m-header.headroom--pinned .m-header__shadow{display:none}.m-header.headroom--unpinned{transform:translateY(-100%)}.m-header.submenu-is-active{background-color:var(--background-color)}.m-header.submenu-is-active .m-header__shadow{display:none}.m-header.with-picture{background-color:var(--background-color)}.m-mobile-topbar{align-items:center;display:flex;height:50px;justify-content:space-between;position:relative;z-index:2}@media only screen and (min-width:33rem){.m-mobile-topbar{display:none!important}}.m-logo{display:inline-block;height:32px}.m-logo img{height:100%;max-width:150px;-o-object-fit:contain;object-fit:contain;width:auto}.m-logo img.m-logo__image-light{display:var(--toggle-darkmode-button-display-moon)}.m-logo img.m-logo__image-dark{display:var(--toggle-darkmode-button-display-sun)}.m-logo.in-mobile-topbar{margin:0 20px}.m-site-name.in-mobile-topbar{color:var(--titles-color);font-weight:600}.m-site-name.in-desktop-menu{font-weight:700}@media only screen and (min-width:33rem){.m-nav{align-items:center;display:flex;height:37px;justify-content:space-between;overflow-y:hidden}}@media only screen and (min-width:90rem){.m-nav{margin:0 -5px}}@media only screen and (min-width:33rem){.m-nav.toggle-overflow{overflow-y:initial}}.m-nav__left{margin-bottom:30px}@media only screen and (min-width:33rem){.m-nav__left{-webkit-overflow-scrolling:touch;align-items:center;display:flex;flex:1 1 auto;margin-bottom:0;overflow-x:auto;overflow-y:hidden;padding-bottom:40px;padding-left:5px;padding-top:40px;white-space:nowrap}.m-nav__left.toggle-overflow{overflow-x:hidden}}.m-nav__left ul:not(.m-secondary-menu){margin:0;padding:0}@media only screen and (min-width:33rem){.m-nav__left ul:not(.m-secondary-menu){align-items:center;display:flex}}.m-nav__left li{color:var(--titles-color);font-size:1.125rem;letter-spacing:.3px;margin-bottom:15px}@media only screen and (min-width:33rem){.m-nav__left li{margin-bottom:0;margin-right:35px;position:relative}}.m-nav__left li:last-of-type{margin-bottom:0}.m-nav__left li.nav-current{font-weight:600}.m-nav__left li a{color:inherit}.m-nav__left li.more a{align-items:center;display:inline-flex}@media only screen and (min-width:33rem){.m-nav__left li.more a{display:flex}}.m-nav__left li.more a span{color:inherit;display:inline-block;font-size:1rem;margin-left:8px;transform:translateY(1px)}@media only screen and (min-width:33rem){.m-nav__left li.submenu-option{z-index:2}}.m-nav__right{align-items:center;display:flex;justify-content:flex-end}@media only screen and (min-width:33rem){.m-nav__right{flex-shrink:0;padding-left:20px;padding-right:5px;position:relative}.m-nav__right:before{background:linear-gradient(90deg,var(--header-menu-gradient-first-color) 0,var(--header-menu-gradient-second-color));content:"";height:100%;left:-20px;pointer-events:none;position:absolute;top:0;width:20px;z-index:2}.rtl .m-nav__left{padding-left:0;padding-right:5px}.rtl .m-nav__left li{margin-left:35px;margin-right:0}.rtl .m-nav__right{padding-left:5px;padding-right:20px}.rtl .m-nav__right:before{left:auto;right:-20px;transform:rotate(180deg)}}.m-menu{-webkit-overflow-scrolling:touch;background-color:var(--background-color);height:100%;left:0;opacity:0;overflow-y:auto;position:fixed;top:0;transform:scale(1.2);transition:all .4s cubic-bezier(.165,.84,.44,1);visibility:hidden;width:100%;z-index:2}.m-menu.opened{opacity:1;transform:scale(1);visibility:visible;z-index:10}@media only screen and (min-width:33rem){.m-menu{background-color:transparent;height:auto;left:auto;opacity:1!important;overflow:initial;position:relative;top:auto;transform:translateZ(0)!important;visibility:visible!important}}.m-menu__main{min-height:100%;padding:50px 0 5px}@media only screen and (min-width:33rem){.m-menu__main{min-height:0;padding:0}}.rtl .m-menu__main{padding-top:75px}@media only screen and (min-width:33rem){.rtl .m-menu__main{padding:0}}.m-secondary-menu{list-style-type:none;margin:0;padding:0}.m-secondary-menu li{font-size:1rem}@media only screen and (min-width:33rem){.m-secondary-menu li{margin-left:0;margin-right:0}}.m-secondary-menu li.nav-current a{font-weight:600}.m-secondary-menu li a{border-radius:4px;display:block;padding:6px 10px;transition:background-color .1s linear}@media only screen and (min-width:33rem){.m-secondary-menu li a{padding:8px 10px}}.m-secondary-menu li a:hover{background-color:rgba(0,0,0,.1)}.rtl .m-secondary-menu .li,.rtl .m-secondary-menu .li a{text-align:right!important}.m-submenu{padding-top:25px}@media only screen and (min-width:33rem){.m-submenu{background-color:var(--background-color);border-top:1px solid var(--secondary-border-color);box-shadow:0 60px 60px rgba(0,0,0,var(--submenu-shadow-color-opacity)),0 0 0 transparent;left:0;padding:30px 0 20px;position:fixed;top:67px;visibility:hidden;white-space:normal;width:100%;z-index:5}}@media only screen and (min-width:80rem){.m-submenu{padding:32px 0 23px}}@media only screen and (min-width:33rem){.m-submenu.opened{-webkit-animation:openSubmenuAnimation .3s both;animation:openSubmenuAnimation .3s both;-webkit-backface-visibility:visible!important;backface-visibility:visible!important;visibility:visible}@-webkit-keyframes openSubmenuAnimation{0%{opacity:0;transform:translate3d(0,-5%,0)}to{opacity:1;transform:translateZ(0)}}@keyframes openSubmenuAnimation{0%{opacity:0;transform:translate3d(0,-5%,0)}to{opacity:1;transform:translateZ(0)}}}@media only screen and (min-width:33rem){.m-submenu.closed{-webkit-animation:closeSubmenuAnimation .3s both;animation:closeSubmenuAnimation .3s both;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes closeSubmenuAnimation{0%{opacity:1;transform:translateZ(0);visibility:visible}to{opacity:0;transform:translate3d(0,-2.5%,0);visibility:hidden}}@keyframes closeSubmenuAnimation{0%{opacity:1;transform:translateZ(0);visibility:visible}to{opacity:0;transform:translate3d(0,-2.5%,0);visibility:hidden}}}@media only screen and (min-width:33rem){:root .m-submenu,_:-ms-fullscreen{top:65px}}.m-submenu-title{font-size:1.125rem;font-weight:400;letter-spacing:.3px;line-height:1.3;margin:0 0 25px}.m-submenu-title.in-recent-articles{padding:0 20px}@media only screen and (min-width:33rem){.m-submenu-title.in-recent-articles{padding:0}}.rtl .m-submenu-title{direction:rtl}.m-recent-articles{margin:0 -20px 40px;overflow:hidden}@media only screen and (min-width:33rem){.m-recent-articles{margin:0 0 40px}}.m-recent-articles ul{cursor:-webkit-grab;cursor:grab}.m-recent-articles .swiper-slide{width:auto}.m-recent-article{display:block;margin:0 20px;width:230px}@media only screen and (min-width:33rem){.m-recent-article{margin:0 60px 0 0}}.m-recent-article:hover .m-recent-article__picture img{transform:scale(1.1)}@media only screen and (min-width:33rem){.rtl .m-recent-article{margin:0 0 0 60px}}.m-recent-article__picture{background-color:var(--secondary-subtle-color);border-radius:5px;height:130px;margin-bottom:15px;overflow:hidden;position:relative;transform:translateZ(0)}.m-recent-article__picture.no-picture img{height:64px;left:50%;margin:-32px 0 0 -32px;position:absolute;top:50%;width:64px}.m-recent-article__picture img{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;height:100%;-o-object-fit:cover;object-fit:cover;transition:transform .5s cubic-bezier(.165,.84,.44,1);width:100%}.m-recent-article__title{color:var(--titles-color);font-size:1rem;font-weight:400;letter-spacing:.2px;line-height:1.438rem;margin:0 0 10px}@media only screen and (min-width:33rem){.m-recent-article__title{font-size:1.125rem;letter-spacing:.25px}}.m-recent-article__date{color:var(--titles-color);font-size:.813rem;letter-spacing:.15px}.m-tags.in-post{padding-top:25px}.m-tags.in-post ul{list-style-type:none;padding:0}.m-tags.in-post a{text-decoration:none}.m-tags ul{display:flex;flex-wrap:wrap}.m-tags li{font-size:.875rem;font-weight:600;letter-spacing:.2px;margin-bottom:10px!important;margin-right:30px}.m-tags li:last-of-type{margin-right:0}.m-tags li a{color:var(--link-color)!important}.m-toggle-darkmode{border-radius:50%;bottom:45px;height:28px;overflow:hidden;position:fixed;right:20px;width:28px;z-index:2}@media only screen and (min-width:33rem){.m-toggle-darkmode{bottom:auto;margin-left:20px;position:relative;right:auto;z-index:auto}}.m-toggle-darkmode input{border:0;cursor:pointer;height:100%;left:0;opacity:0;outline:0;position:absolute;top:0;width:100%;z-index:2}.m-toggle-darkmode input::-moz-focus-inner{border:0}.m-toggle-darkmode div{align-items:center;background-color:var(--toggle-darkmode-background-color);border-radius:50%;display:flex;height:100%;justify-content:center;left:0;overflow:hidden;position:absolute;top:0;width:100%;z-index:1}.m-toggle-darkmode span{color:var(--titles-color);font-size:.9375rem}.m-toggle-darkmode span.moon{display:var(--toggle-darkmode-button-display-moon)}.m-toggle-darkmode span.sun{display:var(--toggle-darkmode-button-display-sun)}:root .m-toggle-darkmode,_:-ms-fullscreen{display:none}div.gh-announcement-bar{font-size:1rem;line-height:1.3;min-height:auto;padding:16px 48px;z-index:auto}@media only screen and (min-width:33rem){div.gh-announcement-bar{font-size:1.125rem}}.m-hero{background-color:var(--secondary-subtle-color);flex-direction:column;min-height:365px;overflow:hidden;padding:100px 0 75px;position:relative}@media only screen and (min-width:33rem){.m-hero{min-height:400px;padding:150px 0 75px}}.m-hero.with-picture{background-color:#000;color:#fff}@media only screen and (min-width:33rem){.m-hero.with-picture{min-height:450px}}@media only screen and (min-width:80rem){.m-hero.with-picture{min-height:565px}}.m-hero.with-picture .m-hero-title{color:#fff}.m-hero.no-picture.in-post{display:none}.m-hero__picture{align-items:center;display:flex;height:100%;justify-content:center;left:0;opacity:.7;position:absolute;top:0;width:100%;z-index:1}.m-hero__picture.in-post{opacity:1}.m-hero__picture img{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.m-hero__content{padding:0 20px;position:relative;text-align:center;z-index:2}@media only screen and (min-width:33rem){.m-hero__content{max-width:700px}}@media only screen and (min-width:80rem){.m-hero__content{padding:0}}.m-hero__meta{margin:0 auto}@media only screen and (min-width:33rem){.m-hero__meta{align-items:center;display:flex;justify-content:center}}.rtl .m-hero__meta{direction:ltr}.m-hero-avatar{background-color:#5c697c;background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:50%;box-shadow:inset 0 2px 4px rgba(0,0,0,.25),0 0 0 transparent;height:80px;margin:0 auto 25px;width:80px}@media only screen and (min-width:33rem){.m-hero-avatar{height:100px;width:100px}}.m-hero-title{color:var(--titles-color);font-size:1.75rem;font-weight:700;letter-spacing:.4px;line-height:1.3;margin:0 0 15px}@media only screen and (min-width:33rem){.m-hero-title{font-size:2.25rem;letter-spacing:.5px}}.m-hero-title.bigger{font-size:2rem;letter-spacing:.5px}@media only screen and (min-width:33rem){.m-hero-title.bigger{font-size:3.25rem;letter-spacing:.8px;margin-bottom:10px}}.m-hero-description{font-size:.938rem;letter-spacing:.2px;line-height:1.5;margin-bottom:20px}@media only screen and (min-width:33rem){.m-hero-description{font-size:1.125rem}}.m-hero-description.bigger{font-size:1.125rem;line-height:1.3;margin-bottom:25px}@media only screen and (min-width:33rem){.m-hero-description.bigger{font-size:1.375rem}}.m-hero-description.with-picture{color:#fff}.m-hero-social{list-style-type:none;margin:0 0 15px;padding:0;text-align:center}@media only screen and (min-width:33rem){.m-hero-social{margin-bottom:0;margin-right:7px}}.m-hero-social.with-picture{color:#fff}.m-hero-social li{display:inline-block;margin:0 11px}.m-hero-social li a{color:inherit;font-size:.938rem}.m-hero-social li a span{color:inherit}.rtl .m-hero-social{direction:ltr}.m-hero-stats{list-style-type:none;margin:0;padding:0;text-align:center}@media only screen and (min-width:33rem){.m-hero-stats{margin-left:7px}}.m-hero-stats.with-picture{color:#fff}.m-hero-stats li{color:inherit;display:inline-block;font-size:.813rem;letter-spacing:.2px;margin:0 4px}@media only screen and (min-width:33rem){.m-hero-stats li{font-size:1rem;letter-spacing:.3px}}.m-heading{margin:0 auto 40px;text-align:center}@media only screen and (min-width:33rem){.m-heading{margin-bottom:60px}.m-heading.in-subscribe-page{margin-bottom:50px}}.m-heading.no-margin{margin-bottom:0!important}.m-heading__title{color:var(--titles-color);font-size:1.75rem;letter-spacing:.4px;line-height:1.3;margin:0 0 10px}@media only screen and (min-width:33rem){.m-heading__title{font-size:2.25rem;letter-spacing:.5px;margin-bottom:15px}}.m-heading__title.in-post{font-size:2rem;letter-spacing:.5px;margin-bottom:15px}@media only screen and (min-width:33rem){.m-heading__title.in-post{font-size:2.625rem;letter-spacing:.7px;margin-bottom:20px}}.m-heading__title.in-page{margin:0}.m-heading__description{font-size:.938rem;letter-spacing:.2px;line-height:1.3;margin:0 auto}@media only screen and (min-width:33rem){.m-heading__description{font-size:1.125rem}.m-heading__description.in-subscribe-page{font-size:1rem;max-width:420px}}.m-heading__description.in-newsletter-form{font-size:.875rem;max-width:80%}@media only screen and (min-width:33rem){.m-heading__description.in-newsletter-form{max-width:420px}}.m-heading__meta{align-items:center;display:flex;font-size:.875rem;font-weight:600;justify-content:center;letter-spacing:.2px}@media only screen and (min-width:33rem){.m-heading__meta{font-size:1rem}}.m-heading__meta__tag,.m-heading__meta__time{color:var(--link-color)!important}.m-heading__meta__tag{text-decoration:none!important}.m-heading__meta__divider{color:var(--primary-border-color);display:inline-block;margin:0 10px}.m-article-card{background-color:var(--background-color);border:1px solid var(--secondary-border-color);border-radius:10px;display:flex;flex-direction:column;height:400px;margin-bottom:20px;position:relative;transition:all .25s cubic-bezier(.02,.01,.47,1);z-index:1}.m-article-card:hover{transform:translateY(-5px)}.m-article-card:hover:before{box-shadow:var(--article-shadow-hover),0 0 0 transparent}.m-article-card:hover .m-article-card__author{box-shadow:0 4px 8px rgba(0,0,0,.3),0 0 0 transparent}@media only screen and (min-width:33rem){.m-article-card{height:420px;margin-bottom:20px;margin-left:10px;margin-right:10px;width:calc(50% - 20px)}}@media only screen and (min-width:64rem){.m-article-card{margin-bottom:40px;margin-left:20px;margin-right:20px;width:calc(33.33333% - 40px)}}.m-article-card.no-picture .m-article-card__picture{height:85px!important}.m-article-card.no-picture .m-article-card__info{background-color:var(--secondary-subtle-color)}.m-article-card.no-picture .m-article-card__title{font-size:1.625rem;line-height:1.4}.m-article-card.as-author .m-article-card__picture{background-color:#000}.m-article-card.as-author .m-article-card__picture-link{z-index:2}.m-article-card.as-author .m-article-card__picture-background{opacity:.75}.m-article-card.as-author .m-article-card__info{padding:0}.m-article-card.as-author .m-article-card__info-link{padding:20px 20px 60px}.m-article-card:before{border-radius:10px;bottom:0;box-shadow:var(--article-shadow-normal),0 0 0 transparent;content:"";left:10px;position:absolute;right:10px;top:10px;transition:all .25s cubic-bezier(.02,.01,.47,1)}.m-article-card__picture{background-color:var(--secondary-subtle-color);border-radius:10px 10px 0 0;height:200px;overflow:hidden;position:relative;transform:translateZ(0)}@media only screen and (min-width:33rem){.m-article-card__picture{height:220px}}.m-article-card__picture-link{height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.m-article-card__picture-background{height:100%;left:0;-o-object-fit:cover;object-fit:cover;position:absolute;top:0;width:100%;z-index:0}.m-article-card__name{bottom:20px;color:#fff;font-size:1.25rem;font-weight:600;left:20px;letter-spacing:.4px;line-height:1.3;margin:0;position:absolute;right:20px;z-index:1}@media only screen and (min-width:33rem){.m-article-card__name{bottom:25px;left:25px}}.m-article-card__author{border-radius:50%;height:35px;left:20px;position:absolute;top:20px;transition:all .25s cubic-bezier(.02,.01,.47,1);width:35px;z-index:2}@media only screen and (min-width:33rem){.m-article-card__author{left:25px;top:25px}}.m-article-card__author div{background-color:#fff;background-position:50%;background-repeat:no-repeat;background-size:cover;border:2px solid #fff;border-radius:50%;height:100%;width:100%}.m-article-card__featured{align-items:center;background-color:#fff;border-radius:50%;color:#000;display:flex;height:24px;justify-content:center;position:absolute;right:20px;top:26px;width:24px;z-index:2}@media only screen and (min-width:33rem){.m-article-card__featured{right:25px;top:31px}}.m-article-card__featured span{color:inherit;font-size:.75rem}.m-article-card__info{background-color:var(--background-color);border-radius:0 0 10px 10px;flex:1;height:200px;overflow:hidden;padding-top:48px;position:relative}@media only screen and (min-width:33rem){.m-article-card__info{padding-top:53px}}.m-article-card__info.no-tag{padding-top:0!important}.m-article-card__info.no-tag .m-article-card__info-link{padding-top:48px}@media only screen and (min-width:33rem){.m-article-card__info.no-tag .m-article-card__info-link{padding-top:53px}}.m-article-card__tag{color:var(--link-color);font-size:.875rem;font-weight:600;left:20px;letter-spacing:.2px;line-height:1.3;position:absolute;right:20px;top:20px}@media only screen and (min-width:33rem){.m-article-card__tag{left:25px;top:25px}}.m-article-card__info-link{display:flex;flex-direction:column;height:100%;justify-content:space-between;padding:0 20px 20px;width:100%}@media only screen and (min-width:33rem){.m-article-card__info-link{padding:0 25px 25px}}.m-article-card__title{color:var(--titles-color);font-size:1.25rem;font-weight:600;letter-spacing:.4px;line-height:1.3;margin:0}.m-article-card__excerpt{color:var(--titles-color);display:block;font-size:1rem;height:100%;letter-spacing:.3px;line-height:1.5;overflow:hidden;position:relative}.m-article-card__author-stats,.m-article-card__timestamp{align-items:center;color:var(--titles-color);display:flex;font-size:.875rem;letter-spacing:.2px}.m-article-card__author-stats span:nth-child(2),.m-article-card__timestamp span:nth-child(2){padding:0 10px}.m-article-card__author-stats{bottom:20px;justify-content:space-between;left:20px;position:absolute;right:20px}.m-article-card__author-stats span{padding:0!important}.m-article-card__social{align-items:center;display:flex;justify-content:flex-end;margin:0;padding:0}.m-article-card__social li{display:inline-block;margin-left:22px}.m-article-card__social li a{color:var(--primary-foreground-color);font-size:.938rem}.m-article-card__social li a span{color:inherit}.rtl .m-article-card__social{direction:ltr}.m-search{-webkit-overflow-scrolling:touch;background-color:var(--transparent-background-color);height:100%;left:0;opacity:0;overflow-y:auto;position:fixed;top:0;transform:scale(1.2);transition:all .4s cubic-bezier(.165,.84,.44,1);visibility:hidden;width:100%;z-index:2}.m-search.opened{opacity:1;transform:scale(1);visibility:visible;z-index:10}.m-search__content{margin:0 auto;padding:80px 20px 40px}@media only screen and (min-width:33rem){.m-search__content{max-width:700px;padding-bottom:50px;padding-top:100px}}@media only screen and (min-width:80rem){.m-search__content{padding-left:0;padding-right:0}}@media only screen and (min-width:90rem){.m-search__content{max-width:800px}}.m-search__form{margin-bottom:30px}@media only screen and (min-width:33rem){.m-search__form{margin:0 auto 45px;max-width:500px}}.m-search-icon{color:#9b9b9b;font-size:1rem;font-weight:500;left:15px;pointer-events:none;position:absolute;top:50%;transform:translateY(-45%)}@media only screen and (min-width:33rem){.m-search-icon{font-size:1.25em;left:25px}}.m-result{border-bottom:1px solid var(--primary-border-color)}.m-result.last{border-bottom:0}.m-result__link{display:block;height:100%;padding:10px 0;width:100%}@media only screen and (min-width:33rem){.m-result__link{padding:15px 0}}.m-result__title{color:var(--primary-foreground-color);font-size:1rem;font-weight:400;letter-spacing:.3px;line-height:1.4;margin:0 0 5px}@media only screen and (min-width:33rem){.m-result__title{font-size:1.25rem;letter-spacing:.4px;margin-bottom:10px}}@media only screen and (min-width:80rem){.m-result__title{font-size:1.375rem}}.m-result__date{color:var(--titles-color);font-size:.813rem;letter-spacing:.2px}@media only screen and (min-width:33rem){.m-result__date{font-size:.938rem;letter-spacing:.3px}}.m-footer{background-color:var(--footer-background-color);flex-shrink:0}.m-footer__content{color:#fff;padding:50px 20px;text-align:center}@media only screen and (min-width:33rem){.m-footer__content{margin:0 auto;max-width:680px;padding:75px 0}}.m-footer__nav-secondary{margin-bottom:25px}.m-footer__nav-secondary .m-secondary-menu{display:flex;flex-wrap:wrap;justify-content:center}@media only screen and (min-width:33rem){.m-footer__nav-secondary .m-secondary-menu li{margin:0 5px}}.m-footer-copyright{font-size:.875rem;letter-spacing:.3px;line-height:1.7;margin-bottom:20px}.m-footer-copyright span{display:block}@media only screen and (min-width:33rem){.m-footer-copyright span{display:inline}}.m-footer-copyright span:nth-child(2){display:none}@media only screen and (min-width:33rem){.m-footer-copyright span:nth-child(2){display:inline}}.m-footer-copyright a{text-decoration:underline}.m-footer-copyright.jslicense{margin-bottom:0;opacity:.7}.m-footer-social{align-items:center;display:flex;justify-content:center;margin-bottom:20px}.m-footer-social a{color:#fff;display:inline-block;margin:0 15px}.m-footer-social a span{color:inherit;font-size:1rem}.rtl .m-footer-social{direction:ltr}

/* This site's additions to Liebling (Website/README.md). */

/* Posts tagged "Recommended Apps" (recommended-apps; an app icon) or #icon-image (a page's icon, from the dashboard's link post tool) show the
   feature image whole instead of cropping it to fill, on the post cards (any list) and in the post's header. */
.m-article-card.tag-recommended-apps .m-article-card__picture-background,
.m-article-card.tag-hash-icon-image .m-article-card__picture-background {
  object-fit: contain;
  padding: 16px;
  box-sizing: border-box;
  opacity: 1;
}

.post-template.tag-recommended-apps .m-hero__picture.in-post img,
.post-template.tag-hash-icon-image .m-hero__picture.in-post img {
  object-fit: contain;
  /* The fixed menu bar (about 67 px) covers the top of the header. */
  padding: 96px 32px 32px;
  box-sizing: border-box;
}

/* A tag page's post count (tag.hbs), centered under the page count. */
.personal-post-count {
  margin: -24px 0 48px;
  text-align: center;
  font-size: .875rem;
  opacity: .7;
}

/* The Recommended Sites and Recommended Apps tag pills, wherever they appear (post cards in any list, a post's Tags list): the
   footer's purple with white text, as the footer's (the code injection's colors, data/site.json). Matched
   by the tag's link; more specific than the injected pill rule. */
:is(.m-article-card__tag, .m-tags li a):is([href$="/tag/recommended-sites/"], [href$="/tag/recommended-apps/"]) {
  background: var(--footer-background-color);
  color: #fff !important;
}

/* Menu dropdowns (partials/header.hbs): "- Name" items under the item above them. Until the script moves them, they
   are hidden, so the dash never shows. */
.m-nav__left > ul > li.nav-child {
  display: none;
}

/* The chevron marks a menu, on phones as well. */
.personal-dropdown-chevron {
  display: inline-block;
  margin-left: 4px;
  font-size: .75rem;
  transition: transform .2s;
}

/* Phones (the full-screen menu): sub-items always shown, indented under their item. */
.m-nav__left li > ul.personal-dropdown {
  display: block;
  margin: 15px 0 0;
  padding: 0 0 0 20px;
  list-style: none;
}

@media only screen and (min-width: 33rem) {
  /* The bar (and its row, .m-nav) scrolls sideways when it is too long, which would also clip a dropdown: let it show. */
  .m-nav,
  .m-nav__left {
    overflow: visible;
  }

  .personal-has-dropdown > a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
  }

  .personal-dropdown-chevron {
    margin-left: 0;
  }

  .personal-has-dropdown:hover .personal-dropdown-chevron,
  .personal-has-dropdown > a[aria-expanded="true"] .personal-dropdown-chevron {
    transform: rotate(180deg);
  }

  /* Opened by hover, or by a click (aria-expanded); top: 100% leaves no gap for the pointer to fall through. */
  .m-nav__left li > ul.personal-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: -16px;
    z-index: 20;
    min-width: 12rem;
    margin: 0;
    padding: 8px 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--background-color);
    border: 1px solid var(--primary-border-color);
    border-radius: 12px;
    box-shadow: 0 10px 30px var(--submenu-shadow-color);
  }

  .personal-has-dropdown:hover > ul.personal-dropdown,
  .personal-has-dropdown > a[aria-expanded="true"] + ul.personal-dropdown {
    display: flex;
  }

  .m-nav__left .personal-dropdown li {
    margin: 0;
    font-size: 1rem;
  }

  /* Each item, its highlight, and its click area span the menu's width (site.css makes menu links inline-flex for
     their 24 px height; here they stretch). */
  .m-nav__left .personal-dropdown li {
    display: block;
    width: 100%;
  }

  .m-nav__left .personal-dropdown a {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 16px;
    white-space: nowrap;
  }

  /* An item under the pointer or keyboard focus is marked by a ring (site.css), not a background: the palette's
     purple (--primary-subtle-color) behind the dark text of light mode left it unreadable. */
}

/* Post cards' excerpts (partials/post_card.hbs): half way between the title and the date in size (1.25rem and
   .875rem; 1.625rem titles on cards without a picture), in the room between them; partials/card_excerpts.hbs sets
   the number of whole lines that fit. */
.personal-card-text {
  flex: 1 1 0;
  min-height: 0;
  margin-bottom: 10px;
  overflow: hidden;
}

.personal-card-excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 8px 0 0;
  color: var(--titles-color);
  opacity: .8;
  letter-spacing: 0.2px;
  line-height: 1.45;
  font-size: 1.0625rem;
}

.m-article-card.no-picture .personal-card-excerpt {
  font-size: 1.25rem;
}

/* Cards three excerpt lines taller than the theme's (400 px, 420 px from the desktop layout): a line is 1.0625rem at
   1.45, about 25 px; the excerpt script fits the extra lines into the room. The excerpt still stops at the end of its
   first paragraph (cardExcerpt), so a short paragraph leaves the room empty rather than run into the next. */
.m-article-card {
  height: 475px;
}

@media only screen and (min-width: 33rem) {
  .m-article-card {
    height: 495px;
  }
}

/* This site's styles beyond the theme's personal.css (Website/theme/assets/css/personal.css). */
/* The recommended tags' pills link to their collections here (/recommended/sites/, /recommended/apps/,
   /recommended/podcasts/, /recommended/services/), not to /tag/...: the same footer purple with white text as
   personal.css gives them. */
:is(.m-article-card__tag, .m-tags li a):is([href="/recommended/sites/"], [href="/recommended/apps/"], [href="/recommended/podcasts/"], [href="/recommended/services/"]) {
  background: var(--footer-background-color);
  color: #fff !important;
}

/* The 404 page (src/pages/404.astro): a shrug as its picture, in the dashboard's orange in dark mode and the
   accent purple in light mode (the image is a mask, so one file serves both), then three recommendations. */
.personal-404-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  /* The fixed menu bar (about 67 px) covers the top. */
  padding: 120px 24px 48px;
}

.personal-404-shrug {
  width: min(720px, 90%);
  aspect-ratio: 2042 / 390;
  background-color: var(--footer-background-color, #4e2a84);
  -webkit-mask: url("/site/404_shrug.webp") center / contain no-repeat;
  mask: url("/site/404_shrug.webp") center / contain no-repeat;
}

html[data-theme="dark"] .personal-404-shrug {
  background-color: var(--dashboard-orange, #f5a25d);
}

.personal-404 {
  padding: 0 20px 64px;
  text-align: center;
}

.personal-404-more {
  padding-bottom: 64px;
}

.personal-404-more__title {
  text-align: center;
}

/* The 404 page's "404" in light mode: the dark mode's page background (the palette's darkest purple, set by
   the palette in data/site.json's code injection; not a variable in light mode). Dark mode keeps the theme's color. */
html[data-theme="light"] .m-404-title {
  color: #17121f;
}

/* The footer's feed menu (Footer.astro): the RSS icon opens a popover listing the site's feeds. */
.personal-feeds-button {
  display: inline-block;
  margin: 0 15px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--dashboard-orange, #f5a25d);
  font-size: 1rem;
  line-height: inherit;
  cursor: pointer;
  border-radius: 6px;  /* its hover ring's corners, as the menu links' */
}

.personal-feeds {
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  margin: auto;
  padding: 20px 20px 24px;
  border: 1px solid var(--primary-border-color);
  border-radius: 16px;
  background: var(--background-color);
  color: var(--primary-foreground-color);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  text-align: left;
}

.personal-feeds::backdrop {
  background: rgba(23, 18, 31, 0.5);
}

.personal-feeds__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.personal-feeds__title {
  margin: 0;
  color: var(--titles-color);
  font-size: 1.25rem;
}

.personal-feeds__close {
  padding: 6px;
  border: 0;
  background: none;
  color: var(--titles-color);
  font-size: 1rem;
  cursor: pointer;
}

.personal-feeds__hint {
  margin: 4px 0 12px;
  font-size: .875rem;
  opacity: .75;
}

.personal-feeds__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.personal-feeds__list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--titles-color);
  text-decoration: none;
}

.personal-feeds__list a:hover, .personal-feeds__list a:focus-visible {
  background: var(--secondary-subtle-color);
}

.personal-feeds__list .icon-rss {
  color: var(--dashboard-orange-line, #c75a00);
}

.personal-feeds__list strong, .personal-feeds__list small {
  display: block;
}

.personal-feeds__list small {
  opacity: .75;
}

/* The tailnet preview's drafts and scheduled posts (src/lib/site.js previewState): a label before the title. */
.personal-preview-label {
  display: inline-block;
  margin-right: .5em;
  padding: .1em .55em;
  border-radius: 999px;
  background: var(--dashboard-orange, #f5a25d);
  color: #17121f;
  font-size: .6em;
  font-weight: 700;
  letter-spacing: .04em;
  vertical-align: middle;
}

/* The aperture's extras (src/lib/site.js APERTURE_EXTRAS), each still when motion is reduced. */
.personal-aperture-sprite {
  position: absolute;
  overflow: hidden;
}

/* The straight-blade iris drawn to move (Iris.astro; lib/aperture.js IRIS): --iris-d is the six chords' distance from
   the centre, 3 closed (a small hexagon still open in the middle) to 32.17 fully open. Each blade's half-plane slides out along its own direction by --iris-d,
   the next blade's gap by --iris-d less the gap (2.4); 42 shows through the hexagonal hole (apothem --iris-d).
   Registered, so the header logo's click can animate it. */
@property --iris-d {
  syntax: "<number>";
  inherits: true;
  initial-value: 12.8;
}

.personal-iris-blade {
  transform: translateX(calc(var(--iris-d) * 1px));
}

.personal-iris-gap {
  transform: translateX(calc((var(--iris-d) - 2.4) * 1px));
}

.personal-iris-hole {
  transform-box: view-box;
  transform-origin: 0 0;
  transform: scale(var(--iris-d));
}

/* The header logo (HeaderLogo.astro: the iris with 42, drawn inline; a link to the home page), large enough for its
   letters to read; at rest its chords stand at 18.5 (IRIS.logo), open enough to leave space round 42. */
.m-logo {
  height: 44px;
}

/* In the desktop menu bar the link is a block, so no line spacing sits under the logo and it is centred in the bar
   with the menu's text and buttons (as inline content it sat 2 px high). */
.m-nav__left .m-logo {
  display: flex;
}

/* On the desktop site (the theme's desktop width, 64rem), a quarter larger. */
@media only screen and (min-width: 64rem) {
  .m-logo {
    height: 55px;
  }
}

.m-logo svg.personal-iris {
  --iris-d: 18.5;
  display: block;
  height: 100%;
  width: auto;
  aspect-ratio: 1;
  fill: #4f2a84;
}

html[data-theme="dark"] .m-logo svg.personal-iris {
  fill: #ece6f5;
}

/* The header logo's shutter click, on hover or keyboard focus: the six blades slide in together over 42 until only a
   small hexagon is left open in the middle (closed, IRIS.closed), then back out. */
@keyframes personal-iris-close {
  0%, 100% {
    --iris-d: 18.5;
  }

  40%, 60% {
    --iris-d: 3;
  }
}

.personal-aperture-extras .m-logo:is(:hover, :focus-visible) svg.personal-iris {
  animation: personal-iris-close .9s cubic-bezier(.45, 0, .25, 1);
}

/* The reading-progress shutter (ApertureShutter.astro: the iris without 42) is the progress, in place of the theme's
   ring. As the page scrolls to the post's end (--open, 0 to 1) the blades slide out from closed (a small hexagon left
   open, IRIS.closed) to fully open (a perfect hexagon), and the iris turns a quarter turn. It follows the scroll directly (no transition). */
.m-icon-button.personal-shutter-button svg:not(.personal-shutter) {
  display: none;
}

.m-icon-button.personal-shutter-button svg.personal-shutter {
  --iris-d: calc(3 + var(--open, 0) * 29.17);
  position: absolute;
  inset: 15%;
  width: 70%;
  height: 70%;
  fill: currentColor;
  opacity: 1;
  overflow: visible;
  transform: rotate(calc(var(--open, 0) * 90deg));
}

/* The theme strokes and turns every circle in this button (its progress ring); not the shutter's. */
.m-icon-button.personal-shutter-button svg.personal-shutter circle {
  stroke: none;
  transform: none;
  transition: none;
}

/* The end-of-post mark: a small aperture at the very end of the post's text, in the accent color. It follows the
   body's last block (the last child other than the share buttons and the tag list, .m-share and .m-tags, which sit in
   the same container): a paragraph's or heading's text, a closing quote's last paragraph, or a closing list's last
   item; when the body ends with anything else (a picture, code, an embed) it stands on its own line above the tags.
   (It followed the last paragraph, which put it before a closing quote.) */
.personal-aperture-extras .js-post-content > :is(p, h2, h3, h4, h5, h6):nth-last-child(1 of :not(.m-tags, .m-share))::after,
.personal-aperture-extras .js-post-content > blockquote:nth-last-child(1 of :not(.m-tags, .m-share)) > :last-child::after,
.personal-aperture-extras .js-post-content > :is(ul, ol):nth-last-child(1 of :not(.m-tags, .m-share)) > li:last-child::after,
.personal-aperture-extras .js-post-content > :not(p, h2, h3, h4, h5, h6, blockquote, ul, ol, .m-tags, .m-share):nth-last-child(1 of :not(.m-tags, .m-share)) ~ .m-tags::before {
  content: "";
  display: inline-block;
  width: .85em;
  height: .85em;
  margin-left: .45em;
  vertical-align: -.08em;
  background: var(--footer-background-color, #4e2a84);
  -webkit-mask: url(/content/images/branding/aperture_dark.svg) center / contain no-repeat;
  mask: url(/content/images/branding/aperture_dark.svg) center / contain no-repeat;
}

.personal-aperture-extras .js-post-content > :not(p, h2, h3, h4, h5, h6, blockquote, ul, ol, .m-tags, .m-share):nth-last-child(1 of :not(.m-tags, .m-share)) ~ .m-tags::before {
  display: block;
  margin: 0 0 1em;
}

html[data-theme="dark"].personal-aperture-extras .js-post-content > :is(p, h2, h3, h4, h5, h6):nth-last-child(1 of :not(.m-tags, .m-share))::after,
html[data-theme="dark"].personal-aperture-extras .js-post-content > blockquote:nth-last-child(1 of :not(.m-tags, .m-share)) > :last-child::after,
html[data-theme="dark"].personal-aperture-extras .js-post-content > :is(ul, ol):nth-last-child(1 of :not(.m-tags, .m-share)) > li:last-child::after,
html[data-theme="dark"].personal-aperture-extras .js-post-content > :not(p, h2, h3, h4, h5, h6, blockquote, ul, ol, .m-tags, .m-share):nth-last-child(1 of :not(.m-tags, .m-share)) ~ .m-tags::before {
  background: var(--dashboard-orange, #f5a25d);
}

/* A header photo's caption (Hero.astro: a credit like "Photo by … on Unsplash", links and all), in the photo's corner
   above the title layer: shown on hover and while one of its links has keyboard focus, and always on touch screens,
   which have no hover. White on a dark backing, so it reads on any photo. */
.m-hero .personal-photo-credit {
  position: absolute;
  right: 12px;
  bottom: 10px;
  z-index: 3;
  max-width: calc(100% - 24px);
  margin: 0;
  padding: 4px 9px;
  border-radius: 4px;
  background: rgba(0, 0, 0, .65);
  color: #fff;
  font-size: .75rem;
  line-height: 1.4;
  opacity: 0;
  transition: opacity .2s;
}

.m-hero .personal-photo-credit a {
  color: #fff;
  text-decoration: underline;
}

.m-hero:hover .personal-photo-credit, .m-hero:focus-within .personal-photo-credit {
  opacity: 1;
}

@media (hover: none) {
  .m-hero .personal-photo-credit {
    opacity: 1;
  }
}

/* Native controls (scrollbars, form fields) follow the theme in use (Default.astro declares both schemes). */
html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
}

/* The footer mark, before the copyright line. */
.personal-footer-aperture {
  width: 1.1em;
  height: 1.1em;
  margin-right: .45em;
  vertical-align: -.2em;
  fill: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .personal-aperture-extras .m-logo svg.personal-iris {
    animation: none !important;
  }
}

/* Sliders (public/site/site.js): a row that scrolls sideways, a card at a time, in place of the theme's Swiper. */
.swiper {
  position: relative;
}

.swiper-wrapper {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.swiper-wrapper::-webkit-scrollbar {
  display: none;
}

.swiper-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

@media only screen and (min-width: 45rem) {
  .m-recommended-slider .swiper-slide {
    flex-basis: 50%;
  }
}

@media only screen and (min-width: 64rem) {
  .m-recommended-slider .swiper-slide {
    flex-basis: 33.3333%;
  }

  .m-recommended-slider .swiper-wrapper {
    justify-content: flex-start;
  }
}

/* Wide windows (1600 px and over): the listings use the width, four cards to a row, each as wide as one of three in
   the theme's 1200 px frame, and the home page's featured slider two of them; the header follows the frame. Posts and
   pages keep their reading width (.in-post), as do their captions, comments, and recommended row. The slider's rule
   carries .l-grid because home.css, which sets its width, loads after this file. */
@media only screen and (min-width: 100rem) {
  .l-wrapper:not(.in-post, .in-comments, .in-caption, .in-recommended) {
    max-width: 1600px;
  }

  .m-article-card {
    width: calc(25% - 40px);
  }

  .l-grid .m-featured-slider.swiper {
    width: calc(50% - 40px);
  }
}

.swiper-button-prev:disabled, .swiper-button-next:disabled {
  opacity: .35;
  cursor: default;
}

/* Card titles shortened by line count (the theme's Shave measured heights: 100, 250, and 200 px). */
.js-article-card-title,
.js-article-card-title-no-image,
.js-featured-article-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.js-article-card-title {
  -webkit-line-clamp: 3;
}

.js-article-card-title-no-image {
  -webkit-line-clamp: 6;
}

.js-featured-article-title {
  -webkit-line-clamp: 5;
}

@media only screen and (min-width: 33rem) {
  .js-featured-article-title {
    -webkit-line-clamp: 4;
  }
}

/* Image zoom (public/site/site.js): a picture in a post opens full size. */
.personal-zoomable {
  cursor: zoom-in;
}

.personal-zoom {
  max-width: 100vw;
  max-height: 100vh;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-out;
}

.personal-zoom::backdrop {
  background: rgba(10, 8, 14, .88);
}

.personal-zoom img {
  display: block;
  max-width: 96vw;
  max-height: 94vh;
  object-fit: contain;
}

/* Embedded video keeps its shape at any width (the theme's fitvids). */
.js-post-content .kg-embed-card iframe, .js-post-content > iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* The home page's subtitle (site.json subtitle), between the heading and the description: two thirds of the
   description's size (.m-hero-description.bigger: 1.125rem, 1.375rem in the desktop layout), and nearer the heading (pulled up
   into its 15px or 10px margin) than the description. */
.personal-hero-subtitle {
  font-size: .75rem;
  margin: -9px 0 14px;
}

@media only screen and (min-width: 33rem) {
  .personal-hero-subtitle {
    font-size: .917rem;
    margin: -5px 0 16px;
  }
}

/* The subtitle beside the heading's g, as in the logo (Home.astro): the heading and subtitle share a block as wide as
   the heading; the subtitle's row is an invisible copy of the heading up to the g (its indent), then the subtitle
   centred in the rest, up to the heading's end. --title is the heading's size (.m-hero-title.bigger); the subtitle is
   0.45 of it (0.485 would fill the space) and is pulled up 0.3 of it, beside the g's descender below the baseline. */
.personal-title-lockup {
  display: inline-block;
  text-align: left;
  --title: 2rem;
  --title-spacing: .5px;
}

@media only screen and (min-width: 33rem) {
  .personal-title-lockup {
    --title: 3.25rem;
    --title-spacing: .8px;
  }
}

.personal-title-lockup .m-hero-title {
  margin-bottom: 0;
}

.personal-title-lockup .personal-hero-subtitle {
  display: flex;
  align-items: flex-start;
  font-size: calc(var(--title) * .45);
  line-height: 1.3;
  margin: calc(var(--title) * -.3) 0 16px;
}

.personal-byline-indent {
  flex: none;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-size: var(--title);
  font-weight: 700;
  letter-spacing: var(--title-spacing);
}

.personal-byline {
  flex: 1;
  text-align: center;
}

/* Accessibility. The skip link: hidden until a keyboard user reaches it, first on every page. */
.personal-skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 1000;
  padding: 10px 16px;
  border-radius: 5px;
  background: #4e2a84;
  color: #fff!important;
  font-weight: 600;
  text-decoration: none;
}

.personal-skip-link:focus {
  top: 12px;
}

main:focus {
  outline: none;
}

/* Keyboard focus is always visible: the theme removes outlines on its buttons and fields (outline:0), with more
   specific rules than the palette's :focus-visible, so this one wins. The dark mode switch is an invisible checkbox
   over its icons: the ring goes on the switch. */
:focus-visible, .m-icon-button:focus-visible, .m-button:focus-visible, .m-input:focus-visible {
  outline: 2px solid var(--dashboard-orange-line, #c75a00)!important;
  outline-offset: 2px!important;
}

.m-toggle-darkmode:has(input:focus-visible) {
  outline: 2px solid var(--dashboard-orange-line, #c75a00);
  outline-offset: 2px;
  border-radius: 999px;
}

/* Reduced motion (the system setting): the theme's fade-ins, slides, and transitions are off, and everything shows
   at once ([data-animate] starts transparent and is shown by its animation). */
@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    animation: none!important;
    opacity: 1!important;
    transform: none!important;
  }

  *, *::before, *::after {
    transition-duration: .01ms!important;
    animation-duration: .01ms!important;
    animation-iteration-count: 1!important;
    scroll-behavior: auto!important;
  }
}

/* Colour blindness (checked with simulated protanopia, deuteranopia, and tritanopia): the footer's links are a lighter
   orange, 5.4:1 or more on the footer purple for every kind (the palette's orange fell to 4.3:1 for protanopia); in
   light mode a post link's hover underline and the orange tag pills' edges are the darker orange line colour, 3:1 or
   more on the page. Nothing relies on colour alone: post links are underlined, and pills carry their names. */
.m-footer-social a, .m-footer-copyright a {
  color: #f9b97e!important;
}

html[data-theme=light] .l-post-content a:hover {
  text-decoration-color: #c75a00!important;
}

html[data-theme=light] :is(.m-article-card__tag,.m-tags li a):not([href^="/recommended/"]) {
  box-shadow: 0 0 0 1px #c75a00;
}

/* Target size (WCAG 2.2, 2.5.8, met without its spacing exception): every button, tag pill, and menu link is at least
   24×24 px. Links inside sentences (the footer's line) are text and keep their size. */
button, .m-button, .m-icon-button, .personal-feeds-button {
  min-width: 24px;
  min-height: 24px;
}

.personal-feeds-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

:is(.m-article-card__tag,.m-tags li a) {
  padding: 3px 10px!important;
  margin: -3px -10px!important;
  min-height: 24px;
}

/* The menu bar's own links only, not a dropdown's items (personal.css lays those out across the dropdown). */
.m-nav__left > ul > li > a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* The desktop layout starts at 33rem (build_site.sh lowers the theme's 48rem): up to 48rem the menu bar sits closer
   than the theme's (items 14 px apart instead of 35, none after the last, search and the theme toggle nearer), so it
   fits a 528 px window on one line, also with a reader's wider letter and word spacing (WCAG 1.4.12). */
@media only screen and (min-width: 33rem) and (max-width: 47.99rem) {
  .m-nav__left li {
    margin-right: 14px;
  }

  .m-nav__left > ul > li:last-child {
    margin-right: 0;
  }

  .m-nav__right {
    padding-left: 8px;
  }

  .m-nav__right .m-toggle-darkmode {
    margin-left: 12px;
  }
}

/* The safe area (viewport-fit=cover in Default.astro): the header's, pictures', menus', and footer's backgrounds reach
   the screen's edges, under a camera or rounded corners, while text and buttons stay inside. Each side has its own
   inset, as they can differ; with no inset (portrait, or a screen without a notch) each value is the theme's own. */
.l-wrapper,
.m-hero__content,
.m-footer__content,
.m-search__content {
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}

.m-mobile-topbar {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.m-icon-button.as-close-menu,
.m-icon-button.as-close-search,
.m-toggle-darkmode {
  right: max(20px, env(safe-area-inset-right));
}

.m-toggle-darkmode {
  bottom: calc(45px + env(safe-area-inset-bottom));
}

/* A post's share bar, along the bottom below 64rem (post.css): above the home indicator, its background beneath it. */
@media only screen and (max-width: 63.99rem) {
  .m-share {
    height: calc(45px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
  }
}

@media only screen and (min-width: 33rem) {
  .m-footer__content {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  .m-icon-button.as-close-search {
    right: max(30px, env(safe-area-inset-right));
  }

  .m-toggle-darkmode {
    right: auto;
    bottom: auto;
  }
}

@media only screen and (min-width: 64rem) {
  .l-wrapper.in-recommended {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

@media only screen and (min-width: 80rem) {
  .l-wrapper,
  .m-hero__content,
  .m-search__content {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  .m-icon-button.as-close-search {
    right: max(40px, env(safe-area-inset-right));
  }
}

/* A post card opens the post from anywhere on it (.personal-card-link covers the card, PostCard.astro) but its title,
   tag, author, and featured star, which sit above that and open their own links: a link post's title the linked
   page. The title is underlined under the pointer, as it may go elsewhere. */
.personal-card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 10px;
}

.m-article-card__tag {
  z-index: 2;
}

.personal-card-title-link {
  position: relative;
  z-index: 2;
  color: inherit;
}

html:not(.personal-touch) .personal-card-title-link:hover {
  text-decoration: underline;
}

/* The phone top bar: the menu button, the logo centred, then search and the dark mode switch (a grid, so the logo
   stays centred with two on its right); on phones the menu's own switch is not shown, the top bar's is. */
.m-mobile-topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

.m-mobile-topbar > .js-open-menu {
  justify-self: start;
}

.personal-topbar-tools {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 4px;
  padding-right: 12px;
}

.m-toggle-darkmode.in-mobile-topbar {
  position: relative;
  right: auto;
  bottom: auto;
}

@media only screen and (max-width: 32.99rem) {
  .m-menu .m-toggle-darkmode {
    display: none;
  }
}

/* After a tap, a touch screen keeps the tapped element "hovered" until something else is tapped, so its ring, lift,
   and shadow stayed. site.js marks the page html.personal-touch while the last pointer was a finger (a trackpad or
   mouse clears it): this site's hover rules apply only without it, and the theme's lift and shadows are undone. */
html.personal-touch .m-article-card:hover {
  transform: none;
}

html.personal-touch .m-article-card:hover::before {
  box-shadow: var(--article-shadow-normal), 0 0 0 transparent;
}

html.personal-touch :is(.m-button, .m-icon-button):hover {
  box-shadow: none;
  transform: none;
}

/* Hover rings: the card or button under the pointer gets a 2 px ring in the accent, orange (#f5a25d) in dark mode
   and purple (#4e2a84) in light mode, each about 9:1 on the page (WCAG 1.4.11 asks 3:1 for such marks). A plain
   :hover, as the search button's, so an iPad's trackpad shows it too (not after a tap, html.personal-touch). Keyboard focus keeps its own ring
   (:focus-visible, above). Cards follow their rounded corners (outline does); buttons sit 2 px inside it. */
html[data-theme="dark"] {
  --personal-hover-ring: #f5a25d;
}

html[data-theme="light"] {
  --personal-hover-ring: #4e2a84;
}

/* The footer is the purple in both modes, where a purple ring would not show: its links' light orange there
   (6.2:1 on it). */
.m-footer {
  --personal-hover-ring: #f9b97e;
}

html:not(.personal-touch) :is(.m-article-card, .m-featured-article, .m-recommended-slider__item > .m-article-card):hover {
  outline: 2px solid var(--personal-hover-ring);
  outline-offset: 2px;
}

html:not(.personal-touch) :is(.m-icon-button, .m-button, .personal-load-more button, .personal-feeds-button,
    .m-toggle-darkmode, .m-article-card__tag, .m-tags li a, .swiper-button-prev, .swiper-button-next):hover {
  outline: 2px solid var(--personal-hover-ring);
  outline-offset: 2px;
}

/* The menu's links take the ring too: the menu bar's (and the phone menu's) links, with rounded corners for it, but
   not the logo, whose iris already closes on hover; and the Recommendations dropdown's items, the ring inside each
   item so the dropdown's edge cannot clip it. */
.m-nav__left > ul > li > a:not(.m-logo) {
  border-radius: 6px;
}

html:not(.personal-touch) .m-nav__left > ul > li > a:not(.m-logo):hover {
  outline: 2px solid var(--personal-hover-ring);
  outline-offset: 2px;
}

html:not(.personal-touch) .m-nav__left .personal-dropdown a:hover {
  outline: 2px solid var(--personal-hover-ring);
  outline-offset: -2px;
  border-radius: 6px;
}

/* The dark mode switch shows what a click does: on hover (a mouse, or an iPad's trackpad) or keyboard focus its icon turns (the
   sun spins, the moon tips; the circle holding it turns, as the icons are inline) and a label slides out below it,
   "Light mode" or "Dark mode", the theme a click switches to, in the search button's colours. The label is under the
   switch, so it never moves the menu bar; on phones, where the switch floats at the bottom, it is to its left.
   Without motion (the system setting) nothing turns or slides. */
.m-toggle-darkmode {
  overflow: visible;
}

.m-toggle-darkmode > div {
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1);
}

.m-toggle-darkmode::after {
  position: absolute;
  top: calc(100% + 8px);
  right: -6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .2s, transform .2s;
}

html[data-theme="dark"] .m-toggle-darkmode::after {
  content: "Light mode";
  background: var(--dashboard-orange, #f5a25d);
  color: #17121f;
}

html[data-theme="light"] .m-toggle-darkmode::after {
  content: "Dark mode";
  background: #4e2a84;
  color: #fff;
}

/* A plain :hover, as the search button's: an iPad with a trackpad reports no hover to (hover: hover), since touch
   is its primary input, but its pointer does hover. */
html:not(.personal-touch) .m-toggle-darkmode:hover::after {
  opacity: 1;
  transform: none;
}

html[data-theme="dark"]:not(.personal-touch) .m-toggle-darkmode:hover > div {
  transform: rotate(90deg) scale(1.15);
}

html[data-theme="light"]:not(.personal-touch) .m-toggle-darkmode:hover > div {
  transform: rotate(-25deg) scale(1.15);
}

.m-toggle-darkmode:has(input:focus-visible)::after {
  opacity: 1;
  transform: none;
}

html[data-theme="dark"] .m-toggle-darkmode:has(input:focus-visible) > div {
  transform: rotate(90deg) scale(1.15);
}

html[data-theme="light"] .m-toggle-darkmode:has(input:focus-visible) > div {
  transform: rotate(-25deg) scale(1.15);
}

@media only screen and (max-width: 32.99rem) {
  .m-toggle-darkmode::after {
    top: 50%;
    right: calc(100% + 8px);
    transform: translate(4px, -50%);
  }

  html:not(.personal-touch) .m-toggle-darkmode:hover::after,
  .m-toggle-darkmode:has(input:focus-visible)::after {
    transform: translateY(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  html .m-toggle-darkmode > div,
  html .m-toggle-darkmode:hover > div {
    transform: none !important;
  }

  .m-toggle-darkmode::after {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 32.99rem) {
  .m-toggle-darkmode::after {
    transform: translateY(-50%) !important;
  }
}

/* Listings load more on request (site.js): the page bar's hidden parts stay hidden (the theme's display rules would
   show them); the Load more posts button, centred under the cards, in the search button's colours. */
.l-wrapper:has(> .js-pagination)[hidden],
.js-pagination [hidden],
.personal-load-more[hidden] {
  display: none !important;
}

.personal-load-more {
  display: flex;
  justify-content: center;
  padding: 8px 0 24px;
}

.personal-load-more button {
  min-height: 44px;
  padding: 10px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--dashboard-orange, #f5a25d);
  color: #17121f;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

html[data-theme="light"] .personal-load-more button {
  background: #4e2a84;
  color: #fff;
}

.personal-load-more button:disabled {
  opacity: .7;
  cursor: progress;
}

.l-grid{padding-bottom:20px}@media only screen and (min-width:33rem){.l-grid{display:flex;flex-wrap:wrap;margin:0 -10px}}@media only screen and (min-width:80rem){.l-grid{margin:0 -20px}}@media only screen and (min-width:33rem){.l-grid.centered{justify-content:center}}.m-pagination{align-items:center;display:flex;justify-content:center;margin:0 auto 40px}.m-pagination__text{color:var(--titles-color);display:inline-block;font-size:.875rem;letter-spacing:.2px;text-align:center}@media only screen and (min-width:33rem){.m-pagination__text{font-size:1rem;letter-spacing:.3px}}