@import url('https://fonts.googleapis.com/css2?family=Funnel+Display:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

.tm-blogpost{
--bg:#08080b;
--bg-raised:#0e0e13;
--bg-card:#111116;
--line:#26262f;
--line-soft:#1a1a21;
--slate:#96959f;
--slate-dim:#656470;
--ivory:#ece9f2;
--violet:#a855f7;
--blue:#3b82f6;
--grad:linear-gradient(90deg,#b060f5,#3b82f6);

margin-top:-90px;
padding-top:90px;

background:
radial-gradient(circle at 50% 0%,rgba(120,70,220,.10),transparent 45%),
repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0px,rgba(255,255,255,.025) 1px,transparent 1px,transparent 42px),
repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0px,rgba(255,255,255,.025) 1px,transparent 1px,transparent 42px),
#08080b;

color:var(--ivory);
font-family:inherit;
line-height:1.7;
}

.tm-blogpost *{
box-sizing:border-box;
}

.tm-blogpost img{
display:block;
max-width:100%;
height:auto;
}

.tm-blogpost a{
color:#c19bfb;
text-decoration:none;
border-bottom:1px solid rgba(168,85,247,.35);
transition:.2s;
}

.tm-blogpost a:hover{
color:#7fb0ff;
border-color:#7fb0ff;
}

.page{

max-width:1366px;
margin:0 auto;

border-left:1px solid var(--line-soft);

border-right:1px solid var(--line-soft);

position:relative;

padding-bottom:10px;

}

.page:before,
.page:after{

position:absolute;

top:120px;

writing-mode:vertical-rl;

font-family:'JetBrains Mono',monospace;

font-size:10px;

letter-spacing:.18em;

color:var(--slate-dim);

opacity:.55;

}

.page:before{

content:"VISIONARYCUE";

left:-13px;

transform:rotate(180deg);

}

.page:after{

content:"VISIONARYCUE";

right:-13px;

}

.hero{

padding:56px 40px 40px;

text-align:center;

border-bottom:1px solid var(--line-soft);

}

.kicker{

display:inline-flex;

align-items:center;

gap:10px;

font-family:'JetBrains Mono',monospace;

font-size:11.5px;

letter-spacing:.14em;

text-transform:uppercase;

color:#c19bfb;

margin-bottom:26px;

}

.kicker:before,
.kicker:after{

content:"";

width:22px;

height:1px;

background:var(--grad);

opacity:.7;

}

.hero-title{

font-family:'Funnel Display',sans-serif;

font-size:clamp(36px,5vw,54px);

font-weight:600;

line-height:1.14;

letter-spacing:-.01em;

margin:0 auto 22px;

max-width:640px;

color:#f5f3ee;

}

.hero-dek{

font-size:17px;

color:var(--slate);

max-width:480px;

margin:0 auto 30px;

font-weight:300;

}

.meta-row{

display:flex;

justify-content:center;

align-items:center;

gap:14px;

font-size:13px;

color:var(--slate-dim);

}

.avatar-sm{

width:26px;

height:26px;

border-radius:50%;

background:var(--grad);

display:flex;

justify-content:center;

align-items:center;

font-family:'Funnel Display',sans-serif;

font-size:11px;

font-weight:600;

color:#08080b;

}

.sep{

color:var(--line);

}

.hero-image{

padding:44px 40px 0;

}

.hero-image .frame{

height:380px;

border-radius:8px;

overflow:hidden;

border:1px solid var(--line);

position:relative;

}

.hero-image .frame img{

width:100%;

height:100%;

object-fit:cover;

}

.article{

max-width:1000px;

margin:0 auto;

padding:56px 40px 20px;

font-size:18px;

color:#d6d4de;

font-weight:300;

}

.article p{

margin:0 0 26px;

}

.article h2{

font-family:'Funnel Display',sans-serif;

font-size:28px;

font-style:italic;

font-weight:500;

color:#f0ede6;

margin:56px 0 20px;

}

.article blockquote{

margin:40px 0;

padding-left:28px;

border-left:2px solid #a855f7;

}

.article blockquote p{

font-family:'Funnel Display',sans-serif;

font-style:italic;

font-size:23px;

color:#f2efe8;

}

.article ul{

list-style:none;

padding-left:0;

}

.article li{

position:relative;

padding-left:26px;

margin-bottom:12px;

}

.article li:before{

content:"—";

position:absolute;

left:0;

color:#8f7bd6;

}
/* =========================
   TAGS
========================= */

.tags{
max-width:660px;
margin:8px auto 60px;
padding:0 40px;
display:flex;
flex-wrap:wrap;
gap:10px;
}

.tag-pill{
display:inline-flex;
align-items:center;
padding:6px 13px;
border:1px solid var(--line);
border-radius:999px;
font-family:'JetBrains Mono',monospace;
font-size:11px;
color:var(--slate);
transition:.25s;
}

.tag-pill:hover{
border-color:var(--violet);
color:var(--ivory);
transform:translateY(-2px);
}

/* =========================
   COMMENTS
========================= */

.comments{
max-width:800px;
margin:0 auto 50px;
padding:0 40px;
}

.comments h2,
.comments h3{
font-family:'Funnel Display',sans-serif;
font-size:28px;
font-weight:500;
color:#f5f3ee;
margin-bottom:10px;
}

.comments p{
color:var(--slate);
}

.comment-respond{

background:var(--bg-card);

border:1px solid var(--line);

border-radius:10px;

padding:24px;

margin:35px 0;
}

.comment-form{

display:flex;

flex-wrap:wrap;

gap:14px;
}

/* Reorder fields and adjust widths */
.comment-form-author {
    order: 1;
    width: calc(50% - 7px);
}

.comment-form-email {
    order: 2;
    width: calc(50% - 7px);
}

.comment-form-comment {
    order: 3;
    width: 100%;
}

.form-submit {
    order: 4;
    width: 100%;
    margin-top: 10px;
}

/* Completely hide the website field and the save checkbox */
.comment-form-url,
.comment-form-cookies-consent {
    display: none !important;
}

.comment-form input,
.comment-form textarea{

width:100%;

background:var(--bg-raised);

border:1px solid var(--line);

border-radius:8px;

padding:13px 15px;

color:#fff;

font-family:Inter,sans-serif;

font-size:14px;

outline:none;

transition:.25s;
}

.comment-form textarea{

min-height:150px;

resize:vertical;
}

.comment-form input:focus,
.comment-form textarea:focus{

border-color:var(--violet);

box-shadow:0 0 0 3px rgba(168,85,247,.15);

}

.submit{

background:linear-gradient(90deg,#b060f5,#3b82f6);

border:none;

padding:12px 26px;

border-radius:999px;

color:#09090b;

font-weight:600;

cursor:pointer;

transition:.25s;
}

.submit:hover{

transform:translateY(-2px);

opacity:.9;
}

.comment-list{

list-style:none;

margin:40px 0;

padding:0;
}

.comment{

margin-bottom:22px;

padding:18px;

background:var(--bg-card);

border:1px solid var(--line);

border-radius:10px;
}

.comment-author{

font-weight:600;

margin-bottom:6px;
}

.comment-meta{

font-size:12px;

color:var(--slate);

margin-bottom:12px;
}

.comment-content{

color:#d7d5df;

line-height:1.8;
}

/* =========================
   RECENT POSTS
========================= */

.recent{

padding:60px 40px;

border-top:1px solid var(--line-soft);

overflow:hidden;
}

.recent-head{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:28px;
}

.recent-head h3{

font-family:'Funnel Display',sans-serif;

font-size:26px;

font-weight:500;

margin:0;
}

.rh-right{

display:flex;

align-items:center;

gap:18px;
}

.view-all{

font-family:'JetBrains Mono',monospace;

font-size:11px;

letter-spacing:.08em;

text-transform:uppercase;
}

.carousel-btns{

display:flex;

gap:8px;
}

.carousel-btns button{

width:34px;

height:34px;

border-radius:50%;

border:1px solid var(--line);

background:var(--bg-card);

color:#fff;

cursor:pointer;

display:flex;

align-items:center;

justify-content:center;

transition:.25s;
}

.carousel-btns button:hover{

border-color:var(--violet);

transform:scale(1.05);
}

.carousel-btns svg{
    width:16px;
    height:16px;
    fill:none;
    stroke:#ffffff;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
    overflow:visible;
}

.carousel-btns button:hover svg{
    stroke:#ffffff;
}

.carousel-track{

display:flex;

gap:20px;

overflow-x:auto;

scroll-behavior:smooth;

scrollbar-width:none;

padding-bottom:10px;
}

.carousel-track::-webkit-scrollbar{

display:none;
}

.recent-card{

width:270px;

flex:none;

background:var(--bg-card);

border:1px solid var(--line);

border-radius:10px;

overflow:hidden;

transition:.25s;
}

.recent-card:hover{

transform:translateY(-3px);

border-color:var(--violet);
}

.thumb{

height:160px;

overflow:hidden;
}

.thumb img{

width:100%;

height:100%;

object-fit:cover;

transition:.35s;
}

.recent-card:hover img{

transform:scale(1.05);
}

.recent-card .content{

padding:18px;
}

.rc-tag{

display:block;

margin-bottom:10px;

font-size:11px;

font-family:'JetBrains Mono',monospace;

color:#9c7bf6;

text-transform:uppercase;
}

.recent-card h4{

font-family:'Funnel Display',sans-serif;

font-size:18px;

font-weight:500;

line-height:1.35;

margin:0 0 10px;
}

.recent-card p{

font-size:13px;

color:var(--slate);

margin-bottom:14px;
}

.rc-meta{

font-family:'JetBrains Mono',monospace;

font-size:11px;

color:var(--slate-dim);
}

/* =========================
   FOOTER
========================= */

.page-foot{

padding:45px;

text-align:center;

font-family:'JetBrains Mono',monospace;

font-size:11px;

color:var(--slate-dim);
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:768px){

.hero{

padding:40px 24px;
}

.hero-image{

padding:30px 24px 0;
}

.article{

padding:45px 24px;
}

.tags,
.comments,
.recent{

padding-left:24px;
padding-right:24px;
}

.comment-form-author,
.comment-form-email {
    width:100%;
}

.hero-title{

font-size:38px;
}

.page:before,
.page:after{

display:none;
}

.recent-card{

width:240px;
}

}
html,
body{
    margin:0;
    padding:0;
    background:#0b0916;
}

.tm-blogpost{
    margin:0;
    padding-bottom:0 !important;
    min-height:auto !important;
}

.page{
    margin-bottom:0 !important;
    padding-bottom:0 !important;
}

.site-main{
    margin-bottom:0 !important;
    padding-bottom:0 !important;
}

.site-footer{
    margin-top:0 !important;
}