/* ============================================================
BrandAnatomy Journal — Ghost Theme
WSJ / NYT editorial style with hand-drawn accents
============================================================ */
/* ===== DESIGN TOKENS ===== */
:root {
/* Typography */
--font-serif: 'Merriweather', Georgia, 'Times New Roman', serif;
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-hand: 'Caveat', cursive;
/* Colors — Ink */
--ink-black: #1a1a1a;
--ink-blue: #0067DE;
--ink-gray: #6b7280;
--ink-light: #9ca3af;
/* Colors — Paper */
--paper: #fafafa;
--paper-cream: #f5f5f0;
--paper-dark: #f0f0f0;
/* Colors — Rules */
--rule-dark: #000;
--rule-light: #e5e5e5;
/* Layout */
--content-width: 640px;
--wide-width: 1200px;
}
/* ===== RESET & BASE ===== */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-family: var(--font-serif);
font-size: 16px;
background-color: var(--paper);
color: var(--ink-black);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
line-height: 1.8;
min-height: 100vh;
display: flex;
flex-direction: column;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: var(--ink-blue);
text-decoration: none;
transition: color 0.2s ease;
}
a:hover {
text-decoration: underline;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-sans);
font-weight: 600;
line-height: 1.3;
color: var(--ink-black);
}
hr {
border: none;
}
/* ===== HEADER ===== */
.baj-header {
width: 100%;
border-bottom: 1px solid var(--rule-dark);
position: relative;
z-index: 100;
background: var(--paper);
}
.baj-header-inner {
width: 100%;
max-width: var(--content-width);
margin: 0 auto;
padding: 0.875rem 1.25rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
height: 70px;
}
/* Burger (Hidden on Desktop) */
.baj-burger {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 0;
width: 24px;
height: 24px;
position: relative;
z-index: 101;
}
.baj-burger span {
display: block;
width: 100%;
height: 2px;
background: var(--ink-black);
margin-bottom: 5px;
transition: 0.3s;
}
.baj-burger span:last-child {
margin-bottom: 0;
}
/* Logo */
.baj-logo {
display: block;
flex-shrink: 0;
text-decoration: none;
color: var(--ink-black);
z-index: 101;
line-height: 0;
}
.baj-logo img {
height: 1.75rem;
width: auto;
}
.baj-logo-text {
font-family: var(--font-sans);
font-size: 1.25rem;
font-weight: 700;
color: var(--ink-black);
white-space: nowrap;
}
/* Nav (Desktop) */
.baj-nav {
display: flex;
align-items: center;
gap: 1.5rem;
margin-left: auto;
margin-right: 1.5rem;
}
.baj-nav a,
.baj-nav ul li a {
font-family: var(--font-hand);
font-size: 1.125rem;
font-weight: 700;
color: var(--ink-black);
text-decoration: none;
}
.baj-nav a:hover,
.baj-nav ul li a:hover {
color: var(--ink-blue);
text-decoration: underline;
}
.baj-nav ul {
display: flex;
list-style: none;
gap: 1.5rem;
margin: 0;
padding: 0;
}
/* Account / Subscribe */
.baj-account-wrap {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 1rem;
margin-left: 0;
}
.baj-account-link {
font-family: var(--font-sans);
font-size: 0.75rem;
font-weight: 500;
color: var(--ink-gray);
text-decoration: none;
}
.baj-subscribe-btn {
font-family: var(--font-sans);
font-size: 0.75rem;
font-weight: 600;
color: #fff;
background: var(--ink-black);
padding: 0.5rem 1.125rem;
border-radius: 2px;
text-decoration: none;
white-space: nowrap;
transition: background 0.2s;
}
.baj-subscribe-btn:hover {
background: #333;
}
/* Mobile Menu Container */
.baj-mobile-menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: var(--paper);
padding: 6rem 2rem;
transform: translateY(-100%);
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
z-index: 99;
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
}
.is-menu-open .baj-mobile-menu {
transform: translateY(0);
}
.is-menu-open .baj-burger span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.is-menu-open .baj-burger span:nth-child(2) {
opacity: 0;
}
.is-menu-open .baj-burger span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
.baj-mobile-menu ul {
list-style: none;
padding: 0;
margin: 0;
text-align: center;
}
.baj-mobile-menu a {
font-family: var(--font-serif);
font-size: 2rem;
font-weight: 700;
color: var(--ink-black);
text-decoration: none;
display: block;
margin-bottom: 2rem;
}
/* Mobile Responsive Overrides */
@media (max-width: 768px) {
.baj-header-inner {
padding: 0.5rem 1.25rem;
}
.baj-burger {
display: block;
order: 1;
}
.baj-logo {
order: 2;
margin: 0 auto;
/* Adjusted scale from 1.3 to 1.1 based on feedback */
transform: scale(1.1);
}
.baj-account-wrap {
order: 3;
}
.baj-nav {
display: none;
}
.baj-account-link {
display: none;
}
}
/* ===== FOOTER ===== */
.baj-footer {
width: 100%;
border-top: 1px solid var(--rule-dark);
margin-top: auto;
}
.baj-footer-inner {
width: 100%;
max-width: var(--content-width);
margin: 0 auto;
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.baj-copyright {
font-family: var(--font-sans);
font-size: 0.6875rem;
color: #888;
}
.baj-footer-nav ul {
display: flex;
list-style: none;
gap: 1.25rem;
margin: 0;
padding: 0;
}
.baj-footer-nav a {
font-family: var(--font-sans);
font-size: 0.6875rem;
color: #888;
text-decoration: none;
}
.baj-footer-nav a:hover {
color: var(--ink-black);
}
/* ===== MAIN ===== */
.baj-main {
flex: 1;
}
/* ===== RULES ===== */
.baj-rule {
border-top: 1px solid var(--rule-dark);
margin: 0;
}
.baj-rule-light {
border-top: 1px solid var(--rule-light);
margin: 0;
}
/* ===== KICKER ===== */
.baj-kicker {
font-family: var(--font-sans);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #666;
margin-bottom: 0.5rem;
}
/* ===== HOMEPAGE ===== */
.baj-home {
width: 100%;
max-width: var(--content-width);
margin: 0 auto;
padding: 0 1.25rem;
}
.baj-hero {
padding: 2.5rem 0 0;
}
.baj-hero-title {
font-family: var(--font-serif);
font-size: 1.75rem;
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.015em;
margin-bottom: 1rem;
}
.baj-hero-lead {
font-family: var(--font-serif);
font-size: 1.0625rem;
line-height: 1.65;
color: #333;
margin-bottom: 2.5rem;
}
/* Section */
.baj-section {
padding: 2rem 0;
}
.baj-section-header {
display: flex;
align-items: baseline;
gap: 0.75rem;
margin-bottom: 1.5rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--rule-light);
}
.baj-section-label {
font-family: var(--font-sans);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.baj-hand-note {
font-family: var(--font-hand);
font-weight: 700;
color: var(--ink-blue);
font-size: 1rem;
}
/* About section */
.baj-section-about {
padding-bottom: 3rem;
}
.baj-about-text {
font-family: var(--font-serif);
font-size: 1rem;
line-height: 1.7;
color: #333;
margin-bottom: 1rem;
}
.baj-cta-link {
font-family: var(--font-sans);
font-size: 0.8125rem;
font-weight: 500;
color: var(--ink-black);
text-decoration: none;
}
.baj-cta-link:hover {
text-decoration: underline;
}
/* ===== ARTICLE CARD ===== */
.baj-article-list {
display: flex;
flex-direction: column;
}
.baj-card {
padding: 1.25rem 0;
}
.baj-card-link {
display: block;
text-decoration: none;
color: inherit;
}
.baj-card-link:hover .baj-card-title {
text-decoration: underline;
}
.baj-card-link:hover {
text-decoration: none;
}
.baj-card-meta {
display: flex;
gap: 1rem;
margin-bottom: 0.25rem;
align-items: baseline;
}
.baj-card-tag {
font-family: var(--font-hand);
font-size: 0.9375rem;
font-weight: 700;
color: var(--ink-blue);
}
.baj-card-date {
font-family: var(--font-sans);
font-size: 0.625rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #999;
}
.baj-card-title {
font-family: var(--font-serif);
font-size: 1.25rem;
font-weight: 700;
line-height: 1.3;
margin-bottom: 0.375rem;
color: var(--ink-black);
}
.baj-card-excerpt {
font-family: var(--font-serif);
font-size: 0.9375rem;
line-height: 1.55;
color: #555;
}
/* Featured card with image */
.baj-card-featured {
padding: 1.5rem 0;
}
.baj-card-featured .baj-card-image-wrap {
margin-bottom: 1rem;
overflow: hidden;
}
.baj-card-featured .baj-card-image {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
transition: transform 0.3s ease;
}
.baj-card-featured:hover .baj-card-image {
transform: scale(1.02);
}
.baj-card-featured .baj-card-title {
font-size: 1.5rem;
}
/* ===== SINGLE ARTICLE ===== */
.baj-article {
width: 100%;
max-width: var(--content-width);
margin: 0 auto;
padding: 2.5rem 1.25rem 3rem;
}
.baj-article-header {
margin-bottom: 2rem;
}
.baj-article-tag {
display: inline-block;
font-family: var(--font-hand);
font-size: 1rem;
font-weight: 700;
color: var(--ink-blue);
text-decoration: none;
margin-bottom: 0.5rem;
}
.baj-article-tag:hover {
text-decoration: underline;
}
.baj-article-date {
display: block;
font-family: var(--font-sans);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #666;
margin-bottom: 0.75rem;
}
.baj-article-title {
font-family: var(--font-serif);
font-size: 1.75rem;
font-weight: 700;
line-height: 1.2;
margin-bottom: 0.75rem;
}
.baj-article-excerpt {
font-family: var(--font-serif);
font-size: 1.0625rem;
line-height: 1.6;
color: #555;
margin-bottom: 1.5rem;
}
/* Article content */
.baj-article-content {
font-family: var(--font-serif);
font-size: 1.0625rem;
line-height: 1.75;
color: #222;
overflow: visible;
}
/* Author */
.baj-article-footer {
margin-top: 3rem;
}
.baj-author {
display: flex;
gap: 1rem;
align-items: center;
padding: 1.5rem 0;
}
.baj-author-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
}
.baj-author-name {
font-family: var(--font-sans);
font-size: 0.875rem;
font-weight: 600;
}
.baj-author-bio {
font-family: var(--font-sans);
font-size: 0.8125rem;
color: var(--ink-gray);
margin-top: 0.25rem;
}
/* Post navigation */
.baj-post-nav {
display: flex;
justify-content: space-between;
gap: 2rem;
margin-top: 3rem;
padding-top: 1.5rem;
border-top: 1px solid var(--rule-light);
}
.baj-post-nav-prev,
.baj-post-nav-next {
text-decoration: none;
color: inherit;
max-width: 50%;
}
.baj-post-nav-next {
text-align: right;
margin-left: auto;
}
.baj-post-nav-label {
display: block;
font-family: var(--font-sans);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--ink-gray);
margin-bottom: 0.25rem;
}
.baj-post-nav-title {
display: block;
font-family: var(--font-serif);
font-size: 1rem;
font-weight: 600;
line-height: 1.3;
}
.baj-post-nav-prev:hover .baj-post-nav-title,
.baj-post-nav-next:hover .baj-post-nav-title {
text-decoration: underline;
}
/* ===== GHOST CONTENT (gh-content) ===== */
/* Styles for content rendered by Ghost editor */
.gh-content p {
margin-bottom: 1.25rem;
}
.gh-content h2 {
font-family: var(--font-sans);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
margin: 2.5rem 0 1rem;
}
.gh-content h3 {
font-family: var(--font-serif);
font-size: 1.25rem;
font-weight: 700;
margin: 2rem 0 0.75rem;
}
.gh-content a {
color: var(--ink-blue);
text-decoration: underline;
}
.gh-content blockquote {
border-left: 2px solid var(--rule-dark);
padding-left: 1.25rem;
margin: 1.5rem 0;
font-style: italic;
color: #444;
}
.gh-content ul,
.gh-content ol {
margin: 1.25rem 0;
padding-left: 1.5rem;
}
.gh-content li {
margin-bottom: 0.5rem;
}
.gh-content figure {
margin: 2rem 0;
}
.gh-content figcaption {
font-family: var(--font-hand);
color: var(--ink-blue);
font-size: 1rem;
margin-top: 0.5rem;
text-align: center;
}
/* Ghost editor images — evidence/tape style */
.gh-content img {
display: block;
width: 100%;
max-width: 100%;
padding: 0.75rem;
background: #fff;
border: 1px solid var(--rule-light);
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.08),
0 4px 20px rgba(0, 0, 0, 0.04);
transform: rotate(-0.5deg);
}
.gh-content figure:nth-child(even) img {
transform: rotate(0.7deg);
}
.gh-content figure:nth-child(3n) img {
transform: rotate(-0.3deg);
}
/* Ghost gallery */
.gh-content .kg-gallery-container {
margin: 2rem 0;
}
.gh-content .kg-gallery-row {
display: flex;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.gh-content .kg-gallery-image img {
width: 100%;
height: auto;
padding: 0;
background: none;
border: none;
box-shadow: none;
transform: none;
}
/* Ghost width classes */
.gh-content .kg-width-wide {
position: relative;
width: calc(100% + 4rem);
margin-left: -2rem;
margin-right: -2rem;
}
.gh-content .kg-width-full {
position: relative;
width: 100vw;
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
}
/* Ghost callout card → works as MarginNote */
.gh-content .kg-callout-card {
font-family: var(--font-hand);
font-weight: 700;
font-size: 1.15rem;
color: var(--ink-blue);
background: rgba(0, 103, 222, 0.05);
border-left: 3px solid var(--ink-blue);
padding: 1rem 1.25rem;
margin: 1.5rem 0;
border-radius: 0;
}
.gh-content .kg-callout-card .kg-callout-text {
line-height: 1.5;
}
/* Ghost bookmark card */
.gh-content .kg-bookmark-card {
border: 1px solid var(--rule-light);
border-radius: 0;
overflow: hidden;
}
.gh-content .kg-bookmark-container {
display: flex;
text-decoration: none;
color: inherit;
}
.gh-content .kg-bookmark-content {
flex: 1;
padding: 1rem;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.gh-content .kg-bookmark-title {
font-family: var(--font-sans);
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.3;
margin-bottom: 0.375rem;
}
.gh-content .kg-bookmark-description {
font-family: var(--font-serif);
font-size: 0.8125rem;
line-height: 1.5;
color: #555;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 0.5rem;
}
.gh-content .kg-bookmark-metadata {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-sans);
font-size: 0.6875rem;
color: var(--ink-gray);
}
.gh-content .kg-bookmark-icon {
width: 16px;
height: 16px;
}
.gh-content .kg-bookmark-author,
.gh-content .kg-bookmark-publisher {
font-weight: 500;
}
.gh-content .kg-bookmark-thumbnail {
width: 200px;
flex-shrink: 0;
}
.gh-content .kg-bookmark-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
padding: 0;
background: none;
border: none;
box-shadow: none;
transform: none;
}
/* Ghost embed (Spotify, YouTube etc) */
.gh-content .kg-embed-card {
margin: 2rem 0;
}
/* ===== PAGE ===== */
.baj-page {
width: 100%;
max-width: var(--content-width);
margin: 0 auto;
padding: 2.5rem 1.25rem 3rem;
}
.baj-page-title {
font-family: var(--font-serif);
font-size: 2rem;
font-weight: 700;
line-height: 1.2;
margin-bottom: 1rem;
}
.baj-page-content {
font-family: var(--font-serif);
font-size: 1.0625rem;
line-height: 1.75;
color: #222;
}
/* ===== TAG PAGE ===== */
.baj-tag-page {
width: 100%;
max-width: var(--content-width);
margin: 0 auto;
padding: 0 1.25rem;
}
.baj-tag-header {
padding: 2.5rem 0 0;
}
.baj-tag-title {
font-family: var(--font-serif);
font-size: 1.75rem;
font-weight: 700;
line-height: 1.2;
margin-bottom: 0.75rem;
}
.baj-tag-description {
font-family: var(--font-serif);
font-size: 1rem;
line-height: 1.6;
color: #555;
margin-bottom: 1.5rem;
}
/* ===== AUTHOR PAGE ===== */
.baj-author-page {
width: 100%;
max-width: var(--content-width);
margin: 0 auto;
padding: 0 1.25rem;
}
.baj-author-header {
padding: 2.5rem 0 0;
text-align: center;
}
.baj-author-page-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
margin: 0 auto 1rem;
}
.baj-author-page-name {
font-family: var(--font-serif);
font-size: 1.75rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.baj-author-page-bio {
font-family: var(--font-serif);
font-size: 1rem;
line-height: 1.6;
color: #555;
max-width: 500px;
margin: 0 auto 1.5rem;
}
/* ===== SUBSCRIBE CTA ===== */
.baj-subscribe-cta {
max-width: var(--content-width);
margin: 0 auto;
padding: 2.5rem 1.25rem;
text-align: center;
border-top: 1px solid var(--rule-light);
}
.baj-subscribe-title {
font-family: var(--font-sans);
font-size: 1rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.baj-subscribe-text {
font-family: var(--font-serif);
font-size: 0.9375rem;
color: #555;
margin-bottom: 1.25rem;
}
.baj-subscribe-section {
border-top: 1px solid var(--rule-dark);
padding: 2.5rem 1.25rem;
}
.baj-subscribe-inner {
max-width: var(--content-width);
margin: 0 auto;
text-align: center;
}
.baj-subscribe-heading {
font-family: var(--font-sans);
font-size: 1.125rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.baj-subscribe-description {
font-family: var(--font-serif);
font-size: 0.9375rem;
color: #555;
margin-bottom: 1.25rem;
}
.baj-subscribe-signed-in {
font-family: var(--font-sans);
font-size: 0.8125rem;
color: var(--ink-gray);
}
/* ===== ERROR PAGE ===== */
.baj-error-page {
max-width: var(--content-width);
margin: 0 auto;
padding: 5rem 1.25rem;
text-align: center;
}
.baj-error-code {
font-family: var(--font-sans);
font-size: 6rem;
font-weight: 700;
color: var(--rule-light);
line-height: 1;
margin-bottom: 1rem;
}
.baj-error-message {
font-family: var(--font-serif);
font-size: 1.125rem;
color: #555;
margin-bottom: 2rem;
}
.baj-error-link {
font-family: var(--font-sans);
font-size: 0.875rem;
font-weight: 500;
}
/* ===== PAGINATION ===== */
.baj-pagination {
padding: 2rem 0;
text-align: center;
}
.baj-pagination a {
font-family: var(--font-sans);
font-size: 0.875rem;
font-weight: 500;
color: var(--ink-black);
padding: 0.5rem 1rem;
}
/* ===========================================================
BRANDANATOMY SPECIAL ELEMENTS
These classes can be used in Ghost HTML cards:
text
text
=========================================================== */
/* Hand Circle — SVG circle around text */
.hand-circle {
position: relative;
display: inline;
color: var(--ink-blue);
white-space: nowrap;
}
.hand-circle::after {
content: '';
position: absolute;
left: -12px;
right: -12px;
top: -8px;
bottom: -8px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 50' preserveAspectRatio='none'%3E%3Cpath d='M 6 25 C 4 10, 30 2, 60 3 C 90 4, 116 8, 117 25 C 118 42, 92 48, 60 47 C 28 46, 4 40, 6 25' fill='none' stroke='%230067DE' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
pointer-events: none;
}
/* Hand Underline — wavy SVG underline */
.hand-underline {
position: relative;
display: inline;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 4' preserveAspectRatio='none'%3E%3Cpath d='M0 2 Q 20 0.5, 40 2.5 T 80 2 T 100 2' fill='none' stroke='%230067DE' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: repeat-x;
background-position: bottom;
background-size: auto 3px;
padding-bottom: 2px;
}
/* Margin Note — callout with hand font */
.margin-note {
font-family: var(--font-hand);
font-weight: 700;
font-size: 1.15rem;
line-height: 1.4;
color: var(--ink-blue);
background: rgba(0, 103, 222, 0.05);
border-left: 3px solid var(--ink-blue);
padding: 1rem 1.25rem;
margin: 1.5rem 0;
}
/* Blue Highlighter */
.highlight-blue {
background: linear-gradient(to bottom, transparent 60%, rgba(0, 103, 222, 0.15) 60%);
padding: 0 2px;
}
/* Evidence Image — photo with tape effect */
.evidence-image {
position: relative;
display: block;
margin: 2rem 0;
}
.evidence-image img {
display: block;
max-width: 100%;
padding: 12px 12px 40px 12px;
background: white;
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.08),
0 4px 12px rgba(0, 0, 0, 0.04);
transform: rotate(-1deg);
}
.evidence-image figcaption {
font-family: var(--font-hand);
color: var(--ink-blue);
font-size: 1.1rem;
margin-top: 0.75rem;
transform: rotate(0.5deg);
text-align: center;
}
/* ===== RESPONSIVE ===== */
/* Tablet */
@media (min-width: 480px) {
.baj-logo img {
height: 1.75rem;
}
.baj-nav ul {
gap: 1.25rem;
}
.baj-nav a,
.baj-nav .nav a {
font-size: 1.0625rem;
}
}
@media (min-width: 768px) {
.baj-header-inner {
padding: 1rem 2rem;
}
.baj-logo img {
height: 2rem;
}
.baj-nav ul {
gap: 1.75rem;
}
.baj-nav a,
.baj-nav .nav a {
font-size: 1.125rem;
}
.baj-home,
.baj-tag-page,
.baj-author-page {
padding: 0 2rem;
}
.baj-hero {
padding: 4rem 0 0;
}
.baj-hero-title {
font-size: 2.5rem;
}
.baj-hero-lead {
font-size: 1.1875rem;
}
.baj-card-title {
font-size: 1.375rem;
}
.baj-card-featured .baj-card-title {
font-size: 1.75rem;
}
.baj-article {
padding: 3.5rem 2rem 4rem;
}
.baj-article-title {
font-size: 2.25rem;
}
.baj-page {
padding: 3.5rem 2rem 4rem;
}
.baj-page-title {
font-size: 2.5rem;
}
.baj-footer-inner {
padding: 1.5rem 2rem;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
}
/* ===== CUSTOM PAYWALL (v4) ===== */
/* This works with partials/content-cta.hbs */
/* Ensure the parent Ghost container is invisible/unobtrusive if it still exists */
.gh-post-upgrade-cta {
background: none !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
box-shadow: none !important;
min-height: 0 !important;
}
.gh-post-upgrade-cta-content {
background: none !important;
padding: 0 !important;
width: 100% !important;
max-width: none !important;
}
/* My Custom Styles */
.baj-paywall {
position: relative;
/* Pull up to overlap content for fade effect */
margin-top: -160px;
padding-top: 140px;
padding-bottom: 4rem;
text-align: center;
background: linear-gradient(to bottom, rgba(250, 250, 250, 0) 0%, var(--paper) 40%, var(--paper) 100%);
z-index: 10;
}
.baj-paywall-content {
position: relative;
z-index: 20;
padding: 0 1.5rem;
}
.baj-paywall-title {
font-family: var(--font-serif);
font-size: 1.75rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--ink-black);
}
.baj-paywall-text {
font-family: var(--font-sans);
font-size: 1rem;
color: var(--ink-gray);
margin-bottom: 1.5rem;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
.baj-btn-primary {
display: inline-block;
color: #fff;
background: var(--ink-black);
padding: 0.75rem 2.5rem;
font-family: var(--font-sans);
font-weight: 600;
text-decoration: none;
border-radius: 2px;
transition: background 0.2s;
}
.baj-btn-primary:hover {
background: #333;
text-decoration: none;
color: #fff;
}
.baj-paywall-signin {
margin-top: 1rem;
font-family: var(--font-sans);
font-size: 0.875rem;
color: var(--ink-gray);
}
.baj-paywall-signin a {
color: var(--ink-black);
text-decoration: underline;
font-weight: 600;
}
/* Mobile Header Button Adjustments */
.baj-subscribe-text-mobile {
display: none;
}
@media (max-width: 768px) {
.baj-subscribe-text-desktop {
display: none;
}
.baj-subscribe-text-mobile {
display: inline;
}
.baj-subscribe-btn {
padding: 0.4rem 0.8rem !important;
/* Smaller padding */
font-size: 0.75rem !important;
}
}
/* ===== V5 FIXES ===== */
/* 1. Paywall Button & Position */
.baj-paywall {
/* Reduced negative margin to reveal more content above */
margin-top: -60px !important;
padding-top: 100px !important;
background: linear-gradient(to bottom, rgba(250, 250, 250, 0) 0%, var(--paper) 60%, var(--paper) 100%) !important;
}
.baj-paywall .baj-btn-primary {
color: #fff !important;
/* Force White Text */
background: var(--ink-black) !important;
text-decoration: none !important;
}
.baj-paywall .baj-btn-primary:hover {
color: #fff !important;
background: #333 !important;
}
/* 2. Mobile Logo Alignment */
@media (max-width: 768px) {
.baj-header-inner {
justify-content: flex-start;
/* Align items start to help referencing */
gap: 0;
/* Control spacing manually */
}
.baj-burger {
order: 1;
margin-right: 15px;
/* Space between burger and logo */
}
.baj-logo {
order: 2;
margin: 0 !important;
/* Remove auto margins */
margin-right: auto !important;
/* Push Account to the right */
transform: scale(1.1);
display: flex;
/* Fix vertical align */
align-items: center;
}
.baj-account-wrap {
order: 3;
margin-left: 0;
}
}
/* 3. Desktop Subscribe Text Visibility */
.baj-subscribe-text-desktop {
display: inline-block;
}
.baj-subscribe-text-mobile {
display: none;
}
@media (max-width: 768px) {
.baj-subscribe-text-desktop {
display: none !important;
}
.baj-subscribe-text-mobile {
display: inline-block !important;
}
}
/* ===== V6 FIXES ===== */
/* 1. Paywall Fake Content (Simulated Fade) */
.baj-paywall {
margin-top: -20px !important;
/* Less negative margin since we insert fake content */
padding-top: 2rem !important;
background: transparent !important;
/* Let fake content show */
position: relative;
}
.baj-paywall-fake-content {
font-family: var(--font-serif);
font-size: 1.1rem;
line-height: 1.6;
color: var(--ink-black);
text-align: left;
max-width: 720px;
margin: 0 auto 2rem;
opacity: 0.7;
/* Gradient Mask to fade it out */
mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
pointer-events: none;
/* Non-selectable */
}
/* Fake lines to fill space if excerpt is short */
.baj-paywall-fake-lines {
display: block;
height: 100px;
background: repeating-linear-gradient(to bottom,
var(--ink-gray) 0,
var(--ink-gray) 1px,
transparent 1px,
transparent 1.6rem);
opacity: 0.1;
margin-top: 1rem;
}
.baj-paywall-content {
position: relative;
z-index: 20;
background: linear-gradient(to bottom, rgba(250, 250, 250, 0) 0%, var(--paper) 30%, var(--paper) 100%);
padding: 2rem 1.5rem 4rem;
margin-top: -80px;
/* Overlap the fake content */
}
/* 2. Logout Link Style */
.baj-logout-link {
font-family: var(--font-hand);
/* Match Nav */
font-size: 1.125rem;
font-weight: 700;
color: var(--ink-black);
text-decoration: none;
cursor: pointer;
}
.baj-logout-link:hover {
color: var(--ink-blue);
text-decoration: underline;
}
/* Mobile Logout adjustments */
@media (max-width: 768px) {
.baj-logout-link {
font-size: 1rem;
}
}
/* ===== V7 FIXES ===== */
.baj-paywall {
position: relative;
/* Reset margins for clean flow */
margin-top: 0 !important;
padding-top: 2rem !important;
background: transparent !important;
}
.baj-paywall-fake-content {
font-family: var(--font-serif);
font-size: 1.25rem;
/* Match body text */
line-height: 1.6;
color: var(--ink-black);
text-align: left;
max-width: 720px;
margin: 0 auto 0;
/* No bottom margin, let mask handle it */
opacity: 1;
/* Fully visible base, mask handles fade */
overflow: hidden;
/* The Fade Mask */
mask-image: linear-gradient(to bottom, black 0%, black 20%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 20%, transparent 100%);
height: 150px;
/* Fixed height for the fade area */
pointer-events: none;
}
.baj-paywall-fake-content p {
margin-bottom: 0;
color: var(--ink-black);
opacity: 0.8;
}
/* Gray blocks that look like text lines */
.baj-paywall-fake-lines {
display: block;
height: 12px;
/* Text line height approx */
background: var(--ink-gray);
/* Visible gray */
opacity: 0.3;
/* Subtle but visible */
margin-top: 1rem;
border-radius: 2px;
}
.baj-paywall-content {
position: relative;
z-index: 20;
/* Pull up to cover the end of the fade */
margin-top: -50px;
padding: 2rem 1.5rem 4rem;
background: linear-gradient(to bottom, rgba(250, 250, 250, 0) 0%, var(--paper) 40%, var(--paper) 100%);
}
/* ===== V8 FIXES ===== */
/* 1. Hero Layout */
.baj-hero {
padding-top: 4rem !important;
padding-bottom: 4rem !important;
max-width: 800px;
margin: 0 auto;
/* Center the container, text can be left */
}
.baj-kicker {
font-family: var(--font-sans);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--ink-gray);
margin-bottom: 1rem;
}
.baj-hero-title {
font-family: var(--font-serif);
font-size: 3rem;
/* Larger */
font-weight: 700;
line-height: 1.1;
color: var(--ink-black);
margin-bottom: 1.5rem;
}
.baj-season-title {
display: inline-block;
font-family: var(--font-hand);
/* Handwritten style for emphasis */
font-size: 1.5rem;
color: var(--ink-blue);
margin-bottom: 1.5rem;
transform: rotate(-2deg);
/* Slight tilt for 'handwritten' vibe */
}
.baj-hero-lead {
font-family: var(--font-serif);
font-size: 1.25rem;
line-height: 1.6;
color: var(--ink-black);
margin-bottom: 2rem;
max-width: 600px;
}
/* 2. Text Highlight Fix */
/* Ensure text is black, but SVG/Decorations (if handled by color) remain blue */
/* We assume .hand-circle uses pseudo-element or SVG colored by something else */
/* If it uses border/color, we need to split it. */
/* Safe bet: Wrap text in span with color: black !important */
.hand-circle-text {
color: var(--ink-black) !important;
position: relative;
z-index: 1;
}
.hand-circle {
/* Ensure the container (which might draw the circle) keeps the blue color context if needed */
color: var(--ink-blue);
}
/* 3. Spotify Embed */
.baj-spotify-wrapper {
margin-top: 2.5rem;
margin-bottom: 2.5rem;
width: 100%;
max-width: 600px;
/* Restrict width */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
/* Subtle lift */
border-radius: 12px;
}
/* ===== V10 FIXES (Typography & Images) ===== */
/* 1. Article Headings */
.gh-content h2 {
font-family: var(--font-serif) !important;
font-size: 2.25rem !important;
/* Big like H1 */
font-weight: 700 !important;
text-transform: none !important;
/* No caps */
letter-spacing: normal !important;
color: var(--ink-black) !important;
margin-top: 3rem !important;
margin-bottom: 1rem !important;
line-height: 1.2 !important;
}
.gh-content h3 {
font-family: var(--font-serif) !important;
font-size: 1.75rem !important;
font-weight: 700 !important;
color: var(--ink-black) !important;
margin-top: 2.5rem !important;
margin-bottom: 0.75rem !important;
}
/* 2. Clean Images (No Ghost Cards Effects) */
.kg-card,
.kg-image-card,
.kg-gallery-card,
.kg-embed-card {
background: transparent !important;
box-shadow: none !important;
border: none !important;
border-radius: 0 !important;
margin: 2rem 0 !important;
}
.kg-image-card img,
.kg-gallery-image img {
background: transparent !important;
/* Ensure PNGs are clean */
box-shadow: none !important;
border-radius: 0 !important;
/* Or minimalist radius if requested, user said "control shadows myself" so 0 is best */
max-width: 100% !important;
height: auto !important;
}
/* Remove any caption backgrounds if present */
.kg-card figcaption {
text-align: center;
color: var(--ink-gray);
font-family: var(--font-sans);
font-size: 0.875rem;
margin-top: 0.5rem;
}
/* ===== V11 FIXES (Final Polish) ===== */
/* 1. Typography Proportions (Notion-like) */
.gh-content h2 {
font-size: 1.85rem !important;
/* Clearly smaller than H1 */
font-weight: 600 !important;
margin-top: 2.5rem !important;
margin-bottom: 0.75rem !important;
}
.gh-content h3 {
font-size: 1.5rem !important;
font-weight: 600 !important;
margin-top: 2rem !important;
margin-bottom: 0.5rem !important;
}
/* 2. Image Clean-up */
/* Strip EVERYTHING that could look like a card */
.gh-content figure,
.kg-card,
.kg-image-card,
.kg-gallery-card {
margin: 2rem 0 !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
display: block !important;
/* Ensure no flex shrinking */
}
/* Target the image itself */
.gh-content img,
.kg-image-card img {
display: block !important;
max-width: 100% !important;
height: auto !important;
margin: 0 auto !important;
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 !important;
border: none !important;
}
/* Specific fix if Ghost wraps it in a canvas or div */
.kg-image-card .kg-image {
background: transparent !important;
}
/* ===== V12 FIXES (Account Link) ===== */
/* Account Link (replaces Logout) */
.baj-account-link-custom {
font-family: var(--font-hand);
/* Match Nav style requested */
font-size: 1.125rem;
font-weight: 700;
color: var(--ink-black);
text-decoration: none;
cursor: pointer;
}
.baj-account-link-custom:hover {
color: var(--ink-blue);
text-decoration: underline;
}
@media (max-width: 768px) {
.baj-account-link-custom {
font-size: 1rem;
}
}
/* ===== V13 FIXES (Paywall Overlap) ===== */
.baj-paywall {
position: relative;
/* Pull the whole component UP to overlap the last paragraph of content */
margin-top: -120px !important;
padding-top: 0 !important;
background: transparent !important;
z-index: 10;
/* Ensure it doesn't block interaction with text above the fade */
pointer-events: none;
}
.baj-paywall-content {
pointer-events: auto;
/* Buttons must work */
position: relative;
z-index: 20;
/* The gradient background handles the "Fade Out" effect over the real text */
background: linear-gradient(to bottom, rgba(250, 250, 250, 0) 0%, var(--paper) 30%, var(--paper) 100%);
padding: 6rem 1.5rem 4rem;
/* Top padding creates the fade area */
}
/* Fake lines are purely decoration now, sitting inside the fade area */
.baj-paywall-fake-content {
display: none;
/* Hide fake lines if we are overlapping real text? */
/* Wait, if manual break is at END, Ghost shows text.
If manual break is at START, Ghost shows nothing.
If we hide fake content, empty posts will look blank.
We should KEEP fake content but position it to be unobtrusive. */
display: block;
opacity: 0.2;
margin-top: 2rem;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
/* ===== V15 FIXES (No Rotation) ===== */
/* Force disable rotation on Article Images */
.gh-content figure,
.gh-content img,
.kg-card,
.kg-image-card,
.kg-gallery-card {
transform: none !important;
rotate: 0deg !important;
}
/* ===== V16 FIXES (Paywall Left Align) ===== */
.baj-paywall-content {
text-align: left !important;
/* Force Left Align */
padding-left: 0 !important;
/* Align with content, or keep padding? */
/* We need some padding if it's inside the article container, but maybe less? */
/* gh-content usually has no padding. */
/* Let's keep padding but align text left. */
padding: 6rem 1.5rem 4rem !important;
}
.baj-paywall-title {
display: flex;
align-items: center;
justify-content: flex-start;
/* Left align title */
gap: 0.75rem;
font-size: 1.75rem !important;
margin-bottom: 1rem !important;
}
.baj-paywall-icon {
width: 28px;
height: 28px;
stroke: var(--ink-black);
}
.baj-paywall-text {
text-align: left !important;
max-width: 600px;
/* Limit width for readability */
margin-left: 0 !important;
margin-right: auto !important;
}
.baj-paywall .baj-btn-primary {
margin: 1.5rem 0 1rem 0 !important;
/* Align button left */
display: inline-block !important;
/* Not centered block */
}
.baj-paywall-signin {
text-align: left !important;
}
/* ===== V17 FIXES (Safe Fade - No Cutoff) ===== */
.baj-paywall {
position: relative;
margin-top: 2rem !important;
/* Standard spacing below content */
padding-top: 0 !important;
background: transparent !important;
z-index: 10;
pointer-events: none;
/* Let fade be click-through, but content active */
}
/* The Fade Overlay - reaches UP over the content */
.baj-paywall::before {
content: "";
position: absolute;
top: -160px;
/* Reach up 160px to fade the end of article */
left: 0;
right: 0;
height: 161px;
/* 160px + 1px overlap */
background: linear-gradient(to bottom, rgba(250, 250, 250, 0) 0%, var(--paper) 100%);
pointer-events: none;
z-index: 5;
}
.baj-paywall-content {
/* Main box sits visibly BELOW the fade */
position: relative;
z-index: 20;
pointer-events: auto;
background: var(--paper) !important;
/* Solid background for the box itself */
padding: 2rem 1.5rem 4rem !important;
/* Normal padding, no huge top gap */
/* Left Align logic from v16 */
text-align: left !important;
}
.baj-paywall-title {
/* Ensure Icon layout matches v16 */
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.75rem;
font-size: 1.75rem !important;
margin-bottom: 1rem !important;
}
/* ===== V18 FIXES (Footer Subscribe Redesign) ===== */
.baj-subscribe-section {
margin: 4rem 0;
padding: 0 1.5rem;
}
.baj-subscribe-inner {
background: var(--ink-black);
/* High contrast background */
color: var(--paper);
/* White text */
padding: 3rem 2rem;
border-radius: 4px;
/* Slight rounding or 0? 4px is standard */
text-align: left !important;
/* Force Left Align */
position: relative;
overflow: hidden;
}
.baj-subscribe-heading {
font-family: var(--font-serif);
font-size: 2.5rem;
font-weight: 700;
line-height: 1.1;
margin-bottom: 1rem;
color: var(--paper);
/* White text */
}
.baj-subscribe-text {
font-family: var(--font-sans);
font-size: 1.125rem;
margin-bottom: 2rem;
opacity: 0.9;
max-width: 600px;
color: var(--paper);
}
.baj-subscribe-text strong {
color: var(--paper);
font-weight: 600;
}
/* Form Styling */
.baj-subscribe-form-box {
max-width: 500px;
}
.baj-subscribe-form-box .form-group {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.baj-subscribe-input {
flex: 1;
min-width: 200px;
padding: 0.75rem 1rem;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 4px;
background: rgba(255, 255, 255, 0.1);
color: var(--paper);
font-family: var(--font-sans);
font-size: 1rem;
}
.baj-subscribe-input:focus {
outline: none;
background: rgba(255, 255, 255, 0.2);
border-color: var(--paper);
}
.baj-subscribe-input::placeholder {
color: rgba(255, 255, 255, 0.6);
}
.baj-subscribe-section .baj-subscribe-btn {
background: var(--accent-blue);
color: white;
padding: 0.75rem 1.5rem;
border: none;
border-radius: 4px;
font-weight: 600;
cursor: pointer;
font-family: var(--font-sans);
transition: background 0.2s;
/* Reset previous button styles if they conflict */
margin: 0;
width: auto;
}
.baj-subscribe-section .baj-subscribe-btn:hover {
background: #2b4eff;
/* Slightly lighter blue or darker? */
text-decoration: none;
}
.baj-subscribe-note {
font-size: 0.875rem;
margin-top: 1rem;
opacity: 0.6;
color: var(--paper);
}
/* Success/Error messages */
.message-success,
.message-error {
display: none;
font-size: 0.9rem;
margin-top: 0.5rem;
}
.success .message-success {
display: block;
color: #4ade80;
/* Green */
}
.error .message-error {
display: block;
color: #f87171;
/* Red */
}
/* Mobile Tweak */
@media (max-width: 600px) {
.baj-subscribe-heading {
font-size: 2rem;
}
.baj-subscribe-form-box .form-group {
flex-direction: column;
}
.baj-subscribe-section .baj-subscribe-btn {
width: 100%;
text-align: center;
}
}
/* ===== V19 FIXES (Footer Polish) ===== */
/* 1. Author Section Context */
.baj-article-footer {
margin-top: 2rem !important;
/* Reduced from 3rem */
border-top: 1px solid var(--rule-light);
/* Single divider above author */
padding-top: 1rem !important;
}
.baj-author {
padding: 0 !important;
/* Remove huge padding */
}
/* Remove the explicit HR if we used border-top, or hide it */
.baj-article-footer hr.baj-rule-light {
display: none !important;
}
/* 2. Subscribe Button (Blue Always) */
.baj-subscribe-section .baj-subscribe-btn {
background-color: var(--accent-blue) !important;
color: white !important;
}
.baj-subscribe-section .baj-subscribe-btn:hover {
background-color: #2b4eff !important;
/* Roughly match, or darker */
opacity: 0.9;
}
/* 3. Subscribe Section Layout */
.baj-subscribe-section {
margin: 3rem auto 4rem !important;
/* Spacing from Prev/Next nav */
padding: 0 !important;
/* Remove side padding if in container */
max-width: var(--content-width);
/* Align with article width */
width: 100%;
}
.baj-subscribe-inner {
/* Ensure box looks solid */
background: var(--ink-black) !important;
border-radius: 8px !important;
/* Slightly more rounded */
}
/* Post Nav Spacing */
.baj-post-nav {
margin-top: 2rem !important;
padding-top: 1.5rem !important;
border-top: 1px solid var(--rule-light);
margin-bottom: 3rem !important;
/* Space before Subscribe box */
}
/* ===== V20 FIXES (Homepage Section Header) ===== */
.baj-section-header {
margin: 4rem 0 2rem;
padding-top: 1rem;
border-top: 4px solid var(--ink-black);
/* Heavy top border */
display: flex;
align-items: baseline;
/* Align text baselines */
gap: 1.5rem;
}
.baj-section-label {
font-family: var(--font-serif);
/* Switch to Serif */
font-size: 2rem;
/* Much bigger */
font-weight: 700;
color: var(--ink-black);
text-transform: none;
/* No more all-caps (or keep it if it looks newsy?) */
/* Let's try "Latest Investigations" in Standard Case Serif for authority */
letter-spacing: -0.02em;
}
.baj-hand-note {
/* Adjust hand note to fit new size */
font-size: 1.5rem;
color: var(--ink-blue);
transform: translateY(-4px);
/* Slight lift */
}
/* Optional: Add a 'vol' or date style if needed, but simplicity is good. */
/* ===== V21 FIXES (Margins & Mobile) ===== */
/* 1. Subscribe Block Spacing */
.baj-subscribe-section {
margin-top: 1.5rem !important;
/* Close to author */
margin-bottom: 2rem !important;
}
/* 2. Homepage Header Spacing & Mobile */
.baj-section-header {
margin-top: 2rem !important;
/* Reduced from 4rem */
width: 100%;
align-items: center !important;
}
/* Fix Mobile Wrapping */
@media (max-width: 600px) {
.baj-section-header {
flex-wrap: wrap;
gap: 0.5rem;
}
.baj-section-label {
font-size: 1.5rem !important;
/* Smaller on mobile to fit */
line-height: 1.2;
width: 100%;
/* Force full width line */
}
.baj-hand-note {
font-size: 1.125rem;
margin-left: auto;
/* Push to right or keep left? */
/* User said "disgusting layout". Usually keeping 'start here' aligned looks okay if heading breaks. */
}
}
/* 3. Spotify Embed Adjustment */
/* Since we moved it up, ensure spacing is good */
.baj-spotify-wrapper {
margin: 1.5rem 0 2rem;
}
/* ===== V22 FIXES (Final Homepage Spacing) ===== */
/* 1. Tighten Season Title to Spotify Player */
.baj-spotify-wrapper {
margin: 1rem 0 0.5rem !important;
/* Reduced bottom margin */
}
.baj-season-title {
margin-top: 0 !important;
/* Remove top margin from title */
/* Ensure it's close */
}
/* 2. Remove Gap above Latest Investigations */
.baj-hero {
padding-bottom: 0 !important;
/* Remove padding from hero container */
margin-bottom: 0 !important;
}
.baj-section-header {
margin-top: 1rem !important;
/* Minimal gap from Hero text/embellishment */
padding-top: 0.5rem !important;
}
/* Ensure no other margins interfere */
.baj-hero-lead {
margin-bottom: 1.5rem !important;
}
/* ===== V23 FIXES (Mobile Cleanup) ===== */
@media (max-width: 768px) {
.baj-section-header .baj-hand-note {
display: none !important;
}
/* Ensure Header title doesn't break weirdly */
.baj-section-label {
font-size: 1.75rem !important;
width: 100%;
display: block;
}
.baj-section-header {
display: block !important;
/* Stack blocking */
padding-top: 0.5rem;
}
}
/* ===== V24 — NYT-STYLE HEADER & MULTI-TAG CARDS ===== */
/* ─── 0. Hide / Show layers ─── */
/* Desktop header hidden on mobile, Mobile header hidden on desktop */
.baj-header-desktop {
display: block;
}
.baj-header-mobile {
display: none;
}
/* Sticky header hidden by default, shown via JS on scroll (but let's define it) */
.baj-sticky-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 200;
background: var(--paper);
border-bottom: 1px solid var(--rule-light);
transform: translateY(-100%);
transition: transform 0.35s ease;
display: none;
/* Hidden on mobile */
}
.baj-sticky-header.is-visible {
transform: translateY(0);
}
/* ─── 1. MAIN HEADER STRUCTURE ─── */
.baj-header {
width: 100%;
border-bottom: none !important;
/* We use nav-row border instead */
position: relative;
z-index: 100;
background: var(--paper);
}
.baj-header-inner {
width: 100%;
max-width: var(--wide-width);
margin: 0 auto;
padding: 0 1.5rem;
height: auto !important;
display: block !important;
/* Override flex */
}
/* ─── 2. DESKTOP HEADER — ROW 1: Logo & Actions ─── */
.baj-header-main-row {
display: flex;
align-items: center;
justify-content: center;
/* Center everything */
position: relative;
/* For absolute-positioned actions */
padding: 1.25rem 0 0.75rem;
}
.baj-header-logo-wrap {
text-align: center;
}
.baj-logo-desktop {
display: inline-block;
text-decoration: none;
color: var(--ink-black);
line-height: 0;
}
.baj-logo-desktop img {
height: 2.5rem;
/* Larger logo */
width: auto;
}
.baj-logo-text-big {
font-family: var(--font-sans);
font-size: 2rem;
font-weight: 700;
color: var(--ink-black);
white-space: nowrap;
letter-spacing: -0.02em;
}
/* Actions — positioned top-right, absolute */
.baj-header-actions-wrap {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
gap: 0.75rem;
}
.baj-btn-join {
font-family: var(--font-sans);
font-size: 0.75rem;
font-weight: 600;
color: #fff;
background: var(--ink-black);
padding: 0.5rem 1.25rem;
border-radius: 3px;
text-decoration: none;
white-space: nowrap;
transition: background 0.2s;
}
.baj-btn-join:hover {
background: #333;
text-decoration: none;
color: #fff;
}
.baj-login-link-simple {
font-family: var(--font-sans);
font-size: 0.75rem;
font-weight: 500;
color: var(--ink-gray);
text-decoration: none;
}
.baj-login-link-simple:hover {
color: var(--ink-black);
text-decoration: underline;
}
/* ─── 3. DESKTOP HEADER — ROW 2: Navigation Bar ─── */
.baj-header-nav-row {
border-top: 1px solid var(--rule-light);
border-bottom: 3px solid var(--ink-black);
/* Strong bottom rule like NYT */
padding: 0;
}
.baj-nav-bar {
display: flex;
justify-content: center;
}
.baj-nav-bar ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 0;
}
.baj-nav-bar ul li {
position: relative;
}
.baj-nav-bar ul li a {
display: block;
font-family: var(--font-sans);
font-size: 0.8125rem;
font-weight: 500;
color: var(--ink-black);
text-decoration: none;
padding: 0.625rem 1.25rem;
letter-spacing: 0.01em;
transition: background 0.15s, color 0.15s;
white-space: nowrap;
}
.baj-nav-bar ul li a:hover {
background: var(--paper-dark);
color: var(--ink-blue);
text-decoration: none;
}
/* ─── 4. STICKY HEADER (Desktop Only, On Scroll) ─── */
.baj-sticky-inner {
max-width: var(--wide-width);
margin: 0 auto;
padding: 0.5rem 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.baj-sticky-left {
flex-shrink: 0;
}
.baj-logo-sticky {
display: inline-block;
text-decoration: none;
color: var(--ink-black);
line-height: 0;
}
.baj-logo-sticky img {
height: 1.5rem;
width: auto;
}
.baj-logo-text-sticky {
font-family: var(--font-sans);
font-size: 1rem;
font-weight: 700;
color: var(--ink-black);
}
.baj-sticky-nav {
display: flex;
align-items: center;
flex-grow: 1;
justify-content: center;
}
.baj-sticky-nav ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 0.25rem;
}
.baj-sticky-nav ul li a {
display: block;
font-family: var(--font-sans);
font-size: 0.75rem;
font-weight: 500;
color: var(--ink-black);
text-decoration: none;
padding: 0.375rem 0.75rem;
border-radius: 3px;
transition: background 0.15s;
}
.baj-sticky-nav ul li a:hover {
background: var(--paper-dark);
text-decoration: none;
}
.baj-sticky-actions {
flex-shrink: 0;
}
.baj-btn-mini-sticky {
font-family: var(--font-sans);
font-size: 0.6875rem;
font-weight: 600;
color: #fff;
background: var(--ink-black);
padding: 0.375rem 1rem;
border-radius: 3px;
text-decoration: none;
white-space: nowrap;
transition: background 0.2s;
}
.baj-btn-mini-sticky:hover {
background: #333;
text-decoration: none;
color: #fff;
}
/* ─── 5. MOBILE MENU DIVIDER ─── */
.baj-mobile-divider {
display: block;
padding: 0 !important;
margin: 0 !important;
}
.baj-mobile-divider hr {
border: none;
border-top: 1px solid var(--rule-light);
margin: 0.75rem 0;
}
.baj-mobile-menu li {
margin-bottom: 0;
/* Reset — spacing controlled by the inside */
}
/* ─── 6. MULTI-TAG CARD STYLE ─── */
.baj-card-tag {
font-family: var(--font-hand);
font-size: 0.9rem;
font-weight: 700;
color: var(--ink-blue);
line-height: 1.3;
}
/* ─── 7. MOBILE RESPONSIVE ─── */
@media (max-width: 768px) {
/* Show mobile header, hide desktop header */
.baj-header-desktop {
display: none !important;
}
.baj-header-mobile {
display: flex !important;
align-items: center;
justify-content: space-between;
padding: 0.5rem 0;
height: 56px;
}
/* Sticky header hidden on mobile (mobile has own burger) */
.baj-sticky-header {
display: none !important;
}
/* mobile burger visible */
.baj-burger {
display: block !important;
order: 1;
}
/* mobile logo */
.baj-logo-mobile {
display: block;
order: 2;
text-decoration: none;
color: var(--ink-black);
line-height: 0;
flex-grow: 1;
text-align: center;
}
.baj-logo-mobile img {
height: 1.75rem;
width: auto;
display: inline-block;
}
.baj-mobile-spacer {
display: none !important;
}
.baj-header-mobile .baj-btn-mini-sticky {
order: 3;
flex-shrink: 0;
}
/* Mobile menu inherits existing styles */
/* Header inner layout */
.baj-header-inner {
padding: 0 1rem !important;
}
.baj-header {
border-bottom: 1px solid var(--rule-dark) !important;
}
}
/* ─── 8. DESKTOP SPECIFICS ─── */
@media (min-width: 769px) {
/* Hide burger and mobile elements on desktop */
.baj-burger {
display: none !important;
}
.baj-header-mobile {
display: none !important;
}
.baj-mobile-spacer {
display: none !important;
}
.baj-logo-mobile {
display: none !important;
}
/* Sticky header visible on desktop (controlled by JS) */
.baj-sticky-header {
display: block;
}
/* Ensure old .baj-nav and .baj-account-wrap don't interfere */
.baj-header .baj-nav {
display: none !important;
}
.baj-header .baj-account-wrap {
display: none !important;
}
}
/* ===== V25 — HEADER REFINEMENTS ===== */
/* ─── 1. Desktop Header ─── */
/* 1.1 Logo 2-3x bigger */
.baj-logo-desktop img {
height: 5rem !important;
/* was 2.5rem → 5rem (2x) */
width: auto;
}
.baj-logo-text-big {
font-size: 3.5rem !important;
/* was 2rem */
}
/* 1.2 Thinner nav border (standard divider, not heavy rule) */
.baj-header-nav-row {
border-bottom: 1px solid var(--rule-dark) !important;
/* was 3px */
border-top: 1px solid var(--rule-light) !important;
}
/* 1.3 Nav row thinner (less padding) */
.baj-nav-bar ul li a {
padding: 0.375rem 1.25rem !important;
/* was 0.625rem → 0.375rem (≈60%) */
font-size: 0.8125rem;
}
/* 1.4 Smaller Join button */
.baj-btn-join {
font-size: 0.6875rem !important;
/* was 0.75rem */
padding: 0.375rem 1rem !important;
/* was 0.5rem 1.25rem */
}
/* ─── 2. Sticky Header ─── */
/* 2.1 Center the nav properly (remove margin-left from logo pushing it) */
.baj-sticky-inner {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}
.baj-sticky-nav {
position: absolute !important;
left: 50% !important;
transform: translateX(-50%) !important;
flex-grow: 0 !important;
}
.baj-sticky-inner {
position: relative !important;
}
/* 2.2 Sticky logo 1.5x bigger */
.baj-logo-sticky img {
height: 2.25rem !important;
/* was 1.5rem → 2.25rem (1.5x) */
}
.baj-logo-text-sticky {
font-size: 1.5rem !important;
/* was 1rem */
}
/* ─── 3. Article Page Tags ─── */
/* Match the card tag style (handwritten font, blue) */
.baj-article-tags {
font-family: var(--font-hand) !important;
font-size: 1rem;
font-weight: 700;
color: var(--ink-blue);
margin-bottom: 0.25rem;
}
.baj-article-tags a {
font-family: var(--font-hand) !important;
font-size: 1rem;
font-weight: 700;
color: var(--ink-blue) !important;
text-decoration: none;
}
.baj-article-tags a:hover {
text-decoration: underline;
}
/* ─── 4. Mobile Fixes ─── */
@media (max-width: 768px) {
/* 4.1 Logo centering — use true centering via absolute positioning */
.baj-header-mobile {
position: relative !important;
}
.baj-logo-mobile {
position: absolute !important;
left: 50% !important;
transform: translateX(-50%) !important;
flex-grow: 0 !important;
}
.baj-mobile-spacer {
width: 24px !important;
flex-shrink: 0 !important;
}
/* 4.2 Make mobile header sticky */
.baj-header {
position: sticky !important;
top: 0 !important;
z-index: 100 !important;
background: var(--paper) !important;
}
/* 4.3 Burger menu items left-aligned */
.baj-mobile-menu {
align-items: flex-start !important;
/* was center */
padding: 5rem 2rem !important;
}
.baj-mobile-menu ul {
text-align: left !important;
/* was center */
}
.baj-mobile-menu a {
text-align: left !important;
}
}
/* ===== V26 — FINAL HEADER TWEAKS ===== */
/* ─── 1.1 Logo 30% bigger (5rem * 1.3 = 6.5rem) ─── */
.baj-logo-desktop img {
height: 6.5rem !important;
}
.baj-logo-text-big {
font-size: 4.5rem !important;
}
/* ─── 1.2 Tighter vertical padding around logo ─── */
.baj-header-main-row {
padding: 0.625rem 0 0.375rem !important;
/* was 1.25rem 0 0.75rem */
}
/* ─── 1.3 Remove top border in nav row ─── */
.baj-header-nav-row {
border-top: none !important;
}
/* ─── 1.4 "Season 1" label on the left ─── */
.baj-header-left-label {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.baj-season-label {
font-family: var(--font-hand);
font-size: 1rem;
font-weight: 700;
color: var(--ink-gray);
white-space: nowrap;
}
/* ─── 1.5 On article pages — hide big header, show sticky immediately ─── */
body.post-template .baj-header-desktop {
display: none !important;
}
body.post-template .baj-sticky-header {
transform: translateY(0) !important;
position: sticky !important;
border-bottom: 1px solid var(--rule-dark);
}
body.post-template .baj-header {
border-bottom: none !important;
}
/* ─── 2.1 Sticky header — 20-30% shorter ─── */
.baj-sticky-inner {
padding: 0.3rem 1.5rem !important;
/* was 0.5rem → 0.3rem (~40% cut) */
}
/* ─── 2.2 Sticky header logo — use short SVG, slightly bigger ─── */
.baj-logo-sticky img {
height: 1.75rem !important;
/* clean size for the short logo mark */
width: auto;
}
/* ─── Hide "Season 1" on mobile ─── */
@media (max-width: 768px) {
.baj-header-left-label {
display: none !important;
}
}
/* ===== V27 — STICKY LOGO & ARTICLE SPACING ===== */
/* 1. Sticky header logo: 20-30% bigger + slight downward shift. Header size unchanged. */
.baj-logo-sticky img {
height: 2.25rem !important;
/* was 1.75rem → +29% */
width: auto;
position: relative;
top: 2px;
/* optical nudge down */
}
/* 2. Article page: reduce gap between header and content by half */
body.post-template .baj-article {
margin-top: 0 !important;
padding-top: 1rem !important;
/* tight gap */
}
body.post-template .baj-article-header {
margin-top: 0 !important;
padding-top: 0 !important;
}
body.post-template .baj-main {
padding-top: 0 !important;
}
body.post-template .baj-home,
body.post-template .baj-main>* {
margin-top: 0;
}
/* ===== V28 — NYT-STYLE HOMEPAGE GRID ===== */
/* ─── ZONE A: Featured + Sidebar (2/3 + 1/3) ─── */
.baj-grid-zone-a {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 0;
margin-top: 1.5rem;
}
.baj-grid-hero {
padding-right: 1.5rem;
border-right: 1px solid var(--rule-light);
}
.baj-grid-sidebar {
padding-left: 1.5rem;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
/* ─── Card Hero (large featured) ─── */
.baj-card-hero {
width: 100%;
}
.baj-card-hero-link {
display: block;
text-decoration: none;
color: inherit;
}
.baj-card-hero-link:hover .baj-card-hero-title {
color: var(--ink-blue);
}
.baj-card-hero-image-wrap {
width: 100%;
overflow: hidden;
margin-bottom: 1rem;
}
.baj-card-hero-image {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
.baj-card-hero-body {
/* text content */
}
.baj-card-hero-meta {
margin-bottom: 0.375rem;
}
.baj-card-hero-title {
font-family: var(--font-serif);
font-size: 1.75rem;
font-weight: 700;
line-height: 1.25;
color: var(--ink-black);
margin: 0 0 0.5rem;
transition: color 0.15s;
}
.baj-card-hero-excerpt {
font-family: var(--font-serif);
font-size: 1rem;
line-height: 1.5;
color: var(--ink-gray);
margin: 0 0 0.5rem;
}
.baj-card-hero-reading {
font-family: var(--font-sans);
font-size: 0.75rem;
font-weight: 500;
color: #999;
text-transform: uppercase;
letter-spacing: 0.03em;
}
/* ─── Card Sidebar (text-only compact) ─── */
.baj-card-side {
/* individual card */
}
.baj-card-side-link {
display: block;
text-decoration: none;
color: inherit;
padding: 0.75rem 0;
}
.baj-card-side-link:hover .baj-card-side-title {
color: var(--ink-blue);
}
.baj-card-side-tag {
font-family: var(--font-hand);
font-size: 0.85rem;
font-weight: 700;
color: var(--ink-blue);
display: block;
margin-bottom: 0.25rem;
}
.baj-card-side-title {
font-family: var(--font-serif);
font-size: 1.0625rem;
font-weight: 700;
line-height: 1.3;
color: var(--ink-black);
margin: 0 0 0.375rem;
transition: color 0.15s;
}
.baj-card-side-reading {
font-family: var(--font-sans);
font-size: 0.6875rem;
font-weight: 500;
color: #999;
text-transform: uppercase;
letter-spacing: 0.03em;
}
/* ─── ZONE B: Thumbnail Strip ─── */
.baj-grid-strip-section {
margin-top: 1.5rem;
}
.baj-grid-strip {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
padding: 1.25rem 0;
}
/* ─── Card Thumb (horizontal: image + text) ─── */
.baj-card-thumb {
/* one item in the strip */
}
.baj-card-thumb-link {
display: flex;
align-items: flex-start;
gap: 0.75rem;
text-decoration: none;
color: inherit;
}
.baj-card-thumb-link:hover .baj-card-thumb-title {
color: var(--ink-blue);
}
.baj-card-thumb-image-wrap {
width: 100px;
min-width: 100px;
height: 100px;
overflow: hidden;
flex-shrink: 0;
}
.baj-card-thumb-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.baj-card-thumb-body {
flex: 1;
min-width: 0;
}
.baj-card-thumb-title {
font-family: var(--font-serif);
font-size: 0.9375rem;
font-weight: 700;
line-height: 1.3;
color: var(--ink-black);
margin: 0.125rem 0 0.375rem;
transition: color 0.15s;
}
.baj-card-thumb-reading {
font-family: var(--font-sans);
font-size: 0.6875rem;
font-weight: 500;
color: #999;
text-transform: uppercase;
letter-spacing: 0.03em;
}
/* ─── ZONE C: Main Grid (3 columns) ─── */
.baj-grid-main-section {
margin-top: 1.5rem;
}
.baj-grid-main {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
padding: 1.25rem 0;
}
/* Standard card updates for grid context */
.baj-grid-main .baj-card {
border: none;
padding: 0;
}
.baj-grid-main .baj-card-image-wrap {
margin-bottom: 0.75rem;
overflow: hidden;
}
.baj-grid-main .baj-card-image {
width: 100%;
height: 200px;
object-fit: cover;
display: block;
}
.baj-grid-main .baj-card-title {
font-size: 1.0625rem;
line-height: 1.3;
margin-bottom: 0.375rem;
}
.baj-grid-main .baj-card-excerpt {
font-size: 0.875rem;
line-height: 1.4;
color: var(--ink-gray);
}
/* Reading time badge (shared) */
.baj-card-reading {
font-family: var(--font-sans);
font-size: 0.6875rem;
font-weight: 500;
color: #999;
text-transform: uppercase;
letter-spacing: 0.03em;
display: inline-block;
margin-top: 0.375rem;
}
/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
.baj-grid-zone-a {
grid-template-columns: 3fr 2fr;
}
.baj-grid-strip {
grid-template-columns: repeat(2, 1fr);
}
.baj-grid-main {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.baj-grid-zone-a {
grid-template-columns: 1fr;
}
.baj-grid-hero {
padding-right: 0;
border-right: none;
padding-bottom: 1.25rem;
border-bottom: 1px solid var(--rule-light);
}
.baj-grid-sidebar {
padding-left: 0;
padding-top: 1rem;
}
.baj-grid-strip {
grid-template-columns: 1fr;
gap: 1rem;
}
.baj-grid-main {
grid-template-columns: 1fr;
gap: 1.25rem;
}
.baj-card-hero-title {
font-size: 1.375rem;
}
.baj-card-thumb-image-wrap {
width: 80px;
min-width: 80px;
height: 80px;
}
.baj-grid-main .baj-card-image {
height: 180px;
}
}
/* ===== V29 — WIDER GRID + FOOTER REDESIGN ===== */
/* ─── Wider homepage grid ─── */
.baj-home {
max-width: var(--wide-width) !important;
width: 100%;
margin: 0 auto;
padding: 1.5rem 2rem;
}
/* ─── FOOTER REDESIGN ─── */
.baj-footer {
border-top: 2px solid var(--rule-dark) !important;
}
.baj-footer-inner {
max-width: var(--wide-width) !important;
padding: 2rem !important;
}
.baj-footer-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 3rem;
margin-bottom: 1.5rem;
}
.baj-footer-about {
flex: 1;
max-width: 480px;
}
.baj-footer-about-text {
font-family: var(--font-serif);
font-size: 0.9375rem;
line-height: 1.6;
color: var(--ink-gray);
margin-bottom: 0.75rem;
}
.baj-footer-about-text strong {
color: var(--ink-black);
}
.baj-footer-cta {
font-family: var(--font-sans);
font-size: 0.875rem;
font-weight: 600;
color: var(--ink-blue);
text-decoration: none;
display: inline-block;
}
.baj-footer-cta:hover {
text-decoration: underline;
}
.baj-footer-sections {
flex-shrink: 0;
}
.baj-footer-heading {
font-family: var(--font-sans);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-black);
margin-bottom: 0.75rem;
}
.baj-footer-section-list {
list-style: none;
padding: 0;
margin: 0;
}
.baj-footer-section-list li {
margin-bottom: 0.375rem;
}
.baj-footer-section-list a {
font-family: var(--font-sans);
font-size: 0.875rem;
color: var(--ink-gray);
text-decoration: none;
}
.baj-footer-section-list a:hover {
color: var(--ink-black);
}
.baj-footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 1rem;
}
.baj-footer-bottom .baj-copyright {
font-size: 0.8125rem;
color: var(--ink-gray);
}
.baj-footer-bottom .baj-footer-nav ul {
display: flex;
gap: 1rem;
list-style: none;
padding: 0;
margin: 0;
}
.baj-footer-bottom .baj-footer-nav a {
font-family: var(--font-sans);
font-size: 0.8125rem;
color: var(--ink-gray);
text-decoration: none;
}
.baj-footer-bottom .baj-footer-nav a:hover {
color: var(--ink-black);
}
/* ─── Mobile footer ─── */
@media (max-width: 768px) {
.baj-footer-top {
flex-direction: column;
gap: 1.5rem;
}
.baj-footer-bottom {
flex-direction: column;
gap: 0.5rem;
text-align: center;
}
.baj-home {
padding: 1rem;
}
}
/* ===== V30 — FOOTER REDESIGN + CONDITIONAL GRID ===== */
/* ─── Footer: Two-column layout (left: about+meta, right: sections+podcast) ─── */
.baj-footer-top {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 3rem !important;
align-items: start !important;
}
.baj-footer-left {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.baj-footer-meta {
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 1px solid var(--rule-light);
}
.baj-footer-meta .baj-copyright {
font-family: var(--font-sans);
font-size: 0.8125rem;
color: var(--ink-gray);
margin-bottom: 0.5rem;
}
.baj-footer-meta .baj-footer-nav ul {
display: flex;
gap: 1rem;
list-style: none;
padding: 0;
margin: 0;
}
.baj-footer-meta .baj-footer-nav a {
font-family: var(--font-sans);
font-size: 0.8125rem;
color: var(--ink-gray);
text-decoration: none;
}
.baj-footer-meta .baj-footer-nav a:hover {
color: var(--ink-black);
}
.baj-footer-right {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.baj-footer-podcast {
/* Spotify embed container */
}
.baj-footer-podcast iframe {
width: 100%;
border: none;
}
/* Remove the old bottom bar - no longer needed */
.baj-footer-bottom {
display: none !important;
}
/* ─── Mobile footer ─── */
@media (max-width: 768px) {
.baj-footer-top {
grid-template-columns: 1fr !important;
gap: 2rem !important;
}
}
/* ─── Zone A sidebar: hide when it's the only zone (< 2 non-featured) ─── */
.baj-grid-zone-a {
/* If sidebar is empty, hero takes full width */
}
.baj-grid-zone-a:not(:has(.baj-grid-sidebar)) {
grid-template-columns: 1fr !important;
}
/* ===== V31 — GRID DEDUP + FOOTER CLEAN ===== */
/* ─── Footer: clean rectangular grid ─── */
.baj-footer-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: start;
}
/* Override old footer-top */
.baj-footer-top {
display: none !important;
}
.baj-footer-left {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.baj-footer-right {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
/* Horizontal sections bar (no heading) */
.baj-footer-sections-bar {
display: flex;
gap: 1.25rem;
flex-wrap: wrap;
}
.baj-footer-sections-bar a {
font-family: var(--font-sans);
font-size: 0.875rem;
font-weight: 500;
color: var(--ink-black);
text-decoration: none;
transition: color 0.15s;
}
.baj-footer-sections-bar a:hover {
color: var(--ink-blue);
}
/* Podcast embed */
.baj-footer-podcast iframe {
width: 100% !important;
border: none;
}
/* Hide old section list */
.baj-footer-sections {
display: none !important;
}
.baj-footer-heading {
display: none !important;
}
.baj-footer-section-list {
display: none !important;
}
/* Mobile */
@media (max-width: 768px) {
.baj-footer-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
}
/* ===== V32 — SINGLE-LOOP GRID + FOOTER INLINE ===== */
/* ─── 6-column master grid ─── */
.baj-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 0;
padding-top: 1.5rem;
}
/* ─── Shared card styles ─── */
.baj-gi {
min-width: 0;
}
.baj-gi-link {
display: block;
text-decoration: none;
color: inherit;
}
.baj-gi-link:hover .baj-gi-title {
color: var(--ink-blue);
}
.baj-gi-image {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
.baj-gi-title {
font-family: var(--font-serif);
font-weight: 700;
line-height: 1.25;
color: var(--ink-black);
margin: 0.375rem 0;
transition: color 0.15s;
}
.baj-gi-excerpt {
font-family: var(--font-serif);
font-size: 0.9375rem;
line-height: 1.5;
color: var(--ink-gray);
margin: 0 0 0.375rem;
}
.baj-gi-reading {
font-family: var(--font-sans);
font-size: 0.6875rem;
font-weight: 500;
color: #999;
text-transform: uppercase;
letter-spacing: 0.03em;
}
/* ─── ITEM 1: Hero (left 2/3) ─── */
.baj-gi:nth-child(1) {
grid-column: 1 / 5;
grid-row: 1 / 4;
padding-right: 1.5rem;
border-right: 1px solid var(--rule-light);
}
.baj-gi:nth-child(1) .baj-gi-title {
font-size: 1.75rem;
}
.baj-gi:nth-child(1) .baj-gi-img {
margin-bottom: 1rem;
}
/* ─── ITEMS 2-4: Sidebar (right 1/3, text-only) ─── */
.baj-gi:nth-child(n+2):nth-child(-n+4) {
grid-column: 5 / 7;
padding: 0.75rem 0 0.75rem 1.5rem;
border-bottom: 1px solid var(--rule-light);
}
.baj-gi:nth-child(4) {
border-bottom: none;
}
/* Sidebar: hide image, hide excerpt, smaller title */
.baj-gi:nth-child(n+2):nth-child(-n+4) .baj-gi-img {
display: none;
}
.baj-gi:nth-child(n+2):nth-child(-n+4) .baj-gi-excerpt {
display: none;
}
.baj-gi:nth-child(n+2):nth-child(-n+4) .baj-gi-title {
font-size: 1.0625rem;
line-height: 1.3;
}
/* ─── ITEMS 5+: Full-width 3-column grid ─── */
/* Separator before item 5 */
.baj-gi:nth-child(5) {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--rule-dark);
}
/* 3-column layout: each spans 2 of 6 columns */
.baj-gi:nth-child(3n+5) {
grid-column: 1 / 3;
}
/* 5, 8, 11... */
.baj-gi:nth-child(3n+6) {
grid-column: 3 / 5;
}
/* 6, 9, 12... */
.baj-gi:nth-child(3n+4):nth-child(n+5) {
grid-column: 5 / 7;
}
/* 7, 10, 13... */
/* Grid cards: show image, medium title */
.baj-gi:nth-child(n+5) {
padding: 0 0.75rem;
}
.baj-gi:nth-child(n+5) .baj-gi-image {
height: 200px;
object-fit: cover;
margin-bottom: 0.75rem;
}
.baj-gi:nth-child(n+5) .baj-gi-title {
font-size: 1.0625rem;
line-height: 1.3;
}
.baj-gi:nth-child(n+5) .baj-gi-excerpt {
font-size: 0.875rem;
}
/* Row separators for items 8, 11, 14... (every new row after first grid row) */
.baj-gi:nth-child(3n+8) {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--rule-light);
}
.baj-gi:nth-child(3n+9) {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--rule-light);
}
.baj-gi:nth-child(3n+7):nth-child(n+8) {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--rule-light);
}
/* ─── FOOTER: copyright + Sign Up inline ─── */
.baj-footer-meta {
display: flex !important;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.baj-footer-meta .baj-copyright {
font-family: var(--font-sans);
font-size: 0.8125rem;
color: var(--ink-gray);
margin: 0;
}
.baj-footer-sep {
color: var(--ink-gray);
font-size: 0.8125rem;
}
.baj-footer-nav-inline {
display: inline;
}
.baj-footer-nav-inline ul {
display: inline-flex;
gap: 0.75rem;
list-style: none;
padding: 0;
margin: 0;
}
.baj-footer-nav-inline a {
font-family: var(--font-sans);
font-size: 0.8125rem;
color: var(--ink-gray);
text-decoration: none;
}
.baj-footer-nav-inline a:hover {
color: var(--ink-black);
}
/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
.baj-gi:nth-child(3n+5) {
grid-column: 1 / 4;
}
.baj-gi:nth-child(3n+6) {
grid-column: 4 / 7;
}
.baj-gi:nth-child(3n+4):nth-child(n+5) {
grid-column: 1 / 4;
}
.baj-gi:nth-child(3n+7):nth-child(n+8) {
grid-column: 4 / 7;
}
}
@media (max-width: 768px) {
.baj-grid {
grid-template-columns: 1fr;
}
.baj-gi:nth-child(1) {
grid-column: 1;
grid-row: auto;
padding-right: 0;
border-right: none;
padding-bottom: 1.25rem;
border-bottom: 1px solid var(--rule-light);
margin-bottom: 1rem;
}
.baj-gi:nth-child(1) .baj-gi-title {
font-size: 1.375rem;
}
.baj-gi:nth-child(n+2):nth-child(-n+4) {
grid-column: 1;
padding-left: 0;
}
.baj-gi:nth-child(n+5) {
grid-column: 1;
padding: 0;
}
.baj-gi:nth-child(5) {
margin-top: 1rem;
padding-top: 1rem;
}
.baj-gi:nth-child(n+5) .baj-gi-image {
height: 180px;
}
}
/* Remove old grid classes that are no longer used */
.baj-grid-zone-a,
.baj-grid-hero,
.baj-grid-sidebar,
.baj-grid-strip-section,
.baj-grid-strip,
.baj-grid-main-section,
.baj-grid-main {
display: none !important;
}
/* ===== V33 — MOBILE FOOTER POLISH ===== */
@media (max-width: 768px) {
.baj-footer-grid {
grid-template-columns: 1fr !important;
gap: 0 !important;
}
/* Stack: About → CTA → Podcast → Sections → Copyright */
.baj-footer-left {
order: 1;
}
.baj-footer-right {
order: 2;
margin-top: 1.5rem;
}
/* Podcast full-width, clean */
.baj-footer-podcast {
order: 1;
}
.baj-footer-podcast iframe {
width: 100% !important;
border-radius: 12px;
}
/* Sections: centered horizontal row */
.baj-footer-sections-bar {
order: 2;
justify-content: center;
gap: 1rem;
margin-top: 1.25rem;
padding-top: 1.25rem;
border-top: 1px solid var(--rule-light);
}
.baj-footer-sections-bar a {
font-size: 0.8125rem;
}
/* Copyright + Sign Up: centered */
.baj-footer-meta {
text-align: center;
justify-content: center;
margin-top: 1.25rem !important;
padding-top: 1.25rem !important;
}
/* About text centered */
.baj-footer-about-text {
text-align: center;
}
.baj-footer-cta {
display: block;
text-align: center;
margin-bottom: 0.25rem;
}
.baj-footer-inner {
padding: 1.5rem 1rem !important;
}
}
/* ===== V34 — MOBILE FOOTER LEFT-ALIGN + BURGER FONT ===== */
@media (max-width: 768px) {
/* Left-align all footer text */
.baj-footer-about-text {
text-align: left !important;
}
.baj-footer-cta {
text-align: left !important;
}
.baj-footer-meta {
justify-content: flex-start !important;
text-align: left !important;
}
/* Sections first (order 0), then about (order 1), then right/podcast (order 2) */
.baj-footer-right {
order: -1 !important;
margin-top: 0 !important;
margin-bottom: 1.5rem;
}
.baj-footer-left {
order: 1 !important;
}
/* Sections left-aligned row */
.baj-footer-sections-bar {
justify-content: flex-start !important;
border-top: none !important;
padding-top: 0 !important;
margin-top: 0 !important;
}
/* Burger menu: 30% smaller font */
.baj-mobile-menu a {
font-size: 1.05rem !important;
}
}
/* ===== V35 — SIDEBAR IMAGE + SEASON BLUE + FOOTER ACCOUNT ===== */
/* Show image on FIRST sidebar card (item 2) */
.baj-gi:nth-child(2) .baj-gi-img {
display: block !important;
margin-bottom: 0.5rem;
}
.baj-gi:nth-child(2) .baj-gi-image {
width: 100%;
height: auto;
object-fit: cover;
}
/* Season 1 label: blue color */
.baj-season-label {
color: var(--ink-blue) !important;
}
/* Footer account/signup link */
.baj-footer-account-link {
font-family: var(--font-sans);
font-size: 0.8125rem;
color: var(--ink-gray);
text-decoration: none;
}
.baj-footer-account-link:hover {
color: var(--ink-black);
}
/* ===== V36 — SEASON LABEL IN NAV + TAG GRID ===== */
/* Nav row: flex with season label on left, nav centered */
.baj-header-nav-row {
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
}
.baj-header-nav-row .baj-season-label {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
font-family: var(--font-hand);
font-size: 0.95rem;
font-weight: 700;
color: var(--ink-blue);
white-space: nowrap;
}
/* Remove old label area from logo row */
.baj-header-left-label {
display: none !important;
}
/* Tag page header */
.baj-tag-header {
padding: 1.5rem 0 0;
text-align: left;
}
.baj-tag-title {
font-family: var(--font-serif);
font-size: 2rem;
font-weight: 700;
color: var(--ink-black);
margin: 0 0 0.375rem;
}
.baj-tag-description {
font-family: var(--font-serif);
font-size: 1rem;
line-height: 1.5;
color: var(--ink-gray);
margin: 0;
}
/* Tag page uses .baj-home for wide layout */
.baj-tag-page.baj-home {
max-width: var(--wide-width) !important;
}
/* Remove old tag kicker */
.baj-kicker {
display: none;
}
/* ===== V37 — ARTICLE FEATURED IMAGE ===== */
.baj-article-feature-image {
margin: 0 0 2rem;
padding: 0;
}
.baj-article-feature-image img {
width: 100%;
height: auto;
display: block;
}
.baj-article-feature-image figcaption {
font-family: var(--font-sans);
font-size: 0.8125rem;
color: var(--ink-gray);
margin-top: 0.5rem;
text-align: center;
}
/* ===== V38 — NAV ROW ACTIONS + PAYWALL ===== */
/* Join/Account in nav row — right side */
.baj-nav-actions {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
gap: 0.75rem;
}
/* Remove old actions wrapper from logo row */
.baj-header-actions-wrap {
display: none !important;
}
/* ===== V38b — HIDE GHOST BUILT-IN PAYWALL CTA ===== */
/* Ghost auto-injects its own paywall CTA inside {{content}}.
We use our custom content-cta.hbs instead, so hide Ghost's default. */
.gh-post-upgrade-cta,
.gh-post-upgrade-cta-content {
display: none !important;
}
/* ===== HOMEPAGE GRID (V42) ===== */
.baj-home {
max-width: var(--wide-width) !important;
width: 100% !important;
margin: 0 auto;
padding: 1rem 2rem 2rem;
}
/* 6 equal columns — allows 4:2 hero/sidebar AND 3:3 bottom split */
.baj-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: min-content min-content min-content auto;
column-gap: 0;
row-gap: 0;
align-items: start;
}
/* ── Base items ── */
.baj-gi {
min-width: 0;
}
.baj-gi-link {
text-decoration: none;
color: inherit;
display: block;
}
.baj-gi-link:hover {
text-decoration: none;
}
.baj-gi-link:hover .baj-gi-title {
color: var(--ink-blue);
}
.baj-gi-img {
margin-bottom: 0.75rem;
overflow: hidden;
}
.baj-gi-image {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
display: block;
}
.baj-gi-body {
padding: 0;
}
.baj-card-tag {
font-family: var(--font-hand);
font-size: 0.875rem;
font-weight: 700;
color: var(--ink-blue);
display: block;
margin-bottom: 0.25rem;
}
.baj-gi-title {
font-family: var(--font-serif);
font-size: 1.125rem;
font-weight: 700;
line-height: 1.3;
color: var(--ink-black);
margin: 0 0 0.25rem;
transition: color 0.2s ease;
}
.baj-gi-excerpt {
font-family: var(--font-serif);
font-size: 0.9375rem;
line-height: 1.55;
color: #555;
margin: 0 0 0.25rem;
}
.baj-gi-reading {
font-family: var(--font-sans);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--ink-gray);
}
/* ══════════════════════════════════════════════
/* ══════════════════════════════════════════════════════
/* ══════════════════════════════════════════════════════
/* ══════════════════════════════════════════════════════
V47 GRID — Hero+Sidebar → 3-in-Row, alternating A/B
12-post cycle via nth-child(12n+X)
══════════════════════════════════════════════════════ */
.baj-grid {
grid-auto-flow: dense !important;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
GROUP A (Normal): Hero LEFT + Sidebar RIGHT
Posts 1-3, 13-15, 25-27...
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.baj-gi:nth-child(12n+1) {
grid-column: 1 / 5 !important;
grid-row: span 2 !important;
padding: 0 2rem 0 0 !important;
margin: 0 !important;
border: none !important;
border-right: 1px solid var(--rule-light) !important;
}
.baj-gi:nth-child(12n+1) .baj-gi-img {
display: block !important;
}
.baj-gi:nth-child(12n+1) .baj-gi-image {
aspect-ratio: 3 / 2 !important;
display: block !important;
height: auto !important;
}
.baj-gi:nth-child(12n+1) .baj-gi-title {
font-size: 1.75rem !important;
margin-bottom: 0.5rem;
}
.baj-gi:nth-child(12n+1) .baj-gi-excerpt {
font-size: 1rem !important;
display: block !important;
}
/* Sidebar right top */
.baj-gi:nth-child(12n+2) {
grid-column: 5 / 7 !important;
grid-row: auto !important;
padding: 0 0 1rem 1.5rem !important;
margin: 0 !important;
border: none !important;
border-bottom: 1px solid var(--rule-light) !important;
}
/* Sidebar right bottom */
.baj-gi:nth-child(12n+3) {
grid-column: 5 / 7 !important;
grid-row: auto !important;
padding: 1rem 0 0 1.5rem !important;
margin: 0 !important;
border: none !important;
}
/* Sidebar images */
.baj-gi:nth-child(12n+2) .baj-gi-img,
.baj-gi:nth-child(12n+3) .baj-gi-img {
display: block !important;
}
.baj-gi:nth-child(12n+2) .baj-gi-image,
.baj-gi:nth-child(12n+3) .baj-gi-image {
aspect-ratio: 16 / 9 !important;
display: block !important;
height: auto !important;
}
.baj-gi:nth-child(12n+2) .baj-gi-title,
.baj-gi:nth-child(12n+3) .baj-gi-title {
font-size: 1rem !important;
}
.baj-gi:nth-child(12n+2) .baj-gi-excerpt,
.baj-gi:nth-child(12n+3) .baj-gi-excerpt {
display: none !important;
}
/* ── Three in a row A (posts 4-6, 16-18...) ── */
.baj-gi:nth-child(12n+4) {
grid-column: 1 / 3 !important;
grid-row: auto !important;
padding: 1.5rem 0.75rem 0 0 !important;
margin: 1.5rem 0 0 0 !important;
border: none !important;
border-top: 2px solid var(--rule-dark) !important;
}
.baj-gi:nth-child(12n+5) {
grid-column: 3 / 5 !important;
grid-row: auto !important;
padding: 1.5rem 0.75rem 0 0.75rem !important;
margin: 1.5rem 0 0 0 !important;
border: none !important;
border-top: 2px solid var(--rule-dark) !important;
}
.baj-gi:nth-child(12n+6) {
grid-column: 5 / 7 !important;
grid-row: auto !important;
padding: 1.5rem 0 0 0.75rem !important;
margin: 1.5rem 0 0 0 !important;
border: none !important;
border-top: 2px solid var(--rule-dark) !important;
}
.baj-gi:nth-child(12n+4) .baj-gi-img,
.baj-gi:nth-child(12n+5) .baj-gi-img,
.baj-gi:nth-child(12n+6) .baj-gi-img {
display: block !important;
}
.baj-gi:nth-child(12n+4) .baj-gi-image,
.baj-gi:nth-child(12n+5) .baj-gi-image,
.baj-gi:nth-child(12n+6) .baj-gi-image {
aspect-ratio: 16 / 9 !important;
display: block !important;
height: auto !important;
}
.baj-gi:nth-child(12n+4) .baj-gi-title,
.baj-gi:nth-child(12n+5) .baj-gi-title,
.baj-gi:nth-child(12n+6) .baj-gi-title {
font-size: 1.0625rem !important;
line-height: 1.3;
}
.baj-gi:nth-child(12n+4) .baj-gi-excerpt,
.baj-gi:nth-child(12n+5) .baj-gi-excerpt,
.baj-gi:nth-child(12n+6) .baj-gi-excerpt {
display: block !important;
font-size: 0.875rem !important;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
GROUP B (Mirror): Hero RIGHT + Sidebar LEFT
Posts 7-9, 19-21, 31-33...
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Hero right (first in DOM for dense backfill) */
.baj-gi:nth-child(12n+7) {
grid-column: 3 / 7 !important;
grid-row: span 2 !important;
padding: 1.5rem 0 0 2rem !important;
margin: 1.5rem 0 0 0 !important;
border: none !important;
border-left: 1px solid var(--rule-light) !important;
border-top: 2px solid var(--rule-dark) !important;
}
.baj-gi:nth-child(12n+7) .baj-gi-img {
display: block !important;
}
.baj-gi:nth-child(12n+7) .baj-gi-image {
aspect-ratio: 3 / 2 !important;
display: block !important;
height: auto !important;
}
.baj-gi:nth-child(12n+7) .baj-gi-title {
font-size: 1.75rem !important;
margin-bottom: 0.5rem;
}
.baj-gi:nth-child(12n+7) .baj-gi-excerpt {
font-size: 1rem !important;
display: block !important;
}
/* Sidebar left top (dense fills cols 1-2) */
.baj-gi:nth-child(12n+8) {
grid-column: 1 / 3 !important;
grid-row: auto !important;
padding: 1.5rem 1.5rem 1rem 0 !important;
margin: 1.5rem 0 0 0 !important;
border: none !important;
border-bottom: 1px solid var(--rule-light) !important;
border-top: 2px solid var(--rule-dark) !important;
}
/* Sidebar left bottom */
.baj-gi:nth-child(12n+9) {
grid-column: 1 / 3 !important;
grid-row: auto !important;
padding: 1rem 1.5rem 0 0 !important;
margin: 0 !important;
border: none !important;
}
/* Mirror sidebar images */
.baj-gi:nth-child(12n+8) .baj-gi-img,
.baj-gi:nth-child(12n+9) .baj-gi-img {
display: block !important;
}
.baj-gi:nth-child(12n+8) .baj-gi-image,
.baj-gi:nth-child(12n+9) .baj-gi-image {
aspect-ratio: 16 / 9 !important;
display: block !important;
height: auto !important;
}
.baj-gi:nth-child(12n+8) .baj-gi-title,
.baj-gi:nth-child(12n+9) .baj-gi-title {
font-size: 1rem !important;
}
.baj-gi:nth-child(12n+8) .baj-gi-excerpt,
.baj-gi:nth-child(12n+9) .baj-gi-excerpt {
display: none !important;
}
/* ── Three in a row B (posts 10-12, 22-24...) ── */
.baj-gi:nth-child(12n+10) {
grid-column: 1 / 3 !important;
grid-row: auto !important;
padding: 1.5rem 0.75rem 0 0 !important;
margin: 1.5rem 0 0 0 !important;
border: none !important;
border-top: 1px solid var(--rule-light) !important;
}
.baj-gi:nth-child(12n+11) {
grid-column: 3 / 5 !important;
grid-row: auto !important;
padding: 1.5rem 0.75rem 0 0.75rem !important;
margin: 1.5rem 0 0 0 !important;
border: none !important;
border-top: 1px solid var(--rule-light) !important;
}
.baj-gi:nth-child(12n) {
grid-column: 5 / 7 !important;
grid-row: auto !important;
padding: 1.5rem 0 0 0.75rem !important;
margin: 1.5rem 0 0 0 !important;
border: none !important;
border-top: 1px solid var(--rule-light) !important;
}
.baj-gi:nth-child(12n+10) .baj-gi-img,
.baj-gi:nth-child(12n+11) .baj-gi-img,
.baj-gi:nth-child(12n) .baj-gi-img {
display: block !important;
}
.baj-gi:nth-child(12n+10) .baj-gi-image,
.baj-gi:nth-child(12n+11) .baj-gi-image,
.baj-gi:nth-child(12n) .baj-gi-image {
aspect-ratio: 16 / 9 !important;
display: block !important;
height: auto !important;
}
.baj-gi:nth-child(12n+10) .baj-gi-title,
.baj-gi:nth-child(12n+11) .baj-gi-title,
.baj-gi:nth-child(12n) .baj-gi-title {
font-size: 1.0625rem !important;
line-height: 1.3;
}
.baj-gi:nth-child(12n+10) .baj-gi-excerpt,
.baj-gi:nth-child(12n+11) .baj-gi-excerpt,
.baj-gi:nth-child(12n) .baj-gi-excerpt {
display: block !important;
font-size: 0.875rem !important;
}
/* ══════════════════════════════════════════
MOBILE — single column, uniform cards
══════════════════════════════════════════ */
@media (max-width: 768px) {
.baj-home {
padding: 1rem 1.25rem !important;
}
.baj-grid {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
}
/* Nuclear reset for ALL grid items */
.baj-gi,
.baj-gi:nth-child(n) {
grid-column: auto !important;
grid-row: auto !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
border-top: none !important;
border-right: none !important;
border-bottom: none !important;
border-left: none !important;
}
/* Separator between posts */
.baj-gi+.baj-gi {
border-top: 1px solid var(--rule-light) !important;
padding-top: 1.5rem !important;
margin-top: 1.5rem !important;
}
/* Uniform title size */
.baj-gi .baj-gi-title,
.baj-gi:nth-child(n) .baj-gi-title {
font-size: 1.25rem !important;
line-height: 1.35 !important;
}
/* First post title slightly larger */
.baj-gi:first-child .baj-gi-title {
font-size: 1.5rem !important;
}
/* All images visible */
.baj-gi .baj-gi-img,
.baj-gi:nth-child(n) .baj-gi-img {
display: block !important;
}
.baj-gi .baj-gi-image,
.baj-gi:nth-child(n) .baj-gi-image {
display: block !important;
height: auto !important;
aspect-ratio: auto !important;
}
/* All excerpts visible */
.baj-gi .baj-gi-excerpt,
.baj-gi:nth-child(n) .baj-gi-excerpt {
display: block !important;
font-size: 0.9375rem !important;
}
}
/* ===== COMMENTS SECTION ===== */
.baj-comments {
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid var(--rule-light);
}
/* --- Comments CTA (skeleton for guests) --- */
.baj-comments-cta {
position: relative;
overflow: hidden;
}
.baj-comments-cta-fake {
position: relative;
padding-bottom: 0;
}
.baj-comments-cta-fake::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 100%;
background: linear-gradient(to bottom, transparent 0%, var(--paper) 75%);
pointer-events: none;
z-index: 1;
}
/* Fake comment bubble */
.baj-fake-comment {
display: flex;
gap: 0.75rem;
margin-bottom: 1.25rem;
opacity: 0.75;
}
.baj-fake-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: #ccc;
flex-shrink: 0;
}
.baj-fake-comment-body {
flex: 1;
padding-top: 0.125rem;
}
.baj-fake-name {
width: 100px;
height: 10px;
background: #c0c0c0;
border-radius: 3px;
margin-bottom: 0.625rem;
}
.baj-fake-line {
width: 100%;
height: 10px;
background: #d0d0d0;
border-radius: 3px;
margin-bottom: 0.375rem;
}
/* CTA content overlay — rides up onto skeleton */
.baj-comments-cta-content {
position: relative;
z-index: 2;
text-align: center;
margin-top: -6rem;
padding: 0 0 0.5rem;
}
.baj-comments-cta-icon {
display: inline-block;
margin-bottom: 0.5rem;
color: var(--ink-gray);
}
.baj-comments-cta-title {
font-family: var(--font-sans);
font-size: 1.125rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--ink-black);
}
.baj-comments-cta-text {
font-family: var(--font-serif);
font-size: 0.9375rem;
line-height: 1.6;
color: var(--ink-gray);
max-width: 420px;
margin: 0 auto 1.25rem;
}
.baj-comments-cta .baj-btn {
display: inline-block;
font-family: var(--font-sans);
font-size: 0.875rem;
font-weight: 600;
padding: 0.75rem 2rem;
border-radius: 3px;
text-decoration: none;
transition: background 0.2s;
}
.baj-comments-cta .baj-btn-primary {
color: #fff;
background: var(--ink-black);
}
.baj-comments-cta .baj-btn-primary:hover {
background: #333;
text-decoration: none;
}
.baj-comments-cta-signin {
font-family: var(--font-sans);
font-size: 0.8125rem;
color: var(--ink-gray);
margin-top: 0.75rem;
}
.baj-comments-cta-signin a {
color: var(--ink-blue);
}
/* ── COMMENTS MOBILE ── */
@media (max-width: 768px) {
.baj-comments {
margin-top: 2rem;
padding-top: 1.5rem;
}
.baj-comments-cta-text {
font-size: 0.875rem;
}
.baj-comments-cta-content {
margin-top: -4rem;
}
}
@media (min-width: 768px) {
.baj-comment-item[data-depth="1"],
.baj-comment-item[data-depth="2"],
.baj-comment-item[data-depth="3"] {
margin-left: 0;
width: 100%;
}
}
/* === Custom Comment UI Styles === */
.baj-custom-comments-wrapper {
font-family: var(--font-sans);
color: var(--ink-black);
}
.baj-comments-heading {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 2rem;
display: flex;
justify-content: flex-start;
align-items: baseline;
gap: 0.5rem;
}
.baj-comments-count {
font-size: 1rem;
font-weight: 400;
color: var(--ink-gray);
}
.baj-comment-form-container {
margin-bottom: 3rem;
}
.baj-comment-form-header {
margin-bottom: 0.5rem;
}
.baj-comment-form-user-info {
font-size: 0.875rem;
}
.baj-comment-form-name {
font-weight: 700;
color: var(--ink-black);
}
.baj-comment-form {
border: 1px solid var(--rule-light);
border-radius: 6px;
padding: 0.75rem 1rem;
background: #fff;
transition: border-color 0.2s;
display: flex;
flex-direction: column;
position: relative;
padding-bottom: 0.75rem;
}
.baj-comment-form:focus-within,
.baj-comment-form-container.is-typing .baj-comment-form,
.baj-reply-form-container.is-typing .baj-comment-form {
border-color: var(--ink-black);
}
.baj-comment-form textarea {
width: 100%;
min-height: 20px;
height: 20px;
border: none;
outline: none;
resize: none;
font-family: var(--font-sans);
font-size: 1rem;
line-height: 1.5;
padding: 0;
margin-bottom: 0;
background: transparent;
overflow: hidden;
transition: min-height 0.2s;
}
.baj-comment-form-actions {
display: flex;
justify-content: flex-end;
margin-top: 0.5rem;
}
.baj-comment-form button {
padding: 0.5rem 1.25rem;
font-size: 0.875rem;
font-weight: 600;
border-radius: 4px;
cursor: pointer;
background: var(--ink-black);
color: #fff;
border: none;
transition: background 0.2s;
}
.baj-comment-form button:hover {
background: #333;
}
.baj-comments-list {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.baj-comment-item {
display: flex;
gap: 0.75rem;
position: relative;
z-index: 1;
}
.baj-comment-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--rule-light);
object-fit: cover;
flex-shrink: 0;
position: relative;
z-index: 2;
}
/* ══════════════════════════════════════
THREADING — Reddit-style curved connectors
All avatars are 32px → uniform geometry for all depths
avatar center = 16px, item gap = 0.75rem (12px)
content start = 32px + 12px gap = 44px
stem at left: 15px (for 2px line centered on 16px)
replies: margin-left: -(44-15)=-29px, padding-left: 20px
══════════════════════════════════════ */
/* ── 1. Vertical stem (::after, height set by JS via --stem-height) ── */
.baj-comment-item:has(> .baj-comment-content > .baj-comment-replies)::after {
content: '';
position: absolute;
left: 15px;
top: 40px;
height: var(--stem-height, 0);
width: 2px;
background: var(--rule-light);
z-index: 0;
}
/* ── 2. Reply container (universal for all depths) ── */
.baj-comment-replies {
margin-top: 0.5rem;
margin-left: -29px;
padding-left: 20px;
display: flex;
flex-direction: column;
gap: 0.75rem;
position: relative;
}
/* ── 3. L-curve connector (::before on all nested items) ── */
.baj-comment-item:not([data-depth="0"])::before {
content: '';
position: absolute;
left: -20px;
top: -0.75rem;
width: 16px;
height: calc(0.75rem + 16px);
border-left: 2px solid var(--rule-light);
border-bottom: 2px solid var(--rule-light);
border-bottom-left-radius: 12px;
z-index: 1;
}
.baj-comment-content {
flex: 1;
}
.baj-comment-header {
margin-bottom: 0.25rem;
font-size: 0.8125rem;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.3rem;
}
.baj-comment-author {
font-weight: 700;
color: var(--ink-black);
}
.baj-comment-icon {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0 -0.2rem;
}
.baj-comment-icon svg {
display: block;
width: 18px;
height: 18px;
}
.baj-comment-date {
color: var(--ink-gray);
font-size: 0.75rem;
font-weight: 400;
opacity: 0.6;
}
.baj-comment-star {
font-size: 0.8125rem;
margin-left: 0.125rem;
}
.baj-comment-body {
font-size: 0.875rem;
line-height: 1.5;
color: var(--ink-black);
}
.baj-comment-body p {
margin: 0 0 0.25rem;
}
.baj-comment-body p:last-child {
margin-bottom: 0;
}
/* --- Comment Footer & Actions --- */
.baj-comment-footer {
display: flex;
align-items: center;
gap: 1rem;
margin-top: 0.5rem;
}
.baj-comment-footer button {
background: transparent;
border: none;
padding: 0;
font-family: var(--font-sans);
font-size: 0.8125rem;
font-weight: 600;
color: var(--ink-gray);
cursor: pointer;
display: flex;
align-items: center;
gap: 0.35rem;
/* slight increase for larger icon */
transition: color 0.15s;
}
.baj-comment-footer button:hover {
color: var(--ink-black);
}
.baj-like-icon {
font-size: 1.25em;
/* Make the heart noticeably bigger */
}
.baj-action-like.has-liked {
color: var(--brand-color, #1a73e8);
/* Brand blue or default blue */
}
/* (Thread styles defined above with pseudo-element curves) */
/* Form in Reply container */
.baj-reply-form-container {
margin-top: 1rem;
margin-bottom: 1.5rem;
}
.baj-reply-form-container .baj-comment-form {
margin-bottom: 0;
}
.baj-btn-ghost {
background: transparent !important;
color: var(--ink-gray) !important;
border: none;
}
.baj-btn-ghost:hover {
color: var(--ink-black) !important;
background: var(--rule-light) !important;
}
/* Loading state */
.baj-comments-loading,
.baj-comments-error {
text-align: center;
padding: 2rem;
color: var(--ink-gray);
font-family: var(--font-sans);
}
/* ============================================================
CUSTOM ACCOUNT MODAL (Overrides Ghost Portal)
============================================================ */
.baj-account-modal {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 9999999;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-sans);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.baj-account-modal.is-open {
opacity: 1;
visibility: visible;
}
.baj-account-backdrop {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(245, 245, 245, 0.7);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.baj-account-card {
position: relative;
z-index: 1;
background: #ffffff;
width: 100%;
max-width: 440px;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08), 0 2px 10px rgba(0, 0, 0, 0.04);
padding: 2.5rem 2rem 2rem;
margin: 1rem;
transform: scale(0.97) translateY(10px);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.baj-account-modal.is-open .baj-account-card {
transform: scale(1) translateY(0);
}
.baj-account-close {
position: absolute;
top: 1.25rem;
right: 1.25rem;
background: transparent;
border: none;
cursor: pointer;
padding: 0.5rem;
color: var(--ink-light);
transition: color 0.2s;
display: flex;
align-items: center;
justify-content: center;
}
.baj-account-close:hover {
color: var(--ink-black);
}
.baj-account-header {
display: flex;
align-items: center;
gap: 1.25rem;
margin-bottom: 2rem;
}
.baj-account-avatar-wrapper {
position: relative;
}
.baj-account-avatar {
width: 72px;
height: 72px;
border-radius: 50%;
object-fit: cover;
background: var(--paper-dark);
}
.baj-account-info {
flex: 1;
}
.baj-account-name {
font-size: 1.375rem;
font-weight: 700;
color: var(--ink-black);
margin-bottom: 0.125rem;
display: flex;
align-items: center;
gap: 0.375rem;
}
.baj-account-name svg {
display: block;
width: 20px;
height: 20px;
}
.baj-account-email {
font-size: 0.875rem;
color: var(--ink-gray);
margin-bottom: 0.375rem;
}
.baj-account-settings-link {
font-size: 0.75rem;
font-weight: 600;
color: var(--ink-black);
text-decoration: underline;
}
.baj-account-settings-link:hover {
color: var(--ink-blue);
}
.baj-account-menu {
border: 1px solid var(--rule-light);
border-radius: 8px;
margin-bottom: 1.5rem;
background: #fff;
overflow: hidden;
}
.baj-account-menu-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--rule-light);
}
.baj-account-menu-item:last-child {
border-bottom: none;
}
.baj-account-menu-item-info {
display: flex;
flex-direction: column;
gap: 0.125rem;
}
.baj-account-menu-item-info strong {
font-size: 0.875rem;
font-weight: 500;
color: var(--ink-black);
}
.baj-account-menu-item-info span {
font-size: 0.75rem;
color: var(--ink-gray);
}
.baj-account-edit-btn {
font-family: var(--font-sans);
font-size: 0.875rem;
font-weight: 600;
color: var(--ink-blue);
background: transparent;
border: none;
cursor: pointer;
text-decoration: none;
padding: 0.25rem 0;
}
.baj-account-edit-btn:hover {
text-decoration: underline;
}
/* Inline Name Editor */
#baj-account-name-editor {
background: var(--paper);
padding: 0.75rem 1.25rem;
}
.baj-account-name-editor-inner {
display: flex;
gap: 0.5rem;
width: 100%;
}
.baj-account-name-editor-inner input {
flex: 1;
font-family: var(--font-sans);
font-size: 0.875rem;
padding: 0.5rem 0.75rem;
border: 1px solid var(--ink-light);
border-radius: 4px;
outline: none;
}
.baj-account-name-editor-inner input:focus {
border-color: var(--ink-blue);
}
.baj-btn-small {
padding: 0.5rem 1rem !important;
font-size: 0.75rem !important;
}
.baj-account-actions {
display: flex;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.baj-btn-outline {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-sans);
font-size: 0.875rem;
font-weight: 600;
color: var(--ink-black);
background: #fff;
border: 1px solid var(--rule-light);
border-radius: 8px;
padding: 0.75rem 1rem;
text-decoration: none;
transition: all 0.2s;
}
.baj-account-manage-sub {
color: var(--ink-blue);
border-color: var(--rule-light);
/* Or we can leave outline styling */
}
.baj-btn-outline:hover {
background: var(--paper-dark);
text-decoration: none;
color: var(--ink-black);
}
.baj-account-footer-status {
text-align: center;
font-size: 0.75rem;
color: var(--ink-gray);
display: flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
}
.baj-account-footer-status #baj-account-status-text {
font-family: var(--font-hand);
color: #DB2828;
/* Pioneer Red as example */
font-size: 0.875rem;
font-weight: 700;
}