/* ========================================================== Niko Hems — Site Shared styles · nav/footer/type/tokens Fonts are loaded via in each page (parallel-fetch + non-render-blocking via display=swap). ========================================================== */ :root { --ink: #0B0907; --char: #120F0C; --ash: #1A1510; --ash-2: #221C16; --ash-3: #2A2319; --border-d: #2E261E; --border-d2: #3A2F23; --bone: #F3EDE3; --paper: #F8F3EA; --cream: #EFE7D8; --border-l: #E0D6C3; --border-l2: #D9CEB9; --white: #F8F3EA; --sand: #CDBFA6; --stone: #8B806F; --dust: #5B5246; --ink-text: #151107; --char-text: #2B241A; --gray-text: #6A6054; --flame: #FF4D0A; --flame-hot: #FF6A1A; --flame-deep: #C53600; --flame-dim: rgba(255, 77, 10, 0.15); --citrine: #E8FF3A; --sans: 'Geist', -apple-system, 'SF Pro Display', 'Inter', system-ui, sans-serif; --serif: 'Newsreader', 'Source Serif Pro', Georgia, serif; --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; --wrap: 1320px; --gutter: clamp(16px, 2.4vw, 32px); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--ink); color: var(--white); font-family: var(--sans); font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv11"; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ::selection { background: var(--flame); color: var(--ink-text); } /* ---------- layout ---------- */ .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); } .section { padding: clamp(60px, 9vw, 140px) 0; position: relative; } .section.cream { background: var(--cream); color: var(--ink-text); } .section.paper { background: var(--paper); color: var(--ink-text); } .section.char { background: var(--char); } .section.ash { background: var(--ash); } /* ---------- nav ---------- */ .nav { position: fixed; top: 16px; left: 0; right: 0; z-index: 100; display: flex; justify-content: center; pointer-events: none; } .nav-inner { pointer-events: auto; display: flex; align-items: center; gap: 28px; padding: 10px 10px 10px 22px; background: rgba(11, 9, 7, 0.68); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.06); border-radius: 999px; font-size: 13px; letter-spacing: 0.01em; max-width: calc(100vw - 32px); } .nav-brand { display: inline-flex; align-items: center; color: var(--white); text-decoration: none; } .nav-brand .nh-mono { display: inline-flex; align-items: center; justify-content: center; font-family: var(--sans); font-weight: 600; font-size: 13px; line-height: 1; letter-spacing: -0.02em; color: var(--white); padding: 7px 9px 6px; border: 1px solid rgba(255,255,255,0.14); border-bottom: 2px solid var(--flame); border-radius: 4px; flex: 0 0 auto; transition: border-color 0.15s; } .nav-brand:hover .nh-mono { border-color: rgba(255,255,255,0.3); border-bottom-color: var(--flame-hot); } .nav-links { display: flex; gap: 22px; color: var(--sand); font-size: 13px; } .nav-links a { transition: color 0.15s; position: relative; } .nav-links a:hover { color: var(--white); } .nav-links a.active { color: var(--flame); } .nav-cta { padding: 7px 14px; background: var(--flame); color: var(--ink-text); border-radius: 999px; font-weight: 500; font-size: 12px; letter-spacing: 0; transition: background 0.15s, transform 0.15s; } .nav-cta:hover { background: var(--flame-hot); color: var(--ink-text); transform: translateY(-1px); } @media (max-width: 760px) { .nav-inner { gap: 14px; padding: 8px 8px 8px 14px; font-size: 12px; } .nav-links { gap: 14px; display: none; } .nav-links.mobile { display: flex; font-size: 12px; } .nav-cta { padding: 6px 11px; font-size: 11px; } } /* ---------- type ---------- */ .display { font-family: var(--sans); font-weight: 500; font-size: clamp(48px, 9vw, 128px); line-height: 0.92; letter-spacing: -0.038em; margin: 0; } .h1 { font-family: var(--sans); font-weight: 500; font-size: clamp(36px, 5.4vw, 76px); line-height: 0.98; letter-spacing: -0.032em; margin: 0; } .h2 { font-family: var(--sans); font-weight: 500; font-size: clamp(28px, 3.6vw, 48px); line-height: 1.02; letter-spacing: -0.025em; margin: 0; } .h3 { font-family: var(--sans); font-weight: 500; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.15; letter-spacing: -0.015em; margin: 0; } .lede { font-family: var(--sans); font-weight: 400; font-size: clamp(16px, 1.35vw, 20px); line-height: 1.5; color: var(--sand); margin: 0; } .body { font-family: var(--sans); font-size: 15px; line-height: 1.6; margin: 0; color: var(--sand); } .section.cream .body, .section.paper .body { color: var(--char-text); } .section.cream .lede, .section.paper .lede { color: var(--char-text); } .mono { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone); } .mono.flame { color: var(--flame); } .mono.flame-deep { color: var(--flame-deep); } .serif { font-family: var(--serif); font-style: italic; font-weight: 400; } .em { font-family: var(--serif); font-style: italic; font-weight: 400; } .hl { /* Tight highlight that hugs the cap-to-baseline zone instead of filling the full line-box. A sized linear-gradient avoids the overflow problem of `background: color` on inline elements. */ background: linear-gradient(var(--flame), var(--flame)) no-repeat; background-size: 100% 78%; background-position: 0 64%; color: var(--ink-text); padding: 0 0.18em; border-radius: 2px; font-weight: 500; font-style: normal; font-family: inherit; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .eyebrow { font-family: var(--sans); font-weight: 500; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sand); display: inline-flex; align-items: center; gap: 10px; } .eyebrow.flame { color: var(--flame); } .eyebrow.flame-deep { color: var(--flame-deep); } .eyebrow::before { content: ''; display: inline-block; width: 28px; height: 1px; background: currentColor; opacity: 0.4; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; font-family: var(--sans); font-weight: 500; font-size: 14px; letter-spacing: 0; border: 1px solid transparent; cursor: pointer; transition: all 0.15s; white-space: nowrap; } .btn-primary { background: var(--flame); color: var(--ink-text); box-shadow: 0 0 0 0 rgba(255,77,10,0.4), 0 10px 30px -12px rgba(255,77,10,0.55); } .btn-primary:hover { background: var(--flame-hot); color: var(--ink-text); box-shadow: 0 0 0 3px rgba(255,77,10,0.18), 0 14px 36px -14px rgba(255,106,26,0.75); transform: translateY(-1px); } .btn-ghost { background: rgba(255,255,255,0.04); backdrop-filter: blur(10px); border-color: rgba(255,255,255,0.15); color: var(--white); } .btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.25); } .section.cream .btn-ghost, .section.paper .btn-ghost { background: rgba(21,17,7,0.05); border-color: rgba(21,17,7,0.15); color: var(--ink-text); } .section.cream .btn-ghost:hover, .section.paper .btn-ghost:hover { background: rgba(21,17,7,0.08); } .btn-dark { background: var(--ink); color: var(--white); } .btn-dark:hover { background: var(--ash); } .btn .arrow { transition: transform 0.2s; } .btn:hover .arrow { transform: translateX(3px); } /* ---------- cards / common ---------- */ .card { background: var(--ash); border: 1px solid var(--border-d); border-radius: 8px; padding: 28px; } .section.cream .card, .section.paper .card { background: rgba(255,255,255,0.6); border-color: var(--border-l); } /* ---------- grid helpers ---------- */ .grid { display: grid; gap: 20px; } .g2 { grid-template-columns: 1fr 1fr; } .g3 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .g3 { grid-template-columns: 1fr; } .g4 { grid-template-columns: 1fr 1fr; } .g2 { grid-template-columns: 1fr; } } @media (max-width: 540px) { .g4 { grid-template-columns: 1fr; } } /* ---------- footer ---------- */ .footer { background: var(--ink); border-top: 1px solid var(--border-d); padding: 80px 0 40px; color: var(--sand); } .footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 60px; } .footer-top .brand { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 20px; text-decoration: none; } .footer-top .brand .nh-mono { display: inline-flex; align-items: center; justify-content: center; font-family: var(--sans); font-weight: 600; font-size: 16px; line-height: 1; letter-spacing: -0.02em; color: var(--white); padding: 9px 11px 7px; border: 1px solid rgba(255,255,255,0.12); border-bottom: 3px solid var(--flame); border-radius: 5px; } .footer-top .brand .nh-word { font-family: var(--sans); font-weight: 500; font-size: 20px; letter-spacing: -0.02em; color: var(--white); } .footer-top .brand .nh-word em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--flame); } .footer-col h4 { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--stone); margin: 0 0 16px; } .footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .footer-col a { color: var(--sand); font-size: 14px; transition: color 0.15s; } .footer-col a:hover { color: var(--white); } .footer-bot { display: flex; justify-content: space-between; padding-top: 28px; border-top: 1px solid var(--border-d); font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dust); } @media (max-width: 760px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; } .footer-bot { flex-direction: column; gap: 10px; } } /* ---------- disclosure banner ---------- */ .disclosure { background: var(--ash); border: 1px solid var(--border-d); border-radius: 8px; padding: 22px 26px; display: flex; align-items: center; gap: 20px; font-size: 13px; line-height: 1.5; color: var(--sand); } .disclosure .dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--flame); box-shadow: 0 0 0 4px rgba(255,77,10,0.15); } .disclosure strong { color: var(--white); font-weight: 500; } /* ---------- press / "as seen in" logo strip ---------- */ .press-logos { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(22px, 3.5vw, 52px); row-gap: 18px; } .press-logos a { display: inline-flex; align-items: center; transition: opacity 0.18s, transform 0.18s; opacity: 0.62; } .press-logos a:hover { opacity: 1; transform: translateY(-1px); } .press-logos img { max-height: 28px; width: auto; height: auto; filter: grayscale(100%) brightness(0) invert(1); /* Keep logos visually balanced vs each other */ } .press-logos a.as-is img { filter: none; } .press-logos a[data-logo="linkedin"] img { max-height: 22px; } .press-logos a[data-logo="t3n"] img { max-height: 34px; } .press-logos a[data-logo="longevity-technology"] img { max-height: 18px; } .press-logos a[data-logo="startupvalley"] img { max-height: 30px; } .press-logos a[data-logo="life-summit"] img { max-height: 44px; } @media (max-width: 720px) { .press-logos { gap: 28px 36px; } .press-logos img { max-height: 24px; } } /* ---------- visually-hidden label (a11y) ---------- */ .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; } /* ---------- hero newsletter form (Kit) ---------- */ .hero-subscribe { display: flex; gap: 8px; max-width: 480px; flex-wrap: wrap; } .hero-subscribe input[type="email"] { flex: 1; min-width: 220px; padding: 14px 20px; background: rgba(26,21,16,0.85); border: 1px solid var(--border-d); border-radius: 999px; color: var(--white); font-family: var(--sans); font-size: 14px; outline: none; transition: border-color 0.15s, background 0.15s; } .hero-subscribe input[type="email"]::placeholder { color: var(--stone); } .hero-subscribe input[type="email"]:focus { border-color: rgba(255,77,10,0.5); background: var(--ash); } /* Subscribe section (bottom) reuses the same input style via .sub-form */ .sub-form { display: flex; gap: 8px; max-width: 480px; margin: 0 auto; flex-wrap: wrap; } .sub-form input[type="email"] { flex: 1; min-width: 240px; padding: 14px 20px; background: var(--ash); border: 1px solid var(--border-d); border-radius: 999px; color: var(--white); font-family: var(--sans); font-size: 14px; outline: none; transition: border-color 0.15s; } .sub-form input[type="email"]::placeholder { color: var(--stone); } .sub-form input[type="email"]:focus { border-color: rgba(255,77,10,0.5); } /* ---------- hero atmospheric background ---------- */ .hero-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .hero-bg::before { /* warm aurora wash */ content: ''; position: absolute; inset: -20%; background: radial-gradient(ellipse 55% 45% at 82% 12%, rgba(255,77,10,0.28), transparent 62%), radial-gradient(ellipse 45% 40% at 12% 85%, rgba(197,54,0,0.22), transparent 65%), radial-gradient(ellipse 80% 60% at 50% 120%, rgba(255,106,26,0.08), transparent 70%); filter: blur(20px); } .hero-bg::after { /* faint dot texture with soft vignette */ content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(248,243,234,0.05) 1px, transparent 1.2px); background-size: 28px 28px; background-position: 0 0; mask-image: radial-gradient(ellipse 70% 55% at 50% 45%, black 20%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 45%, black 20%, transparent 80%); opacity: 0.6; } .hero-bg .horizon { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,77,10,0.35), transparent); } .glow-orb { position: absolute; border-radius: 50%; background: radial-gradient(circle, var(--flame) 0%, transparent 70%); filter: blur(60px); opacity: 0.45; pointer-events: none; mix-blend-mode: screen; } /* ---------- pill tags ---------- */ .tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--border-d); border-radius: 999px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sand); } .section.cream .tag, .section.paper .tag { border-color: var(--border-l); color: var(--gray-text); } .tag.flame { background: var(--flame); color: var(--ink-text); border-color: var(--flame); } .tag.citrine { background: var(--citrine); color: var(--ink-text); border-color: var(--citrine); } .tag.ghost-flame { border-color: rgba(255,77,10,0.4); color: var(--flame); } /* ---------- stats strip ---------- */ .stat { display: flex; flex-direction: column; gap: 10px; } .stat .num { font-family: var(--sans); font-weight: 500; font-size: clamp(32px, 3.6vw, 52px); letter-spacing: -0.03em; line-height: 0.95; color: var(--white); } .section.cream .stat .num, .section.paper .stat .num { color: var(--ink-text); } .stat .num.flame { color: var(--flame); } .stat .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone); } /* ========== ARTICLE / POST PAGE ========== */ .article { max-width: 740px; margin: 0 auto; padding: 0 var(--gutter); } .article-header { padding: clamp(140px, 18vw, 200px) 0 48px; position: relative; overflow: hidden; } .article-header::before { content: ''; position: absolute; top: 0; left: 50%; width: 140%; height: 80%; transform: translateX(-50%); background: radial-gradient(ellipse 50% 60% at 75% 10%, rgba(255,77,10,0.22), transparent 65%), radial-gradient(ellipse 40% 55% at 20% 20%, rgba(197,54,0,0.14), transparent 65%); filter: blur(28px); pointer-events: none; z-index: -1; } .breadcrumb { display: flex; gap: 8px; align-items: center; font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone); margin-bottom: 28px; flex-wrap: wrap; } .breadcrumb a { color: var(--stone); transition: color 0.15s; } .breadcrumb a:hover { color: var(--flame); } .breadcrumb .sep { opacity: 0.5; } .breadcrumb .current { color: var(--sand); } .article-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; } .article-tags a { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--flame); padding: 4px 10px; border: 1px solid rgba(255,77,10,0.3); border-radius: 999px; transition: background 0.15s; } .article-tags a:hover { background: rgba(255,77,10,0.08); } .article-title { font-family: var(--sans); font-weight: 500; font-size: clamp(32px, 5vw, 56px); line-height: 1.05; letter-spacing: -0.028em; margin: 0 0 20px; color: var(--white); } .article-deck { font-family: var(--sans); font-weight: 400; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.45; color: var(--sand); margin: 0 0 40px; max-width: 60ch; } .post-meta { display: flex; align-items: center; gap: 16px; padding: 20px 0; border-top: 1px solid var(--border-d); border-bottom: 1px solid var(--border-d); margin-bottom: 48px; flex-wrap: wrap; } .post-meta img.avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border-d2); } .post-meta .byline { font-family: var(--sans); font-size: 14px; color: var(--white); font-weight: 500; } .post-meta .byline a { color: var(--white); } .post-meta .byline a:hover { color: var(--flame); } .post-meta .role { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); margin-top: 2px; } .post-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--stone); } .post-meta time, .post-meta .read { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sand); } /* article body */ .article-body { font-family: var(--sans); font-size: 17.5px; line-height: 1.75; color: var(--sand); } .article-body > * + * { margin-top: 20px; } .article-body p { margin: 0 0 22px; } .article-body h2 { font-family: var(--sans); font-weight: 500; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; letter-spacing: -0.018em; color: var(--white); margin: 56px 0 20px; scroll-margin-top: 100px; } .article-body h3 { font-family: var(--sans); font-weight: 500; font-size: 19px; line-height: 1.25; letter-spacing: -0.012em; color: var(--white); margin: 36px 0 12px; } .article-body h2 + p, .article-body h3 + p { margin-top: 0; } .article-body strong { color: var(--white); font-weight: 500; } .article-body em { font-family: var(--serif); font-style: italic; color: var(--sand); } .article-body a { color: var(--flame); border-bottom: 1px solid rgba(255,77,10,0.35); transition: border-color 0.15s; } .article-body a:hover { border-bottom-color: var(--flame); } .article-body ul, .article-body ol { padding-left: 0; margin: 24px 0; list-style: none; } .article-body ul li, .article-body ol li { position: relative; padding-left: 28px; margin-bottom: 10px; color: var(--sand); } .article-body ul li::before { content: ''; position: absolute; left: 6px; top: 0.75em; width: 10px; height: 1px; background: var(--flame); } .article-body ol { counter-reset: ol; } .article-body ol li { counter-increment: ol; } .article-body ol li::before { content: counter(ol, decimal-leading-zero); position: absolute; left: 0; top: 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; color: var(--flame); font-weight: 500; } .article-body blockquote { margin: 32px 0; padding: 20px 0 20px 28px; border-left: 3px solid var(--flame); font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.5; color: var(--white); } .article-body .pull { font-family: var(--sans); font-weight: 500; font-size: clamp(20px, 2vw, 26px); line-height: 1.35; letter-spacing: -0.015em; color: var(--white); margin: 40px 0; padding: 24px 0; border-top: 1px solid var(--border-d); border-bottom: 1px solid var(--border-d); } .article-body hr { border: 0; height: 1px; background: var(--border-d); margin: 44px 0; } .article-body .flame-bullet::before { background: var(--flame) !important; } /* YMYL / Medical disclaimer */ .ymyl-disclaimer { margin: 48px 0; padding: 22px 24px; background: rgba(255,77,10,0.05); border: 1px solid rgba(255,77,10,0.25); border-left: 3px solid var(--flame); border-radius: 4px; display: grid; grid-template-columns: 28px 1fr; gap: 16px; align-items: start; font-family: var(--sans); font-size: 13px; line-height: 1.55; color: var(--sand); } .ymyl-disclaimer .ico { width: 20px; height: 20px; color: var(--flame); flex: 0 0 auto; margin-top: 2px; } .ymyl-disclaimer strong { color: var(--white); font-weight: 500; display: block; margin-bottom: 4px; letter-spacing: 0.01em; } /* Author card — E-E-A-T */ .author-card { margin: 64px 0 48px; padding: 32px; background: var(--ash); border: 1px solid var(--border-d); border-radius: 8px; display: grid; grid-template-columns: 96px 1fr; gap: 28px; align-items: start; } .author-card .photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border-d2); box-shadow: 0 10px 30px -15px rgba(0,0,0,0.6); } .author-card .eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--flame); margin-bottom: 10px; display: block; } .author-card .name { font-family: var(--sans); font-weight: 500; font-size: 22px; letter-spacing: -0.02em; color: var(--white); margin: 0 0 6px; } .author-card .role { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sand); margin-bottom: 16px; } .author-card .bio { font-family: var(--sans); font-size: 14px; line-height: 1.6; color: var(--sand); margin: 0 0 18px; } .author-card .creds { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 18px; } .author-card .creds .cred { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sand); padding: 5px 10px; border: 1px solid var(--border-d); border-radius: 999px; } .author-card .creds .cred.flame { color: var(--flame); border-color: rgba(255,77,10,0.35); } .author-card .links { display: flex; gap: 16px; flex-wrap: wrap; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; } .author-card .links a { color: var(--sand); border-bottom: 1px solid var(--border-d); padding-bottom: 2px; transition: color 0.15s, border-color 0.15s; } .author-card .links a:hover { color: var(--flame); border-bottom-color: var(--flame); } @media (max-width: 640px) { .author-card { grid-template-columns: 72px 1fr; padding: 24px; gap: 20px; } .author-card .photo { width: 72px; height: 72px; } } /* Related posts */ .related-posts { padding: 64px 0 24px; border-top: 1px solid var(--border-d); } .related-posts .head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 36px; flex-wrap: wrap; gap: 16px; } .related-posts .head .eyebrow { color: var(--flame); } /* ========== BLOG LISTING ========== */ /* Category filter chips */ .post-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 20px 0; border-top: 1px solid var(--border-d); border-bottom: 1px solid var(--border-d); margin-bottom: 40px; } .post-filter { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; background: transparent; border: 1px solid var(--border-d); border-radius: 999px; font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sand); cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; } .post-filter:hover { border-color: rgba(255,77,10,0.45); color: var(--flame); } .post-filter.active { background: var(--flame); border-color: var(--flame); color: var(--ink-text); } .post-filter .count { opacity: 0.55; font-weight: 400; } .post-filter.active .count { opacity: 0.75; } .post-filters .sort { margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone); } /* Featured (newest) post */ .post-feature { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 4vw, 56px); padding: clamp(28px, 3.5vw, 44px); background: var(--ash); border: 1px solid var(--border-d); border-radius: 10px; text-decoration: none; transition: border-color 0.2s, transform 0.2s; margin-bottom: 20px; align-items: center; } .post-feature:hover { border-color: rgba(255,77,10,0.4); transform: translateY(-2px); } .post-feature .feat-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--flame); margin-bottom: 20px; } .post-feature .feat-eyebrow::before { content: ''; width: 8px; height: 8px; background: var(--flame); border-radius: 50%; animation: pulse 2s infinite; box-shadow: 0 0 0 3px rgba(255,77,10,0.18); } .post-feature .feat-cats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; } .post-feature .feat-cat { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--flame); padding: 5px 12px; border: 1px solid rgba(255,77,10,0.4); border-radius: 999px; } .post-feature h2 { font-family: var(--sans); font-weight: 500; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.08; letter-spacing: -0.028em; color: var(--white); margin: 0 0 16px; transition: color 0.15s; } .post-feature:hover h2 { color: var(--flame); } .post-feature .feat-deck { font-family: var(--sans); font-size: 16px; line-height: 1.55; color: var(--sand); margin: 0 0 24px; max-width: 54ch; } .post-feature .feat-meta { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone); display: flex; gap: 14px; flex-wrap: wrap; } .post-feature .feat-meta .flame { color: var(--flame); } .post-feature .feat-side { border-left: 1px solid var(--border-d); padding-left: clamp(24px, 3vw, 44px); } .post-feature .feat-side .mono { margin-bottom: 14px; } .post-feature .feat-side blockquote { font-family: var(--serif); font-style: italic; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.35; color: var(--white); margin: 0 0 18px; border: 0; padding: 0; } .post-feature .feat-cta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--flame); } .post-feature .feat-cta .arrow { transition: transform 0.2s; } .post-feature:hover .feat-cta .arrow { transform: translateX(4px); } /* Tile grid */ .post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; } .post-tile { background: var(--ash); border: 1px solid var(--border-d); border-radius: 10px; padding: 24px 26px 22px; display: flex; flex-direction: column; gap: 14px; text-decoration: none; transition: border-color 0.2s, transform 0.2s; } .post-tile:hover { border-color: rgba(255,77,10,0.4); transform: translateY(-2px); } .post-tile-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .post-tile-cat { font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--flame); padding: 5px 12px; border: 1px solid rgba(255,77,10,0.4); border-radius: 999px; white-space: nowrap; } .post-tile-read { font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone); white-space: nowrap; } .post-tile h3 { font-family: var(--sans); font-weight: 500; font-size: 20px; line-height: 1.22; letter-spacing: -0.02em; color: var(--white); margin: 2px 0; transition: color 0.15s; } .post-tile:hover h3 { color: var(--flame); } .post-tile .deck { font-family: var(--sans); font-size: 14px; line-height: 1.55; color: var(--sand); margin: 0; } .post-tile-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border-d); font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone); display: flex; justify-content: space-between; gap: 12px; } .post-tile em { font-family: var(--serif); font-style: italic; font-weight: 400; } /* Flame accent tile */ .post-tile.flame-tile { background: var(--flame); border-color: var(--flame); } .post-tile.flame-tile:hover { background: var(--flame-hot); border-color: var(--flame-hot); transform: translateY(-2px); } .post-tile.flame-tile .post-tile-cat { background: var(--ink); color: var(--white); border-color: transparent; } .post-tile.flame-tile .post-tile-read { color: rgba(21,17,7,0.65); } .post-tile.flame-tile h3 { color: var(--ink-text); } .post-tile.flame-tile:hover h3 { color: var(--ink-text); } .post-tile.flame-tile .deck { color: rgba(21,17,7,0.82); } .post-tile.flame-tile .post-tile-foot { color: rgba(21,17,7,0.6); border-top-color: rgba(21,17,7,0.2); } @media (max-width: 960px) { .post-feature { grid-template-columns: 1fr; } .post-feature .feat-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--border-d); padding-top: 24px; } .post-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .post-grid { grid-template-columns: 1fr; } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* Guest articles / press list */ .guest-list { display: flex; flex-direction: column; border-top: 1px solid var(--border-d); } .guest-row { display: grid; grid-template-columns: 220px 1fr auto; gap: 28px; padding: 22px 6px 22px 4px; border-bottom: 1px solid var(--border-d); align-items: center; text-decoration: none; transition: padding-left 0.15s; } .guest-row:hover { padding-left: 12px; } .guest-row:hover .g-title { color: var(--flame); } .guest-row:hover .g-arrow { color: var(--flame); transform: translate(3px, -3px); } .guest-row .g-outlet { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--flame); } .guest-row .g-title { font-family: var(--sans); font-weight: 500; font-size: 17px; line-height: 1.35; letter-spacing: -0.01em; color: var(--white); transition: color 0.15s; } .guest-row .g-arrow { font-family: var(--mono); font-size: 13px; color: var(--stone); transition: color 0.15s, transform 0.15s; white-space: nowrap; } @media (max-width: 720px) { .guest-row { grid-template-columns: 1fr; gap: 6px; padding: 20px 4px; } .guest-row .g-arrow { display: none; } } /* Legacy post-card (kept for related-posts section) */ .post-card { display: grid; grid-template-columns: 160px 1fr auto; gap: 32px; padding: 28px 0; border-bottom: 1px solid var(--border-d); align-items: start; cursor: pointer; text-decoration: none; transition: padding 0.2s; } .post-card:hover { padding-left: 6px; } .post-card:hover .post-title { color: var(--flame); } .post-card .date-col { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); padding-top: 4px; } .post-card .post-title { font-family: var(--sans); font-weight: 500; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.2; letter-spacing: -0.02em; color: var(--white); margin: 0 0 10px; transition: color 0.15s; } .post-card .post-deck { font-family: var(--sans); font-size: 15px; line-height: 1.55; color: var(--sand); margin: 0 0 14px; max-width: 62ch; } .post-card .post-tags { display: flex; gap: 8px; flex-wrap: wrap; } .post-card .post-tags span { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sand); } .post-card .read-col { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); padding-top: 4px; white-space: nowrap; } @media (max-width: 760px) { .post-card { grid-template-columns: 1fr; gap: 10px; padding: 22px 0; } .post-card .date-col, .post-card .read-col { padding-top: 0; } } /* ---------- recognition rows ---------- */ .rec-item { background: var(--ink); border: 1px solid var(--border-d); border-radius: 6px; padding: 22px 24px; display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; transition: border-color 0.2s; } .rec-item:hover { border-color: rgba(255,77,10,0.3); } .rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--flame); box-shadow: 0 0 0 4px rgba(255,77,10,0.12); } .rec-title { font-family: var(--sans); font-weight: 500; color: var(--white); margin-bottom: 4px; font-size: 15px; } /* ---------- pillars section layout ---------- */ .pillars-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start; } .pillars-intro { position: sticky; top: 100px; } @media (max-width: 900px) { .pillars-grid { grid-template-columns: 1fr; gap: 32px; } .pillars-intro { position: static; top: auto; } } /* ---------- pillar cards ---------- */ .pillar { background: var(--ash); border: 1px solid var(--border-d); border-radius: 8px; padding: 30px 32px; display: grid; grid-template-columns: 56px 1fr; gap: 24px; align-items: start; transition: border-color 0.2s, transform 0.2s, background 0.2s; } .pillar:hover { border-color: rgba(255,77,10,0.35); transform: translateY(-1px); } .pillar-num { font-family: var(--mono); font-size: 12px; color: var(--flame); letter-spacing: 0.22em; padding-top: 4px; } .pillar-accent { background: var(--flame); border-color: var(--flame); } .pillar-accent:hover { background: var(--flame-hot); border-color: var(--flame-hot); } .pillar-accent .pillar-num { color: var(--ink-text); opacity: 0.7; } /* ---------- divider rule ---------- */ .rule { height: 1px; background: var(--border-d); margin: 0; border: 0; } .section.cream .rule, .section.paper .rule { background: var(--border-l); } .rule-flame { background: var(--flame); height: 2px; width: 40px; }