/* Inhype blog - mirrors inhypemedia.com tokens (Webflow site). Mount path: /blog */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap');

:root {
  --black: #0a0a0a;
  --red: #ff3b1f;
  --white: #ffffff;
  --white-14: #ffffff24;
  --white-50: #ffffff80;
  --white-70: #ffffffb3;
  --font-body: Geist, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', Jetbrainsmono, Georgia, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--red); text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; }
p { margin: 0 0 1rem; color: var(--white-70); font-size: 1.25rem; font-weight: 600; }

/* layout */
.padding-global { padding-left: 2.5rem; padding-right: 2.5rem; }
.container-large { width: 100%; max-width: 87.5rem; margin: 0 auto; }
.container-medium { width: 100%; max-width: 70rem; margin: 0 auto; }
.padding-section-large { padding-top: 9rem; padding-bottom: 9rem; }
.padding-section-large.bottom-small { padding-top: 5rem; padding-bottom: 5rem; }
.padding-section-medium { padding-top: 7rem; padding-bottom: 7rem; }
.padding-section-small { padding-top: 6rem; padding-bottom: 6rem; }
.devider { height: 1px; background: var(--white-14); }

/* type */
.text-brow {
  color: var(--white-50);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 500;
}
.text-brow.text-color-secondary { color: var(--red); }
.text-brow.text-color-primary { color: var(--white); }
.big_title { color: var(--red); letter-spacing: -.05em; font-size: 13rem; font-weight: 700; line-height: .9; }
.big_title.text-color-white { color: var(--white); }
.heading-style-h1 { letter-spacing: -.04em; font-size: 7.5rem; line-height: .9; }
.heading-style-h2 { letter-spacing: -.034em; font-size: 4.5rem; line-height: .9; }
.heading-style-h3 { letter-spacing: -.03em; font-size: 3rem; line-height: 1; }
.text-size-medium { font-size: 1.25rem; }
.op_70 { opacity: .7; }
.text-color-secondary { color: var(--red); }
.text-color-white_70 { color: var(--white-70); }

/* navbar */
.navbar1_component {
  z-index: 999; position: sticky; top: 0;
  display: flex; align-items: center; width: 100%; min-height: 4.5rem;
  padding: 0 2.5rem; background: #0a0a0ab3; backdrop-filter: blur(12px);
}
.navbar1_container { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 87.5rem; margin: 0 auto; }
.logo { color: var(--white); font-weight: 700; font-size: 1.5rem; letter-spacing: -.04em; }
.navbar1_menu { display: flex; align-items: center; gap: 1rem; }
.navbar1_menu-links { display: flex; align-items: center; }
.navbar1_link { color: var(--white); letter-spacing: -.01em; margin: 0 1rem; padding: .5rem 0; font-weight: 500; }
.navbar1_link.w--current { color: var(--white-70); }
.button { display: inline-flex; align-items: center; gap: .5625rem; border: 1px solid var(--white); border-radius: 100rem; padding: .5rem 1.25rem; color: var(--white); font-weight: 500; white-space: nowrap; transition: all .3s; }
.button:hover { background: var(--white); color: var(--black); }
.button.is-white { background: var(--white); color: var(--black); }
.button.is-white:hover { background: transparent; color: var(--white); }
.nav-toggle { display: none; background: none; border: 0; color: var(--white); font-family: var(--font-mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }

/* hero */
.hero_content { display: flex; flex-direction: column; }
.section_name_brow { display: flex; justify-content: space-between; align-items: flex-end; gap: 3rem; border-bottom: 1px solid var(--white-14); padding-bottom: 1.25rem; }
.brow_left_side_title_wrapper { display: flex; align-items: center; gap: .875rem; }
.brow_dot { width: .375rem; height: .375rem; border-radius: 100em; background: var(--red); }
.brow_link .text-brow { color: var(--white-70); }
.brow_link:hover .text-brow { color: var(--white); }
.margin-top.margin-xlarge { margin-top: 4rem; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: end; }
.hero_paragraph_wrapper { max-width: 42rem; }
.subtitle_grid_right { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }

/* blog grid */
.blog_grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(.75rem, 1.5vw, 1.25rem); }
.blog_item { grid-column: span 6; overflow: hidden; }
.blog_item.is-featured { grid-column: span 12; }
.blog_card {
  position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between;
  width: 100%; height: 100%; aspect-ratio: 16 / 9; min-height: 28rem; padding: 1.5rem;
  border: 1px solid var(--white-14); color: var(--white); overflow: hidden; isolation: isolate;
}
.blog_item.is-featured .blog_card { aspect-ratio: 21 / 9; min-height: 30rem; }
.blog_card_image_wrapper { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.blog_card_image_wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease, opacity .3s; opacity: .55; }
.blog_card:hover .blog_card_image_wrapper img { transform: scale(1.03); opacity: .75; }
.blog_card_coverflow { position: absolute; inset: 0; background: linear-gradient(180deg, #0a0a0a33 0%, #0a0a0ae6 100%); }
.blog_card_top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.blog_card_title { color: var(--white); letter-spacing: -.034em; font-size: 2.75rem; line-height: .95; font-weight: 700; }
.blog_item.is-featured .blog_card_title { font-size: 4rem; }
.blog_card_excerpt { margin: 1rem 0 0; max-width: 36rem; color: var(--white-70); font-size: 1rem; font-weight: 500; line-height: 1.5; }
.blog_card_bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.blog_card_meta { display: flex; gap: .875rem; align-items: center; }
.blog_card_arrow { color: var(--white); font-size: 1.25rem; }
.blog_empty { padding: 4rem 0; }

/* article */
.article_cover { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--white-14); }
.article_cover img { width: 100%; height: 100%; object-fit: cover; }
.article_body { display: grid; grid-template-columns: 12rem 1fr; gap: 3rem; align-items: start; }
.article_body + .article_body { margin-top: 4rem; padding-top: 4rem; border-top: 1px solid var(--white-14); }
.article_body .text-brow { position: sticky; top: 6rem; }
.text-rich-text { color: var(--white-70); font-size: 1.25rem; font-weight: 500; line-height: 1.6; }
.text-rich-text h2 { color: var(--white); letter-spacing: -.03em; font-size: 2.5rem; line-height: 1.05; margin: 3rem 0 1rem; }
.text-rich-text h3 { color: var(--white); letter-spacing: -.02em; font-size: 1.75rem; line-height: 1.15; margin: 2.5rem 0 .75rem; }
.text-rich-text p { color: var(--white-70); margin: 0 0 1.25rem; font-size: 1.25rem; font-weight: 500; }
.text-rich-text ul, .text-rich-text ol { margin: 0 0 1.5rem; padding-left: 1.5rem; }
.text-rich-text li { margin-bottom: .5rem; }
.text-rich-text strong { color: var(--white); }
.text-rich-text em { color: var(--red); font-style: normal; }
.text-rich-text a { color: var(--red); border-bottom: 1px solid #ff3b1f66; }
.text-rich-text blockquote { margin: 2.5rem 0; padding: 0 0 0 1.5rem; border-left: 2px solid var(--red); color: var(--white); font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; }
.text-rich-text img { margin: 2rem 0; border: 1px solid var(--white-14); }
.text-rich-text table { width: 100%; border-collapse: collapse; margin: 2rem 0; font-size: 1rem; }
.text-rich-text th, .text-rich-text td { padding: .75rem 1rem; border: 1px solid var(--white-14); text-align: left; vertical-align: top; }
.text-rich-text th { color: var(--white); font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; }
.tldr { border: 1px solid var(--white-14); padding: 1.5rem; }
.tldr ul { margin: 0; padding-left: 1.25rem; }
.tldr li { color: var(--white); font-weight: 600; margin-bottom: .5rem; }
.faq_item { padding: 1.5rem 0; border-top: 1px solid var(--white-14); }
.faq_item:last-child { border-bottom: 1px solid var(--white-14); }
.faq_q { color: var(--white); font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: .75rem; }
.faq_a p { font-size: 1.125rem; }

/* cta */
.cta_content { display: flex; flex-direction: column; gap: 3rem; }
.cta_top_title_wrapper { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; }
.cta_top_title_wrapper .heading-style-h1 { max-width: 60rem; }
.Big_title_wrapper { display: flex; align-items: center; gap: 2rem; }
.arrow_image { width: 10rem; }

/* footer */
.footer { padding: 4rem 0 2rem; }
.footer_top { display: flex; justify-content: space-between; align-items: flex-start; gap: 3rem; flex-wrap: wrap; }
.footer_links { display: flex; gap: 2.5rem; flex-wrap: wrap; }
.footer_links a { color: var(--white-70); font-weight: 500; }
.footer_links a:hover { color: var(--white); }
.footer_bottom { display: flex; justify-content: space-between; gap: 2rem; margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--white-14); flex-wrap: wrap; }

/* responsive */
@media screen and (max-width: 991px) {
  .big_title { font-size: 9rem; }
  .heading-style-h1 { font-size: 4rem; }
  .heading-style-h2 { font-size: 3rem; }
  .padding-section-large { padding-top: 6rem; padding-bottom: 6rem; }
  .padding-section-medium { padding-top: 4rem; padding-bottom: 4rem; }
  .blog_item { grid-column: span 12; }
  .blog_card_title, .blog_item.is-featured .blog_card_title { font-size: 2.5rem; }
  .article_body { grid-template-columns: 1fr; gap: 1.5rem; }
  .article_body .text-brow { position: static; }
  .cta_top_title_wrapper { flex-direction: column; align-items: flex-start; }
  .navbar1_menu-links { display: none; }
  .navbar1_menu.is-open .navbar1_menu-links { display: flex; flex-direction: column; position: absolute; top: 4.5rem; left: 0; right: 0; padding: 1.5rem 2.5rem 2rem; background: var(--black); border-bottom: 1px solid var(--white-14); align-items: flex-start; }
  .navbar1_menu.is-open .navbar1_link { margin: 0; padding: .75rem 0; font-size: 1.125rem; }
  .nav-toggle { display: inline-block; }
}
@media screen and (max-width: 767px) {
  .padding-global { padding-left: 1.25rem; padding-right: 1.25rem; }
  .navbar1_component { padding: 0 1.25rem; min-height: 4rem; }
  .big_title { font-size: 6rem; }
  .heading-style-h2 { font-size: 2.5rem; }
  .padding-section-large.bottom-small { padding-top: 3rem; padding-bottom: 3rem; }
  .padding-section-small { padding-top: 2rem; padding-bottom: 2rem; }
  .section_name_brow { flex-direction: column; align-items: flex-start; gap: 2rem; }
  .two-col { grid-template-columns: 1fr; gap: 2rem; }
  .subtitle_grid_right { align-items: flex-start; }
  .blog_card, .blog_item.is-featured .blog_card { aspect-ratio: 4 / 5; min-height: 22rem; padding: 1.25rem; }
  .blog_card_title, .blog_item.is-featured .blog_card_title { font-size: 2rem; }
  .Big_title_wrapper { gap: 1rem; }
  .arrow_image { width: 5rem; }
  .text-rich-text h2 { font-size: 1.875rem; }
  .text-rich-text p, .text-rich-text { font-size: 1.125rem; }
  .text-rich-text table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .text-rich-text th, .text-rich-text td { min-width: 9rem; font-size: .9375rem; }
}
@media screen and (max-width: 479px) {
  .big_title { font-size: 4rem; }
  .heading-style-h1 { font-size: 2.5rem; }
}