:root{--bg:#080a0b;--panel:#0b0e10;--panel2:#111416;--ink:#f1f0ed;--muted:#b8bdc1;--line:#353a3d;--yellow:#ffeb00;--max:1440px}*{box-sizing:border-box}html{background:#050606;scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse at 50% 0,#141719 0,#080a0b 58%);color:var(--ink);font-family:Barlow,Arial,sans-serif;font-size:15px;line-height:1.4}.site-shell{max-width:1600px;margin:auto;min-height:100vh;background:var(--bg);border-left:1px solid #24282a;border-right:1px solid #24282a;overflow:hidden}a{color:inherit;text-decoration:none}img{display:block;max-width:100%;height:auto}.site-header{height:101px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 clamp(22px,6.2vw,96px);gap:26px;position:relative;z-index:5;background:#080a0bf2}.brand{position:relative;display:flex;align-items:center;gap:7px;font-family:'Barlow Condensed',sans-serif;font-size:28px;font-weight:900;line-height:.77;letter-spacing:-1.4px;min-width:168px}.brand sup{font:9px Barlow;align-self:flex-start;margin-left:-4px}.brand-crown{color:var(--yellow);font-size:29px;line-height:1;transform:rotate(-10deg)}.brand-tagline{border-left:1px solid #4b4f50;padding-left:28px;color:#d6d7d5;text-transform:uppercase;font-size:9px;line-height:1.6;letter-spacing:1.8px;min-width:240px}.desktop-nav{display:flex;align-items:center;justify-content:space-between;gap:clamp(12px,2.6vw,38px);margin-left:auto;height:100%;text-transform:uppercase;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:13px;letter-spacing:.7px}.desktop-nav a{height:100%;display:flex;align-items:center;position:relative;white-space:nowrap}.desktop-nav a.active:after,.desktop-nav a:hover:after{content:"";height:3px;position:absolute;bottom:25px;left:0;right:0;background:var(--yellow)}.header-tape{position:absolute;right:4.5%;top:10px;background:var(--yellow);color:#090a0a;padding:6px 24px;font-family:'Barlow Condensed';font-weight:900;text-transform:uppercase;font-size:12px;transform:rotate(-4deg);clip-path:polygon(2% 0,100% 0,98% 100%,0 88%);letter-spacing:.5px}.icon-button{border:0;background:transparent;color:white;width:26px;height:30px;padding:3px;cursor:pointer;flex-shrink:0}.icon-button svg{width:100%;fill:none;stroke:currentColor;stroke-width:1.5}.menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:6px}.menu-toggle span{display:block;height:1px;width:22px;background:#eee}.search-panel{display:none;position:absolute;right:5%;top:82px;padding:10px;background:#111;border:1px solid var(--line)}.search-panel.open{display:flex}.search-panel input{background:#080a0b;color:white;border:1px solid #555;padding:10px}.search-panel button{background:var(--yellow);border:0;font-weight:900;padding:0 14px}.hero-grid{display:grid;grid-template-columns:minmax(0,2.08fr) minmax(330px,.92fr);min-height:426px;border-bottom:1px solid var(--line)}.hero-feature{position:relative;isolation:isolate;min-height:426px;overflow:hidden;padding:22px clamp(25px,6.3vw,96px);display:flex;flex-direction:column;justify-content:center;background:#090b0c}.hero-feature:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#07090af7 0%,#07090ae8 30%,#07090a58 62%,#07090a08 100%),linear-gradient(0deg,#07090a60,transparent 40%)}.hero-art{position:absolute;z-index:-2;right:-2%;top:0;width:72%;height:100%;object-fit:cover;object-position:center 39%;filter:contrast(1.1) grayscale(.2)}.hero-copy{max-width:420px;position:relative;z-index:1}.eyebrow{display:block;color:var(--yellow);font-family:'Barlow Condensed';font-weight:800;font-size:13px;letter-spacing:1px;text-transform:uppercase;margin-bottom:7px}.hero-copy h1{font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(44px,4.3vw,66px);font-weight:900;line-height:.83;letter-spacing:-1.7px;text-transform:uppercase;max-width:460px;margin:0 0 14px;text-wrap:balance}.hero-copy p{font-size:14px;line-height:1.35;max-width:360px;margin:0 0 18px;color:#e0e1df}.button-yellow{display:inline-flex;align-items:center;gap:14px;background:var(--yellow);color:#080a0b;padding:10px 16px;font-family:'Barlow Condensed';font-size:14px;font-weight:900;letter-spacing:.6px;text-transform:uppercase;transition:transform .2s}.button-yellow:hover{transform:translateY(-2px)}.button-yellow span{font-size:20px;line-height:12px}.hero-sticker{position:absolute;right:5%;top:18%;background:var(--yellow);color:#080a0b;padding:12px 9px;font-family:'Permanent Marker',cursive;font-size:15px;line-height:1.3;transform:rotate(9deg);clip-path:polygon(8% 0,100% 5%,92% 100%,0 92%)}.side-stories{padding:0 0 0 0;display:flex;flex-direction:column;background:#090b0c}.side-story{display:grid;grid-template-columns:minmax(100px,38%) 1fr;gap:18px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);margin:0 0 0 0;min-height:141px}.side-story:last-child{border-bottom:0}.side-story img{width:100%;height:120px;object-fit:cover;filter:grayscale(.25) contrast(1.1);border:1px solid #34393c}.side-story-copy{padding-right:clamp(12px,3vw,42px)}.side-story-copy .eyebrow{font-size:11px;margin-bottom:3px}.side-story-copy strong{font-family:'Barlow Condensed';font-size:21px;line-height:.98;display:block;font-weight:700}.side-story-copy small{display:block;color:#c6c9ca;font-size:12px;line-height:1.25;margin-top:7px}.side-story-copy i{font-style:normal;color:var(--yellow);display:block;font-size:20px;line-height:1;margin-top:7px}.latest{padding:0 clamp(25px,6.2vw,96px) 18px;background:#090b0c}.section-heading{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:9px 0 8px;margin-bottom:14px}.section-heading h2,.section-heading h1{font-family:'Barlow Condensed';font-size:32px;font-weight:800;line-height:1;text-transform:uppercase;margin:0;letter-spacing:-.4px}.section-heading>a{font-family:'Barlow Condensed';font-size:12px;text-transform:uppercase;letter-spacing:.6px;font-weight:800;color:var(--yellow)}.section-heading>a span{font-size:19px;margin-left:5px}.article-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.article-card{border:1px solid #343a3d;background:#080a0b;min-width:0;transition:border-color .2s,transform .2s}.article-card:hover{border-color:var(--yellow);transform:translateY(-3px)}.article-card>a{display:block;height:100%}.card-image{height:clamp(130px,11vw,165px);position:relative;overflow:hidden;background:#17191a}.card-image img{width:100%;height:100%;object-fit:cover;filter:grayscale(.45) contrast(1.1);transition:transform .4s}.article-card:hover .card-image img{transform:scale(1.04)}.category-tag{display:inline-block;background:var(--yellow);color:#090a0a;padding:3px 8px;font-family:'Barlow Condensed';font-weight:900;font-size:12px;line-height:1.1;text-transform:uppercase;letter-spacing:.3px}.card-image .category-tag{position:absolute;bottom:0;left:0}.card-body{padding:8px 10px 9px}.card-body h3{font-family:'Barlow Condensed';font-size:23px;line-height:.98;font-weight:700;margin:0 0 7px;letter-spacing:-.3px}.card-body p{font-size:12px;line-height:1.3;color:#d0d2d2;margin:0 0 12px;min-height:31px}.card-meta{display:flex;align-items:center;gap:9px;font-size:10px;color:#b8bec0;white-space:nowrap}.card-meta span:nth-child(2){border-left:1px solid #555;padding-left:9px}.card-meta b{margin-left:auto;color:var(--yellow);font-size:19px;font-weight:500}.site-footer{background:#080a0b;padding:0 clamp(25px,6.2vw,96px)}.footer-main{min-height:78px;display:grid;grid-template-columns:1.15fr 1fr 1.05fr .55fr .6fr;gap:22px;align-items:center}.footer-brand{display:flex;align-items:center;gap:15px;color:var(--yellow)}.script{font-family:'Permanent Marker',cursive;font-size:25px;color:#eee;transform:rotate(-5deg);white-space:nowrap}.footer-main>p{border-left:1px solid var(--line);padding-left:25px;font-size:13px;line-height:1.25;margin:0;color:#e2e2df}.newsletter{display:flex;height:38px}.newsletter input{width:100%;min-width:0;background:#080a0b;border:1px solid #777;color:#fff;padding:0 12px;font-family:Barlow;font-size:12px}.newsletter button{width:42px;flex-shrink:0;border:0;background:var(--yellow);font-size:23px;font-weight:700}.no-spam{font-family:'Barlow Condensed';font-size:13px;line-height:1.1;text-transform:uppercase;color:var(--yellow);border-left:1px solid var(--line);padding-left:22px}.socials{display:flex;justify-content:space-between;gap:10px;font-size:17px}.tape-divider{height:12px;background:repeating-linear-gradient(120deg,var(--yellow) 0 17px,#111 17px 29px,var(--yellow) 29px 35px,#111 35px 47px);border-top:1px solid #333;border-bottom:1px solid #333;transform:skewX(-1deg)}.footer-bottom{min-height:35px;display:flex;align-items:center;justify-content:space-between;text-transform:uppercase;font-family:'Barlow Condensed';font-size:10px;letter-spacing:.5px;color:#b9bdbf}.footer-bottom a{margin-left:20px}.listing-page{padding:30px clamp(25px,6.2vw,96px) 50px}.listing-page .article-grid{margin-top:20px}.article-page{max-width:900px;margin:0 auto;padding:50px 28px 80px}.article-kicker{display:flex;align-items:center;gap:16px;color:#b8bdc1;font-size:12px;text-transform:uppercase}.article-page h1{font-family:'Barlow Condensed';font-weight:900;font-size:clamp(48px,8vw,92px);line-height:.88;letter-spacing:-1px;text-transform:uppercase;max-width:850px;margin:22px 0}.article-deck{font-size:22px;color:#d6d8d7;max-width:740px}.article-cover{margin:30px 0;border:1px solid #343a3d}.article-cover img{width:100%;max-height:540px;object-fit:cover}.article-content{max-width:700px;margin:auto;font-size:18px;line-height:1.75;color:#e0e2e1}.article-content h2,.article-content h3{font-family:'Barlow Condensed';font-size:36px;line-height:1.05;text-transform:uppercase;color:white}.article-content a{color:var(--yellow);text-decoration:underline}.article-end{text-align:center;color:var(--yellow);font-family:'Barlow Condensed';text-transform:uppercase;margin-top:50px}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1500px){.hero-grid{min-height:426px}.hero-feature{min-height:426px}}
@media(max-width:1150px){.site-header{padding:0 28px;gap:18px}.brand{min-width:140px;font-size:25px}.brand-tagline{min-width:170px;padding-left:18px;font-size:8px}.desktop-nav{gap:16px}.header-tape{right:8%;font-size:10px}.hero-grid{grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr)}.hero-feature{padding-left:32px}.hero-copy h1{font-size:54px}.side-story{grid-template-columns:34% 1fr;gap:12px}.side-story img{height:105px}.side-story-copy strong{font-size:18px}.article-grid{gap:12px}.card-body h3{font-size:21px}.footer-main{grid-template-columns:1fr 1fr 1.2fr .7fr;gap:15px}.socials{display:none}}
@media(max-width:800px){.site-shell{border:0}.site-header{height:78px;padding:0 20px;gap:12px}.brand{font-size:23px;min-width:0}.brand-crown{font-size:25px}.brand-tagline{display:none}.desktop-nav{display:none;position:absolute;top:77px;left:0;right:0;height:auto;background:#090b0c;border-bottom:2px solid var(--yellow);padding:12px 20px;align-items:stretch;flex-direction:column;gap:0}.desktop-nav.open{display:flex}.desktop-nav a{height:auto;padding:13px 0;border-bottom:1px solid var(--line)}.desktop-nav a.active:after,.desktop-nav a:hover:after{bottom:0;right:auto;width:28px}.header-tape{right:17%;top:8px;font-size:8px;padding:5px 12px}.icon-button{margin-left:auto}.menu-toggle{margin-left:2px}.hero-grid{display:flex;flex-direction:column}.hero-feature{min-height:520px;padding:32px 22px;justify-content:flex-end}.hero-art{width:100%;height:76%;right:0;top:0;object-position:center 38%;opacity:.85}.hero-feature:before{background:linear-gradient(0deg,#07090aff 0%,#07090ae8 26%,#07090a40 72%,#07090a10 100%),linear-gradient(90deg,#07090a60,transparent)}.hero-copy{max-width:420px}.hero-copy h1{font-size:clamp(48px,12vw,70px);max-width:390px}.hero-copy p{font-size:14px}.hero-sticker{top:14%;right:7%;font-size:13px}.side-stories{padding:0 20px}.side-story{grid-template-columns:120px 1fr;min-height:115px;padding:10px 0}.side-story img{height:92px}.side-story-copy{padding-right:0}.side-story-copy strong{font-size:21px}.latest{padding:0 20px 22px}.section-heading h2,.section-heading h1{font-size:29px}.article-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.card-image{height:clamp(125px,34vw,210px)}.card-body h3{font-size:22px}.card-body p{font-size:12px}.card-meta{flex-wrap:wrap;gap:5px;font-size:9px}.footer-main{grid-template-columns:1fr 1fr;padding:18px 0;gap:15px}.footer-brand{grid-column:1/-1}.footer-main>p{border:0;padding:0}.newsletter{grid-column:1/-1}.no-spam{border:0;padding:0}.footer-bottom{gap:12px;align-items:flex-start;flex-direction:column;padding:12px 0}.footer-bottom a{margin:0 18px 0 0}.article-page{padding:34px 20px 60px}.article-page h1{font-size:clamp(48px,13vw,78px)}.article-deck{font-size:18px}.article-content{font-size:17px}}
@media(max-width:380px){.header-tape{display:none}.hero-feature{min-height:490px}.hero-copy h1{font-size:46px}.article-grid{gap:8px}.card-body{padding:8px}.card-body h3{font-size:20px}.card-meta span:first-child{max-width:100%;overflow:hidden;text-overflow:ellipsis}.side-story{grid-template-columns:100px 1fr}.side-story-copy strong{font-size:19px}}

/* NOCTRYX full editorial homepage */
:root{--yellow:#ffe500;--max:1500px}body{background:#050606}.site-shell{max-width:1600px;background:#050708}.noctryx-header{height:88px;padding:0 clamp(20px,3.5vw,54px);gap:24px}.noctryx-brand{min-width:250px;gap:9px;font-family:'Barlow Condensed',sans-serif;font-size:clamp(31px,3.4vw,49px);letter-spacing:-1.8px;line-height:.82}.brand-mark{display:inline-block;color:var(--yellow);font-size:clamp(39px,4vw,56px);font-weight:900;line-height:.8;transform:skew(-12deg);margin-right:3px}.brand-word{font-weight:900;letter-spacing:-1.8px}.noctryx-brand sup{font-size:9px;margin-left:-5px}.noctryx-header .brand-tagline{min-width:145px;padding-left:23px;font-size:8px;line-height:1.5;letter-spacing:1.2px;font-weight:700}.noctryx-header .desktop-nav{gap:clamp(12px,1.9vw,28px);font-size:12px}.noctryx-header .desktop-nav a.active:after,.noctryx-header .desktop-nav a:hover:after{bottom:20px}.noctryx-header .header-tape{top:6px;right:2.5%;font-size:10px;padding:5px 16px;z-index:1}.noctryx-header .search-toggle{margin-left:2px}.noctryx-hero-grid{grid-template-columns:minmax(0,2.08fr) minmax(300px,.92fr);min-height:375px}.noctryx-hero-feature{min-height:375px;padding:24px clamp(24px,3.6vw,56px)}.noctryx-hero-feature .hero-art{right:0;width:75%;object-position:center 35%;filter:grayscale(1) contrast(1.18)}.noctryx-hero-feature:before{background:linear-gradient(90deg,#050708 0%,#050708f5 28%,#050708aa 48%,#05070812 76%),linear-gradient(0deg,#05070850,transparent 45%)}.noctryx-hero-feature .hero-copy{max-width:360px}.noctryx-hero-feature .hero-copy h1{font-size:clamp(43px,4.15vw,63px);line-height:.82;letter-spacing:-1.2px;margin-bottom:12px}.noctryx-hero-feature .hero-copy p{font-size:12px;line-height:1.25;max-width:330px;margin-bottom:14px}.noctryx-hero-feature .eyebrow{font-size:12px;margin-bottom:6px}.noctryx-hero-feature .button-yellow{font-size:12px;padding:8px 12px}.noctryx-hero-feature .hero-sticker{right:4%;top:24%;font-size:13px;padding:9px 7px}.noctryx-hero-grid .side-stories{padding:8px 24px 8px 14px;justify-content:space-between}.noctryx-hero-grid .side-story{grid-template-columns:minmax(90px,34%) 1fr;gap:12px;min-height:0;padding:8px 0;flex:1}.noctryx-hero-grid .side-story img{height:96px}.noctryx-hero-grid .side-story-copy{padding-right:0}.noctryx-hero-grid .side-story-copy strong{font-size:18px;line-height:.96}.noctryx-hero-grid .side-story-copy small{font-size:11px;margin-top:4px}.noctryx-hero-grid .side-story-copy i{font-size:17px;margin-top:4px}.noctryx-latest{padding:0 clamp(24px,3.6vw,56px) 17px}.noctryx-latest .section-heading{padding:9px 0 7px;margin-bottom:12px}.noctryx-latest .section-heading h2,.explore-section .section-heading h2{font-size:27px;letter-spacing:-.4px}.noctryx-latest .section-heading h2:before,.mini-heading h2:before,.explore-section .section-heading h2:before{content:"";display:inline-block;width:4px;height:24px;background:var(--yellow);margin-right:7px;vertical-align:-3px}.noctryx-latest .article-grid{gap:12px}.noctryx-latest .card-image{height:clamp(110px,11.8vw,125px)}.noctryx-latest .card-image img{filter:grayscale(.35) contrast(1.15)}.noctryx-latest .card-body{padding:7px 8px 8px}.noctryx-latest .card-body h3{font-size:clamp(17px,1.55vw,21px);line-height:.98;margin-bottom:6px}.noctryx-latest .card-body p{font-size:11px;min-height:28px;margin-bottom:8px}.noctryx-latest .card-meta{font-size:9px;gap:6px}.noctryx-latest .card-meta span:nth-child(2){padding-left:6px}.editorial-band{display:grid;grid-template-columns:minmax(220px,.92fr) minmax(300px,1.12fr) minmax(220px,.88fr);gap:18px;padding:17px clamp(24px,3.6vw,56px) 18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#07090a}.editors-column{border-right:1px solid var(--line);padding-right:14px}.mini-heading{border-bottom:1px solid var(--line);margin-bottom:7px}.mini-heading h2,.newsletter-box h2,.popular-list h2{font-family:'Barlow Condensed';font-size:23px;line-height:1;text-transform:uppercase;margin:0 0 9px;font-weight:800}.mini-heading h2:before,.popular-list h2:before{height:18px;width:4px;vertical-align:-2px}.editor-pick{display:grid;grid-template-columns:100px 1fr;gap:11px;padding:7px 0;border-bottom:1px solid var(--line);min-height:89px}.editor-pick:last-child{border-bottom:0}.editor-pick img{width:100px;height:80px;object-fit:cover;border:1px solid #343a3d;filter:grayscale(.4) contrast(1.1)}.editor-pick span{display:block;min-width:0}.editor-pick b{display:block;color:var(--yellow);font-family:'Barlow Condensed';font-size:10px;text-transform:uppercase;margin-bottom:3px}.editor-pick strong{display:block;font-family:'Barlow Condensed';font-size:15px;line-height:1.03}.editor-pick small{display:block;font-size:10px;line-height:1.2;color:#c8cbcb;margin-top:4px}.editor-pick i{display:block;font-style:normal;color:var(--yellow);margin-top:3px}.big-feature{position:relative;min-height:390px;overflow:hidden;border:1px solid #343a3d;background:#101213}.big-feature>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:grayscale(.4) contrast(1.15)}.big-feature-shade{position:absolute;inset:0;background:linear-gradient(90deg,#050708f7 0%,#050708d9 43%,#05070832 100%),linear-gradient(0deg,#05070875,transparent 60%)}.big-feature-copy{position:relative;z-index:1;padding:14px 16px;height:100%;display:flex;flex-direction:column;align-items:flex-start}.big-feature-copy .category-tag{font-size:11px;padding:4px 9px}.big-feature-copy h2{font-family:'Barlow Condensed';font-size:clamp(30px,3vw,46px);line-height:.88;text-transform:uppercase;max-width:290px;margin:18px 0 13px;font-weight:900;letter-spacing:-.7px}.big-feature-copy p{max-width:300px;font-size:12px;line-height:1.35;color:#e0e2e1;margin:0 0 14px}.feature-byline{display:flex;align-items:center;gap:9px;font-size:10px;line-height:1.45;color:#e0e2e1;margin-top:auto}.author-dot{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#25292b;border:1px solid #7b8080;color:var(--yellow);font-weight:800}.big-feature-copy>a{font-size:29px;color:var(--yellow);margin-top:9px;line-height:1}.popular-column{border-left:1px solid var(--line);padding-left:17px}.newsletter-box{padding-bottom:15px;border-bottom:1px solid var(--line)}.newsletter-box h2{font-size:19px;margin-bottom:5px}.newsletter-box p{font-size:11px;line-height:1.25;margin:0 0 9px;color:#d9dbda}.newsletter-box .newsletter{height:30px}.newsletter-box .newsletter input{font-size:10px;padding:0 9px}.newsletter-box .newsletter button{width:34px;font-size:19px}.popular-list{padding-top:12px}.popular-list h2{font-size:18px;border-bottom:1px solid var(--line);padding-bottom:7px;margin-bottom:0}.popular-list a{display:grid;grid-template-columns:24px 1fr;gap:7px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line);font-size:11px;line-height:1.15}.popular-list a b{color:var(--yellow);font-family:'Barlow Condensed';font-size:20px}.impact-sticker{position:relative;margin-top:13px;padding:15px 10px;background:var(--yellow);color:#080a0b;font-family:'Barlow Condensed';font-size:18px;font-weight:900;line-height:1.05;text-transform:uppercase;transform:rotate(-2deg);clip-path:polygon(2% 8%,100% 0,97% 93%,0 100%)}.impact-sticker span{position:absolute;right:12px;bottom:2px;font-size:32px}.explore-section{padding:0 clamp(24px,3.6vw,56px) 20px;background:#07090a}.explore-section .section-heading{margin-bottom:12px}.explore-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.explore-card{position:relative;display:flex;flex-direction:column;border:1px solid #343a3d;background:#080a0b;min-width:0;overflow:hidden}.explore-card img{width:100%;height:74px;object-fit:cover;filter:grayscale(.4) contrast(1.12)}.explore-card b{align-self:flex-start;background:var(--yellow);color:#080a0b;font-family:'Barlow Condensed';font-size:10px;line-height:1;text-transform:uppercase;padding:4px 7px;margin-top:-1px}.explore-card span{padding:6px 7px 8px;font-size:10px;line-height:1.2;min-height:39px}.noctryx-footer{padding:0 clamp(24px,3.6vw,56px)}.noctryx-footer .footer-main{grid-template-columns:1.15fr 2fr .7fr;min-height:66px;gap:18px}.noctryx-footer .footer-brand{gap:7px}.noctryx-footer .brand-mark{font-size:37px}.footer-word{font-family:'Barlow Condensed';font-size:29px;font-weight:900;letter-spacing:-1px;color:#f2f2f0}.footer-brand small{border-left:1px solid var(--line);padding-left:12px;margin-left:8px;font-size:7px;line-height:1.6;letter-spacing:.8px;color:#c9cccb}.footer-nav{display:flex;align-items:center;justify-content:center;gap:clamp(10px,1.7vw,23px);text-transform:uppercase;font-family:'Barlow Condensed';font-size:11px}.footer-nav a:hover,.footer-bottom a:hover{color:var(--yellow)}.footer-socials{display:flex;justify-content:flex-end;gap:15px;font-size:18px}.noctryx-footer .footer-bottom{min-height:31px;font-size:9px}.noctryx-footer .tape-divider{height:17px;margin:0 calc(clamp(24px,3.6vw,56px)*-1);background:repeating-linear-gradient(125deg,var(--yellow) 0 24px,#101112 24px 43px)}
@media(max-width:1100px){.noctryx-header{gap:15px}.noctryx-brand{min-width:190px}.noctryx-header .brand-tagline{min-width:115px;padding-left:13px}.noctryx-header .desktop-nav{gap:11px;font-size:11px}.editorial-band{grid-template-columns:minmax(190px,.9fr) minmax(270px,1.1fr) minmax(190px,.85fr);gap:12px}.editor-pick{grid-template-columns:80px 1fr}.editor-pick img{width:80px;height:72px}.popular-column{padding-left:12px}.noctryx-latest .card-meta{font-size:8px}}
@media(max-width:800px){.noctryx-header{height:76px;padding:0 18px;gap:8px}.noctryx-brand{font-size:31px;min-width:0}.noctryx-header .brand-mark{font-size:37px}.noctryx-header .brand-tagline{display:none}.noctryx-header .header-tape{right:18%;top:6px;font-size:7px;padding:4px 9px}.noctryx-header .desktop-nav{top:75px}.noctryx-hero-grid{display:flex;flex-direction:column}.noctryx-hero-feature{min-height:500px;padding:25px 21px;justify-content:flex-end}.noctryx-hero-feature .hero-art{width:100%;height:78%;top:0;object-position:center 34%;opacity:.92}.noctryx-hero-feature:before{background:linear-gradient(0deg,#050708 0%,#050708f0 22%,#05070862 57%,#0507080a 100%)}.noctryx-hero-feature .hero-copy{max-width:390px}.noctryx-hero-feature .hero-copy h1{font-size:clamp(49px,12vw,68px);max-width:370px}.noctryx-hero-feature .hero-copy p{font-size:13px;max-width:320px}.noctryx-hero-feature .hero-sticker{top:12%;right:7%}.noctryx-hero-grid .side-stories{padding:0 18px}.noctryx-hero-grid .side-story{grid-template-columns:112px 1fr;min-height:110px;padding:9px 0}.noctryx-hero-grid .side-story img{height:91px}.noctryx-latest{padding:0 18px 18px}.noctryx-latest .article-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.noctryx-latest .card-image{height:clamp(120px,35vw,190px)}.noctryx-latest .card-body h3{font-size:21px}.noctryx-latest .card-body p{min-height:0}.noctryx-latest .card-meta{font-size:9px;flex-wrap:wrap}.editorial-band{grid-template-columns:1fr;gap:18px;padding:18px}.editors-column{border-right:0;padding-right:0}.editor-pick{grid-template-columns:100px 1fr;min-height:90px}.editor-pick img{width:100px;height:80px}.editor-pick strong{font-size:17px}.editor-pick small{font-size:11px}.big-feature{min-height:430px}.big-feature-copy h2{font-size:clamp(38px,10vw,54px);max-width:300px}.big-feature-copy p{font-size:13px;max-width:300px}.popular-column{border-left:0;padding-left:0}.newsletter-box h2{font-size:22px}.newsletter-box p{font-size:12px}.popular-list a{font-size:12px}.explore-section{padding:0 18px 18px}.explore-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.explore-card img{height:110px}.explore-card span{font-size:11px;min-height:0}.noctryx-footer{padding:0 18px}.noctryx-footer .footer-main{grid-template-columns:1fr;gap:15px;padding:18px 0}.noctryx-footer .footer-brand{flex-wrap:wrap}.footer-nav{justify-content:flex-start;flex-wrap:wrap;gap:14px}.footer-socials{justify-content:flex-start}.noctryx-footer .footer-bottom{gap:10px;align-items:flex-start;flex-direction:column;padding:12px 0}.noctryx-footer .tape-divider{margin:0 -18px}}
@media(max-width:380px){.noctryx-brand{font-size:26px}.noctryx-header .brand-mark{font-size:32px}.noctryx-header .header-tape{display:none}.noctryx-hero-feature{min-height:470px}.noctryx-hero-feature .hero-copy h1{font-size:47px}.noctryx-latest .card-body h3{font-size:19px}.editor-pick{grid-template-columns:86px 1fr}.editor-pick img{width:86px;height:76px}}

/* NOCTRYX long-form editorial article system */
.noctryx-article-page{--article-gutter:clamp(22px,5.2vw,78px);background:#080a0b;color:var(--ink)}
.article-topline{display:flex;justify-content:space-between;gap:16px;padding:13px var(--article-gutter);border-bottom:1px solid var(--line);font-family:'Barlow Condensed';font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#c7cbcc}
.article-section-mark{color:var(--yellow)}.article-section-mark b{display:inline-block;margin-left:12px;background:#202426;color:#fff;padding:3px 7px;font-size:10px}.article-topline-date i{font-style:normal;color:var(--yellow);padding:0 5px}
.article-masthead{padding:clamp(30px,4.4vw,66px) var(--article-gutter) 30px;border-bottom:1px solid var(--line)}.article-title-column{max-width:1060px}.article-kicker{display:flex;align-items:center;gap:13px}.article-edition{font-family:'Barlow Condensed';font-size:10px;font-weight:700;letter-spacing:1.4px;color:#9ca2a5}.article-masthead h1{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(58px,8.3vw,126px);line-height:.79;letter-spacing:-2px;max-width:1100px;margin:23px 0 20px;text-wrap:balance}.article-deck{max-width:820px;font-size:clamp(18px,2vw,25px);line-height:1.35;color:#d5d8d7;margin:0 0 24px}.article-byline{display:flex;align-items:center;gap:12px;max-width:650px}.byline-avatar{width:37px;height:37px;display:grid;place-items:center;background:var(--yellow);color:#080a0b;font-family:'Barlow Condensed';font-weight:900;font-size:23px;clip-path:polygon(0 0,100% 0,92% 100%,0 88%)}.article-byline>div:nth-child(2){display:flex;flex-direction:column;gap:2px}.article-byline strong{font-family:'Barlow Condensed';font-size:12px;letter-spacing:.7px}.article-byline span{font-size:11px;color:#b9bec0}.byline-rule{height:28px;width:1px;background:#444;margin:0 8px}.byline-reading{display:flex;align-items:baseline;gap:6px}.byline-reading b{font-family:'Barlow Condensed';font-size:22px;color:var(--yellow)}.byline-reading span{font-size:9px;letter-spacing:1px}.article-cover{margin:34px 0 0;position:relative;border:1px solid #3b4042;background:#111;overflow:hidden}.article-cover img{width:100%;height:clamp(280px,48vw,620px);object-fit:cover;object-position:center 42%;filter:contrast(1.08) saturate(.8)}.article-cover figcaption{display:flex;gap:12px;padding:10px 13px;background:#0d1011;border-top:1px solid #353a3d;font-size:11px;color:#c1c5c5}.article-cover figcaption span{color:var(--yellow);font-family:'Barlow Condensed';font-weight:900}
.article-layout{display:grid;grid-template-columns:minmax(90px,.68fr) minmax(0, min(720px, 5fr)) minmax(190px,1.45fr);gap:clamp(22px,3.1vw,48px);padding:38px var(--article-gutter) 64px;align-items:start}.article-rail{min-width:0}.rail-sticky,.right-rail-sticky{position:sticky;top:24px}.rail-label{display:block;font-family:'Barlow Condensed';font-size:10px;letter-spacing:1.3px;color:#aeb4b6;font-weight:800}.article-share-links{display:flex;flex-direction:column;gap:7px;margin:12px 0 20px}.article-share-links a,.article-share-links button{width:34px;height:34px;border:1px solid #454b4d;background:#0e1112;color:#eee;display:grid;place-items:center;font-family:'Barlow Condensed';font-size:15px;font-weight:800;cursor:pointer}.article-share-links a:hover,.article-share-links button:hover{background:var(--yellow);color:#080a0b;border-color:var(--yellow)}.rail-rule{height:1px;background:#363b3d;margin:17px 0}.rail-big-number{display:block;font-family:'Barlow Condensed';font-size:34px;color:var(--yellow);margin-top:3px}.rail-big-number small{font-size:10px;margin-left:5px;color:#d3d5d4}.rail-file{display:block;font-family:'Barlow Condensed';font-size:16px;margin-top:6px}.rail-tape{margin-top:24px;background:repeating-linear-gradient(125deg,var(--yellow) 0 10px,#0a0b0c 10px 19px);padding:5px 2px;color:#fff;font-family:'Barlow Condensed';font-weight:900;font-size:8px;letter-spacing:.5px;text-align:center;writing-mode:vertical-rl;min-height:100px;width:24px}
.article-main-column{min-width:0}.article-standfirst{font-size:22px;line-height:1.45;font-weight:600;color:#f1f1ee;margin:0 0 25px;padding-left:17px;border-left:4px solid var(--yellow)}.article-toc{border:1px solid #3b4143;margin:0 0 32px;background:#0d1011}.toc-head{display:flex;justify-content:space-between;align-items:center;background:#15191a;padding:11px 14px;color:var(--yellow);font-family:'Barlow Condensed';font-weight:900;font-size:12px;letter-spacing:1px}.toc-body{padding:12px 16px 15px}.toc-body nav#TableOfContents ul{margin:0;padding-left:17px;list-style:square}.toc-body nav#TableOfContents li{padding:4px 0;color:#c7cbcc;font-size:13px}.toc-body nav#TableOfContents li::marker{color:var(--yellow)}.toc-body nav#TableOfContents a:hover{color:var(--yellow)}.article-content{max-width:none;margin:0;font-size:18px;line-height:1.8;color:#d9dddc;overflow-wrap:anywhere}.article-content>p:first-child:first-letter{float:left;font-family:'Barlow Condensed';font-size:68px;font-weight:900;line-height:.82;color:var(--yellow);padding:7px 9px 0 0}.article-content p{margin:0 0 23px}.article-content h2{font-size:clamp(31px,3.2vw,43px);line-height:.95;margin:43px 0 17px;padding-top:15px;border-top:1px solid #303638;letter-spacing:-.3px}.article-content h2:before{content:'// ';color:var(--yellow)}.article-content h3{font-size:27px;margin:31px 0 12px}.article-content ul,.article-content ol{padding-left:24px;margin:0 0 25px}.article-content li{padding:4px 0}.article-content li::marker{color:var(--yellow)}.article-content blockquote{margin:34px 0;padding:20px 22px 22px;border-left:5px solid var(--yellow);background:#111516;color:#f5f4f0;font-family:'Barlow Condensed';font-size:clamp(25px,3vw,36px);font-weight:800;line-height:1.05;text-transform:uppercase}.article-content blockquote p{margin:0}.article-content img{width:100%;height:auto;border:1px solid #3b4143;margin:25px 0}.article-end{text-align:center;border-top:1px solid #363b3d;margin-top:45px;padding:25px 0 12px}.end-mark{color:var(--yellow);font-size:12px}.article-end p{font-family:'Barlow Condensed';font-size:15px;font-weight:900;letter-spacing:2px;margin:8px 0 3px}.article-end small{font-size:12px;color:#aeb4b6}.article-tags{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:22px 0 28px}.article-tags>span{font-family:'Barlow Condensed';font-size:10px;font-weight:900;letter-spacing:1px;color:#aeb4b6;margin-right:5px}.article-tags a{border:1px solid #454b4d;padding:5px 8px;font-family:'Barlow Condensed';font-size:11px;text-transform:uppercase}.article-tags a:hover{background:var(--yellow);color:#080a0b}.article-author-box{display:grid;grid-template-columns:66px 1fr;gap:17px;border:1px solid #3a4042;padding:19px;background:#0e1112}.author-box-mark{width:60px;height:60px;display:grid;place-items:center;background:var(--yellow);color:#080a0b;font-family:'Barlow Condensed';font-size:42px;font-weight:900}.article-author-box h3{font-family:'Barlow Condensed';font-size:25px;line-height:1;margin:7px 0}.article-author-box p{font-size:13px;line-height:1.5;color:#c6cbcb;margin:0}
.rail-section-title{display:flex;align-items:center;gap:10px;border-bottom:1px solid #3b4143;padding-bottom:9px;margin-bottom:8px}.rail-section-title span{font-family:'Barlow Condensed';font-size:18px;font-weight:900}.rail-section-title i{height:4px;flex:1;background:var(--yellow)}.radar-story{display:block;padding:13px 0;border-bottom:1px solid #353a3d}.radar-story img{width:100%;height:110px;object-fit:cover;border:1px solid #373d3f;filter:grayscale(.35) contrast(1.1);margin-bottom:9px}.radar-category{display:block;color:var(--yellow);font-family:'Barlow Condensed';font-size:10px;font-weight:900;letter-spacing:.8px;text-transform:uppercase;margin-bottom:4px}.radar-story strong{display:block;font-family:'Barlow Condensed';font-size:23px;line-height:.97;text-transform:uppercase}.radar-story small{display:flex;justify-content:space-between;align-items:center;margin-top:8px;color:#aeb4b6;font-size:9px;letter-spacing:.5px}.radar-story small b{font-size:18px;color:var(--yellow)}.rail-newsletter{padding:18px 13px;margin-top:20px;border:1px solid #42484a;background:#111516}.rail-newsletter h3{font-family:'Barlow Condensed';font-weight:900;text-transform:uppercase;font-size:29px;line-height:.88;margin:12px 0}.rail-newsletter p{font-size:12px;line-height:1.4;color:#c6cbcb}.rail-newsletter>a{display:flex;justify-content:space-between;gap:6px;background:var(--yellow);color:#080a0b;padding:9px;font-family:'Barlow Condensed';font-size:12px;font-weight:900}.rail-warning{margin-top:18px;padding:12px;background:#111516;border:1px solid #42484a;display:flex;gap:10px;align-items:center}.rail-warning>span{font-size:28px;color:var(--yellow)}.rail-warning p{font-family:'Barlow Condensed';font-size:13px;line-height:1.05;margin:0}.rail-warning strong{color:var(--yellow)}.article-next-read{padding:0 var(--article-gutter) 48px;border-top:1px solid #353a3d}.article-next-read .section-heading{margin-bottom:15px}.article-next-read .section-heading>span{font-family:'Barlow Condensed';font-size:11px;font-weight:900;color:var(--yellow)}.article-next-read .article-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media(max-width:1050px){.article-layout{grid-template-columns:58px minmax(0,1fr) 210px;gap:20px}.article-rail-left .rail-label,.article-rail-left .rail-rule,.rail-big-number,.rail-file,.rail-tape{display:none}.article-share-links{margin-top:4px}.article-share-links a,.article-share-links button{width:32px;height:32px}.article-masthead h1{font-size:clamp(56px,9vw,100px)}}
@media(max-width:760px){.article-topline{padding:10px 18px;font-size:9px}.article-topline-date{white-space:nowrap}.noctryx-article-page{--article-gutter:18px}.article-masthead{padding-top:29px;padding-bottom:22px}.article-edition{font-size:8px;letter-spacing:.7px}.article-masthead h1{font-size:clamp(51px,13vw,78px);letter-spacing:-.7px;margin:19px 0 14px}.article-deck{font-size:18px;margin-bottom:18px}.article-cover{margin-top:23px}.article-cover img{height:clamp(230px,67vw,400px)}.article-cover figcaption{font-size:10px}.article-layout{display:flex;flex-direction:column;padding:25px 18px 42px;gap:20px}.article-rail-left{order:0;width:100%;border-bottom:1px solid #353a3d;padding-bottom:10px}.rail-sticky{position:static;display:flex;align-items:center;gap:9px}.article-rail-left .rail-label{display:block;font-size:9px}.article-share-links{flex-direction:row;margin:0 0 0 auto;gap:5px}.article-share-links a,.article-share-links button{width:29px;height:29px}.article-rail-left .rail-rule,.article-rail-left .rail-big-number,.article-rail-left .rail-file,.article-rail-left .rail-tape{display:none}.article-main-column{order:1;width:100%}.article-standfirst{font-size:19px}.article-content{font-size:17px;line-height:1.75}.article-content h2{font-size:34px;margin-top:34px}.article-content blockquote{font-size:27px;margin:27px 0;padding:17px}.article-rail-right{order:2;width:100%;border-top:1px solid #353a3d;padding-top:20px}.right-rail-sticky{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}.rail-section-title{grid-column:1/-1;margin-bottom:0}.radar-story{padding:8px 0}.radar-story img{height:100px}.radar-story strong{font-size:19px}.rail-newsletter,.rail-warning{margin-top:8px}.rail-newsletter{grid-column:1/-1}.rail-warning{grid-column:1/-1}.article-next-read{padding:0 18px 30px}.article-next-read .section-heading h2{font-size:25px}.article-next-read .section-heading>span{font-size:9px}.article-next-read .article-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.article-next-read .article-card:last-child{display:none}.article-author-box{grid-template-columns:48px 1fr;padding:13px;gap:12px}.author-box-mark{width:46px;height:46px;font-size:32px}.article-author-box h3{font-size:22px}.article-author-box p{font-size:12px}}

/* Preview fix 2026-10-27 (Dade): on phones the search + hamburger must sit together
   on the RIGHT — hamburger far right, search immediately to its left.
   The theme's own rules defeat each other here: at <=800px .icon-button gets
   margin-left:auto, but .noctryx-header .search-toggle (higher specificity)
   and the later .menu-toggle rule both override it back to ~2px, so neither
   button is pushed right and both sit next to the brand. This block is last
   in the file and wins the cascade at equal/higher specificity. */
@media(max-width:800px){
  .noctryx-header .search-toggle{margin-left:auto}
  .noctryx-header .menu-toggle{margin-left:0}
}

/* Preview fix 2026-10-27 #2 (Dade): two desktop corrections.
   1) No hamburger on desktop — the full menu bar is there; the hamburger is
      only for <=800px where the bar hides. The theme shows it at all widths.
   2) Article page columns: the theme's desktop grid for .article-layout is
      grid-template-columns:minmax(90px,.68fr) minmax(0, min(720px, 5fr)) minmax(190px,1.45fr).
      A flex (fr) value inside min() is invalid, so browsers drop the ENTIRE
      declaration and the grid falls back to a single column — share rail,
      article and Radar sidebar stack. Below 1051px the theme's replacement
      rules are valid, which is why only desktop broke. The rule below keeps
      the author's proportions and the 720px reading cap, in valid syntax. */
@media(min-width:801px){
  .noctryx-header .menu-toggle{display:none}
}
@media(min-width:1051px){
  .article-layout{grid-template-columns:minmax(90px,.68fr) minmax(0,720px) minmax(190px,360px);justify-content:center;max-width:1500px;margin-left:auto;margin-right:auto}
}

/* Preview experiment 2026-10-27 #3 (Dade): article hero in the homepage hero design.
   The article masthead is replaced by a homepage-style feature panel: the
   article image as right-side art under the same dark gradient, category tag,
   huge condensed headline, deck, byline, yellow Start Reading button, and the
   rotated yellow sticker. Values mirror .hero-feature/.hero-art on the homepage. */
.article-hero{position:relative;isolation:isolate;overflow:hidden;min-height:560px;display:flex;align-items:center;padding:54px var(--article-gutter);background:#090b0c;border-bottom:1px solid var(--line)}
.article-hero:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#07090af7 0%,#07090ae8 30%,#07090a58 62%,#07090a08 100%),linear-gradient(0deg,#07090a60,transparent 40%)}
.article-hero-art{position:absolute;z-index:-2;right:-2%;top:0;width:74%;height:100%;object-fit:cover;object-position:center 38%;filter:contrast(1.1) grayscale(.2)}
.article-hero-copy{position:relative;z-index:1;max-width:680px}
.article-hero-copy h1{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(48px,5.8vw,94px);line-height:.82;letter-spacing:-1.6px;margin:22px 0 18px;text-wrap:balance}
.article-hero .article-deck{color:#e0e1df;max-width:540px;margin-bottom:22px}
.article-hero .article-byline{margin-bottom:26px}
.article-hero-sticker{top:15%}
@media(max-width:800px){
  .article-hero{min-height:600px;align-items:flex-end;padding:40px 18px 30px}
  .article-hero-art{width:100%;height:74%;right:0;opacity:.85}
  .article-hero:before{background:linear-gradient(0deg,#07090aff 0%,#07090ae8 28%,#07090a40 72%,#07090a10 100%),linear-gradient(90deg,#07090a60,transparent)}
  .article-hero-copy h1{font-size:clamp(46px,12.5vw,72px)}
  .article-hero-sticker{top:11%;right:6%}
}

/* Preview fix 2026-10-27 #4 (Dade, from his phone screenshot): mobile cards go
   ONE per row, and the text becomes a panel that overlaps roughly the bottom
   half of the image instead of sitting underneath it. Category tag moves to
   the top-left of the image so the panel does not bury it. Applies to every
   card grid on mobile (articles list, categories, homepage Latest, search,
   Continue the Descent). Desktop cards untouched. */
@media(max-width:800px){
  .article-grid{grid-template-columns:minmax(0,1fr);gap:30px}
  .article-card{border:0;background:transparent}
  .card-image{height:clamp(210px,58vw,280px)}
  .card-image .category-tag{bottom:auto;top:0}
  .card-body{position:relative;z-index:1;margin:clamp(-118px,-27vw,-80px) 14px 0;background:#0d1011;border:1px solid #3a4043;padding:16px 16px 14px}
  .article-next-read .article-grid{grid-template-columns:minmax(0,1fr)}
  .article-next-read .article-card:last-child{display:block}
}

/* Preview fix 2026-10-27 #5 (Dade): pagination as a strip of caution tape.
   The theme ships ZERO pagination CSS, so Hugo's default list rendered as a
   raw bulleted column of links. Now: the theme's own hazard-stripe pattern
   (same repeating gradient as the footer tape divider) forms a strip, and the
   page links sit on it as solid black blocks with yellow numbers; the current
   page inverts to a yellow block with black text. First/prev/next/last glyphs
   inherit the block styling. */
.pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;width:fit-content;max-width:100%;list-style:none;margin:38px auto 12px;padding:7px 10px;background:repeating-linear-gradient(125deg,var(--yellow) 0 24px,#101112 24px 43px);border-top:1px solid #333;border-bottom:1px solid #333}
.pagination .page-item{display:flex;margin:0;padding:0}
.pagination .page-link{display:flex;align-items:center;justify-content:center;min-width:38px;height:36px;padding:0 11px;background:#08090a;border:2px solid #08090a;color:var(--yellow);font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:900;letter-spacing:.5px;box-shadow:0 2px 8px rgba(0,0,0,.45)}
.pagination .page-link:hover{border-color:var(--yellow)}
.pagination .page-item.active .page-link{background:var(--yellow);color:#08090a;border-color:#08090a;box-shadow:0 0 0 2px #08090a,0 2px 8px rgba(0,0,0,.45)}
.pagination .page-item.disabled .page-link{opacity:.38;box-shadow:none}
@media(max-width:800px){
  /* Mobile keeps the ORIGINAL chunky full-width tape (Dade, 2026-10-27: approved
     the slim strip, then immediately reversed: "looked better before on mobile").
     Desktop keeps the slim fit-content strip. */
  .pagination{width:auto;padding:12px 8px;gap:8px;margin-top:32px}
  .pagination .page-link{min-width:40px;height:40px;font-size:15px;padding:0 10px}
}

/* Preview fix 2026-10-27 #6 (Dade, from a reference screenshot he sent): mobile
   cards switch from the overlap panel (#4) to ROWS like his screenshot: photo
   on the left (~42%), then in the text column a yellow category word (new
   .card-cat span, added by the site-level article-card partial override; the
   on-image tag is hidden in this mode), big title, grey deck, yellow arrow.
   Author/read-time hidden; rows separated by a hairline. Desktop unchanged. */
.card-cat{display:none}
@media(max-width:800px){
  .article-grid{gap:20px}
  .article-card{border:0;border-bottom:1px solid #26292b;background:transparent;padding-bottom:20px}
  .article-card>a{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);height:auto}
  .card-image{height:auto;min-height:150px}
  .card-image .category-tag{display:none}
  .card-body{position:static;margin:0;background:transparent;border:0;padding:2px 0 2px 16px;display:flex;flex-direction:column;justify-content:center;gap:7px}
  .card-cat{display:block;color:var(--yellow);font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase}
  .card-body h3{font-size:clamp(21px,5.8vw,27px);line-height:1.02}
  .card-body p{font-size:14px;min-height:0}
  .card-meta{margin-top:0}
  .card-meta span{display:none}
  .card-meta b{margin-left:0;font-size:20px}
}

/* Preview fix 2026-10-27 #7 (Dade, homepage screenshot): the homepage Latest
   Articles grid kept its two-by-two layout on mobile because the theme's
   .noctryx-latest .article-grid rule (0,2,0) outranks the generic .article-grid
   rules in blocks #4/#6 — which also squeezed the new row cards into half-width
   columns. Same specificity here, later in the file, so the homepage stacks
   one card per row on mobile like every other list. (First attempt used the
   wrong wrapper class .home-latest and matched nothing; corrected to
   .noctryx-latest after Dade reported "still look the same".) */
@media(max-width:800px){
  .noctryx-latest .article-grid{grid-template-columns:minmax(0,1fr)}
}

/* Preview fix 2026-10-27 #8 (Dade): "It should look like how the editors pick
   looks like." Mobile card rows now mirror the homepage Editor's picks rows
   (.editor-pick): a fixed 92px thumb at the left (top-aligned, 72px tall),
   yellow category word, 19px title, and the small grey meta line
   (By author • min read). The deck paragraph and the arrow drop out, and the
   meta's top border goes away. Supersedes the differing values in #6; still
   one card per row everywhere on mobile, desktop untouched. */
@media(max-width:800px){
  .article-grid{gap:13px}
  .article-card{padding-bottom:13px}
  .article-card>a{grid-template-columns:92px minmax(0,1fr);gap:14px}
  .card-image{height:72px;min-height:0;align-self:start}
  .card-body{justify-content:flex-start;gap:5px;padding:0}
  .card-body h3{font-size:19px;line-height:1.05}
  .card-body p{display:none}
  .card-meta{border-top:0;padding-top:0;margin-top:1px;font-size:12.5px;color:#9aa0a1;gap:6px}
  .card-meta span{display:inline}
  .card-meta span+span:before{content:"• "}
  .card-meta b{display:none}
}

/* Preview fix 2026-10-27 #9 (Dade, with a screenshot of the actual Editor's
   picks): #8 mirrored the WRONG thing — the real .editor-pick row is img +
   category word + title + DECK + arrow, with no byline/meta at all (confirmed
   from the built HTML: b/strong/small/i inside the pick link, img 100x80 at
   <=800px, 86x76 at <=380px). Card rows now copy that format exactly: 100px
   thumb, kicker, 19px title, deck back in, arrow back under the deck, meta
   spans hidden again, hairline rows with the picks' own 13px rhythm. Applies
   to the homepage Latest AND the mobile article list page, as Dade asked. */
@media(max-width:800px){
  .article-grid{gap:0}
  .article-card{padding:13px 0}
  .article-card>a{grid-template-columns:100px minmax(0,1fr);gap:14px}
  .card-image{height:80px}
  .card-body{gap:0}
  .card-cat{font-size:11px;letter-spacing:1.4px;margin-bottom:3px}
  .card-body h3{font-size:19px;line-height:1.03}
  .card-body p{display:block;font-size:12.5px;line-height:1.25;color:#c8cbcb;margin-top:4px;min-height:0}
  .card-meta{border-top:0;padding-top:0;margin-top:0}
  .card-meta span{display:none}
  .card-meta b{display:block;margin:3px 0 0;font-size:15px}
}
@media(max-width:380px){
  .article-card>a{grid-template-columns:86px minmax(0,1fr);gap:11px}
  .card-image{height:76px}
}

/* Preview fix 2026-10-27 #10 (Dade: "It doesn't have the same image size and
   dimensions"): he was right and the cascade dump proves why. The theme carries
   a higher-specificity rule Pinky had not seen — .noctryx-latest .card-image
   {height:clamp(120px,35vw,190px)} at (0,2,0) — which beat every (0,1,0)
   .card-image height in blocks #4-#9, so Latest images rendered ~137px tall
   on his phone while Editor's picks images are exactly 100x80. This block
   matches that specificity and comes last: card image boxes in grids are now
   forced to the Editor's pick dimensions — 100x80 at <=800px, 86x76 at
   <=380px — including the same 1px frame border the pick images carry. */
@media(max-width:800px){
  .article-grid .card-image,.noctryx-latest .card-image{height:80px;border:1px solid #343a3d}
}
@media(max-width:380px){
  .article-grid .card-image,.noctryx-latest .card-image{height:76px}
}

/* Preview fix 2026-10-27 #11 (Dade: "look at the CSS for the editors picks and
   just apply to the latest posts"): the editor-pick declarations, copied
   verbatim onto the card rows — no more approximations. Effective pick values
   read from the full cascade (base + <=1100 + <=800 + both <=380 blocks, in
   file order): row padding 13px 0 (7px 0 under 380px), min-height 90px,
   kicker 11px (10px under 380px), title 17px/1.03, deck 11px/1.2 #c8cbcb
   margin-top 4px, arrow margin-top 5px (3px under 380px). Image box already
   matches via #9/#10 (100x80, 86x76 under 380px). */
@media(max-width:800px){
  .article-card{padding:13px 0}
  .article-card>a{min-height:90px}
  .card-cat{font-size:11px;letter-spacing:1.2px;margin-bottom:3px}
  .card-body h3{font-size:17px;line-height:1.03}
  .card-body p{font-size:11px;line-height:1.2;margin-top:4px}
  .card-meta{margin-top:5px}
  .card-meta b{margin-top:0}
}
@media(max-width:380px){
  .article-card{padding:7px 0}
  .card-cat{font-size:10px}
  .card-meta{margin-top:3px}
}

/* Preview fix 2026-10-27 #12 (Dade's screenshot, crying emoji): Latest titles
   STILL rendered ~1.4x the picks/side-story titles despite #11 setting 17px.
   The full cascade dump showed why: the theme carries Latest-only typography
   rules at specificity (0,2,1) — .noctryx-latest .card-body h3 {font-size:21px}
   (19px under 380px) and a matching p rule with min-height:28px — which beat
   every (0,1,1) rule in #6-#11 regardless of file order. These selectors are
   (0,3,1), strictly stronger, and pin the same values as the Editor's picks
   (title 17px/1.03, deck 11px/1.2 with min-height removed, kicker 11px/10px).
   Also pins text-size-adjust:100% on cards, since phone browsers' automatic
   text inflation targets some blocks and not others and produces exactly
   this "same CSS, bigger text" symptom. */
@media(max-width:800px){
  .article-card{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  .noctryx-latest .article-card .card-body h3,.article-grid .article-card .card-body h3{font-size:17px;line-height:1.03}
  .noctryx-latest .article-card .card-body p,.article-grid .article-card .card-body p{font-size:11px;line-height:1.2;min-height:0}
  .noctryx-latest .article-card .card-cat,.article-grid .article-card .card-cat{font-size:11px}
}
@media(max-width:380px){
  .noctryx-latest .article-card .card-cat,.article-grid .article-card .card-cat{font-size:10px}
}

/* Preview fix 2026-10-27 #13 (Dade: "Still doesn't look as tight as the editors
   pick list"): the picks are tight because ONE element carries the whole row
   (padding + min-height + border) and the text stack uses single margins.
   The cards had four looseness sources the dumps exposed: (1) Latest's grid
   still had gap:10px/12px from (0,2,0) theme rules — rows floated apart;
   (2) padding on the article AND min-height on the link stacked two boxes
   where the pick has one; (3) the title kept its base margin-bottom:7px and
   (4) the deck kept its base margin-bottom:12px (8px in Latest under 380px),
   where the pick's strong/small carry no bottom margins at all. All zeroed
   here at matching-or-better specificity; the pick rhythm now lives on the
   link alone: padding 13px 0 (7px under 380px), min-height 90px. */
@media(max-width:800px){
  .noctryx-latest .article-grid{gap:0}
  .article-card{padding:0}
  .article-card>a{padding:13px 0;min-height:90px}
  .noctryx-latest .article-card .card-body h3,.article-grid .article-card .card-body h3{margin-bottom:0;letter-spacing:0}
  .noctryx-latest .article-card .card-body p,.article-grid .article-card .card-body p{margin-bottom:0}
  .card-meta b{line-height:1}
}
@media(max-width:380px){
  .article-card>a{padding:7px 0}
}

/* AUDIT FIXES 2026-10-27 #14 (Dade: "Fix everything but SEO") — readability
   floor + accessibility pack from AUDIT-2026-10-27.md. Decorative brand
   microcopy (header tape, brand lockup) is exempt by design; everything
   informational moves to the floor: body copy 16px base, labels >=11px,
   informational text >=12px, inputs 16px. Row decks rise 11px -> 12px in
   ALL three row components at once (editor-pick, side-story, cards) so the
   lists stay matched to each other. */
body{font-size:16px}
.article-content{max-width:660px}
:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.skip-link{position:fixed;left:10px;top:-60px;z-index:300;background:var(--yellow);color:#080a0b;font-family:'Barlow Condensed',sans-serif;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:10px 16px;transition:top .15s}
.skip-link:focus{top:10px}
.article-topline{font-size:12px}
.article-edition{font-size:11px}
.article-byline span{font-size:12px}
.byline-reading span{font-size:11px}
.card-meta{font-size:12px}
.noctryx-latest .card-meta{font-size:12px}
.feature-byline{font-size:12px}
.article-cover figcaption{font-size:12px}
.footer-nav{font-size:12px}
.footer-bottom{font-size:11px}
.noctryx-footer .footer-bottom{font-size:11px}
.popular-list a{font-size:12px}
.newsletter-box p{font-size:12px}
.newsletter-box .newsletter input{font-size:16px}
.search-panel input{font-size:16px}
.article-tags a{font-size:12px}
.article-tags>span{font-size:11px}
.rail-label{font-size:11px}
.article-rail-left .rail-label{font-size:11px}
.radar-category{font-size:11px}
.radar-story small{font-size:11px}
.explore-card b{font-size:11px}
.explore-card span{font-size:12px}
.article-section-mark b{font-size:11px}
.article-next-read .section-heading>span{font-size:11px}
.noctryx-header .desktop-nav{font-size:12px}
.editor-pick small{font-size:12px}
.noctryx-latest .article-card .card-body p,.article-grid .article-card .card-body p{font-size:12px}
.noctryx-header .icon-button{width:40px;height:40px}
.article-share-links a,.article-share-links button{width:40px;height:40px}
@media(max-width:380px){
  .editor-pick b{font-size:11px}
  .noctryx-hero-grid .side-story-copy small{font-size:12px}
  .noctryx-latest .article-card .card-cat,.article-grid .article-card .card-cat{font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{transition:none!important;animation:none!important}
}

/* TYPE SCALE-UP 2026-10-27 #15 (Dade, three circled screenshots: "fonts need
   to be bigger print, everything is tiny"): the theme actually SHRINKS text
   on mobile — hero deck 14px -> 13px -> 12px, big-feature deck 13/12px,
   popular list 12px. This block scales the reading text up on mobile, and
   keeps the three row lists (side-story / editor-pick / cards) matched to
   each other at the new sizes: kickers 12px, titles 19px, decks 14px.
   Supersedes the deck/title sizes in #12/#14 where they conflict. */
.hero-copy p{font-size:17px}
@media(max-width:800px){
  .noctryx-hero-feature .hero-copy p{font-size:16px;line-height:1.45;max-width:340px}
  .big-feature-copy p{font-size:15px}
  .popular-list a{font-size:15px;padding:10px 0}
  .newsletter-box p{font-size:14px}
  .feature-byline{font-size:13px}
  .editor-pick b{font-size:12px}
  .editor-pick strong{font-size:19px}
  .editor-pick small{font-size:14px}
  .side-story-copy .eyebrow{font-size:12px}
  .side-story-copy small{font-size:14px}
  .noctryx-latest .article-card .card-cat,.article-grid .article-card .card-cat{font-size:12px}
  .noctryx-latest .article-card .card-body h3,.article-grid .article-card .card-body h3{font-size:19px}
  .noctryx-latest .article-card .card-body p,.article-grid .article-card .card-body p{font-size:14px}
  .explore-card span{font-size:13px}
}
@media(max-width:380px){
  .noctryx-hero-feature .hero-copy p{font-size:16px}
  .noctryx-hero-feature .button-yellow{font-size:14px}
  .noctryx-hero-grid .side-story-copy strong{font-size:19px}
  .noctryx-hero-grid .side-story-copy small{font-size:14px}
  .editor-pick b{font-size:12px}
  .noctryx-latest .article-card .card-cat,.article-grid .article-card .card-cat{font-size:12px}
}

/* Preview fix 2026-10-27 #16 (Dade: the line below the title in the hero
   stories is smaller than the same line in Latest Articles): by the cascade
   both decks are already 14px (#15), so the rendered difference can only be
   the phone browser's automatic text inflation, which scales some text
   blocks and not others. #12 pinned text-size-adjust:100% on cards only —
   this extends the pin to every list component so identical sizes render
   identical: side-stories, editor's picks, popular list. */
.side-story,.editor-pick,.popular-list,.side-story-copy,.editor-pick span{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* ONE ROW SYSTEM 2026-10-27 #17 (Dade: "The CSS for editors picks should be
   the same CSS for latest posts and the 3 posts below the header"): instead
   of three components with values copied between them, every row element
   across Editor's Picks (.editor-pick), Latest cards (.article-card) and the
   hero side-stories (.side-story) is now set by single grouped rules —
   same geometry, same type, same spacing, by construction. Mobile scope
   (<=800px / <=380px), where all of Dade's feedback has been; desktop keeps
   the theme's proportions. This block is now the single source of truth for
   row styling and supersedes the row values in #6-#16. */
@media(max-width:800px){
  .editor-pick,.side-story,.noctryx-hero-grid .side-story{display:grid;grid-template-columns:100px minmax(0,1fr);gap:14px;align-items:start;padding:13px 0;min-height:90px;border-bottom:1px solid var(--line)}
  .article-card>a{grid-template-columns:100px minmax(0,1fr);gap:14px;align-items:start;padding:13px 0;min-height:90px}
  .editor-pick img,.side-story img,.noctryx-hero-grid .side-story img{width:100%;height:80px;object-fit:cover;border:1px solid #343a3d}
  .editor-pick b,.side-story-copy .eyebrow,.noctryx-latest .article-card .card-cat,.article-grid .article-card .card-cat{display:block;font-size:12px;letter-spacing:1.2px;margin-bottom:3px;color:var(--yellow);font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase}
  .editor-pick strong,.side-story-copy strong,.noctryx-hero-grid .side-story-copy strong,.noctryx-latest .article-card .card-body h3,.article-grid .article-card .card-body h3{font-size:19px;line-height:1.03;font-weight:700}
  .editor-pick small,.side-story-copy small,.noctryx-hero-grid .side-story-copy small,.noctryx-latest .article-card .card-body p,.article-grid .article-card .card-body p{display:block;font-size:14px;line-height:1.3;color:#c8cbcb;margin-top:4px}
  .editor-pick i,.side-story-copy i,.card-meta b{display:block;font-size:16px;line-height:1;margin-top:5px;color:var(--yellow);font-style:normal}
}
@media(max-width:380px){
  .editor-pick,.side-story,.noctryx-hero-grid .side-story{grid-template-columns:86px minmax(0,1fr);gap:11px;padding:7px 0}
  .article-card>a{grid-template-columns:86px minmax(0,1fr);gap:11px;padding:7px 0}
  .editor-pick img,.side-story img,.noctryx-hero-grid .side-story img{height:76px}
}

/* Preview tweak 2026-10-27 #18 (Dade, circled the big feature deck:
   "Slightly heavier weight"): the In Depth feature card's deck paragraph
   goes from Barlow 400 to 500 (a loaded weight, no synthesis). Scoped to
   that card's deck only. */
.big-feature-copy p{font-weight:500}

/* Preview tweak 2026-10-27 #19 (Dade, circled the article table of contents:
   "Heavier weight"): the IN THIS REPORT item links go to Barlow 600. The
   theme set no weight on them (inherited 400 at 13px). */
.toc-body nav#TableOfContents li,.toc-body nav#TableOfContents a{font-weight:700;font-size:16px}

/* LOGO 2026-10-28 #20 (Dade picked option D, the DS monogram, as the site
   icon only — "don't put the icon next to the name"; the name stands alone
   on ONE line in header and footer as a yellow glitch wordmark): the bolt
   mark and TM are removed from both lockups, the footer word goes yellow
   (was off-white), and the glitch is built from two clipped copies of the
   word shifted sideways, so the tear is real text at any size. The DS
   monogram from option D is the favicon / apple-touch icon, linked in
   baseof. */
.brand-word,.footer-word{white-space:nowrap}
.footer-word{color:var(--yellow)}
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;color:var(--yellow);pointer-events:none}
.glitch::before{transform:translateX(-.05em);clip-path:inset(16% 0 60% 0)}
.glitch::after{transform:translateX(.05em);clip-path:inset(64% 0 6% 0)}

/* LOGO MATCH 2026-10-28 #21 (Dade: "Header site name looks bad, doesn't look
   like the footer, and footer could be bigger"): the header brand carried
   line-height:.82 and letter-spacing:-1.8px from the theme lockup, which
   squishes the glitch slices (clip percentages resolve against the shorter
   box) — the footer word has neither. Both words now share one spec:
   letter-spacing:-1px, line-height:1, same glitch. Footer word grows
   29px -> 44px (36px on small screens). */
.brand-word,.footer-word{letter-spacing:-1px;line-height:1}
.footer-word{font-size:44px}
@media(max-width:800px){
  .footer-word{font-size:36px}
}

/* NAMEPLATE 2026-10-28 #22 (Dade picked wordmark option A, the nameplate
   bar): the site name is now black heavy letters on a solid caution-yellow
   bar, one line, in header and footer. This replaces the glitch treatment
   from #20/#21 — the clipped offset copies are switched off, and the bar
   padding is in ems so it scales with each lockup's size. */
.brand-word,.footer-word{background:var(--yellow);color:#050708;padding:.05em .26em .09em}
.glitch::before,.glitch::after{content:none}

/* HEADER TAPE 2026-10-28 #23 (Dade): the rotated "Better prompts. Bigger
   possibilities." tape strip in the header is hidden on mobile. Desktop
   keeps it until the replacement tagline is picked. */
@media(max-width:800px){
  .header-tape{display:none}
}

/* MOBILE MENU UNDERLINE 2026-10-28 #24 (Dade's screenshot: in the mobile
   menu the yellow active underline crosses THROUGH the item name instead of
   sitting below it like desktop): cause is a stacked theme layer setting
   the link underline to bottom:20px at specificity (0,3,2), which lands
   mid-glyph inside the short mobile rows. Fix: at <=800px the link-level
   underline is switched off and the underline moves onto a new .nav-word
   span (added to the header partial) that wraps exactly the word, so the
   line spans the word and hangs 7px below it — the desktop behavior,
   reproduced. Desktop is untouched. */
@media(max-width:800px){
  .noctryx-header .desktop-nav a.active:after,.noctryx-header .desktop-nav a:hover:after{content:none}
  .desktop-nav a.active .nav-word{position:relative}
  .desktop-nav a.active .nav-word:after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:3px;background:var(--yellow)}
}

/* MOBILE MENU SIZE 2026-10-28 #25 (Dade: "Mobile menu items font size
   increase"): the stacked theme layers set the nav at 11-12px, which the
   mobile menu inherits. At <=800px the menu items go to 18px. The
   .nav-word underline from #24 rides along (its -7px offset still lands
   inside the row's bottom padding at the larger size). */
@media(max-width:800px){
  .noctryx-header .desktop-nav{font-size:18px}
}

/* ARTICLE RAIL ON MOBILE 2026-10-28 #26 (Dade circled the READING TIME /
   FILE NO. labels crammed at the end of the mobile share row: "Not sure
   why this is there especially on mobile"): on desktop those stats live
   in the left rail where they belong; on mobile the rail collapses into
   the share row and the two stat blocks squeeze in as orphaned labels
   with their values wrapped out of sight. At <=800px the reading time,
   file number, and the rail rules are hidden — the hero byline already
   shows the minutes on mobile, so nothing is lost. The share row keeps
   TRANSMISSION + buttons + the tape strip. Same pass: the file number
   prefix in single.html went from NX- (a NOCTRYX leftover) to DS-. */
@media(max-width:800px){
  .rail-sticky .rail-big-number,.rail-sticky .rail-file,.rail-sticky .rail-rule{display:none}
  .rail-sticky .rail-label:nth-of-type(2),.rail-sticky .rail-label:nth-of-type(3){display:none}
}

/* CHARTS 2026-10-28 #27: mobile friendly bar charts for comparison posts,
   rendered by the chart shortcode (site/layouts/shortcodes/chart.html).
   Fluid by construction: the label and value share one row, the bar is a
   full width track under it, so nothing squeezes or scrolls sideways on a
   phone. Yellow bars are the headline series; .alt is a muted second
   series (frame generation, rivals). */
.ds-chart{background:var(--panel2);border:1px solid var(--line);padding:16px 16px 6px;margin:22px 0}
.ds-chart-title{font-family:'Barlow Condensed',sans-serif;font-size:19px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--ink);margin:0 0 12px}
.ds-bar{margin:0 0 13px}
.ds-bar-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.ds-bar-label{font-size:14px;font-weight:600;color:var(--ink)}
.ds-bar-value{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:700;color:var(--yellow);white-space:nowrap}
.ds-bar-value.alt{color:#9aa1a6}
.ds-bar-track{height:10px;background:#26292c;margin-top:5px}
.ds-bar-fill{display:block;height:100%;background:var(--yellow)}
.ds-bar-fill.alt{background:#8a9095}
.ds-chart-note{font-size:12.5px;line-height:1.5;color:var(--muted);margin:2px 0 10px}

/* ARTICLE TOPLINE ON MOBILE 2026-10-28 #28 (Dade, on the RTX Spark
   article: the topline strip is "a bit redundant" on mobile, "fine for
   desktop"): the strip repeats the category the hero shows as a chip
   and a sticker, and the reading time the hero byline shows again two
   rows later. Hidden at <=800px; desktop keeps it. */
@media(max-width:800px){
  .article-topline{display:none}
}

/* FOOTER TAGLINE LEGIBILITY 2026-10-28 #29 (Dade: the footer tagline
   beside the wordmark "its hard to read can it be increased and maybe
   bolder"): the theme set it at 7px, which is type you read with a
   magnifier. Raised to 12px at weight 700 with a brighter ink. */
.footer-brand small{font-size:11px;font-weight:700;line-height:1.5;color:#eceeed}

/* FOOTER LOCKUP SIDE BY SIDE 2026-10-28 #30 (Dade: "Still not side by
   side"): the theme sets flex-wrap:wrap on the footer brand row, so the
   tagline drops under the nameplate on phones — and Android text
   autosizing was inflating the 11px tagline toward 15px, guaranteeing
   the wrap. At <=800px: no wrap, autosizing pinned off for the tagline,
   tighter divider spacing, and the footer word eased 36px -> 34px so
   the pair shares one line with room to spare. */
@media(max-width:800px){
  .noctryx-footer .footer-brand{flex-wrap:nowrap}
  .noctryx-footer .footer-brand small{flex:none;margin-left:0;padding-left:10px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
  .noctryx-footer .footer-word{font-size:34px}
}

/* FOOTER MENU SIZE 2026-10-28 #31 (Dade asked what size the footer
   menu is, then: "can you make it 11px"): the base theme said 11px but
   a later stacked layer overrode it to 12px. Set to 11px for real, and
   the autosizing pin applied so Android renders an honest 11px. */
.footer-nav{font-size:13px;-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* DARK HAUS CREDIT 2026-10-28 #32 (Dade: "We need a designed by Dark
   Haus Studio link in footer"): fleet standard credit, below the
   copyright row, above the hazard tape. Studio name links to
   https://darkhaus.studio. */
.footer-credit{font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin-top:0}
.footer-credit a{color:var(--yellow);text-decoration:none}

/* CODE BLOCKS WRAP 2026-10-28 #33 (Dade, on the Hermes tutorial: "Code
   box needs a tweak cause I can't see the entire line it can wrap for
   sure and shouldn't scroll"): Hugo's Chroma pre had no wrap rules, so
   long commands ran off the phone screen. Code now wraps, including
   inside long unbroken URLs, and never scrolls sideways. */
.highlight pre{white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;overflow-x:hidden}
.highlight pre code{white-space:inherit;word-break:inherit;overflow-wrap:inherit}

/* === PINKY FIX #34: desktop 3 column balance + newsletter band + impact banner (2026-10-28) === */
.post-band{padding:26px clamp(24px,3.6vw,54px) 30px;background:#07090a}
.post-band .newsletter-box{border:1px solid var(--line);background:#0b0e10;padding:18px}
.post-band .newsletter-box{border-bottom:1px solid var(--line)}
.impact-banner{margin-top:22px;background:var(--yellow);color:#080a0b;font-family:'Barlow Condensed',sans-serif;font-weight:900;text-transform:uppercase;text-align:center;padding:16px 20px;font-size:clamp(20px,2.6vw,34px);line-height:1.05}
.impact-banner span{margin-left:.35em}
@media(min-width:801px){
  .editors-column{display:flex;flex-direction:column}
  .editors-column .editor-pick{flex:1}
  .popular-column{display:flex;flex-direction:column}
  .popular-list{display:flex;flex-direction:column;flex:1}
  .popular-list a{flex:1;align-content:center}
  .post-band .newsletter-box{max-width:33.333%;margin:0 auto}
}
@media(max-width:800px){
  .post-band{padding:18px}
  .impact-banner{font-size:19px;padding:13px 12px}
}

/* === PINKY FIX #35: editorial band holds 3 across on desktop (2026-10-28) === */
@media(min-width:701px){
  .editorial-band{grid-template-columns:minmax(180px,.92fr) minmax(240px,1.12fr) minmax(180px,.88fr)}
  .editorial-band .editors-column{grid-column:1}
  .editorial-band .big-feature{grid-column:2}
  .editorial-band .popular-column{grid-column:3}
}

/* === PINKY FIX #36: editorial band is TWO columns + popular band (2026-10-28, Dade's call) === */
.editorial-band{grid-template-columns:minmax(240px,.9fr) minmax(300px,1.35fr)}
.editorial-band .editors-column{grid-column:1}
.editorial-band .big-feature{grid-column:2}
.popular-band{padding:20px clamp(24px,3.6vw,54px);background:#07090a;border-bottom:1px solid var(--line)}
.popular-band .popular-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;padding-top:0}
.popular-band .popular-list h2{grid-column:1/-1}
.popular-band .popular-list a{display:block;border:1px solid var(--line);padding:10px 12px}
.popular-band .popular-list a b{display:block;margin-bottom:5px}
@media(max-width:900px){.popular-band .popular-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){
  .editorial-band{grid-template-columns:1fr}
  .editorial-band .editors-column,.editorial-band .big-feature{grid-column:auto}
  .popular-band{padding:18px}
  .popular-band .popular-list{display:block}
  .popular-band .popular-list a{display:grid;border:0;border-bottom:1px solid var(--line);padding:7px 0}
}

/* === PINKY FIX #37: band ratio mirrors the hero, reversed (2026-10-28) === */
.editorial-band{grid-template-columns:minmax(260px,.92fr) minmax(0,2.08fr)}

/* === PINKY FIX #38: Popular back in the band (undo of the five across band) === */
.editorial-band{grid-template-columns:minmax(230px,.92fr) minmax(0,1.9fr) minmax(210px,.8fr)}
.editorial-band .popular-column{grid-column:3}
@media(max-width:560px){.editorial-band .popular-column{grid-column:auto}}

/* === PINKY FIX #39: Popular list back to its original compact rows (2026-10-28) === */
@media(min-width:801px){
  .popular-column{display:block}
  .popular-list{display:block}
  .popular-list a{display:grid;flex:none}
}

/* === PINKY FIX #40: newsletter sits under Popular in the right column (2026-10-28) === */
.popular-column .newsletter-box{border-bottom:0;border-top:1px solid var(--line);margin-top:14px;padding-top:14px;padding-bottom:0}

/* === PINKY FIX #41: impact banner sits under Latest articles (2026-10-28) === */
.banner-band{padding:0 clamp(24px,3.6vw,54px) 20px;background:#07090a}
.banner-band .impact-banner{margin-top:0}
@media(max-width:800px){.banner-band{padding:0 18px 18px}}

/* === PINKY FIX #42: banner gets its angled grungy sticker style back (2026-10-28) === */
.banner-band{padding-top:16px;padding-bottom:26px}
.impact-banner{transform:rotate(-1.3deg);clip-path:polygon(1% 14%,99% 0,100% 86%,0 100%);margin:8px 4px 4px}
@media(max-width:800px){.banner-band{padding-top:14px;padding-bottom:22px}}

/* === PINKY FIX #43: band stacks to one column on mobile (2026-10-28) === */
@media(max-width:1100px){
  .editorial-band{grid-template-columns:1fr 1fr}
  .editorial-band .big-feature{grid-column:1/-1}
  .editorial-band .popular-column{grid-column:auto}
}
@media(max-width:700px){
  .editorial-band{grid-template-columns:1fr}
  .editorial-band .editors-column,.editorial-band .big-feature,.editorial-band .popular-column{grid-column:auto}
}

/* === PINKY FIX #44: newsletter box gets the radio artwork backdrop (2026-10-28) === */
.popular-column .newsletter-box{position:relative;border:1px solid var(--line);min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;padding:18px 16px;background:linear-gradient(rgba(5,6,7,.80),rgba(5,6,7,.92)),url('/images/newsletter-radio.jpg') center/cover no-repeat}

/* === PINKY FIX #45: card meta is just the arrow, bottom left (2026-10-28) === */
.article-card .card-meta{justify-content:flex-start}

/* === PINKY FIX #46: the arrow itself loses its auto left margin (2026-10-28) === */
.article-card .card-meta b{margin-left:0}

/* === PINKY FIX #47: card titles reserve two lines so excerpts align (2026-10-28) === */
@media(min-width:801px){
  .noctryx-latest .article-card .card-body h3,.article-grid .article-card .card-body h3{min-height:2.06em}
}

/* === PINKY FIX #48: footer tagline matches the header tagline (2026-10-28) === */
.noctryx-footer .footer-brand small{font-size:9px;letter-spacing:1.8px;color:#d6d7d5}

/* === PINKY FIX #49: footer tagline weight matches the header too (2026-10-28) === */
.noctryx-footer .footer-brand small{font-size:9px;font-weight:400}

/* === PINKY FIX #50: header and footer taglines both 11px bold (2026-10-28) === */
.brand-tagline{font-size:11px;font-weight:700}
.noctryx-footer .footer-brand small{font-size:11px;font-weight:700}