/* Full On Experience — Journal shared styles */
@font-face{
  font-family:'Mangogrotesque';font-weight:600;font-style:normal;font-display:swap;
  src:url('/assets/fonts/MangoGrotesque-SemiBold.woff2') format('woff2'),
      url('https://cdn.prod.website-files.com/687847012444e16228025d8e/687847012444e16228025dec_MangoGrotesque-SemiBold.woff2') format('woff2');
}
@font-face{
  font-family:'Mangogrotesque';font-weight:200;font-style:normal;font-display:swap;
  src:url('/assets/fonts/MangoGrotesque-ExtraLight.woff2') format('woff2'),
      url('https://cdn.prod.website-files.com/687847012444e16228025d8e/687847012444e16228025df1_MangoGrotesque-ExtraLight.woff2') format('woff2');
}
:root{
  --bg:#191919;--panel:#1f1f1f;--line:#313131;--head:#d9d9d9;--text:#a2a3a4;
  --dim:#656565;--accent:#ffcc6e;
  --display:'Mangogrotesque',Impact,sans-serif;--mono:'JetBrains Mono',monospace;--max:1240px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--mono);font-weight:300;font-size:14.4px;line-height:1.6;letter-spacing:-.03em;-webkit-font-smoothing:antialiased}
::selection{background:var(--accent);color:#191919}
img{display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 40px}
.narrow{max-width:760px;margin:0 auto;padding:0 40px}
h1,h2,h3{font-family:var(--display);font-weight:600;color:var(--head);text-transform:uppercase;line-height:.9}
.label{font-family:var(--mono);font-size:12px;font-weight:300;letter-spacing:.04em;text-transform:uppercase;color:var(--text)}
.label::before{content:'( '}
.label::after{content:' )'}
.btn{display:inline-flex;align-items:center;font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;background:#d9d9d9;color:#191919;padding:12px 22px;text-decoration:none;border:0;cursor:pointer;transition:background .2s}
.btn:hover{background:var(--accent)}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:22px 0;background:rgba(25,25,25,.92);backdrop-filter:blur(10px)}
.nav-inner{max-width:var(--max);margin:0 auto;padding:0 40px;display:flex;align-items:center;justify-content:space-between}
.brand img{height:34px;width:auto}
.nav-links{display:flex;gap:26px;list-style:none;align-items:center}
.nav-links a{font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--text);text-decoration:none;transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--head)}

/* BLOG INDEX */
.journal-head{padding:170px 0 70px}
.journal-head .label{display:block;margin-bottom:22px}
.journal-head h1{font-size:clamp(3rem,7.5vw,6.5rem)}
.journal-head p{margin-top:26px;max-width:44em;font-size:13.5px}
.post-list{padding-bottom:110px}
.post-row{display:grid;grid-template-columns:.35fr 1.25fr 1fr .2fr;gap:40px;padding:52px 0;border-top:1px solid var(--line);align-items:baseline;text-decoration:none;transition:background .2s}
.post-row:last-of-type{border-bottom:1px solid var(--line)}
.post-row:hover h2{color:var(--accent)}
.post-date{font-family:var(--mono);font-size:12px;color:var(--dim);text-transform:uppercase}
.post-row h2{font-size:clamp(1.5rem,2.8vw,2.2rem);transition:color .2s}
.post-row p{color:var(--text);font-size:13px}
.post-arrow{font-family:var(--mono);color:var(--dim);text-align:right}

/* ARTICLE */
article{padding:170px 0 60px}
.article-meta{font-family:var(--mono);font-size:12px;color:var(--dim);text-transform:uppercase;letter-spacing:.04em;margin-bottom:26px}
.article-meta a{color:var(--dim)}
article h1{font-size:clamp(2.4rem,5.5vw,4.4rem);margin-bottom:30px}
.standfirst{font-size:16px;color:var(--head);line-height:1.6;margin-bottom:50px;max-width:42em}
.article-body p{margin-bottom:22px;font-size:14px;max-width:46em}
.article-body h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:52px 0 20px}
.article-body h3{font-size:1.2rem;margin:36px 0 14px}
.article-body strong{color:var(--head);font-weight:500}
.article-body em{color:var(--head);font-style:normal}
.article-body a{color:var(--accent)}
.article-body ul,.article-body ol{margin:0 0 22px 1.2em;max-width:44em}
.article-body li{margin-bottom:10px;font-size:14px}
.article-body blockquote{border-left:2px solid var(--accent);padding:8px 0 8px 24px;margin:34px 0;font-family:var(--display);font-weight:600;font-size:1.5rem;line-height:1.05;text-transform:uppercase;color:var(--head);max-width:30em}
.pullstat{display:flex;gap:2px;margin:40px 0}
.pullstat div{background:var(--panel);border-top:2px solid var(--accent);padding:22px;flex:1}
.pullstat b{display:block;font-family:var(--display);font-weight:600;font-size:2rem;color:var(--head)}
.pullstat span{font-size:11.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.04em}

/* CTA + AUTHOR */
.article-cta{margin:70px 0 0;border:1px solid rgba(255,204,110,.35);background:rgba(255,204,110,.06);padding:40px}
.article-cta h2{font-size:clamp(1.6rem,3vw,2.3rem);margin-bottom:12px}
.article-cta p{max-width:40em;margin-bottom:24px;font-size:13.5px}
.author{margin:60px 0 0;padding-top:28px;border-top:1px solid var(--line);font-family:var(--mono);font-size:12.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.04em}
.author a{color:var(--text)}
.author a:hover{color:var(--accent)}
.backlink{display:inline-block;margin-top:40px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--text);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}
.backlink:hover{color:var(--head);border-color:var(--head)}

/* FOOTER */
footer{background:#141414;border-top:1px solid var(--line);margin-top:80px;padding:70px 0 50px}
.foot-inner{max-width:var(--max);margin:0 auto;padding:0 40px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.foot-big{font-family:var(--display);font-weight:600;font-size:clamp(1.6rem,3vw,2.4rem);line-height:.95;text-transform:uppercase;color:var(--accent)}
footer a{color:var(--text);text-decoration:none;font-size:12.5px;text-transform:uppercase}
footer a:hover{color:var(--head)}
.foot-links{display:flex;gap:22px;flex-wrap:wrap}

@media(max-width:900px){
  .wrap,.narrow,.nav-inner,.foot-inner{padding-left:24px;padding-right:24px}
  .post-row{grid-template-columns:1fr;gap:12px}
  .post-arrow{display:none}
  .nav-links{gap:16px}
  .nav-links li:nth-child(n+3):not(:last-child){display:none}
  .pullstat{flex-direction:column}
}