@charset "UTF-8";
:root{
    color-scheme:light;
    --page:#f3f2e9;
    --surface:#fffef7;
    --ink:#171815;
    --muted:#60625a;
    --line:#c7c7bb;
    --lime:#d4f000;
    --pink:#d80068;
    --cyan:#00d7e6;
    --soft:#e7e6db;
    --max:1480px;
    --display:Impact,'Arial Narrow','Franklin Gothic Medium',Arial,sans-serif;
    font-family:Arial,Helvetica,sans-serif;
    font-synthesis:none
}
:root[data-theme="dark"]{
    color-scheme:dark;
    --page:#080909;
    --surface:#111313;
    --ink:#f4f4ee;
    --muted:#a7aaa2;
    --line:#42453e;
    --pink:#ff2285;
    --soft:#1c201a
}
*{
    box-sizing:border-box
}
html{
    scroll-behavior:smooth;
    scroll-padding-top:90px
}
body{
    margin:0;
    background:var(--page);
    color:var(--ink);
    line-height:1.55
}
a{
    color:inherit;
    text-decoration:none
}
button,input{
    font:inherit
}
button{
    cursor:pointer
}
a,button{
    -webkit-tap-highlight-color:transparent
}
a:hover{
    color:var(--pink)
}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
    outline:3px solid var(--cyan);
    outline-offset:4px
}
img{
    display:block;
    max-width:100%;
    height:auto
}
svg{
    width:20px;
    height:20px;
    fill:currentColor;
    flex-shrink:0
}
[hidden]{
    display:none!important
}
h1,h2,h3,p{
    margin:0
}
h1,h2,h3{
    line-height:1.13;
    letter-spacing:-.025em
}
h1{
    font-size:clamp(32px,4vw,54px)
}
h2{
    font-size:30px
}
h3{
    font-size:23px
}
.container{
    width:min(var(--max),calc(100% - 48px));
    margin-inline:auto
}
.eyebrow{
    font:700 10px/1.5 ui-monospace,Consolas,monospace;
    letter-spacing:.14em;
    margin-bottom:10px
}
.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
}
.skip-link{
    position:absolute;
    left:20px;
    top:-100px;
    z-index:100;
    background:var(--lime);
    color:#000;
    padding:12px
}
.skip-link:focus{
    top:10px
}
/* A large, real brand image sits inside torn-paper and ink accents. */
.masthead{
    background:#000;
    color:#fff;
    position:relative;
    overflow:hidden;
    isolation:isolate
}
.masthead:before{
    content: "";
    position: absolute;
    z-index: -1;
    left: -45px;
    top: -38px;
    width: 230px;
    height: 173px;
    transform: rotate(-18deg);
    background: repeating-linear-gradient(163deg, #292929 0 1px, #101010 2px 6px);
    /* border-bottom: 43px solid #d7d7ce; */
    clip-path: polygon(0 0, 100% 0, 96% 18%, 100% 26%, 94% 39%, 99% 50%, 91% 59%, 95% 73%, 79% 71%, 63% 91%, 42% 89%, 25% 100%, 0 85%);
}
.masthead:after{
    content:"";
    position:absolute;
    right:-20px;
    top:0;
    width:240px;
    height:110px;
    z-index:-1;
    background:repeating-linear-gradient(15deg,transparent 0 15px,#ec0064 16px 17px,transparent 18px 29px);
    transform:skewY(-8deg);
    opacity:.8
}
.masthead-inner{
    max-width:var(--max);
    margin:auto;
    position:relative;
    min-height:180px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:5px 80px 0
}
.logo{
    display:block;
    width:min(1180px,100%);
    position:relative
}
.logo img{
    width:100%;
    height:auto;
    max-height:340px;
    object-fit:contain
}
.masthead-stamp{
    position:absolute;
    left:12px;
    top:25px;
    color:#ff197b;
    transform:rotate(-13deg);
    font:24px/.95 var(--display);
    letter-spacing:.02em
}
.masthead-stamp b{
    color:var(--lime);
    font-weight:normal
}
.feral-note{
    position:absolute;
    right:12px;
    top:55px;
    transform:rotate(10deg);
    background:#eeeee4;
    color:#111;
    font:26px/.93 var(--display);
    padding:18px 19px 11px;
    clip-path:polygon(3% 0,98% 3%,95% 19%,100% 24%,97% 43%,100% 54%,96% 75%,100% 98%,74% 95%,54% 100%,32% 95%,0 100%,3% 83%,0 57%,4% 38%,0 21%)
}
.feral-note span{
    display:block;
    color:#e20071;
    font:900 19px Arial;
    letter-spacing:.1em;
    margin-top:7px
}
.nav-shell{
    position:sticky;
    top:0;
    z-index:20;
    background:#030303;
    color:#fff;
    border-bottom:1px solid #58594d
}
.nav-inner{
    max-width:var(--max);
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:62px;
    gap:24px;
    padding-inline:8px
}
.main-nav{
    display:flex;
    flex:1 1 auto;
    min-width:0;
    overflow-x:auto;
    align-items:stretch;
    align-self:stretch;
    gap:32px
}
.main-nav>a{
    display:flex;
    flex-shrink:0;
    white-space:nowrap;
    align-items:center;
    position:relative;
    font:21px var(--display);
    text-transform:uppercase;
    letter-spacing:.025em
}
.main-nav>a[aria-current="page"]:after{
    content:"";
    position:absolute;
    bottom:10px;
    left:-4px;
    right:-4px;
    height:3px;
    background:var(--lime);
    transform:rotate(-3deg);
    clip-path:polygon(5% 0,100% 20%,91% 100%,0 70%)
}
.main-nav>a:hover{
    color:var(--lime)
}
.main-nav .home-link{
    font:italic 900 21px Arial;
    letter-spacing:-2px;
    color:var(--lime)
}
.home-link span{
    color:#eb006a;
    margin-left:24px;
    font:30px Arial
}
.nav-tools{
    display:flex;
    align-items:center;
    gap:22px
}
.socials{
    display:flex;
    align-items:center;
    gap:16px
}
.socials a{
    display:grid;
    place-items:center;
    width:25px;
    height:40px
}
.socials a:hover{
    color:var(--lime)
}
.socials svg{
    width:18px;
    height:18px
}
.theme-toggle{
    border:0;

    padding:0 0 0 20px;
    background:none;
    color:#eee;
    display:flex;
    align-items:center;
    gap:10px;
    min-height:38px;
    font:10px/1.3 ui-monospace,Consolas,monospace;
    text-align:left
}
.theme-toggle svg{
    color:var(--lime);
    width:22px;
    height:22px
}
.theme-moon{
    display:none
}
[data-theme="dark"] .theme-sun{
    display:none
}
[data-theme="dark"] .theme-moon{
    display:inline-flex
}
.magazine-main{
    padding-top:16px
}
.breaking{
    display:flex;
    align-items:stretch;
    background:#f0006c;
    color:#060606;
    margin-bottom:20px;
    min-height:43px;
    margin-left:5px;
    clip-path: polygon(2px 0, 100% 3%, calc(100% - 3px) 32%, 100% 60%, calc(100% - 2px) 100%, 0 94%, 3px 60%, 0 22%);
}
.breaking>strong{
    background:var(--lime);
    padding:6px 18px;
    display:flex;
    align-items:center;
    gap:.25em;
    white-space:nowrap;
    font:24px var(--display);
    transform:skew(-3deg);
    margin-left:-5px
}
.breaking>strong>.stonks-arrow{
    display:block;
    width:1.5em;
    height:1em;
    flex:none;
    fill:currentColor
}
.breaking-items{
    display:flex;
    align-items:center;
    flex:1;
    overflow:hidden;
    scrollbar-width:thin;
    scrollbar-color:#242424 transparent;
    gap:28px;
    padding:7px 25px;
    font:17px var(--display);
    text-transform:uppercase;
    white-space:nowrap
}
.breaking-items a{
    max-width:440px;
    overflow:hidden;
    text-overflow:ellipsis;
    flex-shrink:0
}
.breaking-items a+a:before{
    content:"//";
    margin-right:28px
}
.breaking a:hover{
    color:inherit
}
.breaking-all{
    display:flex;
    align-items:center;
    gap:14px;
    padding:8px 22px;
    background:#080808;
    color:#fff;
    font:17px var(--display)
}
.breaking-all span{
    color:var(--cyan)
}
.hero-section{
    margin-bottom:32px
}
/* The first category assigned to an article controls its card accents. */
.category-gaming{
    --category-accent:var(--cyan)
}
.category-movies{
    --category-accent:#f00070
}
.category-tvshows{
    --category-accent:#ff8c17
}
.category-gaming,.category-movies,.category-tvshows{
    --category-tint:color-mix(in srgb,var(--category-accent) 12%,transparent);
    --category-label-ink:#080808
}
/* Diagonal SVG ribbons leave the image corner visible and keep links clickable. */
.category-corner{
    position:absolute;
    top:-1px;
    left:-1px;
    z-index:3;
    display:block;
    width:clamp(68px,6vw,84px);
    height:auto;
    aspect-ratio:1;
    max-width:32%;
    color:var(--category-accent);
    overflow:visible;
    pointer-events:none;
    filter:drop-shadow(1px 2px 1px #0007)
}
.category-corner-emblem{
    color:#080808
}
.review-card .category-corner,.next-article-card .category-corner{
    width:clamp(62px,5.5vw,78px)
}
.hero-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-template-rows:auto;
    gap:15px;
    min-height:0
}
.hero-card{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    min-width:0;
    background:#050505;
    color:#fff;
    border:1px solid var(--category-accent,#67726c);
    min-height:285px;
    display:flex;
    align-items:flex-end
}
.hero-card:after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 24%,#0006 48%,#000e 100%);
    z-index:-1;
    pointer-events:none
}
.hero-image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:-2;
    transition:transform .4s
}
.hero-card:hover .hero-image{
    transform:scale(1.025)
}
.hero-card.no-image .hero-image{
    object-fit:contain;
    opacity:.7
}
.hero-card-0{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:56% 44%;
    align-items:stretch;
    min-height:460px
}
.hero-card-0:after{
    display:none
}
.hero-visual{
    position:relative;
    min-width:0;
    min-height:460px;
    overflow:hidden;
    isolation:isolate
}
.hero-visual:after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,transparent 74%,#050505 100%);
    pointer-events:none
}
.hero-copy{
    padding:22px 19px 18px;
    width:100%;
    background:linear-gradient(transparent,var(--category-tint,transparent))
}
.hero-card-0 .hero-copy{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    min-width:0;
    padding:44px 45px
}
.story-label{
    display:inline-block;
    color:#060606;
    background:var(--category-accent,var(--lime));
    font: clamp(15px, 1.0vw, 18px) / 1.03 var(--display);
    text-transform:uppercase;
    letter-spacing:.02em;
    padding:5px 14px 4px;
    margin-bottom:12px;
    clip-path:polygon(2px 0,100% 3%,calc(100% - 3px) 32%,100% 60%,calc(100% - 2px) 100%,0 94%,3px 60%,0 22%)
}
.hero-card .story-label{
    position:relative;
    z-index:2;
    max-width:100%;
    padding:7px 12px 6px;
    line-height:1.12;
    overflow-wrap:anywhere;
    pointer-events:none
}
.hero-card .story-label:before{
    content:"";
    position:absolute;
    top:0;
    left:3px;
    right:3px;
    height:3px;
    background:repeating-linear-gradient(125deg,#08080899 0 3px,transparent 3px 9px);
    pointer-events:none
}
.hero-card h2{
    font: clamp(18px, 1.65vw, 27px) / 1.03 var(--display);
    text-transform:uppercase;
    letter-spacing:.005em;
    overflow-wrap:anywhere;
    text-wrap:balance
}
.hero-card-0 h2{
    font-size:clamp(34px,4.2vw,47px);
    line-height:1.01;
    max-width:840px
}
.hero-card h2 a:after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1
}
.hero-card h2 a:hover{
    color:#fff
}
.hero-card:focus-within{
    outline:3px solid var(--lime);
    outline-offset:3px
}
.hero-meta{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    border-top:1px solid #ffffff38;
    margin-top:18px;
    padding-top:12px;
    color:#ccc;
    font:11px/1.4 Arial,sans-serif
}
.hero-meta>span:not(.hero-category){
    border-left:1px solid #666;
    padding-left:14px
}
.hero-meta:empty{
    display:none
}
.hero-labels{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:18px
}
.hero-labels .story-label{
    margin:0
}
.hero-description{
    margin-top:18px;
    max-width:43ch;
    color:#ccc;
    font:14px/1.65 Arial,Helvetica,sans-serif;
    overflow-wrap:anywhere
}
.hero-card-0 .hero-featured-topics{
    width:100%;
    margin:18px 0 0;
    padding:0;
    border:0
}
.hero-card-0 .hero-featured-topics .public-tags{
    flex-basis:auto
}
.hero-readmore{
    position:relative;
    z-index:2;
    display:inline-flex;
    align-items:center;
    gap:12px;
    margin-top:24px;
    font:16px/1.1 var(--display);
    text-transform:uppercase;
    letter-spacing:.02em
}
.hero-readmore span{
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    background:var(--category-accent,var(--lime));
    color:#060606;
    font:700 20px/1 Arial,sans-serif
}
.hero-category{
    background:var(--category-accent,#f00070);
    color:#000;
    padding:3px 8px;
    font:14px var(--display);
    text-transform:uppercase
}
.hero-grid[data-count="1"]{
    grid-template-columns:1fr;
    grid-template-rows:1fr;
    min-height:0
}
.hero-grid[data-count="2"]{
    grid-template-columns:1fr;
    grid-template-rows:auto;
    min-height:0
}
.hero-grid[data-count="3"]{
    grid-template-columns:repeat(2,minmax(0,1fr))
}
.section-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-bottom:19px
}
.tape-heading{
    position:relative;
    display:inline-block;
    font:26px/1.1 var(--display);
    text-transform:uppercase;
    letter-spacing:.02em;
    color:#080808;
    background:var(--lime);
    padding:5px 20px 5px 20px;
    clip-path: polygon(2px 0, 100% 3%, calc(100% - 3px) 32%, 100% 60%, calc(100% - 2px) 100%, 0 94%, 3px 60%, 0 22%);
}
.section-link{
    color:var(--ink);
    font:16px var(--display);
    text-transform:uppercase;
    white-space:nowrap
}
.section-link:hover{
    color:var(--pink)
}
[data-theme="dark"] .section-link{
    color:var(--lime)
}
.section-description{
    font-size:15px;
    color:var(--muted);
    margin-top:14px;
    max-width:800px;
    line-height:1.6
}
.reviews-strip{
    margin:34px 0;
    border-top:1px solid var(--line);
    padding-top:19px
}
.reviews-strip .tape-heading{
    background:#f00070;
    color:#000
}
.review-grid,.stories{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:28px 20px
}
.story,.review-card{
    min-width:0;
    position:relative;

    padding-bottom:18px
}
.story{
    
    padding-bottom:0
}
.story>.story-image{
    border:0;
    border:1px solid var(--category-accent,var(--line))
}
.story>.story-copy{
    padding:14px 16px 18px
}
.story .story-kicker>span{
    background:var(--category-accent,var(--soft));
    color:var(--category-label-ink,var(--ink));
    padding:2px 8px;
    clip-path: polygon(2px 0, 100% 3%, calc(100% - 3px) 32%, 100% 60%, calc(100% - 2px) 100%, 0 94%, 3px 60%, 0 22%);
}
.story-image{
    position:relative;
    display:block;
    aspect-ratio:16/10;
    overflow:hidden; 
    background:#000;
    border:1px solid var(--line)
}
.story-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .25s
}
.story-image:hover img{
    transform:scale(1.04)
}
.story-image.no-image img{
    object-fit:contain
}
.story-copy{
    padding-top:13px
}
.story-kicker{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:10px;
    text-transform:uppercase;
    font:700 10px/1.5 ui-monospace,Consolas,monospace
}
.story-kicker>a,.story-kicker>span{
    color:var(--pink)
}
.story-kicker time{
    color:var(--muted);
    font-weight:400
}
.story h3,.review-card h3{
    font:24px/1.15 var(--display);
    letter-spacing:.005em;
    text-transform:uppercase;
    overflow-wrap:anywhere
}
.story-description{
    font-size:15px;
    line-height:1.45;
    color:var(--muted);
    margin-top:11px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden
}
.story-meta{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    font:10px/1.4 Arial;
    margin-top:16px;
    color:var(--muted)
}
.story-meta>span:first-child{
    color:var(--ink)
}
.story-meta>a{
    margin-left:auto;
    color:var(--pink);
    font-size:23px;
    display: none;
}
.review-card .story-image{
    aspect-ratio:2/1
}
.review-card h3{
    font-size:21px
}
.review-card .story-kicker{
    font-size:9px
}
.feed-heading{
    margin-top:34px
}
.empty-state{
    grid-column:1 / -1;
    padding:50px 0 70px
}
.empty-state h2{
    font-size:32px
}
.empty-state p{
    margin:18px 0;
    color:var(--muted)
}
.empty-state>a{
    color:var(--pink);
    font-weight:bold
}
.featured-video{
    background:#030303;
    color:#fff;
    border:1px solid #3b403a;
    margin:34px 0;
    padding:28px 32px
}
.featured-video .section-heading{
    margin-bottom:20px
}
.featured-video .eyebrow{
    color:#aaa;
    font-size:9px
}
.featured-video h2{
    font:32px var(--display);
    text-transform:uppercase
}
.featured-video h2>span{
    color:#f00070
}
.video-label{
    font:700 11px ui-monospace,Consolas,monospace;
    letter-spacing:.1em;
    color:var(--lime)
}
.video-frame{
    width:100%;
    max-width:1120px;
    max-height:630px;
    aspect-ratio:16/9;
    background:#000;
    margin:auto;
    overflow:hidden
}
.video-frame iframe,.video-frame video{
    display:block;
    width:100%;
    height:100%;
    max-height:630px;
    border:0;
    object-fit:contain
}
.video-caption{
    display:flex;
    align-items:start;
    justify-content:space-between;
    gap:20px;
    margin-top:18px
}
.video-caption h3{
    font:24px var(--display);
    letter-spacing:0
}
.video-caption h3 span{
    color:var(--lime)
}
.video-caption>span{
    color:#aaa;
    font-size:11px
}
.feed-end{
    text-align:center;
    margin:38px 0 48px;
    border-top:1px solid var(--line);
    padding-top:26px
}
.feed-end p{
    font:11px/1.6 ui-monospace,Consolas,monospace;
    color:var(--muted);
    margin-bottom:20px
}
.load-more{
    display:inline-flex;
    gap:60px;
    align-items:center;
    padding:14px 24px;
    background:var(--lime);
    color:#080808;
    font:18px var(--display);
    text-transform:uppercase;
    border:1px solid #7b8900
}
.load-more:hover{
    background:#f00070;
    color:#000
}
.load-more[aria-disabled="true"]{
    opacity:.55;
    pointer-events:none
}
.site-footer{
    background:#030303;
    color:#ddd;
    padding:26px max(24px,calc((100% - var(--max))/2));
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    border-top:1px solid #3e4435
}
.site-footer>div:first-child{
    display:flex;
    align-items:center;
    gap:25px
}
.footer-brand{
    font:italic 900 12px Arial
}
.footer-brand strong{
    color:var(--lime)
}
.site-footer>div>span{
    color:#999;
    font-size:11px
}
.footer-actions{
    display:flex;
    align-items:center;
    gap:25px
}
.footer-actions>a{
    display:flex;
    align-items:center;
    gap:7px;
    font:12px ui-monospace,Consolas,monospace
}
.footer-actions svg{
    width:14px;
    height:14px
}
.footer-actions .up{
    background:#f00070;
    color:#000;
    font-weight:900;
    padding:13px 16px;
    transform:rotate(-3deg)
}
.article-page{
    max-width:980px;
  
    padding-bottom:60px
}
.back-link{
    font:11px ui-monospace,Consolas,monospace;
    color:var(--muted)
}
.article-header{
    max-width:850px;
    margin:40px auto 30px
}
.article-tags{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:18px
}
.article-tags a{
    font:700 10px ui-monospace,Consolas,monospace;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--pink)
}
.article-header h1{
    font-size:clamp(34px,4.8vw,58px);
    line-height:1.05;
    letter-spacing:-.045em;
    text-wrap:balance
}
.article-lead{
    font-size:20px;
    color:var(--muted);
    line-height:1.65;
    margin-top:24px;
    white-space:pre-line
}
.article-byline{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:20px 0;
    margin-top:26px;
    font-size:11px;
    color:var(--muted)
}
.article-byline strong{
    color:var(--ink)
}
.author-monogram{
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    background:var(--lime);
    color:#000;
    font-size:16px;
    font-weight:800
}
.article-body{
    max-width:780px;
    margin:auto;
    font-size:18px;
    line-height:1.85;
    overflow-wrap:anywhere
}
.article-body p,.article-body ul,.article-body ol,.article-body blockquote,.article-body pre{
    margin:0 0 24px
}
.article-body h1,.article-body h2,.article-body h3,.article-body h4{
    margin:36px 0 20px
}
.article-body h1{
    font-size:36px
}
.article-body h2{
    font-size:31px
}
.article-body h3{
    font-size:25px
}
.article-body a{
    color:var(--pink);
    text-decoration:underline;
    text-underline-offset:4px
}
.article-body img{
    width:auto;
    max-width:100%;
    height:auto;
    margin:28px auto
}
.article-body iframe,.article-body video{
    width:100%;
    aspect-ratio:16/9;
    min-height:200px;
    max-height:630px;
    border:0;
    background:#000;
    margin:28px auto;
    display:block
}
.article-body blockquote{
    border-left:4px solid var(--lime);
    padding:12px 0 12px 25px;
    font-size:24px;
    font-weight:700;
    line-height:1.5
}
.article-body pre{
    overflow:auto;
    padding:20px;
    background:var(--soft);
    font-size:14px
}
.article-body .ql-align-center{
    text-align:center
}
.article-body .ql-align-right{
    text-align:right
}
.article-body .ql-align-justify{
    text-align:justify
}
.article-body [class*="ql-indent-"]{
    padding-left:2em
}
.article-topics{
    max-width:780px;
    margin:50px auto 0;
    border-top:1px solid var(--line);
    padding-top:28px
}
.article-topics h2{
    font-size:24px;
    margin-bottom:18px
}
.article-topics>a{
    display:block;
    padding:15px 0;
    border-bottom:1px solid var(--line);
    font-size:13px
}
.article-topics strong{
    color:var(--pink)
}
.article-topics span{
    display:block;
    color:var(--muted);
    margin-top:4px
}
.error-page{
    padding:100px 0;
    min-height:60vh
}
.error-page p:not(.eyebrow){
    margin:24px 0
}
.error-page .load-more{
    margin-top:12px
}

.article-page{
    max-width:1100px
}
.article-header{
    max-width:980px
}
.article-header h1{
    font:clamp(38px,5.4vw,72px)/1.06 var(--display);
    text-transform:uppercase;
    letter-spacing:.005em
}
.article-cover{
    margin:0 auto 36px;
    border:1px solid var(--line);
    background:#000;
    max-width:1100px
}
.article-cover img{
    width:100%;
    aspect-ratio:1.91;
    object-fit:cover
}
.article-body{
    max-width:780px
}
.article-body h2,.article-body h3{
    font-family:var(--display);
    font-weight:400;
    letter-spacing:.015em
}
.article-tags a{
    padding:6px 9px;
    background:var(--soft)
}
@media(max-width:1528px){
    .nav-inner{
        margin-inline:24px
    }
    .masthead-inner{
        margin-inline:20px
    }
}
@media(max-width:1100px){
    .masthead-inner{
        padding:15px 55px 0
    }
    .masthead-stamp{
        font-size:19px;
        top:35px
    }
    .feral-note{
        font-size:20px;
        top:30px;
        padding:14px
    }
    .nav-tools{
        gap:14px
    }
    .socials{
        gap:11px
    }
    .main-nav{
        gap:25px
    }
    .theme-toggle #theme-label{
        position:absolute;
        width:1px;
        height:1px;
        overflow:hidden;
        clip-path:inset(50%)
    }
    .hero-grid{
        gap:12px
    }
    .hero-card-0{
        grid-template-columns:50% 50%
    }
    .hero-card-0 .hero-copy{
        padding:32px
    }
    .hero-copy{
        padding:17px 13px
    }
    .hero-card h2{
        font-size:23px
    }
    .hero-card-0 h2{
        font-size:42px
    }
    .hero-meta{
        gap:9px;
        font-size:10px
    }
    .hero-meta>span:not(.hero-category){
        padding-left:9px
    }
    .review-grid,.stories{
        gap:24px 17px
    }
    .story h3{
        font-size:22px
    }
    .review-card h3{
        font-size:19px
    }
    .story-description{
        font-size:12px
    }
}
@media(max-width:850px){
    .container{
        width:calc(100% - 32px)
    }
    .nav-inner{
        margin-inline:16px
    }
    .masthead-inner{
        padding:8px 30px 0;
        min-height:140px
    }
    .masthead-stamp{
        font-size:15px;
        left:0;
        top:35px
    }
    .feral-note{
        font-size:15px;
        right:0;
        top:30px;
        padding:10px
    }
    .feral-note span{
        font-size:13px
    }
    .nav-inner{
        gap:16px
    }
    .main-nav{
        gap:20px
    }
    .main-nav>a{
        font-size:18px
    }
    .home-link span{
        margin-left:12px
    }
    .nav-tools{
        gap:10px
    }
    .socials{
        gap:8px
    }
    .socials a{
        width:20px
    }
    .socials svg{
        width:16px;
        height:16px
    }
    .theme-toggle{
        padding-left:12px
    }
    .hero-card:not(.hero-card-0){
        min-height:265px
    }
    .hero-card-0 h2{
        font-size:50px;
        max-width:650px
    }
    .hero-card-0 .hero-copy{
        padding:28px
    }
    .stories{
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .review-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .story h3{
        font-size:27px
    }
    .review-card h3{
        font-size:23px
    }
    .breaking>strong{
        font-size:20px;
        padding-inline:12px
    }
    .breaking-items{
        font-size:15px;
        padding-inline:18px
    }
    .breaking-all{
        font-size:15px;
        padding-inline:16px
    }
    .site-footer>div:first-child{
        display:block
    }
    .site-footer>div>span{
        display:block;
        margin-top:8px
    }
}
@media(max-width:580px){
    .container{
        width:calc(100% - 24px)
    }
    .masthead-inner{
        padding:10px 0 0;
        margin-inline:0;
        min-height:110px
    }
    .logo{
        width:100%
    }
    .masthead-stamp,.feral-note{
        display:none
    }
    .masthead:before{
        width:90px;
        height:75px;
        left:-40px
    }
    .masthead:after{
        width:100px;
        height:60px;
        opacity:.3
    }
    .nav-inner{
        margin-inline:12px;
        flex-wrap:wrap;
        gap:0
    }
    .main-nav{
        min-height:46px;
        width:100%;
        justify-content:space-between;
        gap:15px
    }
    .main-nav>a{
        font-size:19px
    }
    .main-nav>a[aria-current="page"]:after{
        bottom:5px
    }
    .nav-tools{
        width:100%;
        justify-content:space-between;
        border-top:1px solid #292929;
        min-height:43px
    }
    .socials{
        gap:13px
    }
    .socials a{
        width:18px;
        height:36px
    }
    .socials svg{
        width:16px;
        height:16px
    }
    .theme-toggle{
        padding-left:0;
        border-left:0;
        gap:7px
    }
    .theme-toggle svg{
        width:18px;
        height:18px
    }
    .theme-toggle #theme-label{
        position:static;
        width:auto;
        height:auto;
        clip-path:none;
        max-width:76px;
        font-size:8px
    }
    .magazine-main{
        padding-top:12px
    }
    .breaking{
        min-height:38px;
        margin-bottom:14px
    }
    .breaking>strong{
        font-size:16px;
        padding:6px 8px;
        gap:5px
    }
    .breaking-items{
        font-size:14px;
        padding:8px 12px;
        gap:14px
    }
    .breaking-items a{
        max-width:280px
    }
    .breaking-items a+a:before{
        margin-right:14px
    }
    .breaking-all{
        font-size:13px;
        padding:6px 9px;
        gap:4px
    }
    .hero-grid{
        gap:12px
    }
    .hero-card-0 .hero-copy{
        padding:22px 18px 18px
    }
    .hero-card-0 h2{
        font-size:38px
    }
    .hero-card h2{
        font-size:23px
    }
    .hero-card-0 h2{
        font-size:38px
    }
    .hero-copy{
        padding:17px 12px
    }
    .story-label{
        font-size:14px;
        margin-bottom:9px;
        padding:4px 7px
    }
    .hero-meta{
        margin-top:14px;
        padding-top:10px;
        gap:9px;
        font-size:9px
    }
    .hero-category{
        font-size:12px
    }
    .hero-card-0 .hero-meta{
        font-size:10px
    }
    .hero-card-2 .hero-meta,.hero-card-3 .hero-meta{
        gap:7px
    }
    .section-heading{
        gap:10px;
        margin-bottom:15px
    }
    .tape-heading{
        font-size:22px;
        padding-inline:9px
    }
    .section-link{
        font-size:13px;
        white-space:normal;
        text-align:right
    }
    .feed-heading{
        margin-top:27px
    }
    .reviews-strip{
        margin-block:27px
    }
    .review-grid{
        gap:20px 13px
    }
    .review-card h3{
        font-size:20px
    }
    .review-card .story-kicker time{
        display:none
    }
    .story-kicker{
        font-size:9px;
        gap:7px
    }
    .stories{
        grid-template-columns:1fr;
        gap:24px
    }
    .story .story-image{
        aspect-ratio:16/9
    }
    .story h3{
        font-size:29px
    }
    .story-description{
        font-size:13px
    }
    .story-meta{
        font-size:11px
    }
    .featured-video{
        margin:27px -12px;
        padding:21px 12px
    }
    .featured-video h2{
        font-size:27px
    }
    .video-caption{
        display:block
    }
    .video-caption h3{
        font-size:22px
    }
    .video-caption>span{
        display:block;
        margin-top:9px
    }
    .feed-end{
        margin:26px 0 34px
    }
    .site-footer{
        padding:23px 12px;
        gap:12px
    }
    .footer-brand{
        font-size:10px
    }
    .site-footer>div>span{
        font-size:9px
    }
    .footer-actions{
        gap:14px
    }
    .footer-actions .up{
        padding:11px
    }
    .footer-actions>a{
        font-size:11px
    }
    .article-page{
        padding-top:25px
    }
    .article-header{
        margin-top:27px
    }
    .article-header h1{
        font-size:42px
    }
    .article-lead{
        font-size:17px
    }
    .article-byline{
        font-size:10px;
        gap:12px
    }
    .article-body{
        font-size:16px;
        line-height:1.8
    }
    .article-body h2{
        font-size:28px
    }
    .article-body blockquote{
        font-size:21px
    }
    .article-body iframe,.article-body video{
        min-height:0
    }
    .article-cover{
        margin-inline:-12px
    }
    .error-page{
        padding-block:60px
    }
}
@media(min-width:851px){
    .logo img{
        max-height:320px
    }
    .hero-card:not(.hero-card-0) h2{
        display:-webkit-box;
        -webkit-line-clamp:4;
        -webkit-box-orient:vertical;
        overflow:hidden
    }
}
@media(max-width:700px){
    .breaking>strong{
        display:none
    }
    .hero-grid,.hero-grid[data-count]{
        grid-template-columns:1fr
    }
    .hero-card-0{
        display:flex;
        flex-direction:column;
        min-height:0
    }
    .hero-visual{
        width:100%;
        height:280px;
        min-height:0;
        flex:none
    }
    .hero-visual:after{
        background:linear-gradient(0deg,#050505,transparent 43%)
    }
    .hero-card-0 .hero-copy{
        padding:0 22px 26px
    }
    .hero-card:not(.hero-card-0){
        min-height:250px
    }
}
@media(prefers-reduced-motion:reduce){
    html{
        scroll-behavior:auto
    }
    *,*:before,*:after{
        transition:none!important;
        animation:none!important
    }
}

/* Three public tags, then an accessible disclosure (also works without JS). */
.public-tags{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
    font:700 10px/1.5 ui-monospace,Consolas,monospace;
    text-transform:uppercase;
    letter-spacing:.02em;
    margin-top:12px
}
.public-tags a,.more-tags summary{
    display:inline-flex;
    padding:4px 8px;
    border:1px solid var(--line);
    background:var(--soft);
    color:var(--ink);
    max-width:100%;
    overflow-wrap:anywhere
}
.public-tags a:hover{
    border-color:var(--pink);
    color:var(--pink)
}
.more-tags,.extra-tags{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}
.more-tags:not([open]) .extra-tags{
    display:none
}
.more-tags summary,
.public-tags a{
    color: #fff;
    background: #08273c;
    /*max-width: 120px;*/
    white-space: nowrap;
    /* overflow: hidden; */
    clip-path: polygon(2px 0,100% 3%,calc(100% - 3px) 32%,100% 60%,calc(100% - 2px) 100%,0 94%,3px 60%,0 22%);
    padding: 3px 9px 1px;
    border: none;
    cursor: pointer;
}
.more-tags summary::-webkit-details-marker{
    display:none
}
.more-tags summary:focus-visible{
    outline:2px solid var(--pink);
    outline-offset:3px
}
.more-tags[open] summary{
    display: none;
}

.article-header>.public-tags{
    margin:0 0 20px
}
.hero-meta .public-tags{
    position: relative;
    z-index: 2;
    flex-basis: 100%;
    margin-top: 0;
    max-height: 25px;
    overflow: hidden;
}


.hero-meta .public-tags a:hover{
    color:var(--lime);
    border-color:var(--lime)
}
.hero-card:has(.more-tags[open]) .hero-copy{
    max-height:100%;
    overflow:auto
}
/* 3 full thumbnails + a quarter of the next one; 2.25 / 1.25 on smaller screens. */
.article-gallery{
    margin:48px auto 0;
    max-width:1100px;
    border-top:1px solid var(--line);
    padding-top:24px
}
.gallery-hint{
    font-size:12px;
    color:var(--muted);
    margin-top:8px
}
.gallery-track{
    display:flex;
    gap:12px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    padding:4px 0 8px
}
.gallery-track::-webkit-scrollbar{
    display:none
}
.gallery-thumb{
    position:relative;
    display:block;
    flex:0 0 calc((100% - 36px)/3.25);
    aspect-ratio:4/3;
    background:#080808;
    border:1px solid var(--line);
    scroll-snap-align:start;
    overflow:hidden
}
.gallery-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .2s
}
.gallery-thumb:hover img{
    transform:scale(1.025)
}
.gallery-thumb:focus-visible{
    outline-offset:-3px
}
.gallery-thumb-number{
    position:absolute;
    left:8px;
    bottom:8px;
    min-width:24px;
    padding:2px 5px;
    background:#000b;
    color:#fff;
    font:11px/1.5 ui-monospace,Consolas,monospace;
    text-align:center
}
.gallery-track-controls{
    display:flex;
    gap:8px
}
.gallery-track-controls button{
    width:38px;
    height:38px;
    border:1px solid var(--line);
    background:var(--surface);
    color:var(--ink);
    font-size:23px
}
.gallery-track-controls button:disabled{
    opacity:.3;
    cursor:default
}
.gallery-track-controls button:not(:disabled):hover{
    background:var(--lime);
    color:#000
}
html.gallery-open{
    overflow:hidden
}
.gallery-lightbox{
    position:fixed;
    inset:0;
    margin:0;
    padding:0;
    width:100vw;
    height:100vh;
    height:100dvh;
    max-width:none;
    max-height:none;
    border:0;
    background:#050505;
    color:#f5f5ef;
    overscroll-behavior:contain
}
.gallery-lightbox[open]{
    display:flex;
    flex-direction:column
}
.gallery-lightbox::backdrop{
    background:#000
}
.lightbox-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-shrink:0;
    padding:16px 24px;
    border-bottom:1px solid #262626
}
.lightbox-bar p{
    font:14px ui-monospace,Consolas,monospace
}
.lightbox-bar button{
    display:flex;
    align-items:center;
    gap:10px;
    background:none;
    color:#fff;
    border:1px solid #555;
    font-size:26px;
    line-height:1;
    padding:8px 13px
}
.lightbox-bar button span{
    font-size:13px
}
.lightbox-stage{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    min-height:0;
    flex:1;
    padding:20px 24px
}
.lightbox-stage figure{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin:0;
    min-width:0;
    min-height:0;
    flex:1;
    height:100%
}
.lightbox-stage img{
    display:block;
    max-width:100%;
    max-height:calc(100% - 65px);
    width:auto;
    height:auto;
    object-fit:contain;
    min-height:0;
    flex-shrink:1
}
.lightbox-stage figcaption{
    font-size:14px;
    line-height:1.5;
    color:#ccc;
    text-align:center;
    max-height:55px;
    overflow:auto;
    flex-shrink:0;
    white-space:pre-line;
    overflow-wrap:anywhere
}
.lightbox-stage>button{
    border:1px solid #555;
    background:#171717;
    color:var(--lime);
    border-radius:50%;
    width:48px;
    height:48px;
    font-size:23px;
    flex-shrink:0
}
.lightbox-stage>button:hover,.lightbox-bar button:hover{
    background:var(--lime);
    color:#050505
}
.lightbox-help{
    text-align:center;
    font:11px/1.5 ui-monospace,Consolas,monospace;
    color:#92958d;
    padding:10px 16px 15px;
    flex-shrink:0
}
#lightbox-error{
    color:#ff8cba;
    font-size:14px;
    text-align:center
}
@media(max-width:850px){
    .gallery-thumb{
        flex-basis:calc((100% - 24px)/2.25)
    }
}
@media(max-width:580px){
    .gallery-thumb{
        flex-basis:calc((100% - 12px)/1.25)
    }
    .article-gallery{
        margin-top:32px
    }
    .lightbox-bar{
        padding:12px
    }
    .lightbox-stage{
        padding:12px 6px;
        gap:5px
    }
    .lightbox-stage>button{
        width:34px;
        height:42px;
        border-radius:6px;
        font-size:18px
    }
    .lightbox-stage figcaption{
        font-size:12px
    }
    .lightbox-help{
        font-size:9px
    }
    .public-tags{
        font-size:9px
    }
}

/* Continue reading after the article and gallery. */
.next-article{
    max-width:1100px;
    margin:48px auto 0;
    border-top:1px solid var(--line);
    padding-top:24px
}
.next-articles-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px
}
.next-article-card{
    display:flex;
    flex-direction:column;
    gap:16px;
    min-width:0;
    background:var(--surface);
    border:1px solid var(--line);
    padding:18px;
    color:var(--ink);
    text-decoration:none
}
.next-article-image{
    display:block;
    position:relative;
    overflow:hidden
}
.next-article-image>img{
    width:100%;
    height:auto;
    aspect-ratio:16/9;
    object-fit:cover;
    background:#080808
}
.next-article-copy{
    min-width:0;
    display:flex;
    flex-direction:column;
    flex:1
}
.next-article-copy h3{
    font:clamp(24px,2.2vw,28px)/1.12 var(--display);
    margin:12px 0;
    overflow-wrap:anywhere
}
.next-article-copy p{
    color:var(--muted);
    line-height:1.65;
    font-size:14px;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden
}
.next-article-link{
    display:inline-block;
    margin-top:auto;
    padding-top:16px;
    font-weight:700
}
.next-article-card:hover .next-article-link{
    color:var(--pink)
}
@media(max-width:850px){
    .next-articles-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}
@media(max-width:580px){
    .next-article{
        margin-top:32px
    }
    .next-articles-grid{
        grid-template-columns:1fr;
    }
    .next-article-card{
        gap:16px;
        padding:14px
    }
    .next-article-copy h3{
        font-size:27px
    }
}

/* Short newsfeed updates: a continuous ticker, with a static accessible fallback. */
.breaking .breaking-items {
    display:block;
    min-width:0;
    overflow-x:auto;
    padding:0;
    text-transform:none;
    cursor:grab;
    touch-action:pan-y pinch-zoom;
    user-select:none;
    -webkit-user-select:none;
}
.breaking-track {
    display:flex;
    width:max-content;
    align-items:stretch;
}
.breaking-group {
    display:flex;
    flex:none;
    align-items:center;
    box-sizing:border-box;
}
.breaking-item {
    flex:none;
    padding:9px 24px;
    white-space:nowrap;
}
.breaking-item::after {
    content:'//';
    margin-left:40px;
    opacity:.65;
}
.breaking .breaking-items a {
    display:inline;
    max-width:none;
    overflow:visible;
    text-overflow:clip;
    text-decoration:underline;
    text-underline-offset:3px;
}
.breaking .breaking-items a+a::before {
    content:none;
}
.breaking-text {
    line-height:1.5;
}
/* Non-interactive stock quotes, rendered with company names and directional colours. */
.breaking.has-stocks {
    --stock-up:#30d78b;
    --stock-down:#ff6478;
    --stock-flat:#97a3ad;
    --stock-divider:#343a40;
    background:#101417;
    color:#f3f6f8;
}
.breaking.has-stocks>strong {
    color:#060606;
}
.breaking.has-stocks .breaking-item::after {
    content:'';
    display:inline-block;
    width:1px;
    height:16px;
    margin-left:24px;
    vertical-align:middle;
    background:var(--stock-divider);
    opacity:1;
}
.breaking .breaking-item.is-stock {
    padding:9px 0 9px 24px;
}
.breaking .breaking-items .stock-quote {
    display:inline-flex;
    align-items:center;
    gap:9px;
    color:inherit;
    font:600 14px/1.5 Arial,Helvetica,sans-serif;
    text-decoration:none;
    vertical-align:middle;
    cursor:inherit;
}
.stock-quote .stock-name {
    font-weight:800;
    letter-spacing:.035em;
}
.stock-quote .stock-price {
    font-variant-numeric:tabular-nums lining-nums;
    letter-spacing:.015em;
}
.stock-quote .stock-currency {
    color:var(--stock-flat);
    font-size:10px;
    letter-spacing:.04em;
}
.stock-quote .stock-direction {
    color:var(--stock-flat);
    font:700 14px/1 Arial,sans-serif;
    min-width:14px;
    text-align:center;
}
.stock-quote--up .stock-direction { color:var(--stock-up); }
.stock-quote--down .stock-direction { color:var(--stock-down); }
:root:not([data-theme="dark"]) .breaking.has-stocks {
    --stock-up:#087a45;
    --stock-down:#c72942;
    --stock-flat:#626d77;
    --stock-divider:#d1d5d1;
    background:var(--surface);
    color:var(--ink);
}
@media(max-width:600px) {
    .breaking .breaking-item.is-stock { padding:8px 0 8px 14px; }
    .breaking .breaking-items .stock-quote { font-size:13px;gap:7px; }
    .breaking.has-stocks .breaking-item::after { margin-left:14px; }
}
.breaking-toggle {
    flex:none;
    align-self:stretch;
    width:48px;
    border:0;
    background:#080808;
    color:var(--lime);
    cursor:pointer;
    font:700 18px/1 sans-serif;
    font-family: sans-serif;
    display: none;
}
.breaking-toggle:focus-visible,.breaking-items:focus-visible {
    outline:2px solid var(--cyan);
    outline-offset:-3px;
}
.breaking.is-moving .breaking-items {
    overflow:hidden;
}
.breaking.is-moving .breaking-track {
    animation:newsfeed-scroll var(--ticker-duration) linear infinite;
    will-change:transform;
}
.breaking.is-paused .breaking-track,.breaking.is-dragging .breaking-track {
    animation-play-state:paused;
}
.breaking.is-dragging .breaking-items,.breaking.is-dragging .breaking-items a {
    cursor:grabbing;
}
.breaking.is-browsing .breaking-items {
    overflow-x:auto;
}
.breaking.is-browsing .breaking-track {
    animation:none;
    transform:none;
}
.breaking.is-browsing .breaking-copy {
    display:none;
}
@keyframes newsfeed-scroll {
    from {
        transform:translateX(0);
    }
    to {
        transform:translateX(var(--ticker-distance));
    }
}
@media(max-width:600px) {
    .breaking-item {
        padding:8px 14px;
    }
    .breaking-item::after {
        margin-left:24px;
    }
    .breaking-toggle {
        width:38px;
    }
}
@media(prefers-reduced-motion:reduce) {
    .breaking.is-moving .breaking-track {
        animation:none;
    }
    .breaking-copy {
        display:none;
    }
    .breaking.is-moving .breaking-items {
        overflow-x:auto;
    }
    .breaking-toggle {
        display:none;
    }
}