/* ============================================================
   DFT ARTICLE TEMPLATE  (LYNX)
   Loaded only on single posts, after master.css.
   Everything is scoped so it cannot leak into the rest of the theme.
   Fonts (Akshar, DotGothic16, SF Pro Text) are already self-hosted
   and loaded by master.css, so we only reference the families here.
   ============================================================ */
:root {
   --dft-black: #0c0c0c;
   --dft-red: #ee312f;
   --dft-red-bright: #f31d1d;
   --dft-red-dark: #990909;
   --dft-ink: #0e0e0e;
   --dft-hair: rgba(238, 49, 47, .28);
   --dft-body-font: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
   --dft-display: "Akshar", sans-serif;
   --dft-mono: "DotGothic16", monospace;
}

/* progress bar sits above the theme's fixed header (z-index 1000) */
.dft-progress {
   position: fixed;
   top: 0;
   left: 0;
   height: 4px;
   width: 0;
   z-index: 1001;
   background: linear-gradient(90deg, var(--dft-red-dark), var(--dft-red), #ff9e9e);
   box-shadow: 0 0 12px var(--dft-red);
   transition: width .1s linear
}

/* mobile overflow guard: clip page-level horizontal overflow. overflow:clip
   does NOT create a scroll container, so the desktop sticky TOC keeps working
   (unlike overflow:hidden, which would break it). */
html {
   overflow-x: clip
}

.dft-article {
   max-width: 1180px;
   margin: 0 auto;
   padding: 40px 24px 0;
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 0
}

.dft-main {
   min-width: 0
}

@media(min-width:1000px) {
   .dft-article {
      grid-template-columns: minmax(0, 1fr) 260px;
      gap: 60px;
      padding-top: 60px
   }
}

.dft-head {
   margin-bottom: 34px
}

.dft-crumb {
   font-family: var(--dft-mono);
   font-size: 13px;
   letter-spacing: 1px;
   margin-bottom: 22px;
   opacity: .85;
   color: var(--dft-red)
}

.dft-crumb a {
   color: var(--dft-red);
   text-decoration: none;
   transition: .25s
}

.dft-crumb a:hover {
   color: #fff
}

.dft-crumb span {
   margin: 0 8px;
   opacity: .6
}

.dft-kicker {
   font-family: var(--dft-mono);
   font-size: 13px;
   letter-spacing: 3px;
   text-transform: uppercase;
   color: var(--dft-red);
   margin-bottom: 14px;
   display: inline-block
}

.dft-title {
   font-family: var(--dft-display);
   font-weight: 700;
   text-transform: uppercase;
   line-height: .98;
   font-size: clamp(34px, 6vw, 68px);
   color: var(--dft-ink);
   margin: 0;
   text-shadow: -1px -1px 0 var(--dft-red), 1px -1px 0 var(--dft-red), -1px 1px 0 var(--dft-red), 1px 1px 0 var(--dft-red), -2px -2px 0 var(--dft-red), 2px -2px 0 var(--dft-red), -2px 2px 0 var(--dft-red), 2px 2px 0 var(--dft-red)
}

.dft-meta {
   display: flex;
   flex-wrap: wrap;
   gap: 22px;
   align-items: center;
   margin-top: 24px;
   font-family: var(--dft-mono);
   font-size: 13px;
   letter-spacing: 1px;
   text-transform: uppercase;
   color: var(--dft-red)
}

.dft-meta .m {
   display: flex;
   align-items: center;
   gap: 8px
}

.dft-meta .dot {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: var(--dft-red);
   box-shadow: 0 0 8px var(--dft-red)
}

.dft-hero-img {
   border: 2px solid var(--dft-red);
   border-radius: 10px;
   overflow: hidden;
   margin: 30px 0 40px;
   position: relative
}

.dft-hero-img::after {
   content: "";
   position: absolute;
   inset: 0;
   background: radial-gradient(80% 80% at 50% 60%, transparent 45%, rgba(12, 12, 12, .9) 100%);
   pointer-events: none
}

.dft-hero-img img {
   width: 100%;
   aspect-ratio: 16/8;
   object-fit: cover;
   filter: grayscale(.15) contrast(1.05)
}

/* TL;DR / transmission block */
.dft-tldr {
   border: 1px solid var(--dft-red);
   border-radius: 12px;
   background: linear-gradient(180deg, rgba(238, 49, 47, .08), transparent);
   padding: 22px 24px;
   margin-bottom: 44px;
   position: relative;
   overflow: hidden
}

.dft-tldr::before {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   bottom: 0;
   width: 4px;
   background: var(--dft-red);
   box-shadow: 0 0 12px var(--dft-red)
}

.dft-tldr .tag {
   font-family: var(--dft-mono);
   font-size: 12px;
   letter-spacing: 2px;
   color: var(--dft-red);
   display: block;
   margin-bottom: 10px
}

.dft-tldr .tag .blink {
   animation: dftblink 1.1s steps(1) infinite
}

@keyframes dftblink {
   50% {
      opacity: 0
   }
}

.dft-tldr p {
   font-family: var(--dft-body-font);
   font-size: 19px;
   line-height: 1.5;
   color: #fff;
   font-weight: 500;
   margin: 0
}

.dft-tldr strong {
   color: var(--dft-red)
}

/* ============================================================
   body typography (the_content)
   Vertical rhythm note: direct children are reset to margin:0, then
   the flow rule spaces every subsequent child. Element rules below
   (p, ul, ol) no longer set margin:0, which previously out-ranked the
   flow rule on specificity and collapsed paragraph + list spacing.
   ============================================================ */
.dft-body {
   font-family: var(--dft-body-font);
   font-size: 18px;
   line-height: 1.72;
   color: #fff;
   font-weight: 400;
   max-width: 70ch;
   min-width: 0;
   overflow-wrap: break-word
}

.dft-body>* {
   margin: 0
}

.dft-body>*+* {
   margin-top: 1.5em
}

.dft-body>*:first-child {
   margin-top: 0
}

.dft-body p+p {
   margin-top: 1.5em
}

.dft-body h2 {
   font-family: var(--dft-display);
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: var(--dft-red);
   font-size: clamp(26px, 3.4vw, 40px);
   line-height: 1.05;
   margin-top: 1.9em;
   scroll-margin-top: 110px
}

.dft-body h3 {
   font-family: var(--dft-display);
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: var(--dft-red);
   font-size: clamp(20px, 2.4vw, 27px);
   line-height: 1.1;
   margin-top: 1.5em
}

.dft-body p {
   color: #e9e9e9
}

.dft-body a {
   color: var(--dft-red);
   text-decoration: none;
   border-bottom: 1px solid var(--dft-red);
   transition: .2s
}

.dft-body a:hover {
   background: var(--dft-red);
   color: #0c0c0c
}

.dft-body strong {
   color: #fff;
   font-weight: 600
}

.dft-body ul,
.dft-body ol {
   padding-left: 1.4em;
   color: #e9e9e9;
   font-family: var(--dft-body-font) !important;
   font-size: 18px !important;
   line-height: 1.72 !important
}

.dft-body li {
   margin-top: .5em;
   color: #e9e9e9;
   font-family: var(--dft-body-font) !important;
   font-size: 18px !important;
   line-height: 1.72 !important
}

/* pasted content (e.g. Google Docs) often wraps li text in a styled span;
   force those inline font styles back to the body font. color/weight left
   alone so links and bold still render normally. */
.dft-body li * {
   font-family: var(--dft-body-font) !important;
   font-size: 18px !important;
   line-height: 1.72 !important
}

.dft-body li::marker {
   color: var(--dft-red)
}

.dft-body ul ul,
.dft-body ul ol,
.dft-body ol ol,
.dft-body ol ul {
   margin-top: .5em
}

.dft-body blockquote {
   border: 0;
   border-left: 4px solid var(--dft-red);
   padding: 6px 0 6px 22px;
   margin: 1.8em 0;
   font-family: var(--dft-display);
   font-weight: 500;
   text-transform: uppercase;
   line-height: 1.15;
   font-size: clamp(22px, 3vw, 30px);
   color: var(--dft-red)
}

/* images: centered by default, with breathing room above and below.
   figure-wrapped (block editor) and bare (classic) images both handled. */
.dft-body img {
   display: block;
   max-width: 100%;
   height: auto;
   margin: 2em auto;
   border-radius: 8px;
   border: 1px solid var(--dft-hair)
}

.dft-body figure {
   margin: 2em 0;
   text-align: center
}

.dft-body figure img {
   margin: 0 auto
}

.dft-body figcaption {
   font-family: var(--dft-mono);
   font-size: 12px;
   letter-spacing: 1px;
   color: rgba(255, 255, 255, .55);
   text-align: center;
   margin-top: 10px
}

.dft-body .aligncenter {
   margin-left: auto;
   margin-right: auto
}

.dft-body .alignleft {
   float: left;
   margin: .5em 1.6em 1em 0;
   max-width: 50%
}

.dft-body .alignright {
   float: right;
   margin: .5em 0 1em 1.6em;
   max-width: 50%
}

.dft-body .alignnone {
   margin-left: auto;
   margin-right: auto
}

.dft-body::after {
   content: "";
   display: table;
   clear: both
}

/* wide tables scroll inside their own box instead of stretching the page */
.dft-body table {
   display: block;
   width: max-content;
   max-width: 100%;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch
}

.dft-body .wp-block-table {
   max-width: 100%;
   overflow-x: auto
}

/* TOC */
.dft-toc {
   align-self: start
}

@media(min-width:1000px) {
   .dft-toc {
      position: sticky;
      top: 110px
   }
}

.dft-toc .toc-inner {
   border: 1px solid var(--dft-hair);
   border-radius: 12px;
   padding: 20px
}

.dft-toc h4 {
   font-family: var(--dft-mono);
   font-size: 12px;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: var(--dft-red);
   margin-bottom: 14px
}

.dft-toc ol {
   list-style: none;
   margin: 0;
   padding: 0
}

.dft-toc li {
   margin: 0 0 3px
}

.dft-toc a {
   display: block;
   color: rgba(255, 255, 255, .6);
   text-decoration: none;
   font-size: 14px;
   line-height: 1.35;
   padding: 7px 10px;
   border-radius: 7px;
   border-left: 2px solid transparent;
   transition: .2s
}

.dft-toc a:hover {
   color: #fff;
   background: rgba(238, 49, 47, .08)
}

.dft-toc a.active {
   color: var(--dft-red);
   border-left-color: var(--dft-red);
   background: rgba(238, 49, 47, .1)
}

.dft-toc .share {
   margin-top: 18px;
   display: flex;
   gap: 8px;
   flex-wrap: wrap
}

.dft-toc .share a {
   flex: 0 0 auto;
   border: 1px solid var(--dft-red);
   border-radius: 50px;
   padding: 7px 14px;
   color: var(--dft-red);
   font-family: var(--dft-mono);
   font-size: 11px;
   letter-spacing: 1px;
   text-decoration: none;
   transition: .2s;
   cursor: pointer
}

.dft-toc .share a:hover {
   background: var(--dft-red);
   color: #0c0c0c
}

.dft-toc-mobile {
   margin-bottom: 34px;
   border: 1px solid var(--dft-red);
   border-radius: 12px;
   overflow: hidden
}

.dft-toc-mobile summary {
   font-family: var(--dft-mono);
   font-size: 13px;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: var(--dft-red);
   padding: 16px 20px;
   cursor: pointer;
   list-style: none
}

.dft-toc-mobile summary::-webkit-details-marker {
   display: none
}

.dft-toc-mobile ol {
   list-style: none;
   padding: 0 20px 16px;
   margin: 0
}

.dft-toc-mobile a {
   color: rgba(255, 255, 255, .7);
   text-decoration: none;
   display: block;
   padding: 8px 0;
   border-top: 1px solid var(--dft-hair);
   font-size: 15px
}

@media(min-width:1000px) {
   .dft-toc-mobile {
      display: none
   }
}

/* FAQ (namespaced off .accordion-entry so global.js does not bind it) */
.dft-faq {
   margin-top: 64px
}

.dft-faq h2 {
   font-family: var(--dft-display);
   font-weight: 700;
   text-transform: uppercase;
   color: var(--dft-red);
   font-size: clamp(28px, 4vw, 46px);
   margin-bottom: 26px;
   text-align: center;
   letter-spacing: 1px
}

.dft-faq .q {
   border: 1px solid var(--dft-red);
   border-radius: 12px;
   margin-bottom: 14px;
   overflow: hidden;
   background: rgba(238, 49, 47, .03)
}

.dft-faq .q button {
   width: 100%;
   text-align: left;
   background: none;
   border: 0;
   cursor: pointer;
   padding: 20px 22px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   font-family: var(--dft-display);
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: .5px;
   color: var(--dft-red);
   font-size: clamp(16px, 2.2vw, 21px)
}

.dft-faq .q .ico {
   flex: 0 0 auto;
   width: 22px;
   height: 22px;
   position: relative;
   transition: transform .3s
}

.dft-faq .q .ico::before,
.dft-faq .q .ico::after {
   content: "";
   position: absolute;
   background: var(--dft-red);
   border-radius: 2px
}

.dft-faq .q .ico::before {
   top: 10px;
   left: 0;
   width: 22px;
   height: 2px
}

.dft-faq .q .ico::after {
   left: 10px;
   top: 0;
   height: 22px;
   width: 2px;
   transition: transform .3s
}

.dft-faq .q.open .ico::after {
   transform: scaleY(0)
}

.dft-faq .q .ans {
   max-height: 0;
   overflow: hidden;
   transition: max-height .35s ease
}

.dft-faq .q .ans p {
   padding: 0 22px 22px;
   color: #e9e9e9;
   font-size: 16px;
   line-height: 1.6;
   margin: 0
}

/* author */
.dft-author {
   margin-top: 56px;
   border: 1px solid var(--dft-hair);
   border-radius: 14px;
   padding: 24px;
   display: flex;
   gap: 20px;
   align-items: center;
   flex-wrap: wrap
}

.dft-author .ava {
   width: 64px;
   height: 64px;
   border-radius: 50%;
   border: 2px solid var(--dft-red);
   flex: 0 0 auto;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: var(--dft-display);
   font-weight: 700;
   font-size: 26px;
   color: var(--dft-red)
}

.dft-author .who .n {
   font-family: var(--dft-display);
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: #fff;
   font-size: 20px
}

.dft-author .who .r {
   font-family: var(--dft-mono);
   font-size: 12px;
   letter-spacing: 1px;
   color: var(--dft-red);
   margin: 4px 0 8px
}

.dft-author .who p {
   color: rgba(255, 255, 255, .7);
   font-size: 15px;
   line-height: 1.5;
   max-width: 60ch;
   margin: 0
}

/* CTA */
.dft-cta {
   margin: 56px 0 20px;
   border: 2px solid var(--dft-red);
   border-radius: 16px;
   padding: 38px 28px;
   text-align: center;
   position: relative;
   overflow: hidden
}

.dft-cta::before {
   content: "";
   position: absolute;
   inset: 0;
   background: radial-gradient(60% 120% at 50% 0%, rgba(238, 49, 47, .14), transparent);
   pointer-events: none
}

.dft-cta h3 {
   font-family: var(--dft-display);
   font-weight: 700;
   text-transform: uppercase;
   color: var(--dft-red);
   font-size: clamp(24px, 4vw, 40px);
   line-height: 1;
   margin-bottom: 12px
}

.dft-cta p {
   color: rgba(255, 255, 255, .75);
   margin-bottom: 22px;
   font-size: 16px
}

.dft-cta a {
   display: inline-block;
   background: var(--dft-red);
   color: #0c0c0c;
   text-decoration: none;
   font-family: var(--dft-display);
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 2px;
   font-size: 20px;
   padding: 14px 40px;
   border-radius: 60px;
   outline: 2px solid var(--dft-red-bright);
   outline-offset: 4px;
   transition: .25s
}

.dft-cta a:hover {
   background: #0c0c0c;
   color: var(--dft-red)
}

/* product cards */
.dft-prod {
   border: 2px solid var(--dft-red);
   border-radius: 14px;
   overflow: hidden;
   text-decoration: none;
   display: flex;
   flex-direction: column;
   background: var(--dft-black);
   transition: .25s
}

.dft-prod:hover {
   background: rgba(238, 49, 47, .1);
   transform: translateY(-3px)
}

.dft-prod .cap {
   aspect-ratio: 4/3;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   padding: 12px;
   background: radial-gradient(120% 120% at 30% 10%, rgba(238, 49, 47, .35), transparent 60%), linear-gradient(160deg, #161616, #0c0c0c);
   border-bottom: 2px solid var(--dft-red)
}

.dft-prod .cap img {
   max-width: 100%;
   max-height: 100%;
   width: auto;
   margin: 0 auto;
   border: 0;
   border-radius: 0
}

.dft-prod .info {
   padding: 13px 15px 15px;
   display: flex;
   flex-direction: column;
   gap: 6px
}

.dft-prod .tier {
   font-family: var(--dft-mono);
   font-size: 11px;
   letter-spacing: 1px;
   color: rgba(255, 255, 255, .55)
}

.dft-prod .nm {
   font-family: var(--dft-display);
   font-weight: 600;
   text-transform: uppercase;
   color: #fff;
   font-size: 18px;
   line-height: 1
}

.dft-prod .buy {
   margin-top: 4px;
   font-family: var(--dft-display);
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: #0c0c0c;
   background: var(--dft-red);
   text-align: center;
   padding: 9px;
   border-radius: 40px;
   font-size: 13px;
   transition: .2s
}

.dft-prod:hover .buy {
   background: #fff
}

.dft-featured {
   border: 1px solid var(--dft-red);
   border-radius: 14px;
   padding: 22px;
   margin: 2.6em 0 0;
   background: linear-gradient(180deg, rgba(238, 49, 47, .07), transparent)
}

.dft-featured .lbl {
   font-family: var(--dft-mono);
   font-size: 12px;
   letter-spacing: 2px;
   color: var(--dft-red);
   display: block;
   margin-bottom: 16px
}

.dft-featured .pair {
   display: grid;
   gap: 14px;
   grid-template-columns: 1fr
}

@media(min-width:560px) {
   .dft-featured .pair {
      grid-template-columns: 1fr 1fr
   }
}

/* related */
.dft-related {
   max-width: 1180px;
   margin: 20px auto 0;
   padding: 0 24px
}

.dft-related h4 {
   font-family: var(--dft-mono);
   font-size: 13px;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: var(--dft-red);
   margin-bottom: 20px;
   display: flex;
   align-items: center;
   gap: 10px
}

.dft-related h4::before {
   content: "";
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--dft-red);
   box-shadow: 0 0 8px var(--dft-red)
}

.dft-related .bubbles {
   display: grid;
   gap: 16px;
   grid-template-columns: 1fr
}

@media(min-width:700px) {
   .dft-related .bubbles {
      grid-template-columns: repeat(3, 1fr)
   }
}

.dft-related a {
   text-decoration: none;
   border: 2px solid var(--dft-red);
   border-radius: 16px 16px 16px 4px;
   padding: 18px 20px;
   color: #fff;
   display: block;
   transition: .25s;
   background: rgba(238, 49, 47, .04)
}

.dft-related a:hover {
   background: rgba(238, 49, 47, .12);
   transform: translateY(-3px)
}

.dft-related .cat {
   font-family: var(--dft-mono);
   font-size: 11px;
   letter-spacing: 1px;
   color: var(--dft-red);
   display: block;
   margin-bottom: 8px
}

.dft-related .t {
   font-family: var(--dft-display);
   font-weight: 600;
   text-transform: uppercase;
   line-height: 1.05;
   font-size: 19px
}

/* shop strip: carousel on mobile, grid on desktop */
.dft-shop {
   max-width: 1180px;
   margin: 44px auto 0;
   padding: 0 24px
}

.dft-shop h4 {
   font-family: var(--dft-mono);
   font-size: 13px;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: var(--dft-red);
   margin-bottom: 20px;
   display: flex;
   align-items: center;
   gap: 10px
}

.dft-shop h4::before {
   content: "";
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--dft-red);
   box-shadow: 0 0 8px var(--dft-red)
}

.dft-shop .strip {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 16px
}

@media(min-width:760px) {
   .dft-shop .strip {
      grid-template-columns: repeat(3, 1fr)
   }
}

.dft-shop .more {
   margin: 24px 0 72px;
   text-align: center
}

.dft-shop .more a {
   font-family: var(--dft-display);
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 2px;
   color: var(--dft-red);
   text-decoration: none;
   border: 2px solid var(--dft-red);
   border-radius: 50px;
   padding: 12px 34px;
   display: inline-block;
   transition: .2s
}

.dft-shop .more a:hover {
   background: var(--dft-red);
   color: #0c0c0c
}

/* reveal on scroll */
.reveal {
   opacity: 0;
   transform: translateY(22px);
   transition: opacity .6s ease, transform .6s ease
}

.reveal.in {
   opacity: 1;
   transform: none
}

@media (prefers-reduced-motion:reduce) {
   .reveal {
      opacity: 1;
      transform: none;
      transition: none
   }

   .dft-progress {
      transition: none
   }
}

.dft-article :focus-visible,
.dft-related a:focus-visible,
.dft-shop a:focus-visible {
   outline: 2px solid #fff;
   outline-offset: 3px
}