@font-face{font-family:BlogNeue;src:url("/fonts/PPNeueMontreal-Variable.woff2") format("woff2");font-weight:300 800;font-display:swap}
@font-face{font-family:BlogMono;src:url("/fonts/SimplonMono-400.woff2") format("woff2");font-weight:400;font-display:swap}

.blog-index-page{
  --blog-ink:#211c20;
  --blog-muted:#675d61;
  --blog-paper:#eee9df;
  --blog-card:#f8f4ed;
  --blog-clay:#c46f50;
  --blog-peach:#e3b08d;
  --blog-sage:#aeb9aa;
  margin:0;
  overflow-x:hidden;
  color:var(--blog-ink);
  background:var(--blog-paper);
  font-family:BlogNeue,Arial,sans-serif;
  font-feature-settings:"ss02" 1;
}

.blog-index-page *{box-sizing:border-box}
.blog-index-page a{color:inherit;text-decoration:none}
.blog-index-page h1,.blog-index-page h2,.blog-index-page h3{font-family:BlogNeue,Arial,sans-serif}
.blog-index-page :focus-visible{outline:3px solid var(--blog-clay);outline-offset:4px}

.blog-index-page .breadcrumb-nav{
  width:min(1320px,calc(100% - 48px));
  margin:0 auto;
  padding:28px 0 14px;
  border:0;
  background:transparent;
  backdrop-filter:none;
}
.blog-index-page .breadcrumb-nav ol{gap:4px}
.blog-index-page .breadcrumb-nav li{font:400 11px/1 BlogMono,monospace;letter-spacing:.1em;text-transform:uppercase}
.blog-index-page .breadcrumb-nav li:not(:last-child)::after{color:#8e8386;font-weight:400}
.blog-index-page .breadcrumb-nav a,.blog-index-page .breadcrumb-nav span{padding:7px 9px;color:#5e5559}
.blog-index-page .breadcrumb-nav a:hover{color:var(--blog-ink);background:rgba(33,28,32,.06);text-decoration:none}

.blog-index-page>nav.fixed{
  position:sticky;
  top:14px;
  z-index:50;
  width:min(1320px,calc(100% - 48px));
  margin:0 auto;
  border:1px solid rgba(33,28,32,.24);
  border-radius:42px;
  color:var(--blog-ink);
  background:rgba(247,243,235,.9);
  box-shadow:0 18px 45px rgba(54,44,45,.12);
  backdrop-filter:blur(18px);
}
.blog-index-page>nav.fixed>div{max-width:none;padding:9px 12px 9px 22px}
.blog-index-page>nav.fixed .gradient-text{
  min-width:max-content;
  color:var(--blog-ink);
  background:none;
  -webkit-text-fill-color:currentColor;
  font-size:22px;
  letter-spacing:-.04em;
}
.blog-index-page>nav.fixed .space-x-6{display:flex;align-items:center;gap:4px;margin-left:auto}
.blog-index-page>nav.fixed .space-x-6>*+*{margin-left:0;margin-right:0}
.blog-index-page>nav.fixed .space-x-6 a{min-height:44px;display:inline-flex;align-items:center;padding:0 16px;border-radius:24px;color:#423a3e;font-size:15px;white-space:nowrap}
.blog-index-page>nav.fixed .space-x-6 a:hover{color:var(--blog-ink);background:#e1dbd0}
.blog-index-page>nav.fixed .blog-account-link{border:1px solid rgba(33,28,32,.22)}
.blog-index-page>nav.fixed .space-x-6 a.blog-account-link--primary{border-color:var(--blog-ink);color:#fff;background:var(--blog-ink)}
.blog-index-page>nav.fixed .space-x-6 a.blog-account-link--primary:hover{color:#fff;background:#393136}

.blog-index-page main{
  width:min(1380px,100%);
  margin:0 auto;
  padding:112px 30px 130px;
}
.blog-index-page main>.max-w-6xl{max-width:1320px}
.blog-index-page main header{
  max-width:1040px;
  margin:0 0 110px;
  text-align:left;
}
.blog-index-page main header h1{
  margin:0;
  color:var(--blog-ink);
  background:none;
  -webkit-text-fill-color:currentColor;
  font-size:clamp(66px,8vw,126px);
  font-weight:520;
  line-height:.86;
  letter-spacing:-.07em;
}
.blog-index-page main header p{
  max-width:620px;
  margin:38px 0 0 auto;
  color:var(--blog-muted);
  font-size:clamp(19px,2vw,28px);
  line-height:1.25;
}

.blog-index-page main section{margin-top:0;margin-bottom:92px;padding-top:34px;border-top:1px solid rgba(33,28,32,.22)}
.blog-index-page main section>h2{
  margin:0 0 28px;
  color:var(--blog-ink);
  font-size:clamp(30px,3.2vw,48px);
  font-weight:520;
  line-height:1;
  letter-spacing:-.045em;
}
.blog-index-page main section>p{max-width:720px;color:var(--blog-muted);font-size:18px;line-height:1.45}
.blog-index-page main section .gradient-text{color:var(--blog-ink);background:none;-webkit-text-fill-color:currentColor}

.blog-index-page .glass-card{
  border:1px solid rgba(33,28,32,.22)!important;
  border-radius:28px;
  color:var(--blog-ink);
  background:var(--blog-card);
  box-shadow:none;
  backdrop-filter:none;
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease,background .25s ease;
}
.blog-index-page .glass-card:hover{
  border-color:rgba(33,28,32,.5)!important;
  background:#fffaf3;
  box-shadow:0 24px 46px rgba(52,43,46,.12);
  transform:translateY(-5px);
}
.blog-index-page .glass-card>div:first-child:not(.relative){color:var(--blog-ink);background:transparent}
.blog-index-page .glass-card>.md\:flex>div:first-child{background:var(--blog-peach)}
.blog-index-page main section:nth-of-type(3n+2) .glass-card>.md\:flex>div:first-child{background:#cfd6cb}
.blog-index-page main section:nth-of-type(3n) .glass-card>.md\:flex>div:first-child{background:#d9cfbe}
.blog-index-page .glass-card h3,.blog-index-page .text-white{color:var(--blog-ink)}
.blog-index-page .glass-card p,.blog-index-page .text-gray-300,.blog-index-page .text-gray-400,.blog-index-page .text-gray-500{color:var(--blog-muted)}
.blog-index-page .glass-card [class*="text-purple"],
.blog-index-page .glass-card [class*="text-pink"],
.blog-index-page .glass-card [class*="text-blue"],
.blog-index-page .glass-card [class*="text-indigo"],
.blog-index-page .glass-card [class*="text-emerald"],
.blog-index-page .glass-card [class*="text-red"],
.blog-index-page .glass-card [class*="text-orange"],
.blog-index-page .glass-card [class*="text-green"],
.blog-index-page .glass-card [class*="text-yellow"],
.blog-index-page .glass-card [class*="text-amber"]{color:#7b4636}
.blog-index-page .glass-card [class*="bg-"][class*="/20"]{color:#4b3f43;background:rgba(33,28,32,.08)}
.blog-index-page .glass-card img{display:block;width:100%;aspect-ratio:1.65/1;object-fit:cover;filter:saturate(.82) contrast(.96)}
.blog-index-page .group:hover img{transform:scale(1.025)}

.blog-index-page main section:first-of-type>a{
  overflow:hidden;
  border-radius:42px;
  color:#fff;
  background:#29252a;
}
.blog-index-page main section:first-of-type>a:hover{background:#332e34}
.blog-index-page main section:first-of-type>a>div>div:first-child{background:var(--blog-clay)}
.blog-index-page main section:first-of-type>h2{color:var(--blog-ink)}
.blog-index-page main section:first-of-type .glass-card h3,.blog-index-page main section:first-of-type .glass-card .text-white{color:#fff}
.blog-index-page main section:first-of-type p,.blog-index-page main section:first-of-type .text-gray-400{color:#d8d0d4}
.blog-index-page main section:first-of-type [class*="text-purple"],.blog-index-page main section:first-of-type [class*="text-orange"]{color:#f0b69f}
.blog-index-page main section:first-of-type .glass-card .bg-red-500{color:var(--blog-ink);background:#f0b69f}

.blog-index-page main section:last-child>div{
  border:0;
  border-radius:42px;
  color:#fff;
  background:#29252a;
}
.blog-index-page main section:last-child h2{color:#fff;font-size:clamp(42px,5vw,76px);letter-spacing:-.055em}
.blog-index-page main section:last-child p{color:#d8d0d4}
.blog-index-page main section:last-child a{
  border:1px solid #fff;
  border-radius:28px;
  color:var(--blog-ink);
  background:#f5efe5;
}
.blog-index-page main section:last-child a:hover{background:#fff}

.blog-index-page footer{border-color:rgba(33,28,32,.22);color:var(--blog-muted);background:#ddd6ca}
.blog-index-page footer .text-gray-500{color:#51484c}

@media (max-width:900px){
  .blog-index-page .breadcrumb-nav,.blog-index-page>nav.fixed{width:calc(100% - 28px)}
  .blog-index-page>nav.fixed>div{flex-wrap:wrap;gap:6px;padding:9px 10px 10px 16px}
  .blog-index-page>nav.fixed .space-x-6{width:100%;overflow-x:auto;padding-top:4px;scrollbar-width:none}
  .blog-index-page>nav.fixed .space-x-6::-webkit-scrollbar{display:none}
  .blog-index-page>nav.fixed .space-x-6 a{min-height:40px;padding:0 13px;font-size:14px}
  .blog-index-page main{padding:82px 18px 94px}
  .blog-index-page main header{margin-bottom:72px}
  .blog-index-page main header p{margin-left:0}
  .blog-index-page main section{margin-bottom:68px}
}

@media (max-width:520px){
  .blog-index-page .breadcrumb-nav{padding-top:18px}
  .blog-index-page .breadcrumb-nav li{font-size:9px}
  .blog-index-page>nav.fixed{top:8px;border-radius:28px}
  .blog-index-page>nav.fixed .gradient-text{font-size:19px}
  .blog-index-page>nav.fixed .space-x-6{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible}
  .blog-index-page>nav.fixed .space-x-6 a{justify-content:center;min-width:0;padding:0 6px;font-size:12px}
  .blog-index-page main{padding-top:64px}
  .blog-index-page main header h1{font-size:54px}
  .blog-index-page main header p{margin-top:24px;font-size:19px}
  .blog-index-page main section{padding-top:26px}
  .blog-index-page main section>h2{font-size:34px}
  .blog-index-page .glass-card{border-radius:24px}
  .blog-index-page main section:first-of-type>a,.blog-index-page main section:last-child>div{border-radius:30px}
}

@media (prefers-reduced-motion:reduce){
  .blog-index-page *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
  .blog-index-page .glass-card:hover{transform:none}
}