* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
/* One gutter for the whole site, so 320px and 430px are the same design at
two sizes rather than two designs. It tightens on a small phone, where 20px
a side was a eighth of the screen, and settles at 20px from 500px up. */
:root {
--gutter: clamp(12px, 4vw, 20px);
--card-pad: clamp(14px, 4.5vw, 28px);
}
body {
margin: 0;
padding: 0;
min-height: 100vh;
/* a phone browser shows and hides its own bars as you scroll, and 100vh is
always the taller state, so a full-height block starts off cut short */
min-height: 100dvh;
background-color: #D3ECEB;
position: relative;
overflow-x: hidden;
font-family: 'Montserrat', 'Montserrat Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* ===== NAVBAR ===== */
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background: #0f0f0f;
z-index: 100;
border-bottom: 2px solid #FFD700;
}
.nav-menu {
list-style: none;
display: flex;
justify-content: center;
align-items: center;
gap: 40px;
margin: 0;
padding: 0 20px;
height: 100%;
}
.nav-link {
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
font-weight: 500;
font-size: 1rem;
color: #e6e6e6;
text-decoration: none;
padding: 8px 16px;
border-radius: 6px;
transition: all 0.3s ease;
position: relative;
letter-spacing: 0.5px;
display: inline-block;
cursor: pointer;
}
.nav-link:hover {
color: #FFFFFF;
background-color: rgba(255, 215, 0, 0.2);
}
.nav-link::after {
content: '';
position: absolute;
bottom: -1px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 4px;
background-color: #FFD700;
transition: width 0.3s ease;
z-index: 101;
}
.nav-link:hover::after {
width: 80%;
}
.nav-link:active {
color: #FFD700;
}
/* Active nav link (scroll-based highlighting) */
.nav-link.active {
color: #FFD700;
background-color: rgba(255, 215, 0, 0.15);
}
.nav-link.active::after {
width: 80%;
}
/* ===== CHECKERBOARD OVERLAY ===== */
.checkerboard-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%),
linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.15) 75%),
linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.15) 75%);
background-size: 20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
opacity: 0.8;
pointer-events: none;
z-index: 1;
}
/* ===== SECTIONS ===== */
.content,
.section {
scroll-margin-top: 80px;
}
/* ===== HOME / HERO SECTION ===== */
.content {
position: relative;
z-index: 2;
/* No longer a full screen (16 Oct 2026): the latest piece belongs on the
first screen, so the hero is the logo, the line and the 3 formats. */
min-height: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 124px var(--gutter) 20px;
}
.logo {
max-width: 211px;
width: auto;
height: auto;
display: block;
filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
animation: fadeIn 1s ease-out;
margin-bottom: 8px;
}
.tagline {
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
font-weight: 700;
font-size: 1.6rem;
color: #1a1a1a;
text-align: center;
margin-top: 16px;
padding: 0 20px;
line-height: 1.35;
max-width: 600px;
animation: fadeIn 1s ease-out 0.2s both;
}
.hero-subtitle {
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
font-weight: 400;
font-size: 1rem;
color: #444;
text-align: center;
margin-top: 12px;
padding: 0 24px;
line-height: 1.5;
max-width: 500px;
animation: fadeIn 1.5s ease-out 0.7s both;
}
/* The 3 formats and how often they come, under the tagline, each a link */
.hero-formats {
margin: 18px auto 0;
max-width: 640px;
padding: 0 20px;
text-align: center;
font-size: 1rem;
line-height: 1.6;
color: #333;
animation: fadeIn 1s ease-out 0.35s both;
}
.hero-formats a {
color: #0f0f0f;
font-weight: 700;
text-decoration: underline;
text-decoration-color: #FFD700;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
transition: text-decoration-color 0.2s;
}
.hero-formats a:hover, .hero-formats a:focus-visible { text-decoration-color: #0f0f0f; }
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ===== MAIN SECTIONS ===== */
.section {
position: relative;
z-index: 2;
padding: 110px var(--gutter) 56px;
max-width: 980px;
margin: 0 auto;
}
.section h2 {
font-size: 1.8rem;
font-weight: 800;
color: #111;
margin-bottom: 12px;
}
.page-title {
text-align: center;
}
.section p {
font-size: 1rem;
color: #222;
line-height: 1.6;
max-width: 70ch;
}
/* ===== HERO STATEMENT ===== */
.hero-statement {
text-align: center;
max-width: 700px;
margin: 0 auto 48px auto;
}
/* the listings' heads: the rule for .section > .hero-statement below sets padding, so this one outweighs it */
.section > .hero-statement.page-head { padding-top: 5rem; }
.hero-statement h1, .hero-statement h2.hero-h1 {
font-size: 2.2rem;
font-weight: 800;
color: #0f0f0f;
line-height: 1.25;
margin-bottom: 16px;
}
.hero-statement p {
font-size: 1.1rem;
color: #333;
line-height: 1.6;
font-weight: 400;
}
/* ===== VALUE CARDS ===== */
.value-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
margin-top: 32px;
}
.value-card {
background: #FCF7E8; /* light cream */
border-radius: 8px;
padding: 28px 24px;
box-shadow: 5px 5px 0 #0f0f0f;
border: 3px solid #0f0f0f;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.value-card:hover {
transform: translate(-3px, -3px);
box-shadow: 8px 8px 0 #0f0f0f;
}
.value-card h3 {
font-size: 1.15rem;
font-weight: 700;
color: #0f0f0f;
margin-bottom: 10px;
line-height: 1.3;
}
.value-card p {
font-size: 0.95rem;
color: #444;
line-height: 1.55;
font-weight: 400;
}
.value-card .card-icon {
font-size: 1.8rem;
margin-bottom: 14px;
display: block;
}
/* ===== FEATURE BOX ===== */
.feature-box {
background: #FCF7E8; /* light cream */
border-radius: 8px;
padding: 40px 36px;
max-width: 600px;
margin: 32px auto;
box-shadow: 5px 5px 0 #0f0f0f;
border: 3px solid #0f0f0f;
text-align: center;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.feature-box:hover {
transform: translate(-3px, -3px);
box-shadow: 8px 8px 0 #0f0f0f;
}
.feature-box h3 {
font-size: 1.4rem;
font-weight: 700;
color: #0f0f0f;
margin-bottom: 14px;
}
.feature-box p {
font-size: 1rem;
color: #333;
line-height: 1.6;
}
/* ===== CTA SECTION ===== */
.cta-section {
text-align: center;
margin-top: 56px;
padding: 32px 24px;
background: #FCF7E8; /* light cream */
border-radius: 8px;
box-shadow: 5px 5px 0 #0f0f0f;
border: 3px solid #0f0f0f;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cta-section:hover {
transform: translate(-3px, -3px);
box-shadow: 8px 8px 0 #0f0f0f;
}
.cta-section h3 {
font-size: 1.3rem;
font-weight: 700;
color: #0f0f0f;
margin-bottom: 10px;
}
.cta-section p {
font-size: 0.95rem;
color: #444;
line-height: 1.5;
margin: 0 auto;
max-width: none;
}
/* ===== DISCLOSURE NOTICE ===== */
.disclosure-notice {
max-width: 560px;
margin: 24px auto;
padding: 12px 16px;
background: #FFF3CD;
border: 2px solid #856404;
border-radius: 8px;
display: flex;
align-items: flex-start;
gap: 10px;
text-align: left;
}
.disclosure-icon {
font-size: 1.05rem;
flex-shrink: 0;
}
.disclosure-notice p {
font-size: 0.78rem;
color: #856404;
margin: 0;
line-height: 1.5;
}
.disclosure-notice strong {
color: #664d03;
}
/* ===== SOCIAL LINKS (Contact) ===== */
.contact-section .hero-statement {
margin-bottom: 28px;
}
/* Contact Form */
.contact-form {
max-width: 600px;
margin: 0 auto 40px auto;
padding: 40px;
background: #FCF7E8;
border: 3px solid #0f0f0f;
border-radius: 16px;
box-shadow: 6px 6px 0 #0f0f0f;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
font-weight: 700;
font-size: 0.95rem;
margin-bottom: 8px;
color: #0f0f0f;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 14px 16px;
font-size: 1rem;
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
border: 3px solid #0f0f0f;
border-radius: 8px;
background: #fff;
box-shadow: 3px 3px 0 #0f0f0f;
transition: all 0.2s ease;
box-sizing: border-box;
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
transform: translate(-2px, -2px);
box-shadow: 5px 5px 0 #0f0f0f;
}
.form-group textarea {
resize: vertical;
min-height: 120px;
}
.contact-submit {
width: 100%;
padding: 16px 32px;
font-size: 1.1rem;
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
font-weight: 700;
background: linear-gradient(135deg, #FFD700 0%, #FFEC8B 100%);
color: #0f0f0f;
border: 3px solid #0f0f0f;
border-radius: 8px;
box-shadow: 4px 4px 0 #0f0f0f;
cursor: pointer;
transition: all 0.2s ease;
margin-top: 10px;
}
.contact-submit:hover {
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0 #0f0f0f;
}
.social-divider {
text-align: center;
margin: 30px 0;
}
.social-divider span {
font-weight: 600;
color: #444;
}
.social-links {
list-style: none;
padding: 0;
margin: 18px 0 0 0;
display: grid;
gap: 12px;
justify-items: center;
}
.contact-section .social-links {
margin-top: 20px;
}
.social-links a {
display: inline-block;
text-decoration: none;
color: #0f0f0f;
background: #FFD700;
border: 3px solid #0f0f0f;
padding: 12px 18px;
border-radius: 6px;
min-width: 200px;
max-width: 100%;
text-align: center;
font-weight: 600;
overflow-wrap: anywhere;
box-shadow: 4px 4px 0 #0f0f0f;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.social-links a:hover {
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0 #0f0f0f;
}
/* ===== FOOTER ===== */
.footer {
position: relative;
z-index: 2;
background: #0f0f0f;
color: #999;
padding: 48px 24px 32px 24px;
text-align: center;
margin-top: 80px;
}
.footer-brand {
margin-bottom: 28px;
}
.footer-brand img {
height: 28px;
width: auto;
display: block;
margin: 0 auto;
}
.footer-content {
max-width: 800px;
margin: 0 auto;
}
.footer-disclaimer {
font-size: 0.85rem;
line-height: 1.7;
color: #888;
margin-bottom: 24px;
padding: 20px;
background: rgba(255, 255, 255, 0.03);
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.06);
}
.footer-disclaimer strong {
color: #FFD700;
font-weight: 600;
}
.footer-links {
display: flex;
justify-content: center;
gap: 24px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.footer-links a {
color: #aaa;
text-decoration: none;
font-size: 0.9rem;
transition: color 0.2s ease;
}
.footer-links a:hover {
color: #FFD700;
}
.footer-copyright {
font-size: 0.8rem;
color: #9a9a9a;
}
/* ===== ABOUT SECTION ===== */
.about-section {
text-align: center;
}
.about-content {
background: #FCF7E8; /* light cream */
border-radius: 8px;
padding: 40px 36px;
max-width: 700px;
margin: 0 auto;
box-shadow: 5px 5px 0 #0f0f0f;
border: 3px solid #0f0f0f;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.about-content:hover {
transform: translate(-3px, -3px);
box-shadow: 8px 8px 0 #0f0f0f;
}
.about-content p {
font-size: 1.05rem;
color: #333;
line-height: 1.75;
margin-bottom: 16px;
}
.about-content p:last-child {
margin-bottom: 0;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 820px) {
.navbar {
height: 60px;
}
.nav-menu {
gap: 20px;
}
.nav-link {
font-size: 0.9rem;
padding: 6px 12px;
}
.logo {
max-width: 90%;
}
.tagline {
font-size: 1.1rem;
margin-top: 5px;
}
.hero-subtitle {
font-size: 0.9rem;
}
.content {
padding-top: 90px;
}
.hero-statement h1, .hero-statement h2.hero-h1 {
font-size: 1.7rem;
}
.value-cards {
grid-template-columns: 1fr;
gap: 18px;
}
.value-card {
padding: 22px 20px;
}
.feature-box {
padding: 28px 22px;
margin: 24px 16px;
}
}
@media (max-width: 640px) {
.navbar {
height: 60px;
}
.nav-menu {
gap: 10px;
flex-wrap: wrap;
}
.nav-link {
font-size: 0.85rem;
padding: 6px 10px;
}
.logo {
max-width: 95%;
}
.tagline {
font-size: 1rem;
margin-top: 5px;
padding: 0 15px;
}
.hero-subtitle {
font-size: 0.85rem;
}
.content {
padding-top: 85px;
}
.hero-statement h1, .hero-statement h2.hero-h1 {
font-size: 1.5rem;
}
.value-card h3 {
font-size: 1.05rem;
}
}
/* ===== VISUAL ENHANCEMENTS ===== */
/* 1. Section-specific box colors - light cream */
#about .about-content,
#the-brew .feature-box,
#the-brew .cta-section,
#philosophy .value-card {
background: #FCF7E8; /* lighter cream */
}
/* 2. Text highlight effect */
.highlight {
background: linear-gradient(transparent 55%, #FFD700 55%);
padding: 0 4px;
margin: 0 -4px;
}
.highlight-brush {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 100% 0.45em;
padding-bottom: 2px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.highlight-box {
background: #FFD700;
padding: 2px 8px;
border-radius: 4px;
color: #0f0f0f;
}
/* 3. Hero section enhancements */
.hero-cta {
display: inline-block;
margin-top: 32px;
padding: 14px 28px;
background: #FFD700;
color: #0f0f0f;
font-weight: 700;
font-size: 1rem;
text-decoration: none;
border-radius: 8px;
border: 3px solid #0f0f0f;
box-shadow: 4px 4px 0 #0f0f0f;
transition: transform 0.15s ease, box-shadow 0.15s ease;
animation: fadeIn 1s ease-out 0.4s both;
}
.hero-cta:hover {
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0 #0f0f0f;
}
.hero-subtitle {
font-size: 1.1rem;
color: #444;
margin-top: 16px;
max-width: 500px;
text-align: center;
animation: fadeIn 1s ease-out 0.3s both;
}
/* 4. Decorative shapes */
.decorative-circle {
position: absolute;
border-radius: 50%;
z-index: 0;
pointer-events: none;
animation: floatBubble 8s ease-in-out infinite;
}
@keyframes floatBubble {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-15px); }
}
/* Home section circles */
.circle-1 {
width: 300px;
height: 300px;
background: rgba(255, 215, 0, 0.12);
top: 15%;
right: -100px;
animation-delay: 0s;
}
.circle-2 {
width: 200px;
height: 200px;
background: rgba(15, 15, 15, 0.04);
bottom: 20%;
left: -80px;
animation-delay: 2s;
}
.circle-3 {
width: 150px;
height: 150px;
background: rgba(255, 215, 0, 0.08);
top: 60%;
right: 10%;
animation-delay: 4s;
}
/* Additional circles for other sections */
.circle-4 {
width: 180px;
height: 180px;
background: rgba(255, 215, 0, 0.1);
top: 10%;
left: 5%;
animation-delay: 1s;
}
.circle-5 {
width: 120px;
height: 120px;
background: rgba(15, 15, 15, 0.03);
bottom: 15%;
right: 8%;
animation-delay: 3s;
}
.circle-6 {
width: 250px;
height: 250px;
background: rgba(255, 215, 0, 0.06);
top: 40%;
left: -120px;
animation-delay: 5s;
}
.circle-7 {
width: 100px;
height: 100px;
background: rgba(255, 215, 0, 0.15);
top: 25%;
right: 15%;
animation-delay: 2.5s;
}
.circle-8 {
width: 220px;
height: 220px;
background: rgba(15, 15, 15, 0.03);
bottom: 30%;
left: 10%;
animation-delay: 6s;
}
.circle-9 {
width: 80px;
height: 80px;
background: rgba(255, 215, 0, 0.18);
top: 70%;
right: 20%;
animation-delay: 1.5s;
}
.circle-10 {
width: 160px;
height: 160px;
background: rgba(255, 215, 0, 0.08);
top: 5%;
right: -60px;
animation-delay: 4.5s;
}
.circle-11 {
width: 90px;
height: 90px;
background: rgba(255, 215, 0, 0.14);
top: 35%;
left: 8%;
animation-delay: 0.5s;
}
.circle-12 {
width: 140px;
height: 140px;
background: rgba(15, 15, 15, 0.04);
top: 80%;
right: 5%;
animation-delay: 3.5s;
}
.circle-13 {
width: 70px;
height: 70px;
background: rgba(255, 215, 0, 0.2);
top: 20%;
right: 25%;
animation-delay: 7s;
}
.circle-14 {
width: 200px;
height: 200px;
background: rgba(255, 215, 0, 0.05);
bottom: 10%;
left: -90px;
animation-delay: 2.2s;
}
.circle-15 {
width: 60px;
height: 60px;
background: rgba(255, 215, 0, 0.18);
top: 50%;
right: 3%;
animation-delay: 5.5s;
}
.circle-16 {
width: 110px;
height: 110px;
background: rgba(15, 15, 15, 0.03);
top: 15%;
left: 15%;
animation-delay: 1.8s;
}
.circle-17 {
width: 180px;
height: 180px;
background: rgba(255, 215, 0, 0.07);
bottom: 25%;
right: -70px;
animation-delay: 6.5s;
}
.circle-18 {
width: 50px;
height: 50px;
background: rgba(255, 215, 0, 0.22);
top: 45%;
left: 20%;
animation-delay: 0.8s;
}
.circle-19 {
width: 130px;
height: 130px;
background: rgba(15, 15, 15, 0.04);
top: 65%;
left: 5%;
animation-delay: 4s;
}
.circle-20 {
width: 75px;
height: 75px;
background: rgba(255, 215, 0, 0.16);
top: 10%;
right: 30%;
animation-delay: 2.8s;
}
/* 5. Better typography */
.hero-statement h1, .hero-statement h2.hero-h1 {
font-size: 2.6rem;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.2;
}
.tagline {
font-size: 2rem;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.25;
max-width: 650px;
}
.section p {
font-size: 1.05rem;
line-height: 1.7;
}
/* 6. Scroll animations */
.animate-on-scroll {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-on-scroll.visible {
opacity: 1;
transform: translateY(0);
}
/* Staggered animation delays for cards */
.value-card:nth-child(1) { transition-delay: 0s; }
.value-card:nth-child(2) { transition-delay: 0.1s; }
.value-card:nth-child(3) { transition-delay: 0.2s; }
.value-card:nth-child(4) { transition-delay: 0.3s; }
.value-card:nth-child(5) { transition-delay: 0.4s; }
.value-card:nth-child(6) { transition-delay: 0.5s; }
/* Section divider effect */
.section {
position: relative;
}
.section::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 4px;
background: #FFD700;
border-radius: 2px;
}
/* Responsive enhancements */
@media (max-width: 820px) {
/* sections and their headings sit closer on a phone (16 Oct 2026): the
first story was a screen and a half down on every page */
.section { padding: 56px var(--gutter) 36px; }
.section + .section { padding-top: 32px; }
.hero-statement { margin-bottom: 28px; }
.section > .hero-statement.page-head { padding-top: 2.75rem; }
/* a gated page has no subscribe bar, so its head needs less room under the navbar */
html.fcf-gated main.section { padding-top: 30px; }
.hero-statement h1, .hero-statement h2.hero-h1 {
font-size: 2rem;
}
.tagline {
font-size: 1.5rem;
}
.hero-cta {
padding: 12px 24px;
font-size: 0.9rem;
}
.decorative-circle {
display: none;
}
}
/* ===== NEW FEATURES ===== */
/* 1. Back to Top Button */
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background: #FFD700;
color: #0f0f0f;
border: 3px solid #0f0f0f;
border-radius: 8px;
box-shadow: 4px 4px 0 #0f0f0f;
cursor: pointer;
font-size: 1.5rem;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 99;
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0 #0f0f0f;
}
/* 2. Scroll Progress Bar */
.scroll-progress {
position: fixed;
top: 60px;
left: 0;
width: 0%;
height: 4px;
background: linear-gradient(90deg, #FFD700, #FFA500);
z-index: 99;
transition: width 0.1s ease;
}
/* Newsletter Signup Form (legacy, kept for reference) */
.newsletter-form {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
margin-top: 24px;
}
.newsletter-input {
padding: 14px 20px;
font-size: 1rem;
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
border: 3px solid #0f0f0f;
border-radius: 8px;
background: #fff;
min-width: 280px;
max-width: 100%;
box-shadow: 4px 4px 0 #0f0f0f;
transition: all 0.2s ease;
}
.newsletter-input:focus {
outline: none;
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0 #0f0f0f;
}
.newsletter-button {
padding: 14px 28px;
font-size: 1rem;
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
font-weight: 700;
background: #FFD700;
color: #0f0f0f;
border: 3px solid #0f0f0f;
border-radius: 8px;
box-shadow: 4px 4px 0 #0f0f0f;
cursor: pointer;
transition: all 0.2s ease;
}
.newsletter-button:hover {
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0 #0f0f0f;
}
/* 4. Featured Quote */
.featured-quote {
max-width: 800px;
margin: 60px auto;
padding: 0;
background: transparent;
border: none;
box-shadow: none;
text-align: center;
position: relative;
}
.featured-quote::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120%;
height: 120%;
background: radial-gradient(ellipse at center, rgba(255, 215, 0, 0.15) 0%, transparent 70%);
z-index: -1;
pointer-events: none;
animation: glowPulse 4s ease-in-out infinite;
}
@keyframes glowPulse {
0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
}
.quote-mark {
font-size: 8rem;
font-family: Georgia, 'Times New Roman', serif;
background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 0.6;
display: block;
font-weight: bold;
filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.15));
opacity: 0;
transition: all 0.6s ease;
}
.featured-quote.visible .quote-mark {
opacity: 1;
}
.quote-open {
text-align: left;
margin-left: 20px;
margin-bottom: -20px;
animation: floatQuoteLeft 3s ease-in-out infinite;
}
.quote-close {
text-align: right;
margin-right: 20px;
margin-top: -30px;
animation: floatQuoteRight 3s ease-in-out infinite;
}
@keyframes floatQuoteLeft {
0%, 100% { transform: translate(0, 0) rotate(-3deg); }
50% { transform: translate(-5px, -8px) rotate(0deg); }
}
@keyframes floatQuoteRight {
0%, 100% { transform: translate(0, 0) rotate(3deg); }
50% { transform: translate(5px, 8px) rotate(0deg); }
}
.quote-text {
font-size: 2.4rem;
font-style: italic;
color: #0f0f0f;
line-height: 1.6;
margin: 0;
padding: 30px 50px;
font-weight: 500;
letter-spacing: 0.01em;
position: relative;
opacity: 0;
transform: translateY(20px);
transition: all 0.8s ease 0.3s;
}
.featured-quote.visible .quote-text {
opacity: 1;
transform: translateY(0);
}
.quote-author {
font-size: 1.15rem;
color: #0f0f0f;
font-style: normal;
font-weight: 800;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 28px;
background: linear-gradient(135deg, #FFD700 0%, #FFEC8B 100%);
border-radius: 30px;
border: 3px solid #0f0f0f;
box-shadow: 4px 4px 0 #0f0f0f;
margin-top: 10px;
transition: all 0.2s ease;
opacity: 0;
transform: translateY(15px);
}
.featured-quote.visible .quote-author {
opacity: 1;
transform: translateY(0);
transition: all 0.6s ease 0.6s, box-shadow 0.2s ease, transform 0.2s ease;
}
.quote-author:hover {
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0 #0f0f0f;
}
.quote-author::before {
content: '☕';
font-size: 1.2rem;
display: inline-block;
animation: steamCoffee 2s ease-in-out infinite;
}
@keyframes steamCoffee {
0%, 100% { transform: translateY(0) rotate(0deg); }
25% { transform: translateY(-2px) rotate(-5deg); }
75% { transform: translateY(-2px) rotate(5deg); }
}
/* 5. Hover Glow on Cards */
.value-card:hover,
.feature-box:hover,
.about-content:hover,
.cta-section:hover {
box-shadow: 8px 8px 0 #0f0f0f, 0 0 20px rgba(255, 215, 0, 0.3);
}
/* 7. Dark Mode */
body.dark-mode {
background-color: #1a1a1a;
color: #e0e0e0;
}
body.dark-mode .navbar {
background: #0a0a0a;
}
body.dark-mode .value-card,
body.dark-mode .feature-box,
body.dark-mode .about-content,
body.dark-mode .cta-section {
background: #2a2a2a;
}
body.dark-mode .value-card h3,
body.dark-mode .feature-box h3,
body.dark-mode .cta-section h3,
body.dark-mode .hero-statement h1, body.dark-mode .hero-statement h2.hero-h1 {
color: #f0f0f0;
}
body.dark-mode .value-card p,
body.dark-mode .feature-box p,
body.dark-mode .cta-section p,
body.dark-mode .hero-statement p,
body.dark-mode .about-content p {
color: #b0b0b0;
}
body.dark-mode .checkerboard-overlay {
opacity: 0.3;
}
body.dark-mode .tagline {
color: #f0f0f0;
}
body.dark-mode .newsletter-input {
background: #2a2a2a;
color: #e0e0e0;
border-color: #444;
}
.dark-mode-toggle {
position: fixed;
bottom: 30px;
left: 30px;
width: 50px;
height: 50px;
background: #0f0f0f;
color: #FFD700;
border: 3px solid #FFD700;
border-radius: 8px;
box-shadow: 4px 4px 0 #FFD700;
cursor: pointer;
font-size: 1.3rem;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
z-index: 99;
}
.dark-mode-toggle:hover {
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0 #FFD700;
}
body.dark-mode .dark-mode-toggle {
background: #FFD700;
color: #0f0f0f;
border-color: #0f0f0f;
box-shadow: 4px 4px 0 #0f0f0f;
}
/* 8. Hamburger Menu (Mobile) */
.hamburger {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
padding: 10px;
z-index: 101;
}
.hamburger span {
width: 25px;
height: 3px;
background: #e6e6e6;
border-radius: 2px;
transition: all 0.3s ease;
}
.hamburger.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.hamburger.active span:nth-child(2) {
opacity: 0;
}
.hamburger.active span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -6px);
}
@media (max-width: 820px) {
.hamburger {
display: flex;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
}
.nav-menu {
position: fixed;
top: 60px;
left: 0;
width: 100%;
background: #0f0f0f;
flex-direction: column;
padding: 20px;
gap: 10px;
transform: translateY(-100%);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.nav-menu.active {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
.newsletter-form {
flex-direction: column;
align-items: center;
}
.newsletter-input {
min-width: 100%;
max-width: 300px;
}
.back-to-top {
width: 44px;
height: 44px;
bottom: 20px;
right: 20px;
}
.featured-quote {
margin: 40px 15px;
}
.quote-text {
font-size: 1.5rem;
padding: 20px 25px;
}
.quote-mark {
font-size: 5rem;
}
.quote-open {
margin-left: 10px;
}
.quote-close {
margin-right: 10px;
}
.quote-author {
font-size: 0.95rem;
padding: 10px 20px;
}
.contact-form {
padding: 25px;
margin: 0 15px 30px 15px;
}
.form-row {
grid-template-columns: 1fr;
gap: 0;
}
}
/* ===== ARTICLE CARDS (Homepage & Listing) ===== */
.article-cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px;
max-width: 920px;
margin: 40px auto 0;
padding: 0 20px;
}
/* When the article count is odd, center the lone last card between the two
columns instead of leaving it stuck on the left. */
.article-cards > .article-card:last-child:nth-child(odd) {
grid-column: 1 / -1;
max-width: calc(50% - 14px);
margin-inline: auto;
}
.article-card {
background: #FFD700;
border: 3px solid #0f0f0f;
border-radius: 8px;
padding: 24px 20px;
box-shadow: 5px 5px 0 #0f0f0f;
text-decoration: none;
color: #0f0f0f;
display: flex;
flex-direction: column;
gap: 10px;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.article-card:hover {
transform: translate(-3px, -3px);
box-shadow: 8px 8px 0 #0f0f0f;
}
.article-card h4 {
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
font-weight: 700;
font-size: 1.15rem;
line-height: 1.4;
margin: 0;
}
.article-date {
font-size: 0.8rem;
font-weight: 700;
color: #0f0f0f;
text-transform: uppercase;
letter-spacing: 0.5px;
opacity: 0.7;
}
.article-excerpt {
font-size: 0.92rem;
color: #0f0f0f;
opacity: 0.85;
line-height: 1.6;
margin: 0;
flex-grow: 1;
}
.article-read-more {
font-weight: 700;
font-size: 0.9rem;
color: #0f0f0f;
margin-top: 8px;
}
.article-view-all {
text-align: center;
margin-top: 40px;
}
/* ===== ARTICLE PAGE ===== */
.article-page {
max-width: 800px;
margin: 0 auto;
}
.article-breadcrumb {
margin-bottom: 20px;
}
.article-breadcrumb a {
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
font-weight: 700;
font-size: 0.9rem;
color: #0f0f0f;
text-decoration: none;
padding: 10px 20px;
background: #FFD700;
border: 3px solid #0f0f0f;
border-radius: 8px;
box-shadow: 4px 4px 0 #0f0f0f;
transition: transform 0.15s ease, box-shadow 0.15s ease;
display: inline-block;
}
.article-breadcrumb a:hover {
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0 #0f0f0f;
}
.article-meta {
font-size: 0.95rem;
color: #0f0f0f;
font-weight: 600;
opacity: 0.6;
}
.article-content {
background: #FCF7E8;
border: 3px solid #0f0f0f;
border-radius: 12px;
padding: 40px 36px;
box-shadow: 6px 6px 0 #0f0f0f;
line-height: 1.8;
font-size: 1.05rem;
color: #0f0f0f;
}
.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4 {
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
font-weight: 700;
margin: 32px 0 16px;
color: #0f0f0f;
}
.article-content h2 { font-size: 1.5rem; }
.article-content h3 { font-size: 1.25rem; }
.article-content h4 { font-size: 1.1rem; }
.article-content p {
margin-bottom: 18px;
line-height: 1.8;
}
.article-content img {
max-width: 100%;
height: auto;
border-radius: 10px;
margin: 28px auto;
display: block;
border: 2px solid #e8e2d6;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.article-content figure {
margin: 32px 0;
text-align: center;
}
.article-content figure img {
margin-bottom: 12px;
}
.article-content figcaption {
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
font-size: 0.8rem;
color: #888;
font-style: italic;
line-height: 1.5;
max-width: 90%;
margin: 0 auto;
}
/* Graphics from the Groundamentals graphics system. The SVG already carries the
card, the 3px keyline, the hard offset shadow and the teal ground, so the
generic image chrome would draw a second border round the first and put a
soft shadow next to a hard one. */
.article-content .fcf-graphic {
margin: 32px 0;
}
.article-content .fcf-graphic img {
width: 100%;
max-width: 100%;
height: auto;
display: block;
margin: 0;
border: none;
border-radius: 0;
box-shadow: none;
}
/* Chart/graph containers - use class="chart" on a div wrapping charts */
.article-content .chart {
background: #fff;
border: 2px solid #e8e2d6;
border-radius: 12px;
padding: 20px;
margin: 28px 0;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
text-align: center;
}
.article-content .chart img {
border: none;
box-shadow: none;
margin: 0 auto 12px;
border-radius: 4px;
}
.article-content .chart-caption {
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
font-size: 0.75rem;
color: #999;
margin-top: 8px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Callout/highlight boxes - use class="callout" on a div */
.article-content .callout {
background: rgba(255, 215, 0, 0.1);
border-left: 4px solid #FFD700;
border-radius: 0 10px 10px 0;
padding: 20px 24px;
margin: 28px 0;
}
.article-content .callout p {
margin: 0;
font-weight: 600;
color: #0f0f0f;
}
/* Data table styling */
.article-content table {
width: 100%;
border-collapse: collapse;
margin: 28px 0;
font-size: 0.9rem;
border-radius: 10px;
overflow: hidden;
border: 2px solid #e8e2d6;
}
.article-content thead {
background: #0f0f0f;
color: #FFD700;
}
.article-content th {
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
font-weight: 700;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 14px 16px;
text-align: left;
}
.article-content td {
padding: 12px 16px;
border-bottom: 1px solid #e8e2d6;
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
}
.article-content tbody tr:nth-child(even) {
background: rgba(255, 215, 0, 0.05);
}
.article-content tbody tr:hover {
background: rgba(255, 215, 0, 0.12);
}
.article-content a {
color: #0f0f0f;
text-decoration: underline;
text-decoration-color: #FFD700;
text-underline-offset: 3px;
text-decoration-thickness: 2px;
transition: text-decoration-color 0.2s;
}
.article-content a:hover {
text-decoration-color: #FFD700;
}
.article-content blockquote {
border-left: 4px solid #FFD700;
background: rgba(255, 215, 0, 0.12);
padding: 16px 24px;
margin: 24px 0;
border-radius: 0 8px 8px 0;
font-style: italic;
}
.article-content ul,
.article-content ol {
padding-left: 24px;
margin-bottom: 18px;
}
.article-content li {
margin-bottom: 8px;
}
/* Glossary term - dotted underline with a layman explanation on hover/tap */
.article-content .term {
position: relative;
font-weight: 600;
border-bottom: 2px dotted #b8920a;
cursor: help;
outline: none;
}
.article-content .term::after {
content: attr(data-tip);
position: absolute;
left: 50%;
bottom: calc(100% + 12px);
transform: translateX(-50%) translateY(4px);
width: max-content;
max-width: 280px;
background: #0f0f0f;
color: #fff;
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
font-style: normal;
font-weight: 500;
font-size: 0.82rem;
line-height: 1.5;
text-align: left;
padding: 10px 14px;
border-radius: 8px;
border: 2px solid #FFD700;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
opacity: 0;
visibility: hidden;
transition: opacity 0.18s ease, transform 0.18s ease;
z-index: 60;
pointer-events: none;
white-space: normal;
}
.article-content .term::before {
content: "";
position: absolute;
left: 50%;
bottom: calc(100% + 6px);
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: #FFD700;
opacity: 0;
visibility: hidden;
transition: opacity 0.18s ease;
z-index: 61;
pointer-events: none;
}
.article-content .term:hover::after,
.article-content .term:focus::after {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.article-content .term:hover::before,
.article-content .term:focus::before {
opacity: 1;
visibility: visible;
}
@media (max-width: 640px) {
.article-content .term::after { max-width: 220px; }
}
.article-content table {
width: 100%;
border-collapse: collapse;
margin: 24px 0;
}
.article-content th,
.article-content td {
border: 1px solid #ddd;
padding: 10px 14px;
text-align: left;
}
.article-content th {
background: #0f0f0f;
color: #FFD700;
font-weight: 700;
}
.article-content pre {
background: #0f0f0f;
color: #f5f5f5;
padding: 20px;
border-radius: 8px;
overflow-x: auto;
margin: 24px 0;
}
.article-content code {
font-size: 0.9em;
}
.article-content hr {
border: none;
border-top: 2px solid #ddd;
margin: 32px 0;
}
/* ===== ARTICLE RESPONSIVE ===== */
@media (max-width: 820px) {
.article-cards {
grid-template-columns: 1fr;
padding: 0 10px;
}
/* Single column on mobile - let the odd card fill the width normally */
.article-cards > .article-card:last-child:nth-child(odd) {
max-width: none;
margin-inline: 0;
}
.article-content {
padding: 28px 20px;
}
.article-page {
padding-left: 10px;
padding-right: 10px;
}
}
@media (max-width: 640px) {
.article-content {
padding: 20px 16px;
font-size: 0.95rem;
}
.article-card {
padding: 20px 18px;
}
}
/* ===== SIGN IN PAGE ===== */
.signin-main {
min-height: 78vh;
min-height: 78dvh;
display: flex;
align-items: center;
justify-content: center;
}
.signin-card {
background: #FCF7E8;
border: 3px solid #0f0f0f;
border-radius: 16px;
box-shadow: 8px 8px 0 #0f0f0f;
padding: 40px 36px;
max-width: 420px;
width: 100%;
}
.signin-card h1 {
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
font-weight: 800;
font-size: 1.6rem;
color: #0f0f0f;
margin: 0 0 8px;
}
.signin-lede {
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
font-size: 0.9rem;
line-height: 1.6;
color: #555;
margin: 0 0 24px;
}
.signin-label {
display: block;
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
color: #6b6b6b;
margin-bottom: 8px;
}
.signin-input {
width: 100%;
box-sizing: border-box;
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
font-size: 0.95rem;
padding: 13px 15px;
background: #fff;
border: 2px solid #0f0f0f;
border-radius: 8px;
color: #0f0f0f;
}
.signin-input:focus {
outline: none;
box-shadow: 3px 3px 0 #FFD700;
}
/* The code is six digits and nothing else, so it is set wide and monospaced
by tracking rather than by a font the rest of the site does not use. */
.signin-input--code {
font-size: 1.6rem;
font-weight: 800;
letter-spacing: 0.5em;
text-align: center;
padding-left: 0.5em;
}
.signin-btn {
display: inline-block;
width: 100%;
box-sizing: border-box;
margin-top: 18px;
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
font-weight: 700;
font-size: 0.9rem;
text-align: center;
text-decoration: none;
padding: 13px 22px;
background: #FFD700;
color: #0f0f0f;
border: 2px solid #0f0f0f;
border-radius: 8px;
cursor: pointer;
box-shadow: 3px 3px 0 #0f0f0f;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.signin-btn:hover {
transform: translate(-1px, -1px);
box-shadow: 4px 4px 0 #0f0f0f;
}
.signin-btn:active {
transform: translate(2px, 2px);
box-shadow: 0 0 0 #0f0f0f;
}
.signin-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
box-shadow: 3px 3px 0 #0f0f0f;
}
/* Leaving the list should not be dressed up as the brand's main action. */
.signin-btn--quiet {
background: #fff;
border-color: #c62828;
color: #c62828;
box-shadow: none;
}
.signin-btn--quiet:hover {
box-shadow: 2px 2px 0 #c62828;
}
.signin-msg {
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
font-size: 0.82rem;
line-height: 1.5;
margin: 10px 0 0;
min-height: 1em;
}
.signin-msg--error { color: #c62828; }
.signin-msg--ok { color: #008C84; }
.signin-foot {
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
font-size: 0.82rem;
color: #666;
margin: 22px 0 0;
text-align: center;
}
.signin-foot a { color: #0f0f0f; }
.signin-link {
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
font-size: 0.82rem;
font-weight: 700;
color: #0f0f0f;
background: none;
border: none;
padding: 0;
cursor: pointer;
text-decoration: underline;
text-decoration-color: #FFD700;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
.signin-sep { color: #bbb; margin: 0 8px; }
@media (max-width: 640px) {
.signin-card { padding: 30px 22px; }
.signin-input--code { font-size: 1.3rem; letter-spacing: 0.35em; }
}
/* ===== ACCOUNT PAGE =====
The airy glass card (11 Oct 2026): the look the sign-in card
(js/signin-modal.js) and the reader gate (below) share, so the 3 places a
reader signs in look like one thing. Light cream at 62% over a heavy
blur, a white hairline edge, a soft yellow and teal glow on the page
behind it, labels above values, pill buttons. */
.glass-stage {
box-sizing: border-box;
padding: 40px 16px;
background-image:
radial-gradient(closest-side, rgba(255, 215, 0, 0.55), rgba(255, 215, 0, 0)),
radial-gradient(closest-side, rgba(0, 140, 132, 0.45), rgba(0, 140, 132, 0));
background-size: 340px 340px, 400px 400px;
background-position: calc(50% - 250px) 32%, calc(50% + 260px) 72%;
background-repeat: no-repeat;
}
.account-card {
position: relative;
z-index: 2; /* above the checkerboard overlay, like the sign-in card */
width: min(440px, 100%);
margin: 0 auto;
display: grid;
gap: 10px;
background: rgba(255, 253, 247, 0.62);
-webkit-backdrop-filter: blur(30px) saturate(1.3);
backdrop-filter: blur(30px) saturate(1.3);
border: 1px solid rgba(255, 255, 255, 0.7);
border-radius: 22px;
box-shadow: 0 0 0 1px rgba(15, 15, 15, 0.06), 0 40px 80px -30px rgba(15, 15, 15, 0.35);
padding: 30px 32px;
font-family: 'Montserrat', 'Montserrat Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: #0f0f0f;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.account-card { background: #fffdf7; }
}
.account-eyebrow {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #6d685f;
}
.account-card h1 {
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
font-weight: 800;
font-size: 1.6rem;
line-height: 1.2;
letter-spacing: -0.02em;
margin: 0;
color: #0f0f0f;
text-wrap: balance;
}
.account-lede {
margin: 0;
color: #3b3833;
font-size: 0.9rem;
line-height: 1.6;
}
/* The fields, a message line and the actions arrive once the reader's
record has loaded; until then the head stands alone. */
.account-body:empty { display: none; }
.account-fields {
display: grid;
gap: 14px;
margin: 6px 0 0;
padding-top: 18px;
border-top: 1px solid rgba(15, 15, 15, 0.1);
}
.account-field {
display: grid;
gap: 4px;
min-width: 0;
}
.account-field dt {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #6d685f;
}
.account-field dd {
margin: 0;
font-size: 0.95rem;
font-weight: 600;
color: #0f0f0f;
overflow-wrap: anywhere;
}
/* the status, and the 2 newsletters in the lede, marked the way the sign-in card marks its 3 */
.account-mark {
background: linear-gradient(transparent 56%, rgba(255, 215, 0, 0.6) 56%);
color: #0f0f0f;
font-weight: 600;
padding: 0 2px;
}
.account-mark--off {
background: linear-gradient(transparent 56%, rgba(198, 40, 40, 0.25) 56%);
}
.account-msg {
margin: 12px 0 0;
font-size: 0.78rem;
line-height: 1.45;
}
.account-msg:empty { display: none; }
.account-msg--error { color: #c62828; }
.account-msg--ok { color: #008C84; }
.account-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 16px;
}
.account-pill {
flex: 1 1 auto;
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
font-weight: 600;
font-size: 0.86rem;
line-height: 1;
height: 44px;
padding: 0 22px;
border-radius: 999px;
border: 1px solid rgba(15, 15, 15, 0.3);
background: transparent;
color: #0f0f0f;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: background 0.15s;
}
.account-pill:hover { background: rgba(15, 15, 15, 0.05); }
/* Leaving the list is not dressed up as the brand's main action; coming
back, and signing in, are. */
.account-pill--solid {
background: #0f0f0f;
color: #fffdf7;
border-color: #0f0f0f;
}
.account-pill--solid:hover { background: #2a2825; }
.account-pill--ghost {
border-color: transparent;
background: rgba(15, 15, 15, 0.06);
}
.account-pill--ghost:hover { background: rgba(15, 15, 15, 0.1); }
/* Delete my account: a soft red, so it reads apart from Sign out without
shouting; the confirm step's "Yes, delete everything" is the solid red. */
.account-pill--danger {
border-color: rgba(179, 38, 30, 0.28);
background: rgba(198, 40, 40, 0.07);
color: #b3261e;
}
.account-pill--danger:hover { background: rgba(198, 40, 40, 0.13); }
.account-pill--danger-solid {
border-color: #b3261e;
background: #b3261e;
color: #fffdf7;
}
.account-pill--danger-solid:hover { background: #962018; }
.account-pill:disabled {
opacity: 0.6;
cursor: default;
}
.account-pill:focus-visible {
outline: 2px solid #FFD700;
outline-offset: 2px;
}
@media (max-width: 520px) {
.account-card { padding: 24px 20px; }
}
/* ===== ARTICLE SHARE BUTTONS ===== */
.article-share {
text-align: center;
padding: 28px 0;
margin-top: 20px;
border-top: 1px solid #e8e2d6;
}
.share-label {
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
font-weight: 700;
font-size: 0.85rem;
color: #666;
text-transform: uppercase;
letter-spacing: 1px;
display: block;
margin-bottom: 16px;
}
.share-buttons {
display: flex;
justify-content: center;
gap: 12px;
}
.share-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: #0f0f0f;
color: #FFD700;
font-weight: 800;
font-size: 1.1rem;
text-decoration: none;
transition: transform 0.15s ease, box-shadow 0.15s ease;
border: 2px solid #0f0f0f;
}
.share-btn:hover {
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
/* ===== ADMIN PAGE ===== */
.admin-container {
max-width: 720px;
margin: 0 auto;
padding: 40px 20px;
}
.admin-container h1 {
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
font-weight: 800;
font-size: 1.8rem;
margin-bottom: 8px;
color: #0f0f0f;
}
.admin-subtitle {
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
font-size: 0.95rem;
color: #666;
margin-bottom: 32px;
}
.admin-article-list {
background: #FCF7E8;
border: 3px solid #0f0f0f;
border-radius: 12px;
padding: 8px 0;
box-shadow: 6px 6px 0 #0f0f0f;
}
.admin-article-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 24px;
border-bottom: 1px solid #e8e2d6;
gap: 16px;
}
.admin-article-row:last-child {
border-bottom: none;
}
.admin-article-info h4 {
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
font-weight: 700;
font-size: 0.95rem;
margin: 0 0 4px;
color: #0f0f0f;
}
.admin-article-date {
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
font-size: 0.8rem;
color: #888;
}
.admin-toggle {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
user-select: none;
}
.admin-toggle input {
appearance: none;
width: 44px;
height: 24px;
background: #ddd;
border-radius: 24px;
position: relative;
cursor: pointer;
transition: background 0.2s;
border: 2px solid #0f0f0f;
margin: 0;
}
.admin-toggle input:checked {
background: #FFD700;
}
.admin-toggle input::after {
content: '';
position: absolute;
width: 16px;
height: 16px;
border-radius: 50%;
background: #0f0f0f;
top: 2px;
left: 2px;
transition: left 0.2s;
}
.admin-toggle input:checked::after {
left: 22px;
}
.admin-toggle-label {
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
font-weight: 700;
font-size: 0.8rem;
color: #0f0f0f;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.admin-toggle input:disabled {
opacity: 0.5;
cursor: wait;
}
.admin-note {
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
font-size: 0.8rem;
color: #888;
margin-top: 20px;
font-style: italic;
}
/* the 404 page's headline, which the phone rules resize */
.nf-title { font-size: 2rem; }
/* ===== LEGAL PAGES ===== */
.legal-content {
max-width: 720px;
margin: 0 auto;
padding: 40px 20px;
}
.legal-content h1 {
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
font-weight: 800;
font-size: 2rem;
color: #0f0f0f;
margin-bottom: 8px;
}
.legal-updated {
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
font-size: 0.85rem;
color: #888;
margin-bottom: 32px;
}
.legal-content h2 {
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
font-weight: 700;
font-size: 1.15rem;
color: #0f0f0f;
margin: 28px 0 12px;
}
.legal-content p,
.legal-content li {
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
font-size: 0.9rem;
line-height: 1.75;
color: #333;
margin-bottom: 12px;
}
.legal-content ul {
padding-left: 20px;
margin-bottom: 16px;
}
.legal-content a {
color: #0f0f0f;
text-decoration: underline;
text-decoration-color: #FFD700;
text-underline-offset: 3px;
}
/* the date sits on a rule that closes the heading block, the opening
paragraph reads a step larger, and each numbered section starts on a
hairline so the page scans like a document */
.legal-content .legal-updated {
padding-bottom: 24px;
border-bottom: 1px solid rgba(15, 15, 15, 0.12);
margin-bottom: 28px;
}
.legal-content .legal-intro {
font-size: 1rem;
color: #0f0f0f;
margin-bottom: 8px;
}
.legal-content h2 {
padding-top: 24px;
border-top: 1px solid rgba(15, 15, 15, 0.08);
}
.legal-content ul li::marker { color: #0f0f0f; }
/* ==========================================================================
EDITORIAL REFINEMENT
Adapted from The Ken, The Morning Context and Filter Coffee, applied inside
the existing Groundamentals system. Decisions taken with the owner:
type Montserrat throughout, previews and article body alike.
headers left, with a gold kicker rule. Homepage hero stays centred.
story order category tag / headline / deck / date last
story layout lead story, then a stacked list
measure 72 characters
ground teal on homepage + newsletter pages, cream when reading
gold accent only. Cards go cream.
radius/shadow 8px and the hard offset shadow, unchanged
decoration circles + checkerboard on the homepage, off when reading
reading top teal block behind the article title
navbar logo left, links right, Subscribe as a button
========================================================================== */
/* ----- 1. Navbar: logo left, links right, Subscribe as the action --------- */
.navbar {
display: flex;
align-items: center;
justify-content: center;
padding: 0 24px;
gap: 20px;
}
/* pinned left so the nav links stay centred exactly where they already sit */
.nav-brand {
position: absolute;
left: 24px;
top: 0;
display: flex;
align-items: center;
height: 100%;
z-index: 1;
}
.nav-brand img {
height: 34px;
width: auto;
display: block;
}
.navbar .nav-menu {
justify-content: center;
gap: 26px;
padding: 0;
width: auto;
flex: 0 1 auto;
}
.nav-link {
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.01em;
/* 11px, not 8px, on the sides: the line box carries its own leading, so
8px top and bottom already reads as 11px of space around the letters.
Matching that on the left and right is what makes the hover and active
tint sit evenly on all four sides. */
padding: 8px 11px;
}
/* the underline stays the width of the word: 100% here is the padded box, so
taking the two 11px sides off leaves exactly the text */
.nav-link:hover::after,
.nav-link.active::after { width: calc(100% - 22px); }
.nav-link.active { font-weight: 700; }
/* Subscribe reads as the primary action, not a sixth link */
.nav-link.nav-cta {
background: #FFD700;
color: #0f0f0f;
font-weight: 700;
border: 2px solid #FFD700;
border-radius: 6px;
padding: 8px 16px;
}
.nav-link.nav-cta::after { display: none; }
.nav-link.nav-cta:hover {
background: transparent;
color: #FFD700;
}
/* ----- 2. Section headers: left, with a kicker rule ---------------------- */
.section > .hero-statement {
text-align: left;
max-width: 860px;
margin: 0 auto 40px auto;
padding: 0 20px;
}
.section > .hero-statement::before {
content: "";
display: block;
width: 44px;
height: 4px;
background: #FFD700;
border: 2px solid #0f0f0f;
border-radius: 2px;
margin-bottom: 20px;
}
.section > .hero-statement h1, .hero-statement h2.hero-h1 {
font-size: clamp(1.65rem, 3.2vw, 2.15rem);
line-height: 1.18;
letter-spacing: -0.02em;
margin-bottom: 10px;
}
.section > .hero-statement p {
font-size: 1.02rem;
line-height: 1.62;
color: #4a4a4a;
max-width: 58ch;
margin: 0;
}
/* homepage hero left exactly as deployed: logo 400px, 100vh, tagline 650px */
/* ----- 3. Story list: lead story, then a stacked list -------------------- */
.article-cards {
grid-template-columns: 1fr;
gap: 20px;
max-width: 860px;
}
/* single-column grid now, so the old two-column centring rule would render a
dangling odd card at half width. Neutralised. */
.article-cards > .article-card:last-child:nth-child(odd) {
grid-column: auto;
max-width: none;
margin-inline: 0;
}
.article-card {
background: #FCF7E8;
padding: 26px 28px 24px;
gap: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
}
/* the lead story carries the extra weight */
/* CATEGORY, set above the headline, scoped so each list names itself */
.article-card::after {
content: "The Macro Brew";
order: -1;
font-size: 0.66rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #0f0f0f;
background: #FFD700;
border: 2px solid #0f0f0f;
border-radius: 3px;
padding: 3px 8px;
margin-bottom: 14px;
}
#edgeCards .article-card::after,
#eaGrid .article-card::after { content: "The Edge Alert"; }
/* On a section's own listing the chip would only repeat the heading (16 Oct 2026) */
main.section > .article-cards > .article-card::after, #insightLog .article-card::after { display: none; }
/* HEADLINE */
.article-card h4 {
order: 1;
font-size: 1.28rem;
font-weight: 800;
line-height: 1.26;
letter-spacing: -0.014em;
margin-bottom: 10px;
}
/* DECK */
.article-card .article-excerpt {
order: 2;
font-size: 0.95rem;
line-height: 1.68;
color: #4a4a4a;
margin-bottom: 14px;
max-width: 72ch;
}
/* DATE, de-emphasised and last */
.article-card .article-date {
order: 3;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #595959;
margin-bottom: 0;
}
.article-card .article-read-more {
order: 4;
font-size: 0.84rem;
font-weight: 700;
color: #0f0f0f;
border-bottom: 3px solid #FFD700;
padding-bottom: 1px;
margin-top: 14px;
}
.article-card:hover .article-read-more { border-bottom-color: #0f0f0f; }
.article-card .new-badge {
order: -2;
align-self: flex-start;
position: static;
margin-bottom: 10px;
}
.article-card .ea-card-meta { order: 0; margin-bottom: 10px; }
/* An Edge Alert card, wherever it is listed: the archive, the home page and
the Read next block under a piece. The company is shown by its logo, never
its ticker; a wide wordmark (JOJO's is 7.8 times as wide as it is tall)
hits the 150px cap before the 26px height, and contain shrinks it whole. */
.ea-card { position: relative; }
.ea-card .ea-card-meta {
display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
margin-bottom: 10px; font-size: 0.78rem;
}
.ea-card .ea-card-logo { display: inline-flex; align-items: center; height: 26px; flex: 0 0 auto; }
.ea-card .ea-card-logo img {
height: 100%; width: auto; max-width: 150px;
object-fit: contain; object-position: left center; display: block;
}
.ea-card .ea-tier {
background: #fff3c4; color: #0f0f0f; padding: 2px 8px; border-radius: 4px; font-weight: 600;
}
.ea-card .ea-sector { color: #555; font-weight: 500; }
/* the report's angle (reports.json "angle"): Business deep dive or Red flags.
An outline, no fill: a label, not a colour that says good or bad */
.ea-card .ea-angle {
border: 1px solid #0f0f0f; color: #0f0f0f; padding: 1px 7px; border-radius: 4px; font-weight: 700;
}
/* ----- 4. Publication cards --------------------------------------------- */
.value-card {
background: #FCF7E8;
text-align: left;
padding: 28px 26px;
}
.value-card .card-icon { font-size: 1.5rem; display: block; margin-bottom: 14px; }
.value-card h3 {
font-size: 1.28rem;
font-weight: 800;
line-height: 1.24;
letter-spacing: -0.012em;
margin-bottom: 10px;
}
.value-card p { font-size: 0.94rem; line-height: 1.7; color: #4a4a4a; }
/* ----- 5. Prose blocks --------------------------------------------------- */
.feature-box,
.cta-section,
.about-content {
text-align: left;
padding: 32px 34px;
}
.feature-box h3,
.cta-section h3 {
font-size: 1.38rem;
font-weight: 800;
line-height: 1.26;
letter-spacing: -0.014em;
margin-bottom: 12px;
}
.feature-box p,
.cta-section p,
.about-content p {
font-size: 0.98rem;
line-height: 1.72;
color: #3d3d3d;
max-width: 72ch;
}
.about-content p + p { margin-top: 1.05em; }
/* ----- 6. Reading pages: cream ground ------------------------------------ */
body.reading { background-color: #FCF7E8; }
/* On the cream reading pages (The Macro Brew and The Edge Alert listings) the
cards that open an article are teal, so they stand off the page. The home
page keeps its own cards on its teal ground. */
body.reading .article-card { background: #D3ECEB; }
/* The loading screen matches the page it opens onto, so a cream page never
flashes teal while it loads. */
/* The background pattern and the floating circles stay on cream pages, animation
and all. The circles are drawn in faint gold and ink and read the same on
either ground; the pattern is redrawn in a faint ink tint, because the white
it uses on teal disappears against cream. */
body.reading .checkerboard-overlay {
background-image:
linear-gradient(45deg, rgba(15, 15, 15, 0.03) 25%, transparent 25%),
linear-gradient(-45deg, rgba(15, 15, 15, 0.03) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, rgba(15, 15, 15, 0.03) 75%),
linear-gradient(-45deg, transparent 75%, rgba(15, 15, 15, 0.03) 75%);
}
/* the teal block that carries the article title */
.article-hero {
background: #D3ECEB;
border-bottom: 3px solid #0f0f0f;
margin: 0 0 40px;
padding: 38px 0 34px;
}
.article-hero-inner {
max-width: 860px;
margin: 0 auto;
padding: 0 20px;
text-align: left;
}
.article-hero .article-kicker {
display: inline-block;
font-size: 0.66rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
background: #FFD700;
border: 2px solid #0f0f0f;
border-radius: 3px;
padding: 3px 8px;
margin-bottom: 14px;
}
.article-hero h1 {
font-size: clamp(1.7rem, 3.8vw, 2.4rem);
font-weight: 800;
line-height: 1.18;
letter-spacing: -0.022em;
margin-bottom: 12px;
color: #0f0f0f;
}
.article-hero .article-meta {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #3d3d3d;
margin: 0;
}
/* the article page itself sits full-bleed so the teal block can span */
body.reading .article-page {
max-width: none;
padding-top: 110px;
padding-left: 0;
padding-right: 0;
}
body.reading .article-breadcrumb,
body.reading .article-content,
body.reading .article-share {
max-width: 860px;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
}
/* ----- 7. Article body: same Montserrat as the previews ------------------- */
.article-content {
font-family: 'Montserrat', 'Montserrat Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 1.02rem;
line-height: 1.75;
color: #22201e;
max-width: 72ch;
}
.article-content p {
font-family: inherit;
margin-bottom: 1.15em;
}
.article-content li { font-family: inherit; line-height: 1.7; }
.article-content blockquote {
font-family: inherit;
font-style: italic;
}
/* headings inside an article */
.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4 {
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
letter-spacing: -0.014em;
line-height: 1.25;
}
.article-content h2 { font-size: 1.45rem; font-weight: 800; margin: 1.9em 0 0.6em; }
.article-content h3 { font-size: 1.2rem; font-weight: 700; margin: 1.6em 0 0.5em; }
/* data, captions and UI inside articles */
.article-content figcaption,
.article-content table,
.article-content th,
.article-content td,
.article-content code,
.article-content pre {
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
}
/* ----- 8. Buttons -------------------------------------------------------- */
.hero-cta {
font-size: 0.92rem;
font-weight: 700;
letter-spacing: 0.01em;
padding: 14px 26px;
}
.hero-cta:active {
transform: translate(2px, 2px);
box-shadow: 0 0 0 #0f0f0f;
}
.article-view-all {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: flex-start;
max-width: 860px;
margin-left: auto;
margin-right: auto;
padding: 0 20px;
}
/* ----- 9. Focus ---------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
outline: 3px solid #0f0f0f;
outline-offset: 3px;
}
body.reading a:focus-visible { outline-color: #0f0f0f; }
/* ----- 10. Responsive ---------------------------------------------------- */
/* The Groundamentals logo is one line, wider than the old two-line one, so
between the phone menu and a wide screen it steps down a size rather than
run into "Home". Above 1060 it keeps the full 34px. */
@media (max-width: 1060px) {
.nav-brand img { height: 28px; }
}
/* The one width kept outside 640 and 820: it is where the desktop links
stop fitting at full size beside the logo, so it belongs to the navbar,
not the layout. It was 900 with the old two-line logo; the one-line
Groundamentals logo is wider, so it moved to 990. A phone on its side
(844 wide) falls inside it. */
@media (max-width: 990px) {
.nav-brand img { height: 28px; }
/* the links keep their even padding, so the room comes out of the gap
between them rather than off their sides */
.navbar .nav-menu { gap: 6px; }
.nav-link { font-size: 0.78rem; padding: 8px 10px; }
.nav-link:hover::after,
.nav-link.active::after { width: calc(100% - 20px); }
}
/* the narrowest desktop navbar: the logo one size smaller again */
@media (min-width: 821px) and (max-width: 860px) {
.nav-brand img { height: 24px; }
}
@media (max-width: 820px) {
.navbar { padding: 0 16px; }
.nav-brand { left: 16px; }
.section > .hero-statement { margin-bottom: 30px; }
.feature-box,
.cta-section,
.about-content { padding: 26px 22px; }
.article-hero { padding: 28px 0 26px; margin-bottom: 30px; }
.article-content { font-size: 1.02rem; }
}
@media (prefers-reduced-motion: reduce) {
.animate-on-scroll { opacity: 1; transform: none; }
}
/* ----- Subordinate section label -------------------------------------------
A page title keeps the large heading and the gold kicker. A list heading
beneath it drops to a small tracked label with a hairline rule, so the two
are never competing for the same attention. */
.section > .hero-statement.section-label {
margin-bottom: 20px;
}
.section > .hero-statement.section-label::before {
display: none;
}
.section-label h2 {
/* block, not flex: a flex h2 makes the text and the highlight span two
separate flex items, which inserts the gap between the two words */
display: block;
overflow: hidden;
white-space: nowrap;
margin: 0;
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #5c5c5c;
line-height: 1.4;
}
.section-label h2::after {
content: "";
display: inline-block;
vertical-align: middle;
width: 100%;
margin-left: 14px;
height: 2px;
background: rgba(15, 15, 15, 0.15);
}
.section-label p {
font-size: 0.88rem;
line-height: 1.55;
color: #5c5c5c;
margin-top: 10px;
max-width: 56ch;
}
@media (max-width: 640px) {
.section-label h2 { letter-spacing: 0.12em; }
}
/* ==========================================================================
SUBSCRIBE BAR
Slim strip that sits directly under the fixed navbar at the top of the
document and scrolls away with the page as you read, so it never sits
between the navbar and the article. The navbar is 60px at every breakpoint,
so the bar sits at 60 and the body is padded by its own height to keep every
page's existing top offset working unchanged.
========================================================================== */
body { padding-top: 48px; }
.subscribe-bar {
position: absolute;
top: 60px;
left: 0;
right: 0;
z-index: 99;
height: 48px;
background: #D3ECEB;
border-bottom: 3px solid #0f0f0f;
display: flex;
align-items: center;
justify-content: center;
padding: 0 16px;
}
.subscribe-bar-form {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
max-width: 860px;
justify-content: center;
}
.subscribe-bar-form label {
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
font-size: 0.8rem;
font-weight: 700;
color: #0f0f0f;
white-space: nowrap;
}
.subscribe-bar-form input {
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
font-size: 0.8rem;
padding: 7px 12px;
border: 2px solid #0f0f0f;
border-radius: 6px;
background: #FCF7E8;
color: #0f0f0f;
width: 240px;
max-width: 40vw;
}
.subscribe-bar-form input:focus {
outline: none;
box-shadow: 3px 3px 0 #0f0f0f;
}
.subscribe-bar-form button {
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
font-size: 0.8rem;
font-weight: 700;
padding: 7px 16px;
border: 2px solid #0f0f0f;
border-radius: 6px;
background: #FFD700;
color: #0f0f0f;
cursor: pointer;
white-space: nowrap;
transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.subscribe-bar-form button:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 #0f0f0f; }
.subscribe-bar-form button:active { transform: translate(1px, 1px); box-shadow: none; }
.subscribe-bar-form button[disabled] { opacity: 0.6; cursor: default; transform: none; box-shadow: none; }
/* The message opens as a strip under the bar, only while there is something
to say. Beside the button it had no room: on a phone it was hidden, which
left a reader with no word that it had worked, no error when it had not,
and no sign of the "Did you mean" hold on a mistyped address, so the first
press looked like it did nothing; on a wider screen a long error ran over
the Subscribe button. */
.subscribe-bar-msg {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 60;
margin: 0;
padding: 10px var(--gutter, 16px) 0;
pointer-events: none;
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
color: #0f0f0f;
}
.subscribe-bar-msg:empty { display: none; }
/* The message itself: a card in the site's outline-and-shadow style that
drops in under the bar, its colour and badge set by what happened. */
.sbm-card {
pointer-events: auto;
display: flex;
align-items: center;
gap: 12px;
max-width: 520px;
margin: 0 auto;
padding: 12px 8px 12px 14px;
background: #FCF7E8;
border: 2px solid #0f0f0f;
border-radius: 10px;
box-shadow: 4px 4px 0 #0f0f0f;
text-align: left;
animation: sbm-in 0.22s ease-out;
}
.sbm-icon {
flex: 0 0 auto;
width: 34px;
height: 34px;
display: grid;
place-items: center;
border: 2px solid #0f0f0f;
border-radius: 50%;
font-size: 1.05rem;
font-weight: 800;
line-height: 1;
}
.sbm-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sbm-title { font-size: 0.92rem; font-weight: 800; line-height: 1.3; }
.sbm-detail { font-size: 0.8rem; font-weight: 500; line-height: 1.45; color: #333; }
.sbm-close {
flex: 0 0 auto;
align-self: flex-start;
width: 40px;
height: 40px;
margin: -6px 0 -6px 0;
border: 0;
background: none;
font: inherit;
font-size: 1.35rem;
line-height: 1;
color: #0f0f0f;
cursor: pointer;
border-radius: 6px;
}
.sbm-close:hover { background: rgba(15, 15, 15, 0.08); }
.sbm-fix {
/* inline, so it sits in the sentence; the padding keeps a 40px tap area
without pushing the lines apart */
display: inline;
padding: 11px 0;
margin: -11px 0;
border: 0;
background: none;
font: inherit;
font-weight: 800;
color: #0f0f0f;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
cursor: pointer;
}
.sbm-subscribed { background: #D9F0EE; }
.sbm-subscribed .sbm-icon { background: #008C84; color: #fff; }
.sbm-already { background: #FFF4C2; }
.sbm-already .sbm-icon { background: #FFD700; }
.sbm-error { background: #FDE8E6; }
.sbm-error .sbm-icon { background: #C62828; color: #fff; }
.sbm-error .sbm-title { color: #A51F1F; }
.sbm-suggest .sbm-icon { background: #FFD700; }
@keyframes sbm-in {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .sbm-card { animation: none; } }
@media (max-width: 820px) {
.subscribe-bar-form label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.subscribe-bar-form input { width: auto; flex: 1 1 auto; max-width: none; }
}
/* ==========================================================================
ABOUT BOX
Editorial treatment for the long first-person piece: a drop cap, a lead
paragraph, one pull quote and a sign-off. Type and existing brand colours
only, no new decoration.
========================================================================== */
/* ----- pull quote ----- */
.about-content .about-pull {
margin: 26px 0 26px 0;
padding: 4px 0 4px 20px;
border-left: 5px solid #FFD700;
font-size: 1.2rem;
font-weight: 700;
line-height: 1.4;
letter-spacing: -0.012em;
color: #0f0f0f;
max-width: 30ch;
}
/* ----- sign-off ----- */
.about-content .about-sign {
margin-top: 30px;
padding-top: 18px;
border-top: 2px solid rgba(15, 15, 15, 0.14);
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #0f0f0f;
}
.about-content .about-sign span {
display: block;
margin-top: 4px;
font-weight: 700;
color: #5c5c5c;
}
@media (max-width: 640px) {
.about-content .about-pull { font-size: 1.06rem; max-width: none; }
}
/* ----- About box: alignment and affordance -------------------------------
The box was 700px centred while the section heading sits in an 860px
column with 20px padding, so the box edge landed 60px right of the
heading and nothing lined up. 820px puts the box border exactly under
the first letter of the heading. The hover lift is also removed: the box
is prose, not a link, and should not offer an interaction it cannot
fulfil. */
@media (max-width: 820px) {
.about-content { max-width: 100%; }
}
/* ==========================================================================
ABOUT: two-column with a sticky rail
The heading and sign-off hold a narrow left column while the prose runs
beside them. No container, no card treatment: this is writing, not an
object in a list. Collapses to one column on narrow screens.
========================================================================== */
.about-layout {
display: grid;
grid-template-columns: 210px minmax(0, 1fr);
gap: 56px;
max-width: 900px;
margin: 0 auto;
padding: 0 20px;
align-items: start;
/* .about-section centres its children on the homepage; the layout
opts out so the rail and prose read left on both pages */
text-align: left;
}
.about-rail {
position: sticky;
top: 130px;
}
.about-rail h1, .about-rail h2.hero-h1 {
font-size: 1.5rem;
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.02em;
color: #0f0f0f;
margin: 0 0 18px;
}
.about-rail::before {
content: "";
display: block;
width: 44px;
height: 4px;
background: #FFD700;
border: 2px solid #0f0f0f;
border-radius: 2px;
margin-bottom: 18px;
}
/* the prose itself, no box */
.about-body {
background: none;
border: 0;
box-shadow: none;
padding: 0;
max-width: 62ch;
}
.about-body p {
font-size: 1rem;
line-height: 1.78;
color: #2a2a2a;
margin-bottom: 1.15em;
max-width: none;
}
.about-body p:last-child { margin-bottom: 0; }
.about-body .about-pull {
margin: 30px 0;
padding: 2px 0 2px 20px;
border-left: 5px solid #FFD700;
font-size: 1.22rem;
font-weight: 700;
line-height: 1.4;
letter-spacing: -0.012em;
color: #0f0f0f;
max-width: 30ch;
}
/* sign-off now lives in the rail */
.about-rail .about-sign {
margin: 0;
padding-top: 16px;
border-top: 2px solid rgba(15, 15, 15, 0.14);
font-size: 0.88rem;
font-weight: 800;
letter-spacing: 0.01em;
color: #0f0f0f;
line-height: 1.5;
}
.about-rail .about-sign span {
display: block;
margin-top: 4px;
font-weight: 600;
font-size: 0.78rem;
color: #5c5c5c;
}
@media (max-width: 820px) {
.about-layout { grid-template-columns: 1fr; gap: 26px; }
.about-rail { position: static; }
.about-rail h1, .about-rail h2.hero-h1 { font-size: 1.7rem; }
.about-body { max-width: none; }
}
/* ----- About -> contact: close the gap --------------------------------------
.section carries 110px top and 80px bottom padding. Stacked between the end
of the About text and the contact strip that came to ~220px of empty ground.
Scoped to these two sections so the rest of the page rhythm is unchanged. */
#about { padding-bottom: 36px; }
#contact { padding-top: 36px; }
#contact .social-divider { margin: 18px 0; }
@media (max-width: 820px) {
#about { padding-bottom: 24px; }
#contact { padding-top: 24px; }
}
/* ==========================================================================
BREWED UP INSIGHTS
Short, dated, sourced notes. A poured card on the homepage, a dropdown in
the navbar, a ledger at /insights/. Everything renders from
insights/insights.json through js/insights.js. Same tokens as the rest of
the site: cream card, 3px ink border, hard offset shadow, gold as accent.
========================================================================== */
.insight-tag {
display: inline-block;
font-size: 0.66rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #0f0f0f;
background: #FFD700;
border: 2px solid #0f0f0f;
border-radius: 3px;
padding: 3px 8px;
line-height: 1.3;
}
.insight-link {
font-size: 0.84rem;
font-weight: 700;
color: #0f0f0f;
text-decoration: none;
border-bottom: 3px solid #FFD700;
padding-bottom: 1px;
}
.insight-link:hover { border-bottom-color: #0f0f0f; }
.insight-sources {
font-size: 0.76rem;
font-weight: 600;
color: #6b6b6b;
}
/* Sources fold to one line (js/insights.js): the count and the publishers,
then "Show". Open, the publishers give way to the full list. The same
summary line serves an insight and each group of an Edge Alert's sources. */
.fcf-sources > summary {
display: flex;
align-items: baseline;
gap: 8px;
min-width: 0;
cursor: pointer;
list-style: none;
-webkit-tap-highlight-color: transparent;
}
.fcf-sources > summary::-webkit-details-marker { display: none; }
.fcf-sources > summary:focus-visible { outline: 3px solid #0f0f0f; outline-offset: 3px; border-radius: 4px; }
.fcf-sources .src-head { flex: none; color: #0f0f0f; font-weight: 700; }
.fcf-sources .src-names {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fcf-sources > summary::after {
content: "Show";
flex: none;
margin-left: auto;
color: #0f0f0f;
font-weight: 700;
text-decoration: underline;
text-decoration-color: #FFD700;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
.fcf-sources[open] > summary::after { content: "Hide"; }
.fcf-sources[open] .src-names { visibility: hidden; }
.insight-sources .src-list {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
margin-top: 8px;
}
/* In a report the groups sit in the body's type, one ruled line each. */
.fcf-sources-group { border-bottom: 1px solid #E8E2D6; }
.fcf-sources-group:first-of-type { border-top: 1px solid #E8E2D6; }
.fcf-sources-group > summary { padding: 10px 0; font-size: 0.95rem; }
.fcf-sources-group .src-names { color: #6b6b6b; font-weight: 600; font-size: 0.85rem; }
.fcf-sources-group > summary::after { font-size: 0.85rem; }
.fcf-sources-group > ul, .fcf-sources-group > ol { margin-top: 0; padding-bottom: 6px; }
/* opened, the note and each group name sit in the list's smaller type */
.fcf-sources-group > p { margin: 4px 0 8px; font-size: 0.9rem; color: #4a4a4a; }
.fcf-sources-group > p > strong { color: #0f0f0f; }
.insight-sources a {
color: #3d3d3d;
text-decoration: underline;
text-decoration-color: rgba(15, 15, 15, 0.3);
text-underline-offset: 3px;
}
.insight-sources a:hover { color: #0f0f0f; text-decoration-color: #0f0f0f; }
/* ----- Homepage: poured card + recent list ----- */
.insights-brew {
display: grid;
/* the card on the left; its graphic, then the recent list, on the right */
grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
grid-template-areas: "card gfx" "card recent";
grid-template-rows: auto 1fr;
gap: 28px 40px;
max-width: 1240px;
margin: 0 auto;
padding: 0 20px;
align-items: start;
position: relative;
z-index: 1;
}
.insight-pour {
background: #FCF7E8;
border: 3px solid #0f0f0f;
border-radius: 8px;
box-shadow: 5px 5px 0 #0f0f0f;
padding: 24px 28px 20px;
display: flex;
flex-direction: column;
}
.insight-pour .insight-kicker {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px 12px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #6b6b6b;
font-variant-numeric: tabular-nums;
}
.insight-pour .insight-body.is-pouring { animation: insightPour 0.32s ease-out; }
@keyframes insightPour {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
.insight-figure {
font-weight: 900;
letter-spacing: -0.035em;
line-height: 1;
color: #0f0f0f;
font-variant-numeric: tabular-nums;
}
.insight-pour .insight-figure {
font-size: clamp(2.3rem, 5.5vw, 3.3rem);
margin: 24px 0 16px;
}
/* A change reads from → to: where it started in grey, where it ended up in
the highlight. The caption under the number says what it counts. */
.insight-figure.has-from {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.05em 0.28em;
}
.insight-figure .figure-from { font-size: 0.8em; color: #6b6b6b; }
.insight-figure .figure-arrow { font-size: 0.6em; font-weight: 800; color: #008C84; }
.insight-figure .figure-sr {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.insight-figure-note {
font-size: 0.86rem;
font-weight: 600;
line-height: 1.4;
color: #5c5c5c;
max-width: 36em;
}
.insight-figure-note[hidden] { display: none; }
.insight-pour .insight-figure-note { margin: -6px 0 18px; }
.insight-popup .insight-figure-note { font-size: 0.8rem; margin: 0 0 10px; }
.insight-pour .insight-title {
font-size: 1.2rem;
font-weight: 800;
letter-spacing: -0.014em;
line-height: 1.28;
color: #0f0f0f;
margin: 0 0 10px;
text-wrap: balance;
}
.insight-pour .insight-text p {
font-size: 0.98rem;
font-weight: 500;
line-height: 1.68;
color: #262626;
max-width: 58ch;
margin: 0;
text-wrap: pretty;
}
.insight-pour .insight-text p + p { margin-top: 0.8em; }
.insight-pour .insight-sources { margin-top: 16px; }
.insight-foot {
margin-top: 20px;
padding-top: 16px;
border-top: 2px solid rgba(15, 15, 15, 0.12);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px 16px;
}
.insight-controls { display: flex; align-items: center; gap: 12px; }
.insight-count {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #6b6b6b;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.insight-btn {
font-family: inherit;
font-size: 0.82rem;
font-weight: 700;
padding: 8px 14px;
border: 2px solid #0f0f0f;
border-radius: 6px;
background: #FFD700;
color: #0f0f0f;
cursor: pointer;
white-space: nowrap;
transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.insight-btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 #0f0f0f; }
.insight-btn:active { transform: translate(1px, 1px); box-shadow: none; }
/* the recent list is an index, not an object, so no box */
.insight-recent .insight-recent-label {
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #5c5c5c;
padding-bottom: 10px;
border-bottom: 2px solid rgba(15, 15, 15, 0.15);
margin: 4px 0 0;
}
.insight-recent ol { list-style: none; margin: 0; padding: 0; }
.insight-recent li { border-bottom: 2px solid rgba(15, 15, 15, 0.1); }
.insight-recent button {
font-family: inherit;
width: 100%;
display: grid;
grid-template-columns: 58px minmax(0, 1fr);
gap: 12px;
align-items: baseline;
text-align: left;
background: none;
border: 0;
padding: 13px 4px;
cursor: pointer;
color: #0f0f0f;
border-radius: 4px;
}
.insight-recent button:hover { background: rgba(255, 251, 240, 0.7); }
.insight-recent .r-date {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #6b6b6b;
font-variant-numeric: tabular-nums;
}
.insight-recent .r-title { font-size: 0.9rem; font-weight: 600; line-height: 1.4; color: #2a2a2a; }
.insight-recent button[aria-current="true"] .r-title { font-weight: 800; color: #0f0f0f; }
.insight-recent button[aria-current="true"] .r-title span { background: linear-gradient(transparent 58%, #FFD700 58%); }
.insight-recent button[aria-current="true"] .r-date { color: #0f0f0f; }
#insights .article-view-all { margin-top: 36px; }
/* ----- Homepage pop-up: once per new insight ----- */
.insight-popup {
position: fixed;
left: 24px;
bottom: 24px;
z-index: 150;
width: 330px;
max-width: calc(100vw - 24px);
/* the same teal ground the archive gives an insight card, so the pop-up
reads as one of them rather than as part of the cream page */
background: #D3ECEB;
border: 3px solid #0f0f0f;
border-radius: 8px;
box-shadow: 5px 5px 0 #0f0f0f;
padding: 16px 18px;
/* a long summary scrolls inside the card rather than running off the top
of a short window */
max-height: calc(100vh - 48px);
overflow-y: auto;
animation: insightPopUp 0.35s cubic-bezier(.2, .9, .3, 1.2);
}
@keyframes insightPopUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: none; }
}
.insight-popup .pop-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.insight-popup .pop-close {
font-family: inherit;
font-size: 1.1rem;
font-weight: 700;
line-height: 1;
width: 30px;
height: 30px;
border: 2px solid #0f0f0f;
border-radius: 6px;
background: transparent;
color: #0f0f0f;
cursor: pointer;
}
.insight-popup .pop-close:hover { background: #FFD700; }
.insight-popup .insight-figure { font-size: 2rem; margin: 14px 0 8px; }
.insight-popup .pop-text {
font-size: 0.88rem;
line-height: 1.55;
color: #2a2a2a;
margin: 0 0 12px;
}
/* ----- Navbar: Insights dropdown -----
The item stretches to the full bar height so the pointer never leaves it on
the way down to the panel. Without JS it stays a plain link to /insights/. */
.nav-drop { align-self: stretch; display: flex; align-items: center; }
.nav-drop-toggle { display: inline-flex; align-items: center; gap: 6px; }
.nav-drop-toggle svg { width: 10px; height: 10px; transition: transform 0.2s ease; }
.nav-drop-toggle[aria-expanded="true"] { color: #FFD700; }
.nav-drop-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.insights-menu {
position: fixed;
top: 60px;
left: 50%;
transform: translateX(-50%);
width: min(780px, calc(100vw - 32px));
z-index: 120;
background: #FCF7E8;
border: 3px solid #0f0f0f;
border-top: 0;
border-radius: 0 0 8px 8px;
box-shadow: 5px 5px 0 #0f0f0f;
padding: 22px 26px 18px;
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
gap: 14px 30px;
text-align: left;
animation: insightMenuDrop 0.18s ease-out;
}
/* the site has no global [hidden] rule, and display: grid above would beat
the browser default, so closed has to be said out loud */
.insights-menu[hidden] { display: none; }
@keyframes insightMenuDrop {
from { opacity: 0; transform: translate(-50%, -6px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
.insights-menu .im-label {
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #5c5c5c;
padding-bottom: 8px;
border-bottom: 2px solid rgba(15, 15, 15, 0.14);
margin: 0 0 6px;
}
.insights-menu ul { list-style: none; margin: 0; padding: 0; }
.insights-menu .im-list a {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding: 8px;
margin: 0 -8px;
border-radius: 4px;
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
font-size: 0.86rem;
font-weight: 600;
line-height: 1.35;
color: #0f0f0f;
text-decoration: none;
}
.insights-menu .im-list a:hover,
.insights-menu .im-list a:focus-visible { background: rgba(255, 215, 0, 0.4); outline: none; }
.insights-menu .im-n { font-size: 0.72rem; font-weight: 700; color: #6b6b6b; font-variant-numeric: tabular-nums; }
.insights-menu .im-latest a { display: grid; grid-template-columns: 50px minmax(0, 1fr); justify-content: start; }
.insights-menu .im-date {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #6b6b6b;
font-variant-numeric: tabular-nums;
}
.insights-menu .im-foot {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px 16px;
padding-top: 14px;
margin-top: 4px;
border-top: 2px solid rgba(15, 15, 15, 0.12);
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
font-size: 0.76rem;
font-weight: 600;
color: #5c5c5c;
}
/* ----- Archive: sticky month and topic bar ----- */
.insight-toolbar {
position: sticky;
top: 60px;
z-index: 50;
max-width: 1240px;
margin: 0 auto 30px;
padding: 14px 20px 12px;
background: #FCF7E8;
border-bottom: 2px solid rgba(15, 15, 15, 0.15);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 26px;
}
.insight-toolbar .tb-group { display: flex; align-items: center; gap: 10px; min-width: 0; }
.insight-toolbar .tb-label {
font-size: 0.66rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #6b6b6b;
white-space: nowrap;
}
.insight-toolbar .tb-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 4px 4px 2px; }
.insight-toolbar .tb-chips::-webkit-scrollbar { display: none; }
.tb-chip {
font-family: inherit;
font-size: 0.76rem;
font-weight: 700;
padding: 5px 11px;
border: 2px solid #0f0f0f;
border-radius: 6px;
background: transparent;
color: #0f0f0f;
cursor: pointer;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.tb-chip:hover { background: rgba(255, 215, 0, 0.35); }
.tb-chip[aria-pressed="true"],
.tb-chip[aria-current="true"] { background: #FFD700; box-shadow: 2px 2px 0 #0f0f0f; }
.tb-chip:disabled { opacity: 0.32; cursor: default; background: transparent; box-shadow: none; }
.insight-toolbar .filter-count {
margin-left: auto;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #6b6b6b;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* ----- Archive: ledger grouped by month -----
Each insight is a teal card, the same as the cards on The Macro Brew and
The Edge Alert listings, so it stands off the cream page. */
.insight-log { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
.insight-log .log-month { margin: 0 0 16px; }
.insight-log .log-entry + .log-month { margin-top: 44px; }
.log-entry {
display: grid;
grid-template-columns: 64px minmax(0, 1fr) 176px;
gap: 24px;
padding: 24px 28px;
margin-bottom: 20px;
background: #D3ECEB;
border: 3px solid #0f0f0f;
border-radius: 8px;
box-shadow: 5px 5px 0 #0f0f0f;
transition: background-color 0.6s ease;
}
.log-entry:target,
.log-entry.is-flash { background-color: #EFE3A0; }
.log-day { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.log-day .d { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: #0f0f0f; }
.log-day .w { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #6b6b6b; margin-top: 6px; }
.log-body .log-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.log-meta .log-no {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #6b6b6b;
text-decoration: none;
font-variant-numeric: tabular-nums;
}
.log-meta .log-no:hover { color: #0f0f0f; text-decoration: underline; }
.insight-log .log-body h2 {
font-size: 1.15rem;
font-weight: 800;
letter-spacing: -0.012em;
line-height: 1.3;
color: #0f0f0f;
margin: 0 0 8px;
text-wrap: balance;
}
.insight-log .log-body p {
font-size: 0.98rem;
line-height: 1.7;
color: #333;
max-width: 62ch;
margin: 0;
}
.insight-log .log-body p + p { margin-top: 0.8em; }
.insight-log .insight-sources { margin-top: 14px; }
.log-figure {
text-align: right;
font-size: 1.6rem;
padding-top: 2px;
}
/* ----- Infographics beside an insight -----
The PNG carries its own cream card, keyline and hard shadow, so the page adds
only spacing. Every graphic shows, stacked. From 1024px they sit beside the
text in the wider right column; narrower, they drop under the text. */
.insight-graphics { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.insight-graphics .insight-more { align-self: flex-start; }
.log-entry .insight-graphics { grid-column: 2 / -1; }
.insights-brew .insight-pour { grid-area: card; }
.insights-brew .insight-gfx { grid-area: gfx; min-width: 0; }
.insights-brew .insight-recent { grid-area: recent; }
/* min-width 0, or the image's natural 1200px width widens the grid past a phone screen */
.insight-graphic { margin: 0; min-width: 0; }
.insight-graphic a { display: block; border-radius: 10px; }
.insight-graphic a:focus-visible { outline: 3px solid #0f0f0f; outline-offset: 3px; }
.insight-graphic img { display: block; width: 100%; height: auto; }
.insight-graphic a { cursor: zoom-in; }
/* ----- Lightbox: any graphic opens in place, with a visible close button.
Ink backdrop so the cream card reads; the X carries the house keyline and
hard shadow. The page behind stops scrolling while it is open. ----- */
html.fcf-lightbox-open, html.fcf-lightbox-open body { overflow: hidden; }
.fcf-graphic-open {
display: block;
width: 100%;
padding: 0;
margin: 0;
border: 0;
background: none;
font: inherit;
color: inherit;
cursor: zoom-in;
-webkit-tap-highlight-color: transparent;
}
.fcf-graphic-open:focus-visible { outline: 3px solid #0f0f0f; outline-offset: 3px; }
.fcf-lightbox {
position: fixed;
inset: 0;
z-index: 1000;
background: rgba(15, 15, 15, 0.94);
display: flex;
align-items: center;
justify-content: center;
padding: 64px 16px 24px;
animation: fcfLightboxIn 0.18s ease-out;
-webkit-tap-highlight-color: transparent;
}
.fcf-lightbox[hidden] { display: none; }
@keyframes fcfLightboxIn { from { opacity: 0; } to { opacity: 1; } }
.fcf-lightbox-figure {
margin: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
min-height: 0;
}
.fcf-lightbox-figure img {
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
border-radius: 10px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
touch-action: pinch-zoom;
}
.fcf-lightbox-close {
position: absolute;
top: 12px;
right: 12px;
width: 48px;
height: 48px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background: #FCF7E8;
color: #0f0f0f;
border: 3px solid #0f0f0f;
border-radius: 50%;
box-shadow: 3px 3px 0 #0f0f0f;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.fcf-lightbox-close:hover { background: #FFD700; }
.fcf-lightbox-close:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #0f0f0f; }
.fcf-lightbox-close:focus-visible { outline: 3px solid #FCF7E8; outline-offset: 3px; }
/* ----- Turning a wide graphic to fill an upright phone -----
The figure is given the screen's measurements with its sides swapped and
then turned through 90 degrees, so the picture inside it is laid along the
long side of the screen. On a 390x844 phone a 4:3 graphic opens 520px
across instead of 350px. js/insights.js sets the two measurements and
decides when to offer it. */
.fcf-lightbox { overflow: hidden; }
.fcf-lightbox-figure.is-turned {
flex: none;
width: var(--lb-down);
height: var(--lb-across);
transform: rotate(90deg);
}
.fcf-lightbox-turn {
position: absolute;
top: 12px;
left: 12px;
min-height: 48px;
padding: 0 14px;
display: inline-flex;
align-items: center;
gap: 7px;
background: #FCF7E8;
color: #0f0f0f;
border: 3px solid #0f0f0f;
border-radius: 24px;
box-shadow: 3px 3px 0 #0f0f0f;
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
font-size: 0.82rem;
font-weight: 800;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.fcf-lightbox-turn[hidden] { display: none; }
.fcf-lightbox-turn:hover { background: #FFD700; }
.fcf-lightbox-turn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #0f0f0f; }
.fcf-lightbox-turn:focus-visible { outline: 3px solid #FCF7E8; outline-offset: 3px; }
.fcf-lightbox-turn[aria-pressed="true"] { background: #FFD700; }
.fcf-lightbox-hint {
position: absolute;
left: 12px;
right: 12px;
top: 68px;
margin: 0;
padding: 10px 14px;
background: #FCF7E8;
color: #0f0f0f;
border: 3px solid #0f0f0f;
border-radius: 8px;
box-shadow: 3px 3px 0 #0f0f0f;
font-size: 0.82rem;
font-weight: 600;
line-height: 1.45;
z-index: 2;
}
.fcf-lightbox-hint[hidden] { display: none; }
.fcf-lightbox-hint b { font-weight: 800; }
@media (min-width: 821px) {
.fcf-lightbox { padding: 80px 48px 40px; }
.fcf-lightbox-close { top: 20px; right: 24px; }
}
@media (prefers-reduced-motion: reduce) {
.fcf-lightbox { animation: none; }
}
@media (min-width: 1024px) {
.log-entry.has-graphics {
grid-template-columns: 64px minmax(0, 5fr) minmax(0, 7fr);
grid-template-areas: "day figure gfx" "day body gfx";
grid-template-rows: auto 1fr;
column-gap: 40px;
row-gap: 4px;
}
.log-entry.has-graphics .log-day { grid-area: day; }
.log-entry.has-graphics .log-figure { grid-area: figure; text-align: left; padding-top: 0; }
.log-entry.has-graphics .log-body { grid-area: body; }
.log-entry.has-graphics .insight-graphics { grid-area: gfx; align-self: start; }
}
.insight-empty { padding: 30px 0; color: #5c5c5c; font-weight: 600; }
/* ----- Responsive ----- */
@media (max-width: 820px) {
.insights-brew { grid-template-columns: 1fr; grid-template-areas: "card" "gfx" "recent"; grid-template-rows: auto; gap: 28px; }
}
@media (max-width: 820px) {
/* inside the hamburger menu the panel sits inline under its link */
.nav-menu { max-height: calc(100vh - 60px); overflow-y: auto; }
.nav-drop { flex-direction: column; align-self: auto; width: 100%; }
.insights-menu {
position: static;
transform: none;
width: 100%;
margin-top: 10px;
border: 2px solid #FFD700;
border-radius: 8px;
box-shadow: none;
grid-template-columns: 1fr 1fr;
padding: 16px 18px 14px;
animation: none;
}
.insights-menu .im-latest { display: none; }
}
@media (max-width: 640px) {
.log-entry { grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding: 20px 18px; }
.log-figure { grid-column: 2; grid-row: 1; text-align: left; font-size: 1.45rem; }
.log-body { grid-column: 2; }
.log-day { grid-row: 1 / span 2; }
.log-entry .insight-graphics { grid-column: 1 / -1; }
.insight-toolbar { padding: 10px 12px; gap: 8px; margin-left: -8px; margin-right: -8px; }
.insight-toolbar .tb-group { width: 100%; }
.insight-toolbar .tb-label { width: 52px; flex: none; }
.insight-toolbar .filter-count { display: none; }
.insight-pour { padding: 20px 20px 18px; }
/* full width, and clear of the back-to-top button in the corner so both
stay tappable */
.insight-popup { left: 12px; right: 12px; bottom: 76px; width: auto; max-height: calc(100vh - 100px); }
}
@media (prefers-reduced-motion: reduce) {
.insight-pour .insight-body.is-pouring,
.insight-popup,
.insights-menu { animation: none; }
.nav-drop-toggle svg,
.log-entry { transition: none; }
}
/* ----- Insight pages run wider than the default 980px section -----
so a graphic can sit beside the text rather than under it. */
#insights.section,
.section.insights-page { max-width: 1320px; }
/* ----- Charts a reader can touch (js/fcf-chart.js) -----
The picture is never changed. A clear sheet sits over it and carries the
rule, the dots and the outlines, and they glide from point to point; the
reading is 1 line above the picture, on the page's own ground.
Any graphic without a map gets none of this and stays a plain picture. */
.fcf-chart-stage { position: relative; }
.fcf-chart-layer {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
cursor: crosshair;
/* The page still scrolls under a thumb; a sideways drag reads the chart. */
touch-action: pan-y;
outline: none;
border-radius: 10px;
-webkit-tap-highlight-color: transparent;
}
.fcf-chart-layer:focus-visible { outline: 3px solid #0f0f0f; outline-offset: 3px; }
.fcf-chart-layer.is-pinned { cursor: pointer; }
/* Something opens on a click: the filing the number came from. */
.fcf-chart-layer.has-link { cursor: pointer; }
.fcf-chart .fcf-chart-source {
margin: 8px 0 0;
padding-top: 7px;
border-top: 1.5px solid #E8E2D6;
font-size: 0.74rem;
font-weight: 700;
color: #00625c;
}
.fcf-chart .fcf-chart-cite a { color: #0f0f0f; font-weight: 700; text-decoration: underline; text-decoration-color: #FFD700; text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* The reading above a chart. Its height is set by js/fcf-chart.js to the
longest reading the chart has, so the picture never moves under a finger. */
.fcf-chart-read {
/* the reading sits on the chart; any room kept for a longer one stays above it */
display: flex;
flex-direction: column;
justify-content: flex-end;
margin: 0 0 8px;
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
font-size: 0.82rem;
line-height: 1.45;
color: #1a1a1a;
text-align: left;
}
.fcf-read-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.fcf-read-label {
font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #0f0f0f;
}
.fcf-read-label.is-hint { color: #6b6b6b; font-weight: 700; }
.fcf-read-source { font-size: 0.78rem; font-weight: 800; color: #00625c; white-space: nowrap; text-decoration: none; }
/* a link a thumb can hit, without making the line taller */
a.fcf-read-source { display: inline-flex; align-items: center; min-height: 40px; margin: -10px 0; }
.fcf-read-rows { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 2px; }
.fcf-read-item { display: inline-flex; align-items: baseline; gap: 5px; max-width: 100%; }
.fcf-read-item b { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fcf-read-item.is-text b { white-space: normal; font-weight: 600; }
.fcf-read-item.is-muted { color: #5c5c5c; }
.fcf-read-item.is-active b { background: rgba(255, 215, 0, 0.45); border-radius: 3px; padding: 0 3px; }
.fcf-read-swatch { flex: none; align-self: center; width: 10px; height: 10px; border-radius: 2px; border: 1.5px solid #0f0f0f; }
.fcf-read-note { margin-top: 2px; font-size: 0.78rem; color: #555; }
/* The change between 2 dates on a price chart (js/fcf-chart.js): green for a
rise and red for a fall, the inks and washes of mark.up and mark.down. A
drag across the chart must not select the page's text. */
.fcf-chart-layer { -webkit-user-select: none; user-select: none; }
.fcf-read-change b { border-radius: 3px; padding: 0 4px; }
.fcf-read-change.up b { color: #1B6E34; background: rgba(46, 160, 67, 0.18); }
.fcf-read-change.down b { color: #A33224; background: rgba(214, 69, 51, 0.14); }
.fcf-read-source.is-quiet { color: #6b6b6b; font-weight: 700; }
/* the marks glide from point to point */
.fcf-chart-layer .fcf-mark { transition: transform 0.09s ease-out; }
@media (prefers-reduced-motion: reduce) { .fcf-chart-layer .fcf-mark { transition: none; } }
/* on a phone the waiting reading names the series, so the key under the picture would say it twice */
body.reading figure.has-read-key .fcf-chrome-foot p.fcf-chrome-key:not(.fcf-chrome-shades) { display: none; }
.fcf-chart .fcf-chart-note {
margin: 8px -4px 0;
padding: 6px 8px;
background: #FFD700;
border: 2px solid #0f0f0f;
border-radius: 6px;
font-size: 0.8rem;
font-weight: 700;
}
/* Spoken to a screen reader as the arrow keys move; never seen. */
.fcf-chart-live {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.fcf-chart-bar,
.fcf-chart-views {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.fcf-chart-bar { margin-top: 12px; }
.fcf-chart-views { margin-bottom: 10px; }
.fcf-chart-views[hidden] { display: none; }
.fcf-chart-toggle { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.fcf-chart-step { font-size: 0.85rem; color: #333; }
.fcf-chart-btn {
display: inline-flex;
align-items: center;
box-sizing: border-box;
min-height: 34px;
padding: 5px 11px;
background: #FCF7E8;
color: #0f0f0f;
border: 2px solid #0f0f0f;
border-radius: 8px;
box-shadow: 2px 2px 0 #0f0f0f;
font: inherit;
font-size: 0.8rem;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
/* "Save image" is a link, and a link inside a report or an article is given
a gold underline by rules more specific than a lone class. On the insights
pages `.insight-graphic a` also makes every link in the figure a block with
a zoom cursor, meant for the picture; as a block the button loses its
centring and the label rides to the top. Restore the button's own layout. */
.fcf-chart a.fcf-chart-btn {
display: inline-flex;
border-radius: 8px;
color: #0f0f0f;
text-decoration: none;
cursor: pointer;
}
.fcf-chart-btn:hover { background: #FFD700; }
.fcf-chart-btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 #0f0f0f; }
.fcf-chart-btn:focus-visible { outline: 3px solid #0f0f0f; outline-offset: 2px; }
.fcf-chart-btn.is-on { background: #0f0f0f; color: #FCF7E8; }
.fcf-chart-btn:disabled { opacity: 0.45; cursor: default; background: #FCF7E8; transform: none; box-shadow: 2px 2px 0 #0f0f0f; }
/* The cited rows, in the same frame as the tables in a report: cream ground,
ink header, figures right-aligned and tabular so a column lines up. */
.fcf-chart-numbers { margin-top: 12px; }
.fcf-chart-numbers[hidden] { display: none; }
.fcf-chart-scroll {
max-height: 360px;
overflow: auto;
border: 2.5px solid #0f0f0f;
border-radius: 8px;
background: #FCF7E8;
}
.fcf-chart-scroll:focus-visible { outline: 3px solid #0f0f0f; outline-offset: 2px; }
.fcf-chart-numbers table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin: 0; }
.fcf-chart-numbers th {
position: sticky;
top: 0;
padding: 0;
background: #0f0f0f;
text-align: left;
}
.fcf-chart-numbers th button {
width: 100%;
padding: 8px 12px;
background: none;
border: 0;
color: #FFD700;
font: inherit;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
text-align: inherit;
white-space: nowrap;
cursor: pointer;
}
.fcf-chart-numbers th button:focus-visible { outline: 2px solid #FFD700; outline-offset: -3px; }
.fcf-chart-numbers td { padding: 7px 12px; border-top: 1px solid #E8E2D6; color: #0f0f0f; }
.fcf-chart-numbers .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.fcf-chart .fcf-chart-cite { margin: 8px 0 0; font-size: 0.78rem; color: #5c5c5c; }
/* Five tools fit two rows on a phone rather than three. */
@media (max-width: 640px) {
.fcf-chart-bar, .fcf-chart-views { gap: 6px; }
.fcf-chart-btn { padding: 5px 9px; font-size: 0.74rem; }
}
@media print {
.fcf-chart-layer, .fcf-chart-read, .fcf-chart-bar, .fcf-chart-views { display: none !important; }
}
/* ==========================================================================
PHONES
Checked on a 411px Android screen. Sits last so it wins over the desktop
rules above without raising their specificity.
========================================================================== */
@media (max-width: 820px) {
/* The open menu is a full-width panel under the navbar. .navbar .nav-menu
above sets width auto for desktop, which squeezed it into a strip, and
the base height 100% stretched it down the whole screen. */
.navbar .nav-menu {
width: 100%;
height: auto;
max-height: calc(100vh - 60px);
max-height: calc(100dvh - 60px);
padding: 6px 20px 18px;
justify-content: flex-start;
align-items: stretch;
gap: 0;
border-bottom: 3px solid #FFD700;
}
.navbar .nav-menu > li { width: 100%; }
.navbar .nav-menu .nav-link {
display: flex;
align-items: center;
min-height: 48px;
padding: 12px 2px;
font-size: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.navbar .nav-menu > li:last-child > .nav-link { border-bottom: 0; }
.navbar .nav-menu .nav-drop { align-items: stretch; }
/* rows are full width, so the desktop centred underline and tint go */
.navbar .nav-menu .nav-link::after { display: none; }
.navbar .nav-menu .nav-link:hover,
.navbar .nav-menu .nav-link.active { background: transparent; }
.hamburger { padding: 12px; }
.footer-links { gap: 0 6px; }
.footer-links a { display: inline-block; padding: 12px 8px; }
}
@media (max-width: 820px) {
/* 16px stops phones zooming into the field on tap */
.subscribe-bar-form input { font-size: 16px; height: 38px; padding: 0 12px; }
.subscribe-bar-form button { height: 38px; padding: 0 14px; }
.signin-input { font-size: 16px; }
.insight-link { display: inline-block; padding-top: 10px; }
}
@media (max-width: 640px) {
.tb-chip { min-height: 40px; padding: 8px 13px; }
/* 52px clipped "Jump to" into its chips */
.insight-toolbar .tb-label { width: 66px; }
.insight-sources .src-list { gap: 0; }
.insight-sources .src-list a { padding: 7px 0; }
.fcf-sources > summary { min-height: 40px; align-items: center; }
.log-meta .log-no { padding: 12px 4px; margin: -12px 0; }
/* small uppercase labels up to 12px */
.insight-tag,
.log-day .w,
.log-meta .log-no,
.article-hero .article-kicker { font-size: 0.75rem; }
.article-date,
.article-hero .article-meta { font-size: 0.78rem; }
}
@media (max-width: 640px) {
/* Glossary tips: a hidden tip centred on a word near the edge still made
the page wider than the screen. On phones the tip is out of layout until
tapped. With JavaScript, js/cite.js opens it as a card right by the word
(html.fcf-tips, below); without it, this bar along the bottom is the
fallback. The article box keeps an identity transform from its reveal,
which would trap a fixed child, so it is cleared once revealed. */
.article-content.animate-on-scroll.visible { transform: none; }
.article-content .term::before { display: none; }
.article-content .term::after {
display: none;
position: fixed;
top: auto;
left: 16px;
right: 16px;
bottom: 16px;
width: auto;
max-width: none;
transform: none;
font-size: 0.9rem;
z-index: 130;
}
.article-content .term:hover::after,
.article-content .term:focus::after { display: block; transform: none; }
}
/* ===== LIKES, SHARES AND COMMENTS (js/engagement.js) ===== */
.engage { font-family: 'Montserrat', 'Montserrat Fallback', sans-serif; }
.engage--full {
max-width: 860px;
margin: 20px auto 0;
padding: 28px 20px 0;
border-top: 1px solid #e8e2d6;
}
.engage-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 14px 28px;
}
.engage-like {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
border: 2px solid #0f0f0f;
border-radius: 999px;
background: #fff;
color: #0f0f0f;
font-family: inherit;
font-weight: 800;
font-size: 0.9rem;
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.engage-like:hover { transform: translateY(-1px); box-shadow: 3px 3px 0 #0f0f0f; }
.engage-like[aria-pressed="true"] { background: #0f0f0f; color: #FFD700; }
.engage-heart { font-size: 1.15rem; line-height: 1; color: #c62828; }
.engage-like[aria-pressed="true"] .engage-heart { color: #FFD700; }
.engage-like-count:empty { display: none; }
.engage-like-count { font-weight: 700; }
.engage-like-label:empty { display: none; }
.engage-like.is-popping .engage-heart { animation: engage-pop 0.35s ease; }
@keyframes engage-pop { 0% { transform: scale(1); } 40% { transform: scale(1.5); } 100% { transform: scale(1); } }
.engage-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.engage-share .share-label { display: inline; margin: 0; }
.engage-share .share-buttons { justify-content: center; }
.engage .share-btn { cursor: pointer; font-family: inherit; }
.engage .share-btn.is-copied { background: #008C84; border-color: #008C84; color: #fff; }
.engage-comments-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border: 2px solid #0f0f0f;
border-radius: 999px;
background: #fff;
color: #0f0f0f;
font-family: inherit;
font-weight: 700;
font-size: 0.8rem;
cursor: pointer;
}
.engage-comments-toggle:hover, .engage-comments-toggle[aria-expanded="true"] { background: #FFD700; }
.engage-comments { margin-top: 32px; }
.engage-comments-title {
font-size: 1.2rem;
font-weight: 800;
margin: 0 0 18px;
}
.engage-comments-n { font-weight: 600; color: #888; font-size: 0.95rem; }
.engage-list { list-style: none; margin: 0; padding: 0; }
.engage-comment {
padding: 16px 18px;
margin-bottom: 12px;
background: #fff;
border: 2px solid #0f0f0f;
border-radius: 12px;
box-shadow: 4px 4px 0 #0f0f0f;
}
.engage-comment-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 6px; }
.engage-comment-name { font-weight: 800; font-size: 0.95rem; }
.engage-comment-meta time { font-size: 0.75rem; font-weight: 600; color: #888; letter-spacing: 0.04em; }
.engage-comment-body p { margin: 0 0 10px; font-size: 0.95rem; line-height: 1.7; color: #2a2a2a; }
.engage-comment-body p:last-child { margin-bottom: 0; }
.engage-form {
margin-top: 20px;
padding: 18px;
background: #FCF7E8;
border: 2px solid #0f0f0f;
border-radius: 12px;
}
.engage-form label { display: block; }
.engage-form label > span { display: block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; }
.engage-form label > span small { text-transform: none; letter-spacing: 0; font-weight: 600; color: #666; }
.engage-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.engage-form input, .engage-form textarea {
width: 100%;
box-sizing: border-box;
padding: 10px 12px;
border: 2px solid #0f0f0f;
border-radius: 8px;
background: #fff;
font-family: inherit;
font-size: 0.95rem;
color: #0f0f0f;
}
.engage-form textarea { resize: vertical; min-height: 96px; }
.engage-form input:focus, .engage-form textarea:focus { outline: none; box-shadow: 0 0 0 3px rgba(229, 171, 27, 0.45); }
.engage-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.engage-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }
.engage-submit {
padding: 10px 20px;
border: 2px solid #0f0f0f;
border-radius: 8px;
background: #0f0f0f;
color: #FFD700;
font-family: inherit;
font-weight: 800;
font-size: 0.85rem;
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.engage-submit:hover { transform: translateY(-1px); box-shadow: 3px 3px 0 #0f0f0f; }
.engage-submit:disabled { opacity: 0.6; cursor: wait; transform: none; box-shadow: none; }
.engage-form-msg { font-size: 0.85rem; font-weight: 600; color: #008C84; }
/* Compact: one row under an insight, the thread folded under a toggle. */
.engage--compact { margin-top: 14px; }
.engage--compact .engage-bar { justify-content: flex-start; gap: 8px 12px; }
.engage--compact .engage-like { padding: 6px 12px; font-size: 0.8rem; gap: 6px; }
.engage--compact .engage-heart { font-size: 1rem; }
.engage--compact .share-buttons { gap: 6px; }
.engage--compact .share-btn { width: 32px; height: 32px; font-size: 0.85rem; }
.engage--compact .engage-comments { margin-top: 14px; }
.engage--compact .engage-comment { padding: 12px 14px; box-shadow: 3px 3px 0 #0f0f0f; }
.engage--compact .engage-form { padding: 14px; }
.engage.is-degraded .engage-bar { justify-content: flex-start; }
/* The homepage card pours onto a teal ground; keep the row inside its footer. */
.insight-foot .engage--compact { margin: 0; flex-basis: 100%; }
@media (max-width: 640px) {
.engage-form-row { grid-template-columns: 1fr; }
.engage-bar { gap: 12px 18px; }
}
/* The homepage card's footer gains a row: the engagement bar wraps above the
archive link and the pour controls rather than squeezing between them. */
.insight-foot { flex-wrap: wrap; gap: 12px 16px; }
/* Comments panel on /brew */
.brew-comments { list-style: none; margin: 0; padding: 0; }
.brew-comment { padding: 14px 0; border-top: 1px solid #E8E2D6; }
.brew-comment:first-child { border-top: none; padding-top: 0; }
.brew-comment-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; font-size: 0.82rem; color: #6b6b6b; }
.brew-comment-head strong { color: #0f0f0f; font-size: 0.95rem; }
.brew-comment-head a { color: #008C84; font-weight: 700; }
.brew-comment-body { margin: 8px 0 10px; font-size: 0.95rem; line-height: 1.65; white-space: pre-wrap; }
.brew-comment.is-hidden .brew-comment-body { color: #888; }
.brew-comment-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* ----- About byline: the name links to LinkedIn --------------------------
The signature in the About rail carries Pranami's LinkedIn. At rest it keeps
the signature's own colour and weight with the house gold underline, so the
block still reads as a signature. Hover and keyboard focus wipe the gold
highlight in behind the name, the same gold as .highlight-box, so there is
no doubt the name is a link. The gold is solid rather than a bottom band so
the dark text on it stays readable in dark mode too. Horizontal padding is
cancelled by an equal negative margin, and the vertical padding sits on an
inline box, so nothing on the line moves. */
.about-sign a {
color: inherit;
text-decoration: underline;
text-decoration-color: #FFD700;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
padding: 2px 6px;
margin: 0 -6px;
border-radius: 4px;
background-image: linear-gradient(#FFD700, #FFD700);
background-repeat: no-repeat;
background-position: 0 50%;
background-size: 0 100%;
transition: background-size 0.25s ease, color 0.2s ease, text-decoration-color 0.2s ease;
}
.about-sign a:hover,
.about-sign a:focus-visible {
color: #0f0f0f;
background-size: 100% 100%;
text-decoration-color: #0f0f0f;
}
.about-reach { margin: 2px 0 -10px; font-size: 0.86rem; font-weight: 700; }
.about-reach a { display: inline-block; padding: 10px 0; color: #0f0f0f; text-decoration: underline; text-decoration-color: #FFD700; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.about-reach a:hover, .about-reach a:focus-visible { text-decoration-color: #0f0f0f; }
/* The 3 newsletters named in the body text link to their sections, in the
ink-and-gold-underline style of a Macro Brew article link. */
.about-body a {
color: #0f0f0f;
text-decoration: underline;
text-decoration-color: #FFD700;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
transition: text-decoration-color 0.2s;
}
.about-body a:hover, .about-body a:focus-visible { text-decoration-color: #0f0f0f; }
@media (prefers-reduced-motion: reduce) {
.about-sign a { transition: none; }
}
/* ----- The buttons under a graphic -----
On a wide screen all 5 sit in one row and the fold is not drawn: its
buttons take their place in the row. On a phone all 5 fold behind one
"Options" button and open underneath it, with their full labels. */
.fcf-chart-more { display: contents; }
.fcf-chart-more-btn { display: none; }
.fcf-chart-btn .lbl-short { display: none; }
@media (max-width: 640px), (max-height: 500px) {
.fcf-chart-bar { flex-wrap: wrap; }
.fcf-chart-more-btn { display: inline-flex; align-items: center; gap: 5px; }
.fcf-chart-more-btn::after {
content: ""; width: 7px; height: 7px; margin-top: -3px;
border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
transform: rotate(45deg); transition: transform .15s ease;
}
.fcf-chart-more-btn[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 3px; }
.fcf-chart-more { display: none; }
.fcf-chart-more.is-open { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; margin-top: 2px; }
}
@media (prefers-reduced-motion: reduce) { .fcf-chart-more-btn::after { transition: none; } }
/* ==========================================================================
BREWED UP INSIGHTS, LISTED THE WAY THE OTHER TWO ARE
--------------------------------------------------------------------------
Every insight has a page of its own now (api/insight-page.js), which opens
the way an Edge Alert report does. So the archive stops being a ledger of
whole insights and lists them on the same card, in the same column, as The
Macro Brew and The Edge Alert list their issues. Measured against those two
listings at 390 and 1440 wide.
========================================================================== */
/* The same page width as the other listings, so the title, the toolbar, the
month labels and the cards share one left edge. */
.section.insights-page { max-width: 980px; }
.insights-page .insight-log { max-width: none; padding: 0; }
.insights-page .insight-toolbar { max-width: 820px; }
.insights-page .log-month { max-width: 820px; margin-left: auto; margin-right: auto; }
.insights-page .insight-cards + .log-month { margin-top: 44px; }
/* the site has no global [hidden] rule, so a hidden group needs its own */
.insight-toolbar .tb-group[hidden] { display: none; }
/* The card is the listing card; only what it says differs. */
.insights-page .insight-cards { margin-top: 0; }
#insightLog .article-card::after { content: "Brewed Up Insights"; }
.insight-card-meta {
order: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
.insight-card-no {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #595959;
}
.article-card .insight-card-figure {
order: 0;
font-size: 1.9rem;
margin-bottom: 10px;
}
.article-card .insight-figure-note {
order: 0;
font-size: 0.8rem;
margin: -4px 0 12px;
}
/* The homepage card is the same insight, so it wears the listing card's
teal and its type. */
.insight-pour { background: #D3ECEB; }
.insight-pour .insight-title { font-size: 1.28rem; line-height: 1.26; letter-spacing: -0.014em; }
.insight-pour .insight-text p { font-size: 0.95rem; font-weight: 400; line-height: 1.68; color: #4a4a4a; }
@media (max-width: 640px), (orientation: landscape) and (max-height: 500px) and (max-width: 1000px) {
/* The toolbar stops following the reader down the page. Pinned, it took
22% of a phone screen against 7% on every other page. */
.insights-page .insight-toolbar { position: static; }
/* all the topics in view, rather than 2 of them past the edge */
.insights-page .insight-toolbar .tb-chips { flex-wrap: wrap; overflow-x: visible; }
.article-card .insight-card-figure { font-size: 1.7rem; }
}
/* ==========================================================================
PHONES
--------------------------------------------------------------------------
One block, read last, for everything the phone needs. It exists because the
site was drawn for a reading column of 780px and then handed to a screen a
third of that width, where three things went wrong at once:
1. Four separate rules let the layout grow wider than the screen, on 41 of
the 105 page-and-size combinations measured. A phone answers that by
zooming out until the whole layout fits, which is why the page looked
shrunken and why the centred column sat off to one side.
2. Graphics drawn on a 1200px canvas were shown at 268px, so a 20px label
arrived at 4px.
3. Type and tap targets kept their desktop sizes on a 310px column.
Measured at 320, 360, 375, 390, 412 and 430 wide and in landscape.
========================================================================== */
/* ----- 1. The layout may never be wider than the screen -------------------
clip rather than hidden: hidden would make these elements scroll containers
and break the sticky insights toolbar. clip only clips. The hidden line
before it is the fallback for browsers without clip. */
html {
overflow-x: hidden;
overflow-x: clip;
/* Android inflates page text when it thinks a page is too wide to read.
Pinning this keeps every phone on the sizes set below. */
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body { overflow-x: clip; }
/* The hero's decorative circles are positioned past the section edge, which
only shows when the screen is wider than it is tall. */
.content, .section { overflow-x: clip; }
/* A source group is titled with a sentence ("Broker research, read for context
only"), not a word. flex: none meant it could not shrink, and one title held
an Edge Alert report 64 to 174px wider than the screen. */
.fcf-sources .src-head { flex: 0 1 auto; min-width: 0; overflow-wrap: break-word; }
.fcf-sources-group > summary { flex-wrap: wrap; }
/* A bare 1fr track floors at its content's minimum width, and the poured card
holds a 1200px graphic, so the homepage grid opened to 592px on a phone. */
@media (max-width: 820px) {
.insights-brew { grid-template-columns: minmax(0, 1fr); }
}
/* The email field has to be allowed to shrink or the subscribe bar is wider
than a 320px screen. */
.subscribe-bar-form input { min-width: 0; }
/* A long unbroken figure or URL in the copy breaks the line instead of the page. */
.article-content p, .ea-report p, .log-body p, .log-body li { overflow-wrap: break-word; }
.engage--compact .engage-bar { flex-wrap: wrap; }
@media (max-width: 640px), (orientation: landscape) and (max-height: 500px) and (max-width: 1000px) {
/* ----- 2. Graphics run the full width of the screen ------------------
calc(50% - 50vw) pulls an element out to the screen edge whatever the
padding above it, so this does not have to be re-derived every time a
container changes. The insight card gives up its side border and radius
and becomes a full-width band, so the picture is not a small square
inside a frame inside a frame. */
.log-entry {
width: 100vw;
margin-inline: calc(50% - 50vw);
border-left: 0;
border-right: 0;
border-radius: 0;
}
.log-entry .insight-graphics { margin-inline: -18px; }
.insight-graphic img { border-radius: 0; }
/* the insight graphic on the homepage sat 36px in from each edge, inside
the section and the insight block; it runs to the edge as every other
page's graphics do, and its buttons keep the page's margin */
.insights-brew .insight-gfx { width: 100vw; margin-inline: calc(50% - 50vw); }
.insights-brew .insight-gfx .fcf-chart-bar,
.insights-brew .insight-gfx .fcf-chart-views,
.insights-brew .insight-gfx .fcf-chart-numbers { padding-inline: var(--gutter); }
/* On a phone the homepage shows the insights as a list only: the latest
insight's card and its graphics filled the first screens. Each list
item opens the insight's own page (js/insights.js, buildHome). */
.insights-brew .insight-pour,
.insights-brew .insight-gfx { display: none; }
.insights-brew { grid-template-areas: "recent"; }
/* An Edge Alert report is a plain column, not a card, so only the figure
moves out. */
/* Measured on 26 popular newsletters (5 Oct 2026): a graphic on a phone
is the width of the text, with the same margin, and rounded. Ours ran
edge to edge. The lightbox still gives the whole screen. */
.ea-report .ea-figure { width: auto; margin-inline: 0; }
.ea-report .ea-figure img { border-radius: 10px; }
/* A Macro Brew article opens the way an Edge Alert report does: on the
cream page with the pattern showing through, not in a teal band over a
bordered card. On a 390px screen the band and the card spent the first
screen on chrome, and put the two newsletters' articles in two different
designs. The column, the black rule under the header, the type and the
full-width graphics below all match the report page measure for measure.
Desktop keeps the band and the card. */
body.reading .article-hero {
background: transparent;
border-bottom: 0;
margin: 0;
padding: 12px var(--card-pad) 0;
}
body.reading .article-hero-inner {
padding: 0 0 20px;
border-bottom: 3px solid #0f0f0f;
margin-bottom: 32px;
}
body.reading .article-hero h1 {
font-size: clamp(1.45rem, 3.6vw + 0.7rem, 1.7rem);
font-weight: 700;
line-height: 1.2;
letter-spacing: normal;
margin-bottom: 8px;
}
body.reading .article-breadcrumb,
body.reading .article-content,
body.reading .article-share {
padding-left: var(--card-pad);
padding-right: var(--card-pad);
}
body.reading .article-page {
padding-left: var(--gutter);
padding-right: var(--gutter);
}
/* a report opens 24px lower, from its own top padding */
body.reading .article-page > .article-breadcrumb { padding-top: 24px; }
body.reading .article-content {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
padding-top: 0;
padding-bottom: 0;
}
body.reading .article-content p,
body.reading .article-content li { font-size: 1rem; line-height: 1.65; }
/* with no card to stop at, a graphic runs to the screen edge as it does
in a report */
.article-content .fcf-graphic { width: auto; margin-inline: 0; }
.article-content .fcf-graphic img { border-radius: 10px; }
/* Opened full size, the graphic gets the whole screen. The 16px the
overlay held back on each side made the picture smaller than the same
graphic sitting in the page. The close and turn buttons float over it. */
.fcf-lightbox { padding: 56px 0 0; }
.fcf-lightbox-figure img { border-radius: 0; }
/* ----- 3. Type sized for a 310px column ------------------------------
clamp() so that 320 and 430 are the same design at two sizes rather
than two designs with a jump between them. */
.article-content { font-size: 1rem; line-height: 1.65; }
.article-content p { line-height: 1.65; }
.article-content h2 { font-size: clamp(1.2rem, 2.6vw + 0.7rem, 1.4rem); line-height: 1.25; }
.article-content h3 { font-size: clamp(1.05rem, 1.8vw + 0.7rem, 1.2rem); line-height: 1.3; }
/* The privacy and terms pages kept a 32px headline on no set leading and
14.4px text, the only reading pages still on desktop sizes. They take
the article's scale. */
.legal-content h1,
.about-rail h1, .about-rail h2.hero-h1,
.nf-title { font-size: clamp(1.45rem, 3.6vw + 0.7rem, 1.7rem); line-height: 1.2; }
.legal-content h2 { font-size: clamp(1.05rem, 1.8vw + 0.7rem, 1.2rem); line-height: 1.3; }
.legal-content p,
.legal-content li { font-size: 1rem; line-height: 1.65; }
/* the insight on the homepage is read in full there, so it reads at the
size its own page uses */
.insight-pour .insight-text p { font-size: 1rem; line-height: 1.65; }
}
/* ----- 4. Nothing below 40px to tap, nothing below 12px to read -----------
Width alone does not say "phone": turned sideways the same handset reports
844px wide and would fall out of every rule above. The short viewport is
what gives it away, so these two floors are keyed on either. */
@media (max-width: 640px), (max-height: 500px) {
.engage--compact .share-btn { width: 40px; height: 40px; }
.engage--compact .engage-like { min-height: 40px; }
.fcf-chart-btn { min-height: 40px; }
/* min-height as well, for a source short enough to fit on one line */
.insight-sources .src-list a,
.fcf-sources-group li a { display: inline-block; padding: 9px 0; min-height: 40px; min-width: 40px; }
/* a figure in a report table that links to its filing, "FY26" alone, and a
source that fills a cell (the Sacheerome Promises table): 40px both ways */
.ea-report td a { display: inline-block; min-width: 40px; min-height: 40px; }
.share-buttons a, .footer-links a { min-height: 40px; }
.fcf-sources > summary { min-height: 40px; align-items: center; }
.log-meta .log-no { padding: 12px 4px; margin: -12px 0; }
.subscribe-bar-form input,
.subscribe-bar-form button { min-height: 40px; }
/* sideways, a phone gets the desktop navbar, whose links were 31px */
.navbar .nav-link { min-height: 40px; display: inline-flex; align-items: center; }
.tb-chip,
.engage-like,
.engage-comments-toggle,
.insight-btn,
.insight-link { min-height: 40px; }
.engage-like { min-width: 40px; }
}
/* The 12px floor for small print holds up to the 820px tablet line as well:
an iPad kept the desktop's 10.6px card tags and 11.5px dates. */
@media (max-width: 820px), (max-height: 500px) {
/* Each selector repeats the one that set the small size in the first
place, because a shorter one loses to it however late it is read. */
.insights-menu .im-label,
.insights-menu .im-date,
.insight-toolbar .tb-label,
.insight-toolbar .filter-count,
.signin-label,
.footer-copyright { font-size: 0.78rem; }
.article-card .article-date,
.article-hero .article-kicker,
.article-hero .article-meta,
.insight-tag,
.log-day .w,
.log-meta .log-no,
.insight-count,
.insight-recent .r-date,
.insight-pour .insight-kicker,
.fcf-chart-btn,
.fcf-chart-step { font-size: 0.78rem; }
.engage-form label > span { font-size: 0.78rem; }
.engage-form label > span small { font-size: 1em; }
/* the newsletter tag on every listing card, drawn by ::after, so the
text check never saw it at 10.6px */
.article-card::after { font-size: 0.78rem; }
.insight-card-no { font-size: 0.78rem; }
}
/* ----- 5. A phone turned on its side --------------------------------------
Sideways, a phone reports 844px wide and 390 tall, so every rule above
written against width alone let it fall back to the desktop pages: the
Macro Brew article returned to its teal band, the title sat three quarters
of the way down the first screen with no text under it, lines ran to 90
characters, and every graphic was taller than the screen. It is still a
phone, so it gets the phone pages, fitted to a short, wide screen. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1000px) {
/* the listings' 5rem above the title is set in the page, hence !important */
/* the page starts just under the subscribe bar rather than 50px below it */
body.reading main.section { padding-top: 72px; }
.section > .hero-statement { padding-top: 0.75rem !important; }
/* the listing heads keep their room under the subscribe bar (16 Oct 2026) */
.section > .hero-statement.page-head { padding-top: 2.75rem !important; }
body.reading .article-page > .article-breadcrumb { padding-top: 8px; }
/* and the page starts nearer the bar: 130px of cream sat above the back link */
body.reading .article-page,
:where(.ea-page) main.section,
:where(.insight-page) main.section { padding-top: 78px; }
.article-breadcrumb { margin-bottom: 12px; }
body.reading .article-hero { padding-top: 4px; }
body.reading .article-hero .article-kicker { margin-bottom: 10px; }
/* the homepage line takes the phone size, not the desktop 32px */
.tagline { font-size: 1.5rem; }
.nf-title { font-size: clamp(1.45rem, 3.6vw + 0.7rem, 1.7rem); }
/* a reading line of about 70 characters */
body.reading .article-breadcrumb,
body.reading .article-content,
body.reading .article-share,
.article-cards { max-width: 640px; }
body.reading .article-hero-inner { max-width: calc(640px - 2 * var(--card-pad)); margin-inline: auto; }
/* a whole graphic in view at once: as tall as the screen allows, and
centred, rather than as wide as the screen and cut off at the bottom */
.fcf-chart-stage,
.fcf-graphic-open { width: fit-content; max-width: 100%; margin-inline: auto; }
.article-content .fcf-graphic img,
.ea-report .ea-figure img,
.insight-graphic img {
width: auto;
max-width: 100%;
max-height: calc(100vh - 84px);
max-height: calc(100dvh - 84px);
margin-inline: auto;
}
}
/* A graphic that runs to the screen edge takes its buttons, its number table
and its view switch with it; they keep the text column's margin rather than
touching the edge of the phone. Sideways, they sit under the graphic, which
is centred there. */
@media (max-width: 640px), (orientation: landscape) and (max-height: 500px) and (max-width: 1000px) {
.article-content .fcf-graphic .fcf-chart-bar,
.article-content .fcf-graphic .fcf-chart-views,
.article-content .fcf-graphic .fcf-chart-numbers,
.ea-report .ea-figure .fcf-chart-bar,
.ea-report .ea-figure .fcf-chart-views,
.ea-report .ea-figure .fcf-chart-numbers { padding-inline: var(--card-pad); }
}
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1000px) {
.fcf-chart-bar, .fcf-chart-views { justify-content: center; }
}
/* =====================================================================
EDGE ALERT REPORTS
Moved here from the