/* =========================================================
ESSENTFLOW™ by Shae — brand system
Drop this in as the site's base stylesheet. Every page
pulls from these variables; rebrand = edit :root only.
Fonts (put in before this file):
========================================================= */
:root {
/* Foundation */
--espresso-deep: #301210; /* page ground, text on light */
--espresso-rich: #3C100E; /* panels, footer */
/* Accents */
--purple: #3C073C; /* Main Rich Purple — heroes, headers, headings on ivory */
--plum: #630A59; /* Deep Wine-Plum — top bar, selected states, cards */
--terracotta-burnt: #AB4734;/* bands, accent text on ivory, tags */
--terracotta-warm: #BF4E27; /* decorative only — too light for ivory text on it */
--terracotta-deep: #8A3A22; /* extra tag shade */
/* Neutrals */
--ivory: #F0E4D0; /* light ground, text on dark */
--ivory-soft: #F8F0E3; /* cards on ivory */
--rose-gold: #D9896C; /* highlight on DARK/PURPLE only */
/* Supporting tones (derived, keep) */
--text-muted-dark: #C9B29B; /* secondary text on espresso/purple */
--text-soft-dark: #D8C8B2; /* body text on espresso */
--text-soft-purple: #E6D6C2;/* body text on purple/plum */
--text-body-light: #4A2A22; /* body text on ivory */
--text-meta-light: #6B4A3E; /* meta text on ivory */
--line-dark: #5A2A22; /* rules on espresso */
--line-purple: #5E2A5C; /* rules on purple */
--line-light: #C9AE8E; /* rules on ivory */
/* Type */
--font-heading: 'Rozha One', Georgia, serif;
--font-subtitle: 'Cormorant Garamond', Georgia, serif; /* use italic */
--font-body: 'Fraunces', Georgia, serif; /* weight 300 */
--font-ui: 'Raleway', 'Helvetica Neue', Arial, sans-serif; /* nav, labels, buttons */
/* Layout */
--page-max: 1140px;
--gutter: 64px;
--section-y: 112px;
--reading-width: 680px;
}
@media (max-width: 900px) {
:root { --gutter: 24px; --section-y: 72px; }
}
/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--espresso-deep);
color: var(--ivory);
font-family: var(--font-ui);
font-size: 16px;
line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--rose-gold); outline-offset: 3px; }
.on-light :focus-visible { outline-color: var(--terracotta-burnt); }
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* ---------- Page transitions ----------
Native cross-document View Transitions (Chrome/Edge/Safari 18+): the
browser crossfades the old and new page on every same-origin navigation,
no JS required. Ignored harmlessly by browsers that don't support it —
they fall back to the plain fade-in below instead. */
@view-transition {
navigation: auto;
}
@media (prefers-reduced-motion: no-preference) {
body { animation: page-fade-in 0.5s ease; }
@keyframes page-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
}
.container { max-width: var(--page-max); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
/* ---------- Responsive grids ----------
Every multi-column layout on the site uses one of these instead of a
one-off inline grid-template-columns, so there's a single place that
controls how columns collapse as the window narrows — the fix for
layouts that "stretch" or feel awkward instead of staying composed at
any width. .grid-12 is the hero split (text spans 1/8, the side card/
image spans 9/13 via inline grid-column on the children); the
!important on its children at the mobile breakpoint is needed because
those spans are inline styles, which normal specificity can't beat. */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); }
.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); }
.grid-hero { display: grid; grid-template-columns: 1.4fr 1fr; }
@media (max-width: 900px) {
.grid-2, .grid-3, .grid-4, .grid-12, .grid-hero { grid-template-columns: 1fr; }
.grid-12 > * { grid-column: 1 / -1 !important; }
}
@media (min-width: 901px) and (max-width: 1180px) {
.grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
/* ---------- Section grounds (the color rhythm) ----------
--local-body/--local-accent are set here and read by .body/.lead/.accent
below. Custom properties inherit through the DOM, so a card's own
background always wins over whatever section it's sitting inside —
unlike plain ".bg-X .body" descendant selectors, which tie on specificity
when a card's background differs from its section's and silently pick
whichever rule happens to be declared last in this file instead of
whichever is actually nearest. That was a real bug (the podcast page's
ivory "Your Host" card, nested inside a .bg-espresso section, was
picking up espresso's text color instead of its own). */
.bg-espresso { background: var(--espresso-deep); color: var(--ivory); --local-body: var(--text-soft-dark); --local-accent: var(--rose-gold); }
.bg-espresso-rich { background: var(--espresso-rich); color: var(--ivory); --local-body: var(--text-soft-dark); --local-accent: var(--rose-gold); }
.bg-purple { background: var(--purple); color: var(--ivory); --local-body: var(--text-soft-purple); --local-accent: var(--rose-gold); }
.bg-plum { background: var(--plum); color: var(--ivory); --local-body: var(--text-soft-purple); --local-accent: var(--rose-gold); }
/* Rose-gold accent text is nearly unreadable on the terracotta band (orange-on-orange) —
swap to a dark local accent here only, so .accent stays legible without touching every
other section's contrast. */
.bg-terracotta { background: var(--terracotta-burnt); color: var(--ivory); --local-body: var(--ivory); --local-accent: var(--espresso-deep); }
.bg-ivory { background: var(--ivory); color: var(--espresso-deep); --local-body: var(--text-body-light); --local-accent: var(--terracotta-burnt); --local-heading: var(--purple); }
/* ---------- Type ---------- */
.h-display { font-family: var(--font-heading); font-weight: 400; font-size: clamp(32px, 4vw, 58px); line-height: 1.1; margin: 0; }
.h-1 { font-family: var(--font-heading); font-weight: 400; font-size: clamp(40px, 5.5vw, 84px); line-height: 1.02; margin: 0; color: var(--local-heading, inherit); }
.h-2 { font-family: var(--font-heading); font-weight: 400; font-size: clamp(36px, 4.4vw, 64px); line-height: 1.02; margin: 0; color: var(--local-heading, inherit); }
.h-3 { font-family: var(--font-heading); font-weight: 400; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.2; margin: 0; }
.subtitle { font-family: var(--font-subtitle); font-style: italic; font-weight: 500; font-size: clamp(22px, 2.4vw, 34px); line-height: 1.3; }
.lead { font-family: var(--font-body); font-weight: 300; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.7; color: var(--local-body, inherit); }
.body { font-family: var(--font-body); font-weight: 300; font-size: 17px; line-height: 1.7; color: var(--local-body, inherit); }
.eyebrow { font-family: var(--font-ui); font-size: 13px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; }
.accent { color: var(--local-accent, var(--rose-gold)); }
/* ---------- Cards ----------
A signature dark gradient card, used the same way regardless of what
section it sits in (ivory, purple, terracotta, etc). It sets its own
--local-body/--local-accent/--local-heading so nested .body/.lead/.accent/
.h-1/.h-2 text automatically resolves to the right color for THIS card,
not whatever section it happens to be nested in. */
.card {
position: relative;
border-radius: 20px;
padding: 32px;
background: linear-gradient(135deg, var(--espresso-rich) 0%, var(--plum) 100%);
box-shadow: 0 20px 45px rgba(20,6,5,0.35);
color: var(--ivory);
--local-body: var(--text-soft-purple);
--local-accent: var(--rose-gold);
--local-heading: var(--ivory);
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.card:hover {
transform: translateY(-8px);
box-shadow: 0 30px 60px rgba(20,6,5,0.5);
}
/* ---------- Scroll reveal ----------
.reveal starts hidden/offset and fades up once it enters the viewport
(see static/js/motion.js). Scoped to no-preference so it never fights
the site-wide prefers-reduced-motion rule above. Nth-child delays give
a row of cards a light cascade instead of popping in all at once. */
@media (prefers-reduced-motion: no-preference) {
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal:nth-child(3) { transition-delay: 0.16s; }
.reveal:nth-child(4) { transition-delay: 0.24s; }
}
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
min-height: 48px; padding: 16px 28px;
font-family: var(--font-ui); font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
border: none; cursor: pointer;
}
.btn-primary { background: var(--rose-gold); color: var(--espresso-deep); } /* on dark/purple */
.btn-primary:hover { background: var(--ivory); }
.btn-dark { background: var(--purple); color: var(--ivory); } /* on ivory */
.btn-dark:hover { background: var(--plum); }
.btn-outline { background: transparent; color: var(--ivory); border: 1px solid var(--rose-gold); }
.btn-outline:hover { background: var(--rose-gold); color: var(--espresso-deep); }
/* ---------- Tags (linguistic states / magazine tags) ---------- */
.tag { display: inline-block; font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ivory); padding: 6px 10px; }
.tag--detached, .tag--identity { background: var(--purple); }
.tag--fragmented, .tag--capacity { background: var(--plum); }
.tag--stabilizing, .tag--language { background: var(--terracotta-burnt); }
.tag--flow, .tag--belonging { background: var(--terracotta-deep); }
.tag--becoming { background: var(--espresso-deep); }
/* ---------- Global chrome ---------- */
.lab-bar { background: var(--plum); color: var(--ivory); font-size: 13px; font-weight: 600; letter-spacing: 0.16em; }
.lab-bar .container { display: flex; justify-content: space-between; gap: 16px; padding-block: 13px; }
.lab-bar a { color: var(--rose-gold); }
.site-header { background: var(--purple); border-bottom: 1px solid var(--line-purple); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; padding-block: 26px; flex-wrap: wrap; gap: 20px; }
.wordmark { display: flex; align-items: center; gap: 10px; }
.wordmark__name { font-family: var(--font-heading); font-size: 28px; letter-spacing: 0.02em; line-height: 1; }
.wordmark__by { font-family: var(--font-subtitle); font-style: italic; font-size: 24px; color: var(--rose-gold); line-height: 1; position: relative; top: 2px; }
.site-nav { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.site-nav a[aria-current="page"] { color: var(--rose-gold); }
.site-nav .btn-primary { padding: 15px 24px; }
.site-footer { background: var(--espresso-rich); color: var(--ivory); }
.site-footer .container { padding-block: 72px 44px; display: flex; flex-direction: column; gap: 40px; }
.site-footer__legal { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-top: 1px solid var(--line-dark); padding-top: 24px; font-size: 13px; color: var(--text-muted-dark); }
.site-footer__legal a { color: var(--text-muted-dark); }
@media (max-width: 900px) {
.lab-bar .container { flex-direction: column; gap: 4px; }
}
/* ---------- Floating audio player ---------- */
.ef-player {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
display: flex; align-items: center; gap: 16px;
background: linear-gradient(135deg, var(--espresso-rich) 0%, var(--plum) 100%);
color: var(--ivory);
border-top: 1px solid var(--line-purple);
padding: 12px var(--gutter);
box-shadow: 0 -8px 24px rgba(0,0,0,0.35);
}
.ef-player[hidden] { display: none; }
.ef-player__toggle {
flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
background: var(--rose-gold); color: var(--espresso-deep); border: none; cursor: pointer;
font-size: 15px; display: flex; align-items: center; justify-content: center;
box-shadow: 0 8px 20px rgba(217,137,108,0.35);
/* The U+25B6 glyph's own ink sits left-of-center in its character box on
every system font tested, so a perfectly centered flexbox still reads
as off-center. This nudge is the glyph's optical correction, not a
layout bug. */
padding-left: 3px;
}
.ef-player__cover { width: 44px; height: 44px; object-fit: cover; flex-shrink: 0; border-radius: 8px; }
.ef-player__meta { flex: 1; min-width: 0; }
.ef-player__title { font-family: var(--font-ui); font-size: 13px; font-weight: 600; margin: 0 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ef-player__bar { position: relative; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.15); width: 100%; cursor: pointer; }
.ef-player__progress { position: relative; height: 100%; width: 0%; border-radius: 2px; background: var(--rose-gold); }
.ef-player__progress::after {
content: ""; position: absolute; right: -4px; top: 50%; transform: translateY(-50%);
width: 9px; height: 9px; border-radius: 50%; background: var(--rose-gold);
}
.ef-player__time { flex-shrink: 0; font-family: var(--font-ui); font-size: 12px; color: var(--text-muted-dark); }
.ef-player__close { flex-shrink: 0; background: none; border: none; color: var(--text-muted-dark); font-size: 16px; cursor: pointer; padding: 4px; }
.ef-player__close:hover { color: var(--ivory); }
@media (max-width: 640px) {
.ef-player { padding: 10px 16px; gap: 12px; }
.ef-player__cover { display: none; }
}
/* ---------- Welcome audio banner ---------- */
.welcome-banner {
text-align: center;
background: linear-gradient(135deg, var(--espresso-rich) 0%, var(--plum) 100%);
padding: 88px var(--gutter);
}
.welcome-banner__wave { display: flex; gap: 4px; justify-content: center; align-items: flex-end; height: 28px; margin-bottom: 20px; }
.welcome-banner__wave span { display: block; width: 4px; border-radius: 2px; background: var(--rose-gold); }
.btn-pill {
display: inline-flex; align-items: center; gap: 10px;
padding: 18px 32px; border-radius: 999px; border: none; cursor: pointer;
background: var(--rose-gold); color: var(--espresso-deep);
font-family: var(--font-ui); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
box-shadow: 0 16px 32px rgba(217,137,108,0.3);
}
.btn-pill:hover { background: var(--ivory); }
/* ---------- Reading column (magazine essays) ---------- */
.prose { max-width: var(--reading-width); margin-inline: auto; font-family: var(--font-body); font-weight: 300; font-size: 21px; line-height: 1.85; color: var(--espresso-deep); }
.prose > * + * { margin-top: 30px; }
.prose h2 { font-family: var(--font-heading); font-weight: 400; font-size: 38px; line-height: 1.15; color: var(--purple); }
.prose .dropcap::first-letter { float: left; font-family: var(--font-heading); font-size: 104px; line-height: 0.82; color: var(--terracotta-burnt); padding: 10px 14px 0 0; }
.prose blockquote { margin-inline: -120px; padding: 40px 0; border-block: 1px solid var(--terracotta-burnt); font-family: var(--font-subtitle); font-style: italic; font-weight: 500; font-size: 44px; line-height: 1.25; color: var(--plum); text-align: center; }
@media (max-width: 1000px) { .prose blockquote { margin-inline: 0; font-size: 32px; } .prose { font-size: 19px; } }