/*
Theme Name: TrueLinePay Journal
Theme URI: https://truelinepay.com/blog/
Author: TrueLinePay
Author URI: https://truelinepay.com/
Description: The TrueLinePay blog theme. Deep-space background, acid-lime accents, Anton display type, an energy-particle backdrop and a slide-in menu drawer — matching truelinepay.com.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: truelinepay
Tags: blog, dark, one-column, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ============ TOKENS ============ */
:root{
  --bg:#030014; --bg-soft:#0A0820; --bg-softer:#120F2E;
  --ink:#FFFFFF; --body:rgba(255,255,255,.74); --muted:rgba(255,255,255,.5);
  --line:rgba(255,255,255,.1); --line2:rgba(255,255,255,.22);
  --accent:#CCFF00; --on-accent:#030014; --energy:#88AAFF; --drawer:#333333;
  --f:'Space Grotesk','Inter',system-ui,sans-serif;
  --f-display:'Anton','Impact','Arial Black',sans-serif;
  --f-mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;
  --wrap:1320px; --read:740px;
  --gutter:max(20px,calc((100% - var(--wrap)) / 2));
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ============ BASE ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg);scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;font-family:var(--f);font-size:17px;line-height:1.65;color:var(--body);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.drawer-open{overflow:hidden}
h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--f-display);font-weight:400;line-height:.95;letter-spacing:.005em;text-transform:uppercase;color:var(--ink)}
p{margin:0}
a{color:inherit;text-decoration:none}
img,svg,video{max-width:100%;height:auto;display:block}
ul,ol{margin:0;padding:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent);color:#000}
.screen-reader-text,.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.screen-reader-text:focus{position:fixed!important;top:8px;left:8px;z-index:500;width:auto;height:auto;clip:auto;padding:12px 18px;background:var(--accent);color:#000;font-weight:600}
.site{position:relative;z-index:1}
.particles{position:fixed;inset:0;z-index:0;pointer-events:none}
.read-progress{position:fixed;top:0;left:0;right:0;z-index:250;height:2px;pointer-events:none}
.read-progress span{display:block;height:100%;background:var(--accent);box-shadow:0 0 12px var(--accent);transform-origin:0 50%;transform:scaleX(0)}

/* Labels and buttons */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.eyebrow::before{content:'✦';color:var(--accent);font-size:11px}
.outline{color:transparent;-webkit-text-stroke:1px var(--ink)}
@media (min-width:768px){.outline{-webkit-text-stroke-width:1.5px}}
.lime{color:var(--accent)}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;overflow:hidden;isolation:isolate;padding:14px 24px;border-radius:999px;border:1px solid transparent;font-family:var(--f-mono);font-size:12.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;transition:color .4s var(--ease-out),border-color .3s,box-shadow .4s}
.btn::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;transform:translateY(101%);transition:transform .5s var(--ease-out)}
.btn:hover::before{transform:none}
.btn--primary{background:var(--accent);color:var(--on-accent)}
.btn--primary::before{background:#fff}
.btn--primary:hover{box-shadow:0 0 40px -6px rgba(204,255,0,.6)}
.btn--ghost{color:var(--ink);border-color:var(--line2)}
.btn--ghost::before{background:var(--ink)}
.btn--ghost:hover{color:var(--bg);border-color:var(--ink)}
.btn--lg{padding:18px 30px}
.arrow{transition:transform .5s var(--ease-out)}
a:hover .arrow,button:hover .arrow{transform:translateX(4px)}

/* ============ HEADER ============ */
.site-header{position:fixed;top:0;left:0;right:0;z-index:200;border-bottom:1px solid transparent;transition:background .5s,border-color .5s}
.site-header.is-scrolled{background:rgba(3,0,20,.72);border-color:var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.admin-bar .site-header{top:32px}
@media (max-width:782px){.admin-bar .site-header{top:46px}}
.site-header__inner{display:flex;align-items:center;gap:24px;height:84px;padding:0 var(--gutter)}
.brand{display:inline-flex;align-items:center;gap:12px;color:var(--ink)}
.brand__name{font-family:var(--f-display);font-size:21px;letter-spacing:.14em;text-transform:uppercase}
.brand__star{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--accent);color:#000;font-size:17px;line-height:1;transition:transform .7s var(--ease-out)}
.brand:hover .brand__star{transform:rotate(180deg)}
.brand__tag{padding:4px 10px;border:1px solid var(--line2);border-radius:999px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.custom-logo{max-height:44px;width:auto}
.main-nav{margin-inline:auto}
.main-nav ul{display:flex;align-items:center;gap:4px;list-style:none}
.main-nav a{position:relative;display:inline-block;padding:8px 12px;font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:color .3s}
.main-nav a::after{content:'';position:absolute;left:12px;right:12px;bottom:4px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .6s var(--ease-out)}
.main-nav a:hover,.main-nav .current-menu-item > a,.main-nav .current_page_parent > a{color:var(--ink)}
.main-nav a:hover::after,.main-nav .current-menu-item > a::after,.main-nav .current_page_parent > a::after{transform:scaleX(1);transform-origin:left}
.main-nav .sub-menu{display:none}
.site-header__actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.main-nav + .site-header__actions{margin-left:0}
.burger{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line2);color:var(--ink);transition:border-color .3s,color .3s}
.burger:hover{border-color:var(--accent);color:var(--accent)}
@media (min-width:1025px){.burger{display:none}}
@media (max-width:1024px){.main-nav{display:none}}
@media (max-width:560px){.brand__tag{display:none}.site-header__actions .btn{padding:11px 16px}}

/* ============ DRAWER ============ */
.drawer{position:fixed;inset:0;z-index:300;visibility:hidden;pointer-events:none;transition:visibility 0s .8s}
.drawer.is-open{visibility:visible;pointer-events:auto;transition-delay:0s}
.drawer__scrim{position:absolute;inset:0;width:100%;background:rgba(3,0,20,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;transition:opacity .5s}
.drawer.is-open .drawer__scrim{opacity:1}
.drawer__panel{position:absolute;top:0;right:0;bottom:0;display:flex;flex-direction:column;width:100%;overflow-y:auto;overscroll-behavior:contain;background:var(--drawer);border-left:1px solid rgba(255,255,255,.05);transform:translateX(100%);transition:transform .8s cubic-bezier(.22,1.18,.36,1)}
@media (min-width:640px){.drawer__panel{max-width:576px}}
@media (min-width:768px){.drawer__panel{max-width:672px}}
.drawer.is-open .drawer__panel{transform:none}
.drawer__bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:18px clamp(20px,4vw,40px);background:rgba(51,51,51,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.06)}
.drawer__label{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.drawer__close{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.2);transition:background .3s,color .3s,transform .6s var(--ease-out),border-color .3s}
.drawer__close:hover{background:var(--accent);border-color:var(--accent);color:#000;transform:rotate(90deg)}
.drawer__body{flex:1;padding:16px clamp(20px,4vw,40px) 48px}
.drawer__menu{list-style:none;counter-reset:d}
.drawer__menu > li{counter-increment:d;border-bottom:1px solid rgba(255,255,255,.08)}
.drawer.is-open .drawer__menu > li{animation:drawerIn .8s var(--ease-out) both}
.drawer.is-open .drawer__menu > li:nth-child(2){animation-delay:.05s}.drawer.is-open .drawer__menu > li:nth-child(3){animation-delay:.1s}.drawer.is-open .drawer__menu > li:nth-child(4){animation-delay:.15s}.drawer.is-open .drawer__menu > li:nth-child(5){animation-delay:.2s}.drawer.is-open .drawer__menu > li:nth-child(6){animation-delay:.25s}.drawer.is-open .drawer__menu > li:nth-child(n+7){animation-delay:.3s}
@keyframes drawerIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
.drawer__menu > li > a{display:flex;align-items:center;gap:18px;padding:20px 0;font-family:var(--f-display);font-size:clamp(38px,6.4vw,64px);line-height:1;text-transform:uppercase;color:var(--ink);transition:color .3s,padding .6s var(--ease-out)}
.drawer__menu > li > a::before{content:counter(d,decimal-leading-zero);align-self:flex-start;margin-top:6px;font-family:var(--f-mono);font-size:11px;color:var(--muted)}
.drawer__menu > li > a::after{content:'↗';margin-left:auto;font-family:var(--f);font-size:24px;transition:transform .6s var(--ease-out)}
.drawer__menu > li > a:hover{color:var(--accent);padding-left:14px}
.drawer__menu > li > a:hover::after{transform:rotate(45deg)}
.drawer__menu .sub-menu{list-style:none;padding:0 0 16px 32px}
.drawer__menu .sub-menu a{display:block;padding:6px 0;font-size:16px;color:var(--muted)}
.drawer__menu .sub-menu a:hover{color:var(--accent)}
.drawer__menu > li.is-accent > a{color:var(--accent)}
.drawer__search{margin-top:36px}
.drawer__meta{display:grid;gap:8px;margin-top:36px;font-family:var(--f-mono);font-size:13px;color:var(--muted)}
.drawer__meta a:hover{color:var(--accent)}

/* ============ LAYOUT ============ */
.site-main{min-height:60vh}
.wrap{padding-inline:var(--gutter)}
.section{padding:clamp(72px,9vw,140px) var(--gutter);border-top:1px solid var(--line)}

/* Blog hero */
.hero{position:relative;padding:clamp(150px,18vh,200px) var(--gutter) clamp(56px,7vw,96px);border-bottom:1px solid var(--line);overflow:hidden}
.hero__title{display:flex;flex-direction:column;gap:.04em}
.hero__top{font-size:clamp(26px,5vw,72px);line-height:1}
.hero__word{font-size:clamp(68px,13vw,190px);line-height:.88;color:var(--accent);text-shadow:0 0 60px rgba(204,255,0,.25)}
.hero__sub{margin-top:28px;max-width:56ch;font-size:clamp(16px,1.3vw,19px)}
.hero__marquee{margin-top:clamp(40px,6vw,72px);overflow:hidden;font-family:var(--f-display);font-size:clamp(56px,9vw,140px);line-height:1;text-transform:uppercase;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.15);pointer-events:none}
.hero__marquee-track{display:flex;width:max-content;animation:marquee 40s linear infinite}
@keyframes marquee{to{transform:translateX(-50%)}}
.archive-hero .hero__word{font-size:clamp(52px,9vw,140px)}
.archive-hero .archive-description{margin-top:24px;max-width:60ch}

/* Category chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:28px var(--gutter);border-bottom:1px solid var(--line)}
.chips a{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid var(--line2);border-radius:999px;font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);transition:background .3s,color .3s,border-color .3s}
.chips a span{color:var(--muted)}
.chips a:hover,.chips a.is-active{background:var(--accent);border-color:var(--accent);color:#000}
.chips a:hover span,.chips a.is-active span{color:rgba(0,0,0,.55)}

/* Featured post */
.feature{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(48px,6vw,88px) var(--gutter);border-bottom:1px solid var(--line)}
.feature__media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;border-radius:16px;border:1px solid var(--line);background:var(--bg-soft)}
.feature__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) contrast(1.1);transition:transform 1.2s var(--ease-out),filter .6s}
.feature:hover .feature__media img{transform:scale(1.04);filter:none}
.feature__title{margin-top:20px;font-size:clamp(34px,3.6vw,60px)}
.feature__title a{transition:color .3s}
.feature__title a:hover{color:var(--accent)}
.feature__excerpt{margin-top:20px;max-width:52ch}
.feature .btn{margin-top:28px}

/* Post meta */
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.meta a{color:var(--accent)}
.meta a:hover{text-decoration:underline;text-underline-offset:3px}
.meta__sep{width:4px;height:4px;border-radius:50%;background:var(--line2)}

/* Card grid */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-block:1px solid var(--line)}
.card{position:relative;display:flex;flex-direction:column;padding:clamp(22px,2.4vw,32px);background:var(--bg);transition:background .4s}
.card:hover{background:var(--bg-soft)}
.card__media{display:block;aspect-ratio:16/10;margin-bottom:22px;overflow:hidden;border-radius:10px;background:var(--bg-softer);border:1px solid var(--line)}
.card__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.4);transition:transform 1s var(--ease-out),filter .5s}
.card:hover .card__media img{transform:scale(1.05);filter:none}
.card__placeholder{display:grid;place-items:center;width:100%;height:100%;font-family:var(--f-display);font-size:64px;color:transparent;-webkit-text-stroke:1px rgba(204,255,0,.5);background:radial-gradient(circle at 30% 20%,rgba(136,170,255,.18),transparent 60%),radial-gradient(circle at 80% 90%,rgba(204,255,0,.12),transparent 55%)}
.card__title{margin-top:14px;font-size:clamp(26px,2.2vw,34px);line-height:1}
.card__title a::after{content:'';position:absolute;inset:0}
.card:hover .card__title{color:var(--accent)}
.card__excerpt{margin-top:12px;font-size:15px;color:var(--muted)}
.card__more{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:22px;font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.card:hover .card__more{color:var(--accent)}
.card .meta a{position:relative;z-index:1}

/* Pagination */
.pagination{display:flex;justify-content:center;padding:56px var(--gutter)}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px}
.pagination .page-numbers{display:grid;place-items:center;min-width:46px;height:46px;padding:0 16px;border:1px solid var(--line2);border-radius:999px;font-family:var(--f-mono);font-size:13px;color:var(--ink);transition:background .3s,color .3s,border-color .3s}
.pagination .page-numbers.current,.pagination a.page-numbers:hover{background:var(--accent);border-color:var(--accent);color:#000}
.pagination .dots{border:0}
.empty{padding:120px var(--gutter);text-align:center}
.empty h2{font-size:clamp(40px,6vw,80px)}
.empty p{margin:20px auto 32px;max-width:48ch}

/* ============ SINGLE ============ */
.post-hero{padding:clamp(150px,18vh,200px) var(--gutter) clamp(40px,5vw,64px)}
.post-hero__inner{max-width:1080px;margin-inline:auto}
.post-hero h1{margin-top:24px;font-size:clamp(46px,7vw,112px);line-height:.92}
.post-hero__lede{margin-top:28px;max-width:62ch;font-size:clamp(17px,1.4vw,20px);color:var(--body)}
.post-hero .meta{margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
.post-cover{max-width:1240px;margin:0 auto;padding:0 var(--gutter)}
.post-cover img{width:100%;max-height:640px;object-fit:cover;border-radius:16px;border:1px solid var(--line)}
.post-body{display:grid;grid-template-columns:1fr minmax(0,var(--read)) 1fr;gap:0 40px;padding:clamp(48px,6vw,88px) var(--gutter)}
.post-body > *{grid-column:2}
.post-share{grid-column:1;grid-row:1 / span 3;justify-self:end;position:sticky;top:120px;align-self:start;display:flex;flex-direction:column;gap:10px}
.post-share a,.post-share button{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line2);font-family:var(--f-mono);font-size:11px;color:var(--ink);transition:background .3s,color .3s,border-color .3s}
.post-share a:hover,.post-share button:hover{background:var(--accent);border-color:var(--accent);color:#000}
.post-share small{writing-mode:vertical-rl;transform:rotate(180deg);margin:0 auto 6px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
@media (max-width:1100px){.post-body{grid-template-columns:minmax(0,1fr)}.post-body > *,.post-share{grid-column:1}.post-share{grid-row:auto;position:static;flex-direction:row;justify-self:start;margin-bottom:32px}.post-share small{writing-mode:horizontal-tb;transform:none;margin:0 6px 0 0;align-self:center}}

/* Prose (post & page content, Gutenberg blocks) */
.entry-content{font-size:clamp(17px,1.2vw,19px);line-height:1.8;color:var(--body)}
.entry-content > * + *{margin-top:1.4em}
.entry-content h2{margin-top:2.2em;font-size:clamp(34px,3.6vw,52px)}
.entry-content h3{margin-top:1.9em;font-size:clamp(26px,2.6vw,36px)}
.entry-content h4,.entry-content h5,.entry-content h6{margin-top:1.6em;font-family:var(--f);font-weight:600;text-transform:none;letter-spacing:0;font-size:1.1em}
.entry-content h2 + *,.entry-content h3 + *{margin-top:.9em}
.entry-content a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.entry-content a:hover{text-decoration-thickness:2px}
.entry-content strong{color:var(--ink);font-weight:600}
.entry-content ul,.entry-content ol{padding-left:1.4em}
.entry-content li + li{margin-top:.5em}
.entry-content ul li::marker{color:var(--accent);content:'✦  '}
.entry-content ol li::marker{color:var(--accent);font-family:var(--f-mono);font-size:.85em}
.entry-content blockquote,.wp-block-quote{margin-inline:0;padding:8px 0 8px 28px;border-left:2px solid var(--accent);font-size:1.18em;color:var(--ink)}
.entry-content blockquote cite,.wp-block-quote cite{display:block;margin-top:12px;font-family:var(--f-mono);font-size:12px;font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.wp-block-pullquote{padding:40px 0;border-block:1px solid var(--line2);text-align:center}
.wp-block-pullquote blockquote{border:0;padding:0;font-family:var(--f-display);font-size:clamp(30px,3.4vw,48px);line-height:1.05;text-transform:uppercase}
.entry-content code{padding:.15em .4em;border-radius:6px;background:var(--bg-softer);font-family:var(--f-mono);font-size:.88em;color:var(--accent)}
.entry-content pre{overflow:auto;padding:22px;border-radius:12px;border:1px solid var(--line);background:var(--bg-soft);font-family:var(--f-mono);font-size:14px;line-height:1.7}
.entry-content pre code{padding:0;background:none;color:var(--ink)}
.entry-content hr,.wp-block-separator{height:1px;margin:3em 0;border:0;background:var(--line2)}
.entry-content figure{margin-inline:0}
.entry-content img{border-radius:12px}
.entry-content figcaption,.wp-element-caption{margin-top:10px;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;color:var(--muted);text-align:center}
.entry-content table{width:100%;border-collapse:collapse;font-size:.92em}
.entry-content th,.entry-content td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left}
.entry-content th{font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border-bottom-color:var(--line2)}
.wp-block-table{overflow-x:auto}
.wp-block-button__link{display:inline-flex;padding:15px 26px;border-radius:999px;background:var(--accent);color:#000!important;text-decoration:none!important;font-family:var(--f-mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase}
.is-style-outline .wp-block-button__link{background:transparent;color:var(--ink)!important;border:1px solid var(--line2)}
.alignwide{margin-inline:clamp(-160px,-10vw,0px)}
.alignfull{margin-inline:calc(50% - 50vw);max-width:100vw}
.alignleft{float:left;margin:.4em 1.6em 1em 0}
.alignright{float:right;margin:.4em 0 1em 1.6em}
.aligncenter{margin-inline:auto}
.has-accent-color{color:var(--accent)}
.has-accent-background-color{background:var(--accent);color:#000}
.sticky .card__title::before{content:'Pinned · ';color:var(--accent)}
.bypostauthor{}
.gallery-caption{}

/* Post footer */
.post-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:56px;padding-top:28px;border-top:1px solid var(--line)}
.post-tags a{padding:7px 14px;border:1px solid var(--line2);border-radius:999px;font-family:var(--f-mono);font-size:12px;color:var(--ink);transition:background .3s,color .3s}
.post-tags a:hover{background:var(--accent);color:#000}
.author-box{display:flex;gap:20px;align-items:center;margin-top:40px;padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--bg-soft)}
.author-box img{border-radius:50%}
.author-box strong{display:block;font-family:var(--f-display);font-size:24px;font-weight:400;text-transform:uppercase;color:var(--ink)}
.author-box p{margin-top:4px;font-size:15px;color:var(--muted)}
.post-nav{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.post-nav a{display:block;padding:40px var(--gutter);transition:background .4s}
.post-nav a:hover{background:var(--bg-soft)}
.post-nav a + a,.post-nav .post-nav__next{text-align:right}
.post-nav small{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.post-nav strong{display:block;margin-top:10px;font-family:var(--f-display);font-size:clamp(22px,2.4vw,34px);font-weight:400;line-height:1;text-transform:uppercase;color:var(--ink)}
.post-nav a:hover strong{color:var(--accent)}
.related__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:0 var(--gutter) 40px}
.related__head h2{font-size:clamp(40px,5vw,80px)}
.related{padding:clamp(72px,8vw,120px) 0 0;border-top:1px solid var(--line)}

/* Comments */
.comments{max-width:var(--read);margin:0 auto;padding:clamp(56px,6vw,88px) var(--gutter)}
.comments__title{font-size:clamp(34px,4vw,56px);margin-bottom:32px}
.comment-list{list-style:none}
.comment-list .children{list-style:none;padding-left:clamp(16px,4vw,48px);border-left:1px solid var(--line)}
.comment-body{padding:24px 0;border-bottom:1px solid var(--line)}
.comment-meta{display:flex;align-items:center;gap:12px;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;color:var(--muted)}
.comment-meta img{border-radius:50%}
.comment-author .fn{font-family:var(--f);font-size:15px;font-style:normal;font-weight:600;color:var(--ink)}
.comment-author .says{display:none}
.comment-content{margin-top:12px;font-size:16px}
.reply a{display:inline-block;margin-top:10px;font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.comment-respond{margin-top:48px}
.comment-reply-title{font-size:clamp(28px,3vw,40px)}
.comment-form{display:grid;gap:18px;margin-top:20px}
.comment-form label{display:block;margin-bottom:6px;font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea,.search-form input[type=search]{width:100%;padding:14px 0;border:0;border-bottom:1px solid rgba(255,255,255,.35);border-radius:0;background:transparent;font:inherit;font-size:16px;color:var(--ink);transition:border-color .3s}
.comment-form textarea{min-height:140px;resize:vertical}
.comment-form input:focus,.comment-form textarea:focus,.search-form input:focus{outline:none;border-bottom-color:var(--accent)}
.comment-form .submit{padding:16px 28px;border:0;border-radius:999px;background:var(--accent);color:#000;font-family:var(--f-mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.comment-form-cookies-consent{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.comment-form-cookies-consent label{margin:0;text-transform:none;letter-spacing:0;font-family:var(--f)}

/* Search form */
.search-form{display:flex;align-items:center;gap:12px}
.search-form label{flex:1}
.search-form button{flex-shrink:0;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--accent);color:#000}
::placeholder{color:rgba(255,255,255,.45)}

/* ============ CTA + FOOTER ============ */
.cta{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:center;padding:clamp(96px,12vw,170px) var(--gutter);border-top:1px solid var(--line);text-align:center}
.cta__glow{position:absolute;inset:0;z-index:-1;pointer-events:none}
.cta__glow i{position:absolute;width:44vmax;height:44vmax;border-radius:50%;filter:blur(90px);animation:glow 10s ease-in-out infinite alternate}
.cta__glow i:nth-child(1){left:-14vmax;top:5%;background:rgba(204,255,0,.32)}
.cta__glow i:nth-child(2){right:-16vmax;top:-20vmax;background:rgba(136,170,255,.32);animation-duration:12s}
.cta__glow i:nth-child(3){left:36%;bottom:-32vmax;background:rgba(70,40,200,.4);animation-duration:14s}
@keyframes glow{to{transform:translate(6vmax,-4vmax) scale(1.18)}}
.cta h2{margin-top:28px;font-size:clamp(64px,12vw,200px);line-height:.86}
.cta p{margin:28px auto 0;max-width:46ch;font-size:18px;color:var(--ink)}
.cta .btn{margin-top:40px}
.site-footer{position:relative;z-index:1;overflow:hidden;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.site-footer__top{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:40px;padding:clamp(64px,8vw,110px) var(--gutter) 0}
.site-footer__about{max-width:38ch;margin-top:22px}
.site-footer h3{margin-bottom:16px;font-family:var(--f-mono);font-size:11px;letter-spacing:.24em;color:var(--ink)}
.site-footer ul{list-style:none;display:grid;gap:10px}
.site-footer a:hover{color:var(--accent)}
.site-footer__word{margin-top:clamp(64px,8vw,110px);padding-bottom:.05em;font-family:var(--f-display);font-size:clamp(48px,13.6vw,250px);line-height:.8;text-align:center;text-transform:uppercase;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.15);user-select:none}
.site-footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;margin:0 var(--gutter);padding:24px 0 28px;border-top:1px solid var(--line);font-size:12.5px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--line2);border-radius:999px;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.badge::before{content:'✦';color:var(--accent)}

/* ============ MOTION ============ */
[data-reveal]{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease-out),transform 1.2s var(--ease-out)}
[data-reveal].is-visible{opacity:1;transform:none}
.no-js [data-reveal]{opacity:1;transform:none}

/* ============ RESPONSIVE ============ */
@media (max-width:1024px){
  .feature{grid-template-columns:1fr}
  .posts{grid-template-columns:repeat(2,1fr)}
  .site-footer__top{grid-template-columns:1fr 1fr}
  .site-footer__top > :first-child{grid-column:1/-1}
}
@media (max-width:640px){
  .posts{grid-template-columns:1fr}
  .post-nav{grid-template-columns:1fr}
  .post-nav a + a{text-align:left;border-top:1px solid var(--line)}
  .related__head{flex-direction:column;align-items:flex-start}
  .alignleft,.alignright{float:none;margin:1em 0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1;transform:none}
  .particles{display:none}
}