/* Generated by scripts/build-letters.mjs. Do not edit. */
/* /assets/css/system/hamburger-icon.css */
/* The three-bar icon the mobile nav uses. The full Divi hamburger stylesheet
is mostly unused animation variants and a source map. */
.et_divi_100_custom_hamburger_menu__icon {
position: relative;
display: block;
width: 1.875rem;
height: 1.875rem;
box-sizing: border-box;
cursor: pointer;
padding: 0.25rem;
clear: both;
}
.et_divi_100_custom_hamburger_menu__icon div {
background: #000;
width: 100%;
height: 0.125rem;
margin: 0.25rem auto;
border-radius: 10px;
transition: 0.3s cubic-bezier(0.28, 0.55, 0.385, 1.65);
transform-origin: center;
}
.et_divi_100_custom_hamburger_menu__icon.et_divi_100_custom_hamburger_menu__icon--toggled div:after,
.et_divi_100_custom_hamburger_menu__icon.et_divi_100_custom_hamburger_menu__icon--toggled div:before {
width: 100%;
}
.et_divi_100_custom_hamburger_menu__icon.et_divi_100_custom_hamburger_menu__icon--toggled div:first-child {
transform: translateY(0.375rem) rotate(45deg);
}
.et_divi_100_custom_hamburger_menu__icon.et_divi_100_custom_hamburger_menu__icon--toggled div:not(:first-child):not(:last-child) {
opacity: 0;
}
.et_divi_100_custom_hamburger_menu__icon.et_divi_100_custom_hamburger_menu__icon--toggled div:last-child {
transform: translateY(-0.375rem) rotate(-45deg);
}
.et_divi_100_custom_hamburger_menu .mobile_menu_bar:before,
.et_divi_100_custom_hamburger_menu .mobile_menu_bar:after {
display: none;
}
/* /assets/css/dist/critical.css */
/*
* Generated by scripts/build-css-bundles.mjs — do not edit by hand.
* Rebuild: npm run build:css
*/
/* ----- assets/css/system/tokens.css ----- */
/*
Design System Tokens (Phase 1)
- All variables prefixed with --ds-
- Safe to load globally: variables only (no Divi overrides)
Breakpoints observed in exported pages (Divi/WP):
- Desktop: min-width: 981px
- Tablet: max-width: 980px
- Phone: max-width: 767px
- Additional: 600px, 479px, 420px (page-specific)
*/
:root{
/* ── Page / surface colors ─────────────────────────────── */
--ds-color-page: #FCF7F4; /* warm-white page bg */
--ds-color-surface: #ffffff; /* cards, inputs — stay crisp white */
--ds-color-surface-raised: #F6EFEA;
--ds-color-surface-inset: #EEE5DE;
--ds-color-surface-tint: rgba(255,255,255,.7);
/* ── Ink / text ────────────────────────────────────────── */
--ds-color-text: #27272A; /* body copy */
--ds-color-text-strong: #09090B;/* headlines */
--ds-color-muted: #52525B; /* secondary */
--ds-color-faint: #71717A; /* captions */
--ds-color-subtle: rgba(0,0,0,.65);
--ds-color-on-dark: #ffffff;
--ds-color-on-dark-muted: #A1A1AA;
/* ── Borders ───────────────────────────────────────────── */
--ds-color-border: #E2D6CD; /* hairline on warm bg */
--ds-color-border-strong: rgba(0,0,0,.18);
--ds-color-border-on-dark: rgba(255,255,255,.14);
/* ── Accent (black CTAs) ───────────────────────────────── */
--ds-color-dark: #000000;
--ds-color-dark-2: #18181B;
--ds-color-dark-hover: #1C1C20;
--ds-color-accent-soft: #E4E4E7;
/* ── Legacy / functional ───────────────────────────────── */
--ds-color-link: #2ea3f2;
--ds-color-accent: #24c8dc;
--ds-color-focus: rgba(0,0,0,.08);
--ds-color-danger: #B23A2E;
--ds-color-success: #2F7D52;
/* ── Typography ────────────────────────────────────────── */
/* Alternate Gothic ATF Heavy (Adobe Fonts) — King Kong–style condensed display */
--ds-font-display: "alternate-gothic-atf", "Arial Narrow", Arial, sans-serif;
--ds-font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--ds-font-heading: "alternate-gothic-atf", "Arial Narrow", Arial, sans-serif;
--ds-font-heading-bold: "alternate-gothic-atf", "Arial Narrow", Arial, sans-serif;
--ds-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
--ds-font-size-body: 17px;
--ds-line-height-body: 1.5;
--ds-font-weight-heading: 700; /* Bold in kit today; bump to 800 when Heavy is published */
--ds-line-height-heading: 0.94; /* King Kong–style tight leading */
/* Condensed display tracking — tight, but not colliding.
King Kong uses ~-0.08em; we sit a touch looser for readability. */
--ds-tracking-h1: -0.05em;
--ds-tracking-h2: -0.05em;
--ds-tracking-h3: -0.045em;
--ds-tracking-h4: -0.035em;
--ds-tracking-h5: -0.025em;
--ds-tracking-h6: -0.015em;
/* Size ramp inspired by King Kong (tempered — not billboard-scale) */
--ds-size-h1: clamp(2.75rem, 1.2rem + 6vw, 5.5rem);
--ds-size-h2: clamp(2.125rem, 1rem + 4vw, 3.75rem);
--ds-size-h3: clamp(1.75rem, 0.9rem + 2.8vw, 3rem);
--ds-size-h4: clamp(1.375rem, 0.85rem + 1.6vw, 2.25rem);
--ds-size-h5: clamp(1.25rem, 0.9rem + 1vw, 1.75rem);
--ds-size-h6: clamp(1.125rem, 0.95rem + 0.6vw, 1.5rem);
/* ── Spacing (8-px grid) ───────────────────────────────── */
--ds-space-1: 4px;
--ds-space-2: 8px;
--ds-space-3: 12px;
--ds-space-4: 16px;
--ds-space-5: 24px;
--ds-space-6: 32px;
--ds-space-7: 48px;
--ds-space-8: 64px;
--ds-space-9: 96px;
--ds-space-10: 128px;
/* ── Hero clearance (floating nav → first hero content) ──
#page-container has padding-top:0 and the header floats over the
page, so every top section must clear the nav itself. This token
bakes in the floating-nav height (~84px desktop / ~97px tablet+phone)
plus editorial breathing room, so nav→hero content lands in the
48–72px (desktop) / 40–56px (tablet) / 32–44px (phone) range.
Consumed by the shared first-section rule in content-rhythm.css and
the newsletter hero in pages/newsletter.css. */
--ds-hero-clearance: 138px;
/* ── Radius ────────────────────────────────────────────── */
--ds-radius-sm: 8px;
--ds-radius-md: 12px;
--ds-radius-lg: 16px;
--ds-radius-xl: 24px;
--ds-radius-pill: 999px;
/* ── Shadows ───────────────────────────────────────────── */
--ds-shadow-xs: 0 1px 2px rgba(9,9,11,.04);
--ds-shadow-sm: 0 1px 3px rgba(9,9,11,.06), 0 1px 2px rgba(9,9,11,.04);
--ds-shadow-md: 0 4px 16px rgba(9,9,11,.06);
--ds-shadow-lg: 0 12px 40px rgba(9,9,11,.10);
/* ── Component sizing ──────────────────────────────────── */
--ds-control-h: 36px;
--ds-control-h-lg: 40px;
/* ── Motion ────────────────────────────────────────────── */
--ds-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ds-dur-fast: 120ms;
--ds-dur-base: 200ms;
/* ── Breakpoints ───────────────────────────────────────── */
--ds-bp-desktop-min: 981px;
--ds-bp-tablet-max: 980px;
--ds-bp-phone-max: 767px;
--ds-bp-small-max: 479px;
}
/* Desktop: H1 at 80% of the base clamp */
@media (min-width: 981px) {
:root {
--ds-size-h1: clamp(2.2rem, 0.96rem + 4.8vw, 4.4rem);
}
}
/* Phone: nav sits ~13px lower, so trim hero clearance to keep
nav→content in the 32–44px range and avoid excess blank space. */
@media (max-width: 767px) {
:root {
--ds-hero-clearance: 136px;
--ds-tracking-h1: -0.035em;
--ds-tracking-h2: -0.035em;
--ds-tracking-h3: -0.03em;
--ds-tracking-h4: -0.025em;
--ds-tracking-h5: -0.015em;
--ds-tracking-h6: -0.01em;
}
}
@media (max-width: 479px) {
:root {
--ds-tracking-h1: -0.025em;
--ds-tracking-h2: -0.025em;
--ds-tracking-h3: -0.02em;
--ds-tracking-h4: -0.015em;
--ds-tracking-h5: -0.01em;
--ds-tracking-h6: 0;
}
}
/* ----- assets/css/system/background.css ----- */
/*
Warm-white page background (#FCF7F4)
Drop-in: add to index.css.
Cards, inputs and selects stay crisp white (--ds-color-surface) so they lift
off the warm page. Scoped to body / #page-container; no Divi component overrides.
*/
:root{
--ds-color-page: #FCF7F4; /* warm white page */
}
html,
body,
#page-container{
background-color: var(--ds-color-page);
}
/* Keep large light section bands consistent with the warm page */
#page-container .et_pb_section.et_pb_section_regular:not([style*="background"]){
background-color: var(--ds-color-page);
}
/* ----- assets/css/system/fonts.css ----- */
/*
Fonts — design system
Body: Inter (self-hosted)
Headings: Alternate Gothic ATF (Adobe Fonts kit fks5kmr — Bold/700 now; add Heavy/800 when available)
Mono: JetBrains Mono (self-hosted)
Instrument Serif kept self-hosted for any legacy italic/display accents.
*/
@font-face {
font-family: "Instrument Serif";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/instrument-serif/InstrumentSerif-Regular.woff2") format("woff2");
}
@font-face {
font-family: "Instrument Serif";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/instrument-serif/InstrumentSerif-Italic.woff2") format("woff2");
}
@font-face {
font-family: "JetBrains Mono";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/jetbrains-mono/JetBrainsMono-Regular.woff2") format("woff2");
}
@font-face {
font-family: "JetBrains Mono";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/assets/fonts/jetbrains-mono/JetBrainsMono-Regular.woff2") format("woff2");
}
/* Self-hosted Inter (SIL Open Font License 1.1) */
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url("/assets/fonts/inter/InterVariable.woff2") format("woff2");
}
:root {
--ds-font-display: "alternate-gothic-atf", "Arial Narrow", Arial, sans-serif;
--ds-font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--ds-font-heading: "alternate-gothic-atf", "Arial Narrow", Arial, sans-serif;
--ds-font-heading-bold: "alternate-gothic-atf", "Arial Narrow", Arial, sans-serif;
--ds-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
/* Divi critical CSS still sets Open Sans on body */
body,
body.et_pb_pagebuilder_layout,
.et-db #page-container {
font-family: var(--ds-font-body) !important;
}
/*
Body copy weight — Divi critical CSS sets body { font-weight: 500 }.
Scoped to text modules; excludes eyebrows, buttons, nav, headings.
*/
#page-container .et_pb_text_inner p:not(.ds-eyebrow),
#main-content .et_pb_text_inner p:not(.ds-eyebrow) {
font-weight: 400;
}
/* Newsletter hero (not inside .et_pb_text_inner) */
#post-newsletter .nl-saasify-lede,
#post-newsletter .nl-saasify-caption {
font-weight: 400;
}
/*
Main nav text links — Divi/customizer uses font-weight: 600 on #top-menu a.
Excludes nav CTA buttons (li.et_pb_button: Download CV, Join the Newsletter).
*/
#page-container #main-header #top-menu > li:not(.et_pb_button) > a,
#page-container #main-header #top-menu > li:not(.et_pb_button).current-menu-item > a,
#page-container #main-header #top-menu > li:not(.et_pb_button).current_page_item > a {
font-weight: 400 !important;
}
/* Legacy page CSS that named Figtree, Geist, or Lato explicitly */
#post-newsletter .nl-saasify-headline,
#post-newsletter .nl-saasify-lede,
#post-newsletter .nl-saasify-input,
#post-newsletter .nl-saasify-submit,
#post-newsletter .nl-saasify-caption,
#post-newsletter .nl-saasify-form-error,
#post-newsletter .nl-confirm-title,
#post-newsletter .nl-confirm-lede {
font-family: var(--ds-font-body) !important;
}
@media screen and (max-width: 980px) {
/* :before/:after renders the ETModules icon glyph — must NOT override */
#main-header .et_mobile_menu li a {
font-family: var(--ds-font-body) !important;
}
}
.skip-link {
font-family: var(--ds-font-body) !important;
}
/* ----- assets/css/system/components/buttons.css ----- */
/*
Buttons (Phase 1)
- Opt-in only via ds- classes
- No overrides of .et_pb_* or other Divi selectors
*/
.ds-btn{
-webkit-appearance:none;
appearance:none;
display:inline-flex;
align-items:center;
justify-content:center;
gap: var(--ds-space-2);
font-family: inherit;
font-size: 14px;
font-weight: 600;
line-height: 1;
letter-spacing: 0;
text-decoration: none;
cursor: pointer;
user-select: none;
white-space: nowrap;
height: var(--ds-control-h);
padding: 0 14px;
border-radius: var(--ds-radius-md);
border: 1px solid var(--ds-color-border-strong);
background: transparent;
color: rgba(0,0,0,.85);
transition: background-color .25s, border-color .25s, color .25s, box-shadow .25s, transform .06s;
box-sizing: border-box;
}
.ds-btn:hover{
background: rgba(0,0,0,.04);
text-decoration:none;
}
.ds-btn:active{
transform: translateY(1px);
}
.ds-btn:focus-visible{
outline: none;
box-shadow: 0 0 0 4px rgba(197,144,96,.20);
border-color: var(--ds-color-focus);
}
.ds-btn[disabled],
.ds-btn[aria-disabled="true"]{
opacity: .65;
cursor: not-allowed;
transform: none;
}
.ds-btn--primary{
border-color: rgba(0,0,0,.24);
background: rgba(0,0,0,.02);
}
.ds-btn--secondary{
border-color: rgba(0,0,0,.16);
background: transparent;
}
/*
Page-level CTAs (hero, cards, bottom sections)
Excludes #top-menu / mobile drawer nav buttons (menu-item-53/54).
Excludes newsletter form submit (.nl-saasify-submit).
*/
:root {
--ds-page-cta-min-h: 44px;
--ds-page-cta-px: 28px;
--ds-page-cta-font-size: 1rem;
}
/* Shared dimensions */
#page-container a.ds-btn-primary,
#page-container a.ds-btn-secondary,
#page-container a.cta_primary,
#page-container a.cta_secondary,
#page-container #cta_newsletter,
#page-container #cta_case_studies,
#page-container .case-work a.text-button.brand-link,
#page-container .card-kepler a.text-button.brand-link,
#page-container .card-side-by-side a.text-button.brand-link,
#page-container a.et_pb_button.ds-btn-primary,
#page-container a.et_pb_button.ds-btn-secondary,
#page-container a.et_pb_button.cta_primary,
#page-container a.et_pb_button.cta_secondary,
#page-container a.et_pb_button#cta_newsletter,
#page-container a.et_pb_button#cta_case_studies {
-webkit-appearance: none;
appearance: none;
position: relative;
display: inline-flex !important;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-height: var(--ds-page-cta-min-h);
padding: 0 var(--ds-page-cta-px) !important;
border-radius: 999px !important;
font-family: var(--ds-font-body) !important;
font-size: var(--ds-page-cta-font-size) !important;
font-weight: 600 !important;
line-height: 1.1 !important;
letter-spacing: 0.01em !important;
text-decoration: none !important;
cursor: pointer;
top: auto !important;
white-space: nowrap;
transition:
background 0.2s ease,
border-color 0.2s ease,
color 0.2s ease,
transform 0.2s ease,
box-shadow 0.2s ease;
}
/* Card / section CTAs: spacing below copy */
#page-container .case-work a.text-button.brand-link,
#page-container .card-kepler a.text-button.brand-link,
#page-container .card-side-by-side a.text-button.brand-link {
margin: 0.75rem 0 0;
clear: left;
}
/* Hero pair: inline spacing */
#page-container #cta_newsletter {
margin-right: 0.5em;
margin-top: 0;
}
#page-container #cta_case_studies {
margin-top: 0;
}
/* No Divi / text-link pseudo decorations */
#page-container a.ds-btn-primary::before,
#page-container a.ds-btn-primary::after,
#page-container a.ds-btn-secondary::before,
#page-container a.ds-btn-secondary::after,
#page-container a.cta_primary::before,
#page-container a.cta_primary::after,
#page-container a.cta_secondary::before,
#page-container a.cta_secondary::after,
#page-container #cta_newsletter::before,
#page-container #cta_newsletter::after,
#page-container #cta_case_studies::before,
#page-container #cta_case_studies::after,
#page-container a.text-button.brand-link::before,
#page-container a.text-button.brand-link::after,
#page-container a.et_pb_button.ds-btn-primary::after,
#page-container a.et_pb_button.ds-btn-secondary::after,
#page-container a.et_pb_button.cta_primary::after,
#page-container a.et_pb_button.cta_secondary::after,
#page-container a.et_pb_button#cta_newsletter::after,
#page-container a.et_pb_button#cta_case_studies::after {
display: none !important;
content: none !important;
width: 0 !important;
height: 0 !important;
opacity: 0 !important;
}
/* Secondary — now matches primary black pill (ElevenLabs style) */
#page-container a.ds-btn-secondary,
#page-container a.cta_secondary,
#page-container #cta_newsletter,
#page-container .case-work a.text-button.brand-link,
#page-container .card-kepler a.text-button.brand-link,
#page-container .card-side-by-side a.text-button.brand-link {
background: #000000 !important;
color: #ffffff !important;
border: 1px solid #000000 !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
#page-container a.ds-btn-secondary:hover,
#page-container a.cta_secondary:hover,
#page-container #cta_newsletter:hover,
#page-container .case-work a.text-button.brand-link:hover,
#page-container .card-kepler a.text-button.brand-link:hover,
#page-container .card-side-by-side a.text-button.brand-link:hover {
background: #1a1a1a !important;
color: #ffffff !important;
border-color: #1a1a1a !important;
border-radius: 999px !important;
transform: translateY(-1px);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
text-decoration: none !important;
}
#page-container a.ds-btn-secondary:active,
#page-container a.cta_secondary:active,
#page-container #cta_newsletter:active,
#page-container .case-work a.text-button.brand-link:active {
transform: translateY(0);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
#page-container a.ds-btn-secondary:focus-visible,
#page-container a.cta_secondary:focus-visible,
#page-container #cta_newsletter:focus-visible,
#page-container .case-work a.text-button.brand-link:focus-visible {
outline: 2px solid #c59060 !important;
outline-offset: 4px !important;
color: #ffffff !important;
background: #000000 !important;
}
/* Primary (dark pill) */
#page-container a.ds-btn-primary,
#page-container a.cta_primary,
#page-container #cta_case_studies {
background: #000000 !important;
color: #ffffff !important;
border: 1px solid #000000 !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
#page-container a.ds-btn-primary:hover,
#page-container a.cta_primary:hover,
#page-container #cta_case_studies:hover {
background: #1a1a1a !important;
color: #ffffff !important;
border-color: #1a1a1a !important;
border-radius: 999px !important;
transform: translateY(-1px);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
text-decoration: none !important;
}
#page-container a.ds-btn-primary:active,
#page-container a.cta_primary:active,
#page-container #cta_case_studies:active {
transform: translateY(0);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
#page-container a.ds-btn-primary:focus-visible,
#page-container a.cta_primary:focus-visible,
#page-container #cta_case_studies:focus-visible {
outline: 2px solid #c59060 !important;
outline-offset: 4px !important;
color: #ffffff !important;
background: #000000 !important;
}
.ds-btn--dark{
background: var(--ds-color-dark);
border-color: var(--ds-color-dark);
color: #fff;
}
.ds-btn--dark:hover{
background: var(--ds-color-dark-2);
border-color: var(--ds-color-dark-2);
color:#fff;
}
.ds-btn--pill{
border-radius: var(--ds-radius-pill);
}
/* ----- assets/css/system/eyebrows.css ----- */
/*
Eyebrow / kicker labels — JetBrains Mono, uppercase, spaced
ElevenLabs / editorial monochrome system.
*/
.ds-eyebrow,
#page-container .ds-eyebrow {
display: block;
margin: 0 0 4px;
color: #c59060;
font-family: var(--ds-font-mono, "JetBrains Mono", ui-monospace, monospace);
font-size: 11px;
line-height: 1.35;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
text-shadow: none;
}
/* Legacy Divi sup eyebrows */
.hero-cntn sup,
#page-container .hero-cntn sup {
display: block;
margin: 0 0 8px;
padding: 0;
border: none;
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
color: #c59060 !important;
font-family: var(--ds-font-mono, "JetBrains Mono", ui-monospace, monospace) !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
text-shadow: none !important;
line-height: 1.35 !important;
}
/* ----- assets/css/system/content-rhythm.css ----- */
/*
Eyebrow → title → body spacing on marketing blocks
*/
/* Heading → paragraph gap: collapse p margin-top so the gap is heading margin-bottom only (0.5em) */
#page-container .et_pb_text_inner > :where(h1, h2, h3, h4, h5, h6) + p {
margin-top: 0 !important;
}
.hero-cntn .et_pb_text_0 .et_pb_text_inner > .ds-eyebrow + h1 {
margin-top: 0;
}
.hero-cntn .et_pb_text_0 .et_pb_text_inner > h1 {
margin-bottom: 0;
}
.hero-cntn .et_pb_text_0 .et_pb_text_inner > h1 + p {
margin-top: 16px;
}
#page-container .case-work .et_pb_text_inner > .ds-eyebrow + :is(h3, h4, h5, h6) {
margin-top: 0;
}
#page-container .case-work .et_pb_text_inner > .ds-eyebrow + p {
margin-top: 0;
}
#page-container .et_pb_text_2 .et_pb_text_inner > .ds-eyebrow + h3,
#page-container .et_pb_text_7 .et_pb_text_inner > .ds-eyebrow + h3,
#page-container .et_pb_text_8 .et_pb_text_inner > .ds-eyebrow + h3,
#page-container .et_pb_text_8 .et_pb_text_inner > .ds-eyebrow + .notion-scroller {
margin-top: 0;
}
#page-container .et_pb_text_2 .et_pb_text_inner > h3 + p,
#page-container .et_pb_text_7 .et_pb_text_inner > h3 + p,
#page-container .et_pb_text_8 .et_pb_text_inner > h3 + p {
margin-top: 16px;
}
/* "Design as a growth system" bottom CTA section.
Heading (et_pb_text_8), paragraph (et_pb_text_9) and CTA are separate Divi
modules, so the heading→paragraph gap is module spacing + the serif heading's
~32px line-box leading (reads as ~47px). Group them like the case cards:
eyebrow→heading ~12px, heading→paragraph ~19px, paragraph→CTA ~26px.
Margins only — layout, columns, type and the left image collage untouched. */
body.home #page-container .et_pb_text_8 .et_pb_text_inner > .ds-eyebrow {
margin-bottom: 8px !important;
}
body.home #page-container .et_pb_text_9 {
margin-top: -28px !important;
margin-bottom: 26px !important;
}
/* The heading clamps to its 2rem floor on narrower viewports, shrinking the
serif leading — ease the pull-up so heading→paragraph stays ~16–20px. */
@media (max-width: 1280px) {
body.home #page-container .et_pb_text_9 {
margin-top: -20px !important;
}
}
/* Homepage "A quick note before you scroll" editorial block. Same serif
line-box leading issue: h3→paragraph reads ~47px. Pull the copy up under the
heading (~18px). Scoped to homepage — et_pb_text_2 is a card on /case-studies/. */
body.home #page-container .et_pb_text_2 .et_pb_text_inner > h3 {
margin-bottom: -14px !important;
}
@media (max-width: 1066px) {
body.home #page-container .et_pb_text_2 .et_pb_text_inner > h3 {
margin-bottom: -7px !important;
}
}
/* Large standalone editorial headings (homepage testimonials h3,
/case-studies/ intro h2) read ~3px eyebrow→heading because the serif heading's
top line-box leading eats into the eyebrow margin. Nudge the eyebrow so these
match the cards' ~7px rhythm. */
body.home #page-container .et_pb_text_7 .et_pb_text_inner > .ds-eyebrow,
body.page-id-2147 #page-container .et_pb_text_0 .et_pb_text_inner > .ds-eyebrow {
margin-bottom: 7px !important;
}
/* -------------------------------------------------------------------------- */
/* Site-wide hero clearance below the floating nav */
/* -------------------------------------------------------------------------- */
/*
The header floats over the page and #page-container has padding-top:0, so the
first section on every page must clear the nav itself. Pages ship different
first-section/row paddings (case-studies .case-work, about + case-study detail
plain .et_pb_section_0), which left hero content tucked under or behind the nav.
Normalize: the first non-home section owns the clearance via padding-top
(the shared --ds-hero-clearance token), and its first row's top padding is
zeroed so the token is the single source of truth across page types.
Homepage (.hero-cntn) is excluded — it has a full-bleed background and its
own tuned hero rhythm. Newsletter uses a custom card hero handled in
pages/newsletter.css. */
#page-container .et_pb_section.et_pb_section_0:not(.hero-cntn) {
padding-top: var(--ds-hero-clearance) !important;
}
#page-container .et_pb_section.et_pb_section_0:not(.hero-cntn) > .et_pb_row:first-of-type {
padding-top: 0 !important;
}
/* ----- assets/css/system/mobile-open-menu.css ----- */
/*
Opened mobile menu only (max-width: 980px).
Overrides Divi customizer (et-divi-customizer-global.min.css).
Closed floating nav + desktop #top-menu are untouched.
*/
@media screen and (max-width: 980px) {
:root {
--mow-drawer-bg: #fffaf4;
--mow-drawer-footer-bg: #fbf8f2;
--mow-drawer-border: rgba(45, 31, 22, 0.1);
--mow-drawer-divider: rgba(45, 31, 22, 0.08);
--mow-drawer-text: #22160f;
--mow-drawer-muted: rgba(34, 22, 15, 0.72);
--mow-drawer-shadow: 0 20px 64px rgba(45, 31, 22, 0.12);
--mow-nav-max-width: 1100px;
}
/*
* Shared nav/drawer geometry (--mow-nav-* on #main-header from mobile-menu-a11y.js when open).
* Fallback width/bottom mirror Divi .container until the nav shell is measured.
*/
#page-container #main-header {
--mow-nav-width: min(var(--mow-nav-max-width), 90vw);
--mow-nav-bottom: calc(env(safe-area-inset-top, 0px) + 5.5rem);
}
/* Let position:fixed use the viewport (backdrop-filter creates a containing block).
Also: the floating pill is normally translucent (rgba glass) and inset from
the edges — while the drawer is open, make it a solid, full-bleed bar flush
with the drawer below so no page content shows through around it. */
#page-container #main-header:has(.mobile_nav.opened) .et_menu_container {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
background-color: var(--mow-drawer-bg) !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
margin: 0 !important;
border-radius: 0 !important;
border: none !important;
box-shadow: none !important;
}
/* On dark-hero pages the logo/nav render light-on-dark for contrast — keep
the opaque bar dark there instead of switching to the light drawer color. */
#page-container #main-header.main-header--on-dark:has(.mobile_nav.opened) .et_menu_container {
background-color: #0a0a0a !important;
}
/* Customizer CSS gives .et_mobile_menu height:100vh + backdrop-filter:blur(10px)
unconditionally (only opacity is gated on .closed vs .opened) — opacity:0
alone doesn't reliably suppress a backdrop-filter's visual effect, so the
closed drawer can still blur the page behind it. Fully remove it from
rendering when closed. */
#page-container #main-header .mobile_nav.closed .et_mobile_menu,
#page-container #main-header .mobile_nav.closed #mobile_menu {
display: none !important;
}
#page-container #main-header .mobile_nav.opened .et_mobile_menu,
#page-container #main-header .mobile_nav.opened #mobile_menu {
position: fixed !important;
top: var(--mow-nav-bottom) !important;
left: 0 !important;
right: 0 !important;
width: 100vw !important;
max-width: none !important;
height: calc(100dvh - var(--mow-nav-bottom)) !important;
max-height: calc(100dvh - var(--mow-nav-bottom)) !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
background-color: var(--mow-drawer-bg) !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
z-index: 99998 !important;
border-top: none !important;
transform: none !important;
overscroll-behavior: contain;
}
#page-container #main-header .mobile_nav.opened #mobile_menu {
background-color: var(--mow-drawer-bg) !important;
}
/* Scrollable nav links */
#page-container #main-header .mobile_nav.opened .et_mobile_menu > li:not(.et_pb_button):not(.site-nav-workshop) {
flex: 0 0 auto;
width: 100%;
margin: 0;
padding: 0;
border: none;
border-bottom: 1px solid var(--mow-drawer-divider);
}
#page-container #main-header .mobile_nav.opened .et_mobile_menu > li:not(.et_pb_button):not(.site-nav-workshop):last-of-type {
border-bottom: none;
}
#page-container #main-header .mobile_nav.opened .et_mobile_menu li:not(.et_pb_button):not(.site-nav-workshop) > a {
display: flex !important;
align-items: center;
min-height: 4.25rem;
padding: 0 1.75rem !important;
color: var(--mow-drawer-text) !important;
font-family: "Geist", "Figtree", var(--ds-font-body, "Open Sans", Arial, sans-serif) !important;
font-size: clamp(1.25rem, 5vw, 1.625rem) !important;
font-weight: 600 !important;
line-height: 1.12 !important;
letter-spacing: -0.015em !important;
text-transform: none !important;
text-decoration: none !important;
border-bottom: none !important;
background: transparent !important;
opacity: 1 !important;
transition: background-color 0.15s ease !important;
}
#page-container #main-header .mobile_nav.opened .et_mobile_menu li:not(.et_pb_button):not(.site-nav-workshop) > a:hover,
#page-container #main-header .mobile_nav.opened .et_mobile_menu li:not(.et_pb_button):not(.site-nav-workshop) > a:focus-visible {
background-color: rgba(45, 31, 22, 0.04) !important;
}
#page-container #main-header .mobile_nav.opened .et_mobile_menu li:not(.et_pb_button):not(.site-nav-workshop) > a:focus-visible {
outline: 2px solid #2d1f16 !important;
outline-offset: 2px !important;
}
#page-container #main-header .mobile_nav.opened .et_mobile_menu {
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
}
/*
* Footer CTA block (inside drawer).
* Overrides customizer: position:absolute; bottom:10em; width:90%
* Builder Kickoff (site-nav-workshop) + The Value Gut-Check (menu-item-54)
* are the only two buttons — Download CV was removed from the nav entirely.
*/
#page-container #main-header .mobile_nav.opened .et_mobile_menu > li.site-nav-workshop,
#page-container #main-header .mobile_nav.opened .et_mobile_menu > li.menu-item-54 {
position: static !important;
bottom: auto !important;
top: auto !important;
left: auto !important;
right: auto !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
flex: 0 0 auto;
z-index: 1;
border: none !important;
background-color: var(--mow-drawer-footer-bg) !important;
}
#page-container #main-header .mobile_nav.opened .et_mobile_menu > li.site-nav-workshop {
margin-top: auto !important;
padding: 1rem 1.25rem 0 !important;
border-top: 1px solid var(--mow-drawer-divider) !important;
}
#page-container #main-header .mobile_nav.opened .et_mobile_menu > li.menu-item-54 {
padding: 24px 1.25rem 1.25rem !important;
}
#page-container #main-header .mobile_nav.opened .et_mobile_menu > li.et_pb_button,
#page-container #main-header .mobile_nav.opened .et_mobile_menu > li.site-nav-workshop {
display: block !important;
}
#page-container #main-header .mobile_nav.opened .et_mobile_menu .et_pb_button {
position: static !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
text-align: center !important;
border-radius: 999px !important;
box-shadow: none !important;
}
/* Same block treatment as .et_pb_button, but margin-top/padding stay as set above (footer-group rule) so it pins to the bottom with its own inset */
#page-container #main-header .mobile_nav.opened .et_mobile_menu li.site-nav-workshop {
position: static !important;
width: 100% !important;
margin-right: 0 !important;
margin-bottom: 0 !important;
margin-left: 0 !important;
display: block !important;
text-align: center !important;
border-radius: 999px !important;
box-shadow: none !important;
}
#page-container #main-header .mobile_nav.opened .et_mobile_menu .et_pb_button a,
#page-container #main-header .mobile_nav.opened .et_mobile_menu li.site-nav-workshop > a {
display: flex !important;
align-items: center;
justify-content: center;
width: 100% !important;
min-height: 2.75rem;
padding: 0.625rem 1rem !important;
font-size: 0.875rem !important;
font-weight: 600 !important;
line-height: 1.25 !important;
letter-spacing: 0 !important;
text-transform: none !important;
text-decoration: none !important;
border-radius: 999px !important;
box-sizing: border-box !important;
box-shadow: none !important;
}
/* Secondary: light outline pill */
#page-container #main-header .mobile_nav.opened .et_mobile_menu li.site-nav-workshop > a {
color: var(--mow-drawer-text) !important;
background-color: #ffffff !important;
border: 1px solid rgba(45, 31, 22, 0.12) !important;
}
#page-container #main-header .mobile_nav.opened .et_mobile_menu li.site-nav-workshop > a:hover,
#page-container #main-header .mobile_nav.opened .et_mobile_menu li.site-nav-workshop > a:focus-visible {
background-color: rgba(255, 255, 255, 0.92) !important;
border-color: rgba(45, 31, 22, 0.2) !important;
}
#page-container #main-header .mobile_nav.opened .et_mobile_menu li.site-nav-workshop > a:focus-visible {
outline: 2px solid #2d1f16 !important;
outline-offset: 2px !important;
}
/* Primary: compact dark pill */
#page-container #main-header .mobile_nav.opened .et_mobile_menu li.menu-item-54.et_pb_button a {
color: #fffaf4 !important;
background-color: #1f1a16 !important;
border: 1px solid #1f1a16 !important;
}
#page-container #main-header .mobile_nav.opened .et_mobile_menu li.menu-item-54.et_pb_button a:hover,
#page-container #main-header .mobile_nav.opened .et_mobile_menu li.menu-item-54.et_pb_button a:focus-visible {
background-color: #2d1f16 !important;
border-color: #2d1f16 !important;
}
#page-container #main-header .mobile_nav.opened .et_mobile_menu li.menu-item-54.et_pb_button a:focus-visible {
outline: 2px solid #c59060 !important;
outline-offset: 2px !important;
}
#page-container #main-header .mobile_nav.opened button.mobile_menu_bar.mobile_menu_bar_toggle:focus-visible {
outline: 2px solid #2d1f16 !important;
outline-offset: 3px !important;
}
/* Close icon in header */
body.et_divi_100_custom_hamburger_menu #page-container .mobile_nav.opened .et_divi_100_custom_hamburger_menu__icon div,
body.et_divi_100_custom_hamburger_menu #page-container .mobile_nav.opened .et_divi_100_custom_hamburger_menu__icon.et_divi_100_custom_hamburger_menu__icon--toggled div {
background: #2d1f16 !important;
}
body.et_divi_100_custom_hamburger_menu--type-2 #page-container .mobile_nav.opened .et_divi_100_custom_hamburger_menu__icon div:before,
body.et_divi_100_custom_hamburger_menu--type-2 #page-container .mobile_nav.opened .et_divi_100_custom_hamburger_menu__icon div:after {
background: #2d1f16 !important;
}
}
@media screen and (min-width: 768px) and (max-width: 980px) {
#page-container #main-header {
--mow-nav-width: min(var(--mow-nav-max-width), 80vw);
--mow-nav-bottom: calc(env(safe-area-inset-top, 0px) + 6.75rem);
}
#page-container #main-header .mobile_nav.opened .et_mobile_menu,
#page-container #main-header .mobile_nav.opened #mobile_menu {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-content: start !important;
align-items: start !important;
column-gap: 0.75rem;
}
#page-container #main-header .mobile_nav.opened .et_mobile_menu > li:not(.et_pb_button):not(.site-nav-workshop) {
grid-column: 1 / -1;
}
#page-container #main-header .mobile_nav.opened .et_mobile_menu > li.site-nav-workshop {
grid-column: 1 / 2 !important;
margin-top: 0 !important;
padding: 1rem 0 1.25rem 1.25rem !important;
}
#page-container #main-header .mobile_nav.opened .et_mobile_menu > li.menu-item-54 {
grid-column: 2 / 3 !important;
padding: 1rem 1.25rem 1.25rem 0 !important;
}
}
@media screen and (max-width: 767px) {
#page-container #main-header {
--mow-nav-width: min(var(--mow-nav-max-width), 90vw);
--mow-nav-bottom: calc(env(safe-area-inset-top, 0px) + 5.5rem);
}
}
/* ----- assets/css/system/accessibility.css ----- */
/*
Site-wide accessibility utilities (focus, skip link, menu toggle reset).
Loaded after Divi/global CSS via headings.css / index.css.
*/
:root {
--a11y-focus: #2d1f16;
--a11y-focus-on-dark: #c59060;
}
/* -------------------------------------------------------------------------- */
/* Skip link */
/* -------------------------------------------------------------------------- */
.skip-link {
position: absolute;
top: 0;
left: 0;
z-index: 100000;
margin: 0;
padding: 12px 16px;
border-radius: 0 0 8px 0;
background: #fffaf4;
color: var(--a11y-focus);
font-family: Figtree, "Open Sans", Arial, sans-serif;
font-size: 14px;
font-weight: 600;
line-height: 1.25;
text-decoration: none;
box-shadow: 0 4px 24px rgba(45, 31, 22, 0.12);
clip: rect(0 0 0 0);
clip-path: inset(50%);
width: 1px;
height: 1px;
overflow: hidden;
white-space: nowrap;
}
.skip-link:focus,
.skip-link:focus-visible {
clip: auto;
clip-path: none;
width: auto;
height: auto;
overflow: visible;
white-space: normal;
outline: 2px solid var(--a11y-focus) !important;
outline-offset: 2px !important;
}
/* -------------------------------------------------------------------------- */
/* Mobile menu toggle (button reset — preserve Divi/hamburger visuals) */
/* -------------------------------------------------------------------------- */
button.mobile_menu_bar.mobile_menu_bar_toggle {
-webkit-appearance: none;
appearance: none;
display: inline-block;
border: none;
margin: 0;
padding: 0;
background: transparent;
font: inherit;
line-height: inherit;
color: inherit;
cursor: pointer;
vertical-align: middle;
}
button.mobile_menu_bar.mobile_menu_bar_toggle:focus {
outline: none;
}
/* -------------------------------------------------------------------------- */
/* Global focus-visible (overrides Divi :focus { outline: 0 }) */
/* -------------------------------------------------------------------------- */
#page-container a:focus-visible,
#page-container button:focus-visible,
#page-container input:focus-visible,
#page-container textarea:focus-visible,
#page-container select:focus-visible,
#page-container [role="button"]:focus-visible,
#page-container .et_pb_button:focus-visible,
#page-container .text-button:focus-visible,
#page-container .text-button.brand-link:focus-visible,
#page-container #top-menu a:focus-visible,
#page-container .mobile_nav a:focus-visible,
#post-newsletter .nl-saasify-input:focus-visible,
#post-newsletter .nl-saasify-submit:focus-visible {
outline: 2px solid var(--a11y-focus) !important;
outline-offset: 4px !important;
}
/* Dark buttons / footer on black */
#page-container #main-footer a:focus-visible,
#page-container a.et_pb_button:focus-visible:not(.cta_secondary),
#page-container .mobile_nav.opened .et_mobile_menu li.menu-item-54.et_pb_button a:focus-visible,
#post-newsletter .nl-saasify-submit:focus-visible {
outline-color: var(--a11y-focus-on-dark) !important;
}
/* Newsletter email keeps accent ring (already styled); align offset */
#post-newsletter .nl-saasify-input:focus-visible {
outline-color: var(--a11y-focus-on-dark) !important;
outline-offset: 2px !important;
}
/* Secondary hero CTA — light surface */
#page-container a.cta_secondary:focus-visible {
outline-color: var(--a11y-focus) !important;
}
/* Hamburger / menu toggle */
#page-container button.mobile_menu_bar.mobile_menu_bar_toggle:focus-visible {
outline-color: var(--a11y-focus) !important;
outline-offset: 3px !important;
}
/*
* Homepage hero CTA colors/focus beat Divi .et_pb_button:hover defaults.
* Dimensions: buttons.css page CTA scale (--ds-page-cta-*).
*/
#page-container #cta_case_studies:hover,
#page-container #cta_case_studies:active {
color: #fff !important;
}
#page-container #cta_case_studies:focus-visible {
outline-color: var(--a11y-focus-on-dark) !important;
}
#page-container #cta_newsletter:hover,
#page-container #cta_newsletter:active {
color: #2d1f16 !important;
}
#page-container #cta_newsletter:focus-visible {
outline-color: var(--a11y-focus) !important;
}
/* ----- assets/css/system/scroll-reveal.css ----- */
/*
Scroll / load reveal — design system
Elements get opacity:0 + blur(7px) + translateY(20px) until .ds-revealed is added by JS.
Motion matches the page-entry blur + rise in page-transitions.css (details.so).
Works for above-fold (fires on load) and below-fold (IntersectionObserver).
*/
.ds-reveal {
opacity: 0;
filter: blur(7px);
transform: translateY(20px);
transition:
opacity 0.9s cubic-bezier(0.165, 0.84, 0.44, 1),
filter 0.9s cubic-bezier(0.165, 0.84, 0.44, 1),
transform 0.9s cubic-bezier(0.165, 0.84, 0.44, 1);
will-change: opacity, transform;
}
.ds-reveal.ds-revealed {
opacity: 1;
filter: none;
transform: translateY(0);
}
/* Stagger delay variants — apply alongside ds-reveal */
.ds-reveal-d1 { transition-delay: 100ms; }
.ds-reveal-d2 { transition-delay: 200ms; }
.ds-reveal-d3 { transition-delay: 300ms; }
.ds-reveal-d4 { transition-delay: 400ms; }
.ds-reveal-d5 { transition-delay: 500ms; }
/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
.ds-reveal {
opacity: 1 !important;
filter: none !important;
transform: none !important;
transition: none !important;
}
}
/* ----- assets/css/system/page-transitions.css ----- */
/*
Page transitions — design system
Ported from details.so:
1. 0.5s crossfade between pages (cross-document View Transitions), with the
nav held in place. Those rules live INLINE in partials/head.html, not
here: Chrome decides whether to transition as the new page first renders,
and an opt-in in an external stylesheet was sometimes not applied yet,
so the transition was skipped at random.
2. Hero text enters with a blur + rise: opacity 0, blur(7px), 20px down
→ resting, 0.9s ease-out-quart, staggered ~100ms per line.
.ds-enter runs on page load (CSS only, no JS). For scroll-triggered
content use .ds-reveal (scroll-reveal.css), which shares the same motion.
*/
:root {
--ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
}
@keyframes ds-enter {
from {
opacity: 0;
filter: blur(7px);
transform: translateY(20px);
}
to {
opacity: 1;
filter: blur(0);
transform: translateY(0);
}
}
.ds-enter {
animation: ds-enter 0.9s var(--ease-out-quart) 0.06s backwards;
}
/* Stagger ladder (details.so: title .16s, subtitle .26s, supporting .36s) */
.ds-enter-d1 { animation-delay: 0.16s; }
.ds-enter-d2 { animation-delay: 0.26s; }
.ds-enter-d3 { animation-delay: 0.36s; }
@media (prefers-reduced-motion: reduce) {
.ds-enter {
animation: none;
}
}
/* ----- assets/css/system/headings.css ----- */
/*
Site-wide heading typography
Alternate Gothic ATF Heavy (King Kong–style) + Inter body + JetBrains Mono eyebrows.
Loads its own dependencies so it works as a standalone .
*/
/* ── Base heading reset → Alternate Gothic ATF Heavy, all caps ───────────────
High-specificity selectors (no :where) so Divi Figtree/Geist can't win. */
#page-container h1,
#page-container h2,
#page-container h3,
#page-container h4,
#page-container h5,
#page-container h6,
#main-content h1,
#main-content h2,
#main-content h3,
#main-content h4,
#main-content h5,
#main-content h6,
.et-db #page-container h1,
.et-db #page-container h2,
.et-db #page-container h3,
.et-db #page-container h4,
.et-db #page-container h5,
.et-db #page-container h6,
#et-boc h1,
#et-boc h2,
#et-boc h3,
#et-boc h4,
#et-boc h5,
#et-boc h6 {
font-family: var(--ds-font-display) !important;
font-weight: var(--ds-font-weight-heading, 800) !important;
text-transform: uppercase !important;
line-height: var(--ds-line-height-heading, 0.94) !important;
color: var(--ds-color-text-strong) !important;
}
#page-container h1,
#main-content h1,
.et-db #page-container h1,
#et-boc h1 {
font-size: var(--ds-size-h1) !important;
letter-spacing: var(--ds-tracking-h1) !important;
text-wrap: balance;
}
#page-container h2,
#main-content h2,
.et-db #page-container h2,
#et-boc h2 {
font-size: var(--ds-size-h2) !important;
letter-spacing: var(--ds-tracking-h2) !important;
}
#page-container h3,
#main-content h3,
.et-db #page-container h3,
#et-boc h3 {
font-size: var(--ds-size-h3) !important;
letter-spacing: var(--ds-tracking-h3) !important;
}
#page-container h4,
#main-content h4,
.et-db #page-container h4,
#et-boc h4 {
font-size: var(--ds-size-h4) !important;
letter-spacing: var(--ds-tracking-h4) !important;
}
#page-container h5,
#main-content h5,
.et-db #page-container h5,
#et-boc h5 {
font-size: var(--ds-size-h5) !important;
letter-spacing: var(--ds-tracking-h5) !important;
}
#page-container h6,
#main-content h6,
.et-db #page-container h6,
#et-boc h6 {
font-size: var(--ds-size-h6) !important;
letter-spacing: var(--ds-tracking-h6) !important;
}
/* Tighten heading → body gap site-wide. Kept em-relative but trimmed from
0.5em so large display titles don't open up an oversized gap (e.g. a 46px
case-card title now sits ~16px above its description instead of ~23px). */
#page-container h2,
#page-container h3,
#page-container h4,
#page-container h5,
#page-container h6,
#main-content h2,
#main-content h3,
#main-content h4,
#main-content h5,
#main-content h6 {
margin-bottom: 0.35em !important;
}
/* The signature move: italic inside headings */
#page-container h1 em,
#page-container h2 em,
#page-container h3 em,
#page-container h4 em,
#page-container h5 em,
#page-container h6 em,
#main-content h1 em,
#main-content h2 em,
#main-content h3 em,
#main-content h4 em,
#main-content h5 em,
#main-content h6 em {
font-style: italic;
color: inherit;
}
/* Override legacy .brand-color spans inside headings → follow heading token */
#page-container h1 span.brand-color,
#page-container h2 span.brand-color,
#page-container h3 span.brand-color,
#page-container h4 span.brand-color,
#page-container h5 span.brand-color,
#page-container h6 span.brand-color,
#page-container h1 span.brand-color2,
#page-container h2 span.brand-color2,
#page-container h3 span.brand-color2,
#page-container h4 span.brand-color2,
#page-container h5 span.brand-color2,
#page-container h6 span.brand-color2 {
color: inherit !important;
}
/* ── Body font override (Divi critical CSS sets Open Sans) ─────────────────── */
body,
body.et_pb_pagebuilder_layout,
.et-db #page-container {
font-family: var(--ds-font-body) !important;
font-size: var(--ds-font-size-body);
line-height: var(--ds-line-height-body);
color: var(--ds-color-text);
-webkit-font-smoothing: antialiased;
}
/* Body copy weight */
#page-container .et_pb_text_inner p:not(.ds-eyebrow),
#main-content .et_pb_text_inner p:not(.ds-eyebrow) {
font-weight: 400;
font-size: var(--ds-font-size-body);
line-height: var(--ds-line-height-body);
}
/* ── Nav links ──────────────────────────────────────────────────────────────── */
#page-container #main-header #top-menu > li:not(.et_pb_button) > a,
#page-container #main-header #top-menu > li:not(.et_pb_button).current-menu-item > a,
#page-container #main-header #top-menu > li:not(.et_pb_button).current_page_item > a {
font-family: var(--ds-font-body) !important;
font-weight: 400 !important;
font-size: 14px !important;
color: var(--ds-color-muted) !important;
letter-spacing: 0 !important;
text-decoration: none !important;
text-transform: none !important;
transition: color var(--ds-dur-fast) var(--ds-ease-out);
}
#page-container #main-header #top-menu > li:not(.et_pb_button) > a:hover {
color: var(--ds-color-text-strong) !important;
text-decoration: none !important;
}
#page-container #main-header #top-menu > li:not(.et_pb_button):not(.site-nav-workshop) > a:hover,
#page-container #main-header #top-menu > li:not(.et_pb_button):not(.site-nav-workshop) > a:focus-visible {
background: #efe7dd;
}
/* Horizontal padding used to come from the Divi customizer. Letters no longer
load that file, so the links collapsed together and the dark CTA lost its pill. */
#page-container #main-header #top-menu > li:not(.et_pb_button):not(.site-nav-workshop) > a {
padding: 10px 12px !important;
border-radius: 999px;
}
/* ── Header bar ─────────────────────────────────────────────────────────────── */
body.et_fixed_nav.et_show_nav #page-container {
padding-top: 0 !important;
}
/* Fixed from the first paint. Homepage used to wait for the deferred Divi
sheet to set this, so the in-flow menu pushed the whole page, then jumped. */
body.et_fixed_nav #page-container #main-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 99999 !important;
background-color: transparent !important;
}
/* Header is transparent — matches production */
#main-header,
#page-container #main-header {
background-color: transparent !important;
border-bottom: none !important;
box-shadow: none !important;
}
/* ── Floating container — exact production values ────────────────────────────
Matches customizer: top: 2em, glass rgba(255,255,255,0.3), border-radius: 10px
Logo left, nav right via flex + margin-left: auto on #et-top-navigation. */
#main-header .et_menu_container,
#page-container #main-header .et_menu_container {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
position: relative !important;
margin-left: auto !important;
margin-right: auto !important;
top: 2em !important;
box-sizing: border-box !important;
width: 90% !important;
max-width: 1100px !important;
padding: 8px 8px !important;
background: rgba(255, 255, 255, 0.3) !important;
color: black !important;
border: transparent !important;
z-index: 999 !important;
border-radius: 10px !important;
backdrop-filter: blur(20px) saturate(180%) !important;
-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
transition: background 0.3s ease, color 0.3s ease, border 0.3s ease !important;
}
/* Scrolled/fixed state: matches production */
#main-header.et-fixed-header .et_menu_container,
#page-container #main-header.et-fixed-header .et_menu_container {
border: 1px solid rgba(255, 255, 255, 0.6) !important;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05) !important;
}
#page-container #main-header .logo_helper {
display: none !important;
}
/* Logo: pull back into flex flow so it occupies space on the left */
#main-header .logo_container,
#page-container #main-header .logo_container {
position: relative !important;
top: auto !important;
width: auto !important;
flex-shrink: 0 !important;
display: flex !important;
align-items: center !important;
height: auto !important;
}
/* Nav: push to right side of pill */
#main-header #et-top-navigation,
#page-container #main-header #et-top-navigation {
margin-left: auto !important;
}
/* Wordmark */
#main-header .logo_container a {
font-family: var(--ds-font-display) !important;
font-weight: 400 !important;
letter-spacing: -0.01em !important;
font-size: 16px !important;
}
#main-header #logo {
position: static !important;
top: auto !important;
margin: 0 !important;
height: 23px !important;
max-height: 23px !important;
width: auto !important;
padding: 0 16px 0 0 !important;
}
/* ── Eyebrow / kicker global override ────────────────────────────────────── */
/* Note: eyebrows.css is imported above — this layer upgrades to mono */
.ds-eyebrow,
#page-container .ds-eyebrow,
.hero-cntn sup,
#page-container .hero-cntn sup {
font-family: var(--ds-font-mono) !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: #c59060 !important;
line-height: 1.35 !important;
}
/* ── .ds- typography utilities aligned to new tokens ─────────────────────── */
.ds-hero-title {
font-family: var(--ds-font-display) !important;
font-weight: var(--ds-font-weight-heading, 800) !important;
letter-spacing: var(--ds-tracking-h1) !important;
text-transform: uppercase !important;
line-height: var(--ds-line-height-heading, 0.94);
color: var(--ds-color-text-strong);
font-size: var(--ds-size-h1);
}
.ds-page-title {
font-family: var(--ds-font-display) !important;
font-weight: var(--ds-font-weight-heading, 800) !important;
letter-spacing: var(--ds-tracking-h2) !important;
text-transform: uppercase !important;
line-height: var(--ds-line-height-heading, 0.94);
color: var(--ds-color-text-strong);
font-size: clamp(2rem, 4vw, 4rem);
}
.ds-section-title {
font-family: var(--ds-font-display) !important;
font-weight: var(--ds-font-weight-heading, 800) !important;
letter-spacing: var(--ds-tracking-h3) !important;
text-transform: uppercase !important;
line-height: var(--ds-line-height-heading, 0.94);
color: var(--ds-color-text-strong);
font-size: clamp(1.75rem, 3vw, 2.75rem);
}
/* ── Newsletter font override ─────────────────────────────────────────────── */
/* Newsletter headlines follow display heading treatment */
#post-newsletter .nl-saasify-headline,
#post-newsletter .nl-confirm-title {
font-family: var(--ds-font-display) !important;
font-weight: var(--ds-font-weight-heading, 800) !important;
letter-spacing: var(--ds-tracking-h1) !important;
text-transform: uppercase !important;
}
/* Body / UI elements use Inter */
#post-newsletter .nl-saasify-lede,
#post-newsletter .nl-saasify-input,
#post-newsletter .nl-saasify-submit,
#post-newsletter .nl-saasify-caption,
#post-newsletter .nl-saasify-form-error,
#post-newsletter .nl-confirm-lede {
font-family: var(--ds-font-body) !important;
}
/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media screen and (max-width: 980px) {
/* mobile_menu_bar:before/:after renders the ETModules icon glyph — must NOT
override font-family or the hamburger icon disappears */
#main-header .et_mobile_menu li a {
font-family: var(--ds-font-body) !important;
}
.et_header_style_left #logo {
max-width: 90% !important;
}
}
.skip-link {
font-family: var(--ds-font-body) !important;
}
/* ── Global link color (override Divi #2ea3f2 default) ───────────────────── */
#page-container a:not(.site-footer *):not([class*="et_pb_button"]):not(.ds-btn):not(.ds-btn-primary):not(.ds-btn-secondary):not(.workshop-card__cta):not(.pr-seat-header__cta):not(.pr-bento-cta__btn):not(.pr-hero__cta):not(.pr-ticket__cta) {
color: inherit;
}
#page-container a:not(.site-footer *):not([class*="et_pb_button"]):not(.ds-btn):not(.ds-btn-primary):not(.ds-btn-secondary):not(.workshop-card__cta):not(.pr-seat-header__cta):not(.pr-bento-cta__btn):not(.pr-hero__cta):not(.pr-ticket__cta):hover {
color: var(--ds-color-text-strong, #09090B);
}
/* ── Nav CTA buttons (pill primary / secondary) ───────────────────────────── */
/* Primary — Join the Newsletter */
#page-container #main-header #top-menu li.et_pb_button:not(.et_pb_button_secondary),
#page-container #main-header #top-menu li.menu-item-54 {
background-color: #000000 !important;
border: none !important;
border-radius: 999px !important;
box-shadow: none !important;
}
#page-container #main-header #top-menu li.et_pb_button:not(.et_pb_button_secondary) a,
#page-container #main-header #top-menu li.menu-item-54 a {
color: #ffffff !important;
font-family: var(--ds-font-body) !important;
font-weight: 500 !important;
font-size: 14px !important;
padding: 4px 12px !important;
border-radius: 999px !important;
text-decoration: none !important;
}
#page-container #main-header #top-menu li.et_pb_button:not(.et_pb_button_secondary):hover,
#page-container #main-header #top-menu li.menu-item-54:hover {
background-color: #18181B !important;
}
/* Secondary — Download CV */
#page-container #main-header #top-menu li.et_pb_button.et_pb_button_secondary,
#page-container #main-header #top-menu li.menu-item-53 {
background-color: #ffffff !important;
border: 1px solid var(--ds-color-border, #E2D6CD) !important;
box-shadow: none !important;
}
#page-container #main-header #top-menu li.et_pb_button.et_pb_button_secondary a,
#page-container #main-header #top-menu li.menu-item-53 a {
color: var(--ds-color-text-strong, #09090B) !important;
font-family: var(--ds-font-body) !important;
font-weight: 500 !important;
font-size: 14px !important;
text-decoration: none !important;
}
#page-container #main-header #top-menu li.et_pb_button.et_pb_button_secondary:hover,
#page-container #main-header #top-menu li.menu-item-53:hover {
background-color: var(--ds-color-surface-raised, #F6EFEA) !important;
}
/* Mobile nav shape has to exist before the deferred Divi sheet arrives.
Otherwise the full link row paints in document flow and then collapses. */
@media (max-width: 980px) {
body.et_fixed_nav #main-header #top-menu {
display: none !important;
}
body.et_fixed_nav #main-header #et_mobile_nav_menu {
display: block !important;
}
body.et_fixed_nav.et_header_style_left #main-header .logo_container {
padding: 0 5% !important;
}
body.et_fixed_nav #main-header #et-top-navigation {
padding-right: 5% !important;
}
body.et_fixed_nav #main-header .mobile_menu_bar {
margin: 0.5em 0 !important;
padding-bottom: 0 !important;
}
}
@media (min-width: 981px) {
body.et_fixed_nav #main-header #et_mobile_nav_menu {
display: none !important;
}
}
/* Footer wordmark is an SVG. Late CSS was flipping height to auto and
Lighthouse scored the resulting body shift. Reserve the final box. */
.site-footer__wordmark {
width: 83px !important;
height: 24px !important;
max-width: 83px !important;
aspect-ratio: 69 / 20;
}
/* /assets/css/system/nav-standalone.css */
/*
Standalone nav — design system
The shared nav (partials/header.html) was built for Divi pages, which load
Divi's base theme CSS. Hand-built pages (About, Letters) don't, so this file
reproduces that base layer. Add `ds-standalone-nav` to to use it, along
with the Divi body classes the customizer CSS keys off (et_header_style_left,
et_button_no_icon, etc.). Measured to match /resume/ to the pixel at 375-1440px.
*/
/* ── Nav — base positioning Divi normally provides via theme CSS ──────────── */
body.ds-standalone-nav #main-header {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 99999;
background: transparent;
}
/*
The floating "glass pill" look lives in critical.css (.et_menu_container:
display:flex; width:90%; top:2em — logo left, nav right). But critical.css
only restyles the nav; it relies on Divi's BASE nav layout (inline theme CSS
on full Divi pages) for the fundamentals: centering the pill, laying the menu
items out horizontally, and showing the hamburger only on mobile. This
hand-built page never loaded that base layer, so the menu stacked vertically,
the mobile hamburger showed on desktop, and the pill sat flush left/top.
The rules below reproduce that base layer (scoped to this page's header) so
the nav matches the home page. critical.css's !important rules still win for
the pill styling itself.
*/
/*
Divi's theme options set a custom button icon — the glyph is literally "$"
(et-divi-customizer-global.min.css: `.et_pb_button:after{content:'$'}`).
Full Divi pages hide it via `.et_button_no_icon .et_pb_button:after{display:none}`,
which ships in Divi's inline reset. This hand-built page has the
`et_button_no_icon` body class but never loads that reset, so the "$" leaked
out after every .et_pb_button — most visibly the "Join the Newsletter" nav
button. Reproduce the suppression so the nav matches the other pages. */
body.ds-standalone-nav .et_pb_button::after,
body.ds-standalone-nav .et_pb_button::before {
content: none !important;
display: none !important;
}
/* Pill: relative positioning makes critical.css's `top: 2em` apply, and auto
margins center its 90% width. */
body.ds-standalone-nav #main-header,
body.ds-standalone-nav #main-header *,
body.ds-standalone-nav #main-header *::before,
body.ds-standalone-nav #main-header *::after {
box-sizing: border-box;
}
body.ds-standalone-nav #main-header .container.et_menu_container {
position: relative;
margin-left: auto;
margin-right: auto;
}
/*
Logo. Divi's base CSS centers the wordmark with an inline-block helper span
and a 23px header line-height; on full Divi pages common.js also sizes it.
This page loads neither, so reproduce the result (23px tall, centered). */
body.ds-standalone-nav #main-header {
line-height: 23px;
}
body.ds-standalone-nav #main-header span.logo_helper {
display: inline-block;
height: 100%;
vertical-align: middle;
width: 0;
}
body.ds-standalone-nav #main-header #logo {
display: inline-block;
vertical-align: middle;
height: 23px !important;
max-height: none !important;
width: auto !important;
margin-bottom: 0;
}
/* Desktop (≥981px): reproduce Divi's base nav layout exactly (inline-block
items, line-height 0 on the list, 1em on items) so this page's nav matches
every other page to the pixel. The link padding (10px 12px) comes from the
customizer CSS this page does load. Measured against /resume/ at 1280px. */
@media all and (min-width: 981px) {
/* The customizer pads #et-top-navigation and its links by 15px on desktop;
Divi's common.js normally cancels that. Zero the wrapper padding here. */
body.ds-standalone-nav #main-header #et-top-navigation {
display: block;
float: right;
padding: 0 !important;
font-weight: 600;
}
body.ds-standalone-nav #main-header #top-menu-nav {
display: block;
float: left;
line-height: 0;
}
body.ds-standalone-nav #main-header #top-menu {
display: block;
float: left;
line-height: 0;
/* Reset the browser's default margin and padding-inline-start, which
Divi's base CSS zeroes on full pages. */
margin: 0;
padding: 0;
}
body.ds-standalone-nav #main-header #top-menu li {
display: inline-flex;
align-items: center;
position: relative;
font-size: 14px;
line-height: 1em;
}
body.ds-standalone-nav #main-header #top-menu a {
display: block;
position: relative;
text-decoration: none;
}
/* Plain links: 10px 12px matches the homepage. The customizer used to
supply the horizontal 12px; letters no longer load that file. */
body.ds-standalone-nav #main-header #top-menu > li:not(.et_pb_button):not(.site-nav-workshop) > a {
padding: 10px 12px !important;
}
/* Join the Newsletter pill: Divi core sets .et_pb_button line-height:1.7em
(≈23.8px), which gives the button its full height. This page doesn't load
that base, so the pill rendered flat (22px vs 32px on other pages). */
body.ds-standalone-nav #main-header #top-menu li.et_pb_button > a {
line-height: 1.7em;
}
/* Hamburger hidden on desktop */
body.ds-standalone-nav #main-header #et_mobile_nav_menu {
display: none;
}
}
/* Mobile (≤980px): swap the menu for the hamburger (matches Divi's breakpoint) */
@media all and (max-width: 980px) {
body.ds-standalone-nav.et_header_style_left #main-header .logo_container {
padding: 0 5%;
}
body.ds-standalone-nav #main-header #top-menu {
display: none;
}
body.ds-standalone-nav #main-header #et_mobile_nav_menu {
display: block;
}
/* The customizer insets the hamburger with 5% right padding. */
body.ds-standalone-nav #main-header #et-top-navigation {
padding-right: 5%;
}
body.ds-standalone-nav #main-header .mobile_menu_bar {
position: relative;
display: block;
line-height: 0;
/* .5em matches the customizer, which is what makes the closed pill 63px tall. */
margin: 0.5em 0;
padding-bottom: 0;
}
body.ds-standalone-nav #main-header .mobile_nav .select_page {
display: none;
}
}
/* /assets/css/system/pages/letters.css */
/* ─────────────────────────────────────────────────────────────────────────────
Letters — /letters/ index + /letters// posts
Layout and rhythm follow letters.thedankoe.com (measured at 1440px):
index 1100px feature panel (400px tall), 4-up "Most popular" cards,
600px latest column + 320px sidebar, 17/24 bold section labels
post 728px column, title right under the nav, 18/24 subtitle 12px below,
36px avatar byline 20px below, divider bar, body 19/30.4 (1.6),
20px between paragraphs, section heads 26px above / 16px below
Type and colour come from the design system (tokens.css, headings.css).
───────────────────────────────────────────────────────────────────────────── */
.letters-page #page-container {
background: var(--ds-color-page);
}
.letters,
.letter {
--letters-gold: #c59060;
--letters-measure: 728px;
--letters-wide: 1100px;
--letters-main: 600px;
--letters-side: 320px;
box-sizing: border-box;
padding: 120px 24px 96px;
}
/* Section label: "Most popular", "Latest", "Keep reading" */
#page-container .letters-label {
margin: 0;
font-family: var(--ds-font-body) !important;
font-size: 17px !important;
line-height: 24px !important;
font-weight: 700 !important;
text-transform: none !important;
letter-spacing: normal;
color: var(--ds-color-text-strong) !important;
}
.letters-list__meta,
.letters-feature__eyebrow {
font-family: var(--ds-font-mono);
font-size: 11px;
line-height: 16px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ds-color-faint);
}
/* ── Typographic tile (fallback when a letter has no cover) ───────────────── */
.letters-tile {
display: flex;
align-items: flex-end;
box-sizing: border-box;
padding: 10px;
border-radius: var(--ds-radius-sm);
background: var(--ds-color-dark);
color: var(--ds-color-on-dark);
font-family: var(--ds-font-mono);
font-size: 9px;
letter-spacing: 0.14em;
text-transform: uppercase;
overflow: hidden;
position: relative;
}
.letters-tile::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(120% 90% at 100% 0%, rgba(197, 144, 96, 0.55), transparent 60%);
}
.letters-tile span { position: relative; }
.letters-tile--kickoffs::before { background: radial-gradient(120% 90% at 0% 0%, rgba(245, 217, 176, 0.45), transparent 65%); }
.letters-tile--ai-workflow::before { background: radial-gradient(120% 90% at 50% 0%, rgba(36, 200, 220, 0.35), transparent 60%); }
.letters-tile--career::before { background: radial-gradient(120% 90% at 100% 100%, rgba(197, 144, 96, 0.45), transparent 60%); }
/* ── Index: topic chips ──────────────────────────────────────────── */
.letters-chips {
margin: 16px 0 8px;
display: flex;
align-items: center;
gap: 8px;
overflow-x: auto;
scrollbar-width: none;
-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
padding-right: 32px;
}
.letters-chips::-webkit-scrollbar { display: none; }
.letters-chips button {
flex: none;
height: 40px;
padding: 0 18px;
border: 0;
border-radius: 999px;
background: var(--ds-color-surface-inset);
font: 600 14px/1 var(--ds-font-body);
color: var(--ds-color-text-strong);
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}
.letters-chips button:hover { background: #E4D9D0; }
.letters-chips button[aria-selected="true"] {
background: var(--ds-color-text-strong);
color: #fff;
}
.letters-chips__divider {
flex: none;
width: 1px;
height: 24px;
margin: 0 4px;
background: var(--ds-color-border);
}
.letters-empty {
padding: 32px 0;
color: var(--ds-color-muted);
}
/* ── Index: feature panel (1100 x 400, text bottom-left over the art) ─────── */
.letters-feature {
position: relative;
display: block;
max-width: var(--letters-wide);
height: 400px;
margin: 0 auto 48px;
border-radius: var(--ds-radius-xl);
overflow: hidden;
background: var(--ds-color-dark);
color: var(--ds-color-on-dark);
text-decoration: none;
isolation: isolate;
}
.letters-feature__art {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0;
padding: 0;
z-index: -1;
}
.letters-feature__art.letters-tile span { display: none; }
/* Cover image: sits on the right so the drawing never runs under the text */
img.letters-feature__art {
left: auto;
right: 0;
width: 56%;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
}
.letters-feature:has(img.letters-feature__art)::after { display: none; }
.letters-feature:has(img.letters-feature__art) .letters-feature__text { width: min(440px, calc(100% - 96px)); }
.letters-feature::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.25) 55%, transparent 100%);
}
.letters-feature__text {
position: absolute;
left: 48px;
bottom: 48px;
width: min(520px, calc(100% - 96px));
display: flex;
flex-direction: column;
}
.letters-feature__eyebrow {
color: rgba(255, 255, 255, 0.7);
margin-bottom: 12px;
}
.letters-feature__title {
font-family: var(--ds-font-display);
font-weight: var(--ds-font-weight-heading, 700);
font-size: 40px;
line-height: 1;
text-transform: uppercase;
color: #ffffff;
}
.letters-feature__sub {
margin-top: 8px;
font-size: 15px;
line-height: 20px;
color: rgba(255, 255, 255, 0.75);
}
.letters-feature__cta {
color: #ffffff;
margin-top: 24px;
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--ds-font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.letters-feature__arrow {
width: 36px;
height: 36px;
border-radius: 50%;
background: #ffffff;
color: #000000;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--ds-font-body);
font-size: 16px;
letter-spacing: 0;
transition: transform 0.2s ease;
}
.letters-feature:hover .letters-feature__arrow { transform: translateX(3px); }
/* ── Index: most popular (4-up, title + 60px thumb) ───────────────────────── */
.letters-popular {
max-width: var(--letters-wide);
margin: 0 auto 64px;
}
.letters-row-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.letters-viewall {
font-family: var(--ds-font-mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ds-color-muted);
text-decoration: none;
}
.letters-viewall:hover { color: var(--ds-color-text-strong); }
.letters-popular__grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 32px;
}
.letters-popular__grid a {
display: flex;
flex-direction: column;
gap: 14px;
text-decoration: none;
color: inherit;
}
.letters-popular__text {
display: flex;
flex-direction: column;
gap: 4px;
}
.letters-popular__title {
font-size: 15px;
line-height: 20px;
font-weight: 700;
color: var(--ds-color-text-strong);
}
.letters-popular__grid a:hover .letters-popular__title { text-decoration: underline; text-underline-offset: 3px; }
.letters-popular__thumb {
width: 100%;
aspect-ratio: 16 / 10;
height: auto;
object-fit: cover;
border-radius: var(--ds-radius-lg, 16px);
transition: transform 0.35s ease;
}
.letters-popular__grid a:hover .letters-popular__thumb { transform: scale(0.98); }
.letters-popular__thumb.letters-tile span { display: none; }
.letters-popular__cat {
font-size: 13px;
line-height: 18px;
color: var(--ds-color-muted);
}
/* ── Index: latest (600) + sidebar (320) ──────────────────────────────────── */
.letters-columns {
max-width: calc(var(--letters-main) + var(--letters-side) + 32px);
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, var(--letters-main)) var(--letters-side);
gap: 32px;
align-items: start;
}
.letters-latest__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
padding-bottom: 12px;
border-bottom: 1px solid var(--ds-color-border);
}
.letters-tabs {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.letters-tabs button {
height: 32px;
padding: 0 12px;
border: 0;
border-radius: var(--ds-radius-sm);
background: transparent;
font: 600 13px/20px var(--ds-font-body);
color: var(--ds-color-muted);
cursor: pointer;
}
.letters-tabs button[aria-selected="true"] {
background: var(--ds-color-surface-inset);
color: var(--ds-color-text-strong);
}
.letters-sidebar {
position: sticky;
top: 112px;
}
.letters-solo {
max-width: var(--letters-measure);
margin: 0 auto;
}
.letters-sidebar .letter-signup,
.letters-solo .letter-signup { margin: 0; }
/* ── Shared list (latest, related): 19/26 title, 15/20 dek, 160x107 thumb ─── */
.letters-list {
list-style: none;
margin: 0;
padding: 0;
}
.letters-list__item {
border-bottom: 1px solid var(--ds-color-border);
}
.letters-list__link {
display: grid;
grid-template-columns: minmax(0, 1fr) 160px;
gap: 24px;
align-items: start;
padding: 20px 0;
text-decoration: none;
color: inherit;
}
.letters-list__text {
display: flex;
flex-direction: column;
gap: 4px;
}
.letters-list__title {
font-size: 19px;
line-height: 26px;
font-weight: 700;
color: var(--ds-color-text-strong);
}
.letters-list__link:hover .letters-list__title {
text-decoration: underline;
text-underline-offset: 3px;
}
.letters-list__sub {
font-size: 15px;
line-height: 20px;
color: var(--ds-color-muted);
}
.letters-list__meta { margin-top: 4px; }
.letters-list__thumb {
width: 160px;
height: 107px;
object-fit: cover;
}
/* ── Post: header ─────────────────────────────────────────────────────────── */
.letter__article,
.letters-related {
max-width: var(--letters-measure);
margin: 0 auto;
}
.letter__header {
padding-top: 0;
}
#page-container .letter__title {
margin: 0;
font-size: 44px !important;
line-height: 1.02 !important;
}
#page-container .letter__subtitle {
margin: 12px 0 0;
font-size: 18px;
line-height: 24px;
font-weight: 400;
color: var(--ds-color-muted);
}
.letter__byline {
display: flex;
align-items: center;
gap: 12px;
margin-top: 20px;
}
.letter__byline p {
margin: 0;
display: flex;
flex-direction: column;
font-family: var(--ds-font-mono);
font-size: 11px;
line-height: 20px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.letter__byline a {
color: var(--ds-color-text-strong);
text-decoration: none;
}
.letter__byline a:hover { text-decoration: underline; }
.letter__byline time { color: var(--ds-color-faint); }
.letter__avatar {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
object-position: 50% 20%;
}
.letter__avatar--lg { width: 56px; height: 56px; }
.letter__bar {
display: flex;
align-items: center;
justify-content: space-between;
height: 40px;
margin-top: 16px;
border-top: 1px solid var(--ds-color-border);
border-bottom: 1px solid var(--ds-color-border);
font-size: 13px;
color: var(--ds-color-faint);
}
.letter__bar a {
color: var(--ds-color-muted);
text-decoration: none;
}
.letter__bar a:hover { color: var(--ds-color-text-strong); }
.letter__share {
height: 28px;
padding: 0 12px;
border: 1px solid var(--ds-color-border);
border-radius: var(--ds-radius-pill);
background: transparent;
font: 500 13px var(--ds-font-body);
color: var(--ds-color-text-strong);
cursor: pointer;
}
.letter__share:hover { background: var(--ds-color-surface-raised); }
.letter__cover {
width: 100%;
height: auto;
margin-top: 24px;
border-radius: var(--ds-radius-md);
}
/* ── Post: in-this-letter ─────────────────────────────────────────────────── */
.letter-toc {
margin: 24px 0 0;
padding: 16px 20px;
background: var(--ds-color-surface-raised);
border-radius: var(--ds-radius-md);
}
.letter-toc__label {
margin: 0 0 6px;
font-family: var(--ds-font-mono);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ds-color-faint);
}
.letter-toc ol {
margin: 0;
padding-left: 1.2em;
}
.letter-toc li { margin: 2px 0; font-size: 15px; line-height: 24px; }
.letter-toc a { color: var(--ds-color-text); text-decoration: none; }
.letter-toc a:hover { text-decoration: underline; }
/* ── Post: body (19px / 30.4px, 20px paragraph gap) ───────────────────────── */
.letter__body {
padding-top: 32px;
}
#page-container .letter__body p,
#page-container .letter__body li {
font-size: 19px;
line-height: 1.6;
font-weight: 400;
color: var(--ds-color-text);
}
.letter__body p { margin: 0 0 20px; }
.letter__body ul,
.letter__body ol { margin: 0 0 20px; padding-left: 32px; }
.letter__body li { margin: 8px 0 0; }
.letter__body li:first-child { margin-top: 0; }
.letter__body strong { color: var(--ds-color-text-strong); font-weight: 700; }
.letter__body a {
color: var(--ds-color-text-strong);
text-decoration: underline;
text-decoration-color: var(--letters-gold);
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
/* Body headings: sentence case in the body face, close to the text they introduce
(more space above than below, so each heading groups with its own section). */
#page-container .letter__body h2,
#page-container .letter__body h3 {
padding: 0 !important;
font-family: var(--ds-font-body) !important;
font-weight: 700 !important;
text-transform: none !important;
letter-spacing: -0.015em !important;
color: var(--ds-color-text-strong);
scroll-margin-top: 112px;
}
#page-container .letter__body h2 {
margin: 56px 0 12px !important;
font-size: 28px !important;
line-height: 1.25 !important;
}
#page-container .letter__body h3 {
margin: 36px 0 8px !important;
font-size: 21px !important;
line-height: 1.35 !important;
}
#page-container .letter__body h2 + h3 { margin-top: 16px !important; }
.letter__body blockquote {
margin: 20px 0;
padding: 0 0 0 20px;
border-left: 3px solid var(--letters-gold);
}
.letter__body blockquote p { color: var(--ds-color-text-strong) !important; }
.letter__body hr {
border: 0;
border-top: 1px solid var(--ds-color-border);
margin: 40px 0;
}
.letter__body code {
font-family: var(--ds-font-mono);
font-size: 0.85em;
background: var(--ds-color-surface-inset);
padding: 0.1em 0.35em;
border-radius: 4px;
}
/* Code block: Tailark Quartz "Code Demo 4", dark theme, matched 1:1 to
tailark.com/view/code-demo-4?theme=dark (card, editor, tab shape, vesper tokens).
Markup from scripts/build-letters.mjs, behaviour in /assets/js/code-block.js */
.cb {
--cb-card: #0b0b0d;
--cb-editor: #0e0e10;
--cb-line: rgba(255, 255, 255, 0.07);
--cb-ring: rgba(255, 255, 255, 0.075);
--cb-fg: #ffffff;
--cb-fg-75: rgba(255, 255, 255, 0.75);
--cb-hover: rgba(255, 255, 255, 0.05);
--cb-icon: #e17100; /* amber-600 */
--cb-orange: #ffc799; /* vesper keys, numbers */
--cb-mint: #99ffe4; /* vesper strings */
--cb-muted: #a0a0a0; /* vesper punctuation */
--cb-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
position: relative;
margin: 32px 0;
padding: 0 4px 4px;
overflow: hidden;
background: var(--cb-card);
color: var(--cb-fg);
border-radius: 18px;
box-shadow: 0 0 0 1px var(--cb-ring), 0 10px 15px -3px rgba(0, 0, 0, 0.094), 0 4px 6px -4px rgba(0, 0, 0, 0.094);
color-scheme: dark;
}
/* Tab bar: 40px tall, the active tab drops 1px over the editor's top border */
.cb-bar {
position: relative;
z-index: 2;
display: flex;
align-items: flex-end;
gap: 8px;
height: 40px;
}
.cb-tabs {
display: flex;
align-items: flex-end;
gap: 4px;
height: 100%;
min-width: 0;
flex: 1;
}
.cb .cb-tab,
.cb .cb-copy {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0;
padding: 0 12px;
border: 0;
background: transparent;
color: var(--cb-fg-75);
font-family: var(--cb-mono);
font-size: 12px;
font-weight: 400;
line-height: 16px;
letter-spacing: normal;
text-transform: none;
white-space: nowrap;
cursor: pointer;
outline: none;
}
.cb .cb-tab {
height: 36px;
margin-bottom: -1px;
border: 1px solid transparent;
border-bottom: 0;
border-radius: 14px 14px 0 0;
}
.cb .cb-tab:first-child { border-top-left-radius: 14px; }
.cb .cb-tab__icon { flex: none; color: var(--cb-icon); }
.cb .cb-tab[aria-selected="false"]:hover,
.cb .cb-tab[aria-selected="false"]:focus-visible {
background: var(--cb-hover);
border-radius: 10px;
height: 32px;
margin-bottom: 3px;
}
.cb .cb-tab[aria-selected="true"] {
z-index: 1;
background: var(--cb-editor);
border-color: var(--cb-line);
}
/* Concave corners where the active tab flows into the editor */
.cb .cb-tab[aria-selected="true"]::before,
.cb .cb-tab[aria-selected="true"]::after {
content: "";
position: absolute;
bottom: 0;
width: 16px;
height: 16px;
pointer-events: none;
}
.cb .cb-tab[aria-selected="true"]::after {
right: -17px;
background: radial-gradient(circle at 100% 0, var(--cb-card) 15px, var(--cb-line) 15px, var(--cb-line) 16px, var(--cb-editor) 16.5px);
}
.cb .cb-tab[aria-selected="true"]::before {
left: -17px;
background: radial-gradient(circle at 0 0, var(--cb-card) 15px, var(--cb-line) 15px, var(--cb-line) 16px, var(--cb-editor) 16.5px);
}
.cb .cb-tab[aria-selected="true"]:first-child::before {
left: -1px;
bottom: -16px;
border-left: 1px solid var(--cb-line);
background: var(--cb-editor);
}
.cb .cb-copy {
flex: none;
height: 32px;
margin-bottom: 4px;
border-radius: 10px;
}
.cb .cb-copy:hover,
.cb .cb-copy:focus-visible { background: var(--cb-hover); color: var(--cb-fg); }
.cb-copy__done { display: none; }
.cb.is-copied .cb-copy { color: var(--cb-mint); }
.cb.is-copied .cb-copy__icon { display: none; }
.cb.is-copied .cb-copy__done { display: block; }
.cb .cb-tab:focus-visible,
.cb .cb-copy:focus-visible,
.cb-scroll:focus-visible { box-shadow: 0 0 0 2px var(--ds-color-focus, #2563eb); }
/* Editor: h-96 max, scrolls inside, fades at an edge only while there's more */
.cb-panel {
position: relative;
background: var(--cb-editor);
border: 1px solid var(--cb-line);
border-radius: 14px;
overflow: hidden;
}
.cb.is-first-active .cb-panel { border-top-left-radius: 0; }
.cb-panel[hidden] { display: none; }
.cb-scroll {
max-height: 384px;
overflow: auto;
outline: none;
scrollbar-width: none;
--cb-fade-top: #000;
--cb-fade-bottom: #000;
-webkit-mask-image: linear-gradient(to bottom, var(--cb-fade-top), #000 20%, #000 80%, var(--cb-fade-bottom));
mask-image: linear-gradient(to bottom, var(--cb-fade-top), #000 20%, #000 80%, var(--cb-fade-bottom));
}
.cb-scroll::-webkit-scrollbar { display: none; }
.cb-scroll.fade-top { --cb-fade-top: transparent; }
.cb-scroll.fade-bottom { --cb-fade-bottom: transparent; }
.letter__body .cb-pre {
margin: 0;
padding: 8px 8px 8px;
background: none;
color: var(--cb-fg);
border: 0;
border-radius: 0;
overflow: visible;
font-family: var(--cb-mono);
font-size: 13px;
line-height: 17px;
white-space: pre;
counter-reset: cb-line;
tab-size: 4;
}
.letter__body .cb-pre code {
display: block;
min-width: max-content;
background: none;
padding: 0;
color: inherit;
font-family: inherit;
font-size: inherit;
border-radius: 0;
}
.cb-line {
display: grid;
grid-template-columns: 48px 1fr;
min-height: 17px;
}
.cb-line::before {
counter-increment: cb-line;
content: counter(cb-line);
width: 24px;
font-size: 12px;
text-align: right;
opacity: 0.35;
user-select: none;
-webkit-user-select: none;
}
.cb-tok-head { color: var(--cb-orange); }
.cb-tok-key { color: var(--cb-orange); }
.cb-tok-ph { color: var(--cb-mint); }
.cb-tok-mark { color: var(--cb-muted); }
.cb-tok-strong { font-weight: 500; }
/* Table: Tailark Mist "Features 1", matched to oss.tailark.com/view/mist-features-1.
Gray tray (foreground/5, 24px radius) > white faux-browser card > fully gridded table. */
.letter-table {
--lt-ink: #09090b;
--lt-grid: #e4e4e7;
margin: 32px 0 40px;
}
.letter-table__card {
position: relative;
padding: 24px;
overflow: hidden;
background: #fff;
border: 1px solid transparent;
border-radius: 12px;
box-shadow:
inset 0 0 0 1px #fff,
0 0 0 1px rgba(9, 9, 11, 0.05),
0 2px 6px -2px rgba(9, 9, 11, 0.04),
0 16px 40px -16px rgba(9, 9, 11, 0.12);
}
.letter-table__dots {
display: flex;
gap: 6px;
margin-bottom: 24px;
}
.letter-table__dots span {
width: 8px;
height: 8px;
box-sizing: border-box;
background: #f4f4f5;
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 999px;
}
.letter-table__scroll { overflow-x: auto; }
.letter__body .letter-table table {
width: 100%;
margin: 0;
border-collapse: collapse;
color: var(--lt-ink);
font-family: var(--ds-font-body);
font-size: 14px;
line-height: 20px;
}
.letter__body .letter-table th,
.letter__body .letter-table td {
text-align: left;
vertical-align: middle;
border: 1px solid var(--lt-grid);
}
.letter__body .letter-table thead { background: #f6efe9; } /* warm, between --ds-color-page and --ds-color-surface-inset */
.letter__body .letter-table th {
padding: 12px;
font-weight: 500;
font-size: 14px;
letter-spacing: normal;
text-transform: none;
color: var(--lt-ink);
background: none;
}
.letter__body .letter-table td { padding: 8px; }
.letter__body .letter-table td strong { font-weight: 600; }
/* ── Signup + CTA blocks ──────────────────────────────────────────────────── */
.letter-signup,
.letter-cta {
margin: 40px 0;
padding: 28px;
border-radius: var(--ds-radius-lg);
}
.letter-signup {
background: var(--ds-color-dark);
border: 1px solid var(--ds-color-border-on-dark);
}
.letter-cta {
background: var(--ds-color-dark);
color: var(--ds-color-on-dark);
}
#page-container .letter-signup__title,
#page-container .letter-cta__title {
margin: 4px 0 8px;
font-family: var(--ds-font-heading);
/* Same treatment as the letter H1/H2s: bold, tight tracking */
font-weight: 700 !important;
letter-spacing: -0.05em;
font-size: 28px !important;
line-height: 1.02 !important;
text-transform: uppercase;
}
#page-container .letter-cta__title { font-size: 40px !important; line-height: 0.98 !important; margin-bottom: 12px; }
@media (max-width: 720px) { #page-container .letter-cta__title { font-size: 32px !important; } }
#page-container .letter-signup__title { color: var(--ds-color-on-dark) !important; }
#page-container .letter-cta__title { color: var(--ds-color-on-dark) !important; }
/* Parent class keeps these above `.letter__body p` when the blocks sit inside the article */
#page-container .letter-signup .letter-signup__body,
#page-container .letter-cta .letter-cta__body {
margin: 0 0 16px;
font-size: 15px;
line-height: 20px;
}
#page-container .letter-signup .letter-signup__body { color: var(--ds-color-on-dark-muted); }
.letter-signup .letter-signup__error { color: #ff8a80; }
#page-container .letter-cta .letter-cta__body { color: var(--ds-color-on-dark-muted); }
.letter-signup__form {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.letter-signup__input {
flex: 1 1 180px;
min-width: 0;
height: 44px;
padding: 0 14px;
border: 1px solid var(--ds-color-border);
border-radius: var(--ds-radius-sm);
background: var(--ds-color-page);
font: 400 15px var(--ds-font-body);
color: var(--ds-color-text);
}
.letter-signup__input:focus {
outline: 2px solid var(--ds-color-text-strong);
outline-offset: 1px;
}
.letter-signup__btn,
.letter-cta__btn {
height: 44px;
padding: 0 18px;
border: 0;
border-radius: var(--ds-radius-sm);
font: 600 15px var(--ds-font-body);
cursor: pointer;
display: inline-flex;
align-items: center;
text-decoration: none !important;
}
.letter-signup__btn {
background: var(--ds-color-dark);
color: var(--ds-color-on-dark);
}
.letter-signup__btn:disabled { opacity: 0.6; cursor: default; }
.letter-cta__btn {
background: #ffffff;
color: #000000 !important;
border-radius: var(--ds-radius-pill);
}
/* CTA with a product mock on the right */
.letter-cta--art {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
gap: 32px;
align-items: center;
overflow: hidden;
}
.letter-cta__art {
position: relative;
display: flex;
justify-content: center;
}
.letter-cta__art::before {
content: "";
position: absolute;
inset: -20% -10%;
background: radial-gradient(closest-side, rgba(197, 144, 96, 0.28), transparent 70%);
pointer-events: none;
}
.cta-card {
position: relative;
width: 100%;
max-width: 320px;
padding: 14px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 16px;
background: linear-gradient(180deg, #17171a, #0e0e10);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
font: 400 13px/1.35 var(--ds-font-body);
color: var(--ds-color-on-dark);
transform: rotate(-1.5deg);
}
.cta-card__head {
display: flex;
align-items: center;
gap: 8px;
margin: 2px 2px 12px;
font-weight: 600;
font-size: 12px;
color: var(--ds-color-on-dark-muted);
}
.cta-card__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #C59060;
box-shadow: 0 0 0 3px rgba(197, 144, 96, 0.2);
}
.cta-step {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 10px;
border-radius: 10px;
}
.cta-step + .cta-step { margin-top: 4px; }
.cta-step--done { background: rgba(255, 255, 255, 0.04); }
.cta-step--live {
background: rgba(197, 144, 96, 0.12);
border: 1px solid rgba(197, 144, 96, 0.35);
}
.cta-step__ico {
flex: none;
display: grid;
place-items: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: rgba(197, 144, 96, 0.18);
color: #E9B989;
}
.cta-step__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cta-step__title { font-weight: 600; }
.cta-step__meta { font-size: 11.5px; color: var(--ds-color-on-dark-muted); }
.cta-step__state {
font-size: 11px;
color: var(--ds-color-on-dark-muted);
}
.cta-step--live .cta-step__state { color: #E9B989; }
.cta-spin {
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid rgba(233, 185, 137, 0.35);
border-top-color: #E9B989;
animation: cta-spin 1s linear infinite;
}
@keyframes cta-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cta-spin { animation: none; } }
.cta-msg {
max-width: 88%;
padding: 8px 11px;
border-radius: 12px;
margin-bottom: 6px;
}
.cta-msg--ai {
background: rgba(255, 255, 255, 0.06);
border-bottom-left-radius: 4px;
}
.cta-msg--you {
margin-left: auto;
background: #C59060;
color: #000;
border-bottom-right-radius: 4px;
}
.cta-step--result { margin-top: 10px; border: 1px solid rgba(255, 255, 255, 0.08); }
@media (max-width: 900px) {
.letter-cta--art { display: block; }
.letter-cta__art { display: none; }
}
.letter-signup__error {
flex-basis: 100%;
margin: 0;
font-size: 14px;
color: var(--ds-color-danger);
}
.letter-signup__error:empty { display: none; }
.letters-sidebar .letter-signup { padding: 24px; }
.letters-sidebar #page-container .letter-signup__title,
#page-container .letters-sidebar .letter-signup__title { font-size: 24px !important; }
.letter-signup__btn span { margin-left: 6px; transition: transform var(--ds-dur-fast, 150ms) var(--ds-ease-out, ease-out); }
.letter-signup__btn:hover span { transform: translateX(3px); }
/* Pill field: input + button in one white capsule, same as the /newsletter/ hero form */
.letter-signup__field {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 8px;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 999px;
box-shadow: 0 5px 40px rgba(0, 0, 0, 0.05);
transition: border-color 0.35s, box-shadow 0.35s;
}
.letter-signup__field:hover,
.letter-signup__field:focus-within {
border-color: #c59060;
box-shadow: 0 0 0 6px rgba(197, 144, 96, 0.2), 0 5px 40px rgba(0, 0, 0, 0.05);
}
.letter-signup .letter-signup__field .letter-signup__input {
flex: 1 1 auto;
min-width: 0;
height: 44px;
padding: 0 14px;
border: 0;
border-radius: 999px;
background: transparent;
box-shadow: none;
font: 400 15px var(--ds-font-body);
}
.letter-signup .letter-signup__field .letter-signup__input::placeholder { color: rgba(0, 0, 0, 0.45); }
.letter-signup .letter-signup__field .letter-signup__input:focus { outline: none; }
.letter-signup .letter-signup__field .letter-signup__btn {
flex: none;
height: 44px;
margin: 0;
padding: 0 20px;
border-radius: 999px;
justify-content: center;
background: #000;
font-weight: 500;
white-space: nowrap;
transition: background-color 0.35s;
}
.letter-signup .letter-signup__field .letter-signup__btn:hover { background: #1a1a1a; }
.letter-signup .letter-signup__field .letter-signup__btn:focus-visible { outline: 2px solid #c59060; outline-offset: 3px; }
/* Stacked: phones and the narrow index sidebar */
.letters-sidebar .letter-signup__field,
.letters-solo .letter-signup__field {
flex-direction: column;
align-items: stretch;
border-radius: 22px;
padding: 10px;
}
@media (max-width: 480px) {
.letter-signup__field { flex-direction: column; align-items: stretch; border-radius: 22px; padding: 10px; }
}
/* Floating variant (in-article + end of letter): warm card, centred copy,
pill form, reader avatars floating round the edges. Parallax: /assets/js/signup-float.js */
.letter-signup--float {
--letter-signup-bg: var(--ds-color-dark);
position: relative;
overflow: hidden;
margin: 56px 0;
padding: 64px 40px 52px;
background: var(--letter-signup-bg);
border: 0;
border-radius: 28px;
text-align: center;
isolation: isolate;
}
.letter-signup--float .letter-signup__inner {
position: relative;
z-index: 1;
max-width: 420px;
margin: 0 auto;
}
#page-container .letter-signup--float .letter-signup__title {
margin: 8px 0 12px;
font-size: 46px !important;
line-height: 0.98 !important;
}
#page-container .letter-signup--float .letter-signup__body {
margin: 0 auto 24px;
max-width: 360px;
}
.letter-signup--float .letter-signup__error { text-align: center; }
.letter-signup__float {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.letter-signup__bubble {
position: absolute;
display: block;
width: var(--size);
height: var(--size);
will-change: transform;
}
.letter-signup__bubble img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 999px;
border: 3px solid #fff;
box-shadow: 0 16px 34px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08);
background: var(--ds-color-surface-inset);
animation:
letter-signup-pop 700ms var(--ds-ease-out, cubic-bezier(0.2, 0.8, 0.2, 1)) both,
letter-signup-bob var(--bob, 7s) ease-in-out var(--delay, 0s) infinite alternate;
animation-delay: var(--pop, 0ms), var(--delay, 0s);
}
.letter-signup__bubble--1 { --size: 76px; left: 4%; top: 10%; --bob: 7s; --delay: -1s; --pop: 0ms; }
.letter-signup__bubble--2 { --size: 60px; left: 11%; bottom: 13%; --bob: 8.5s; --delay: -4s; --pop: 90ms; }
.letter-signup__bubble--3 { --size: 68px; right: 8%; top: 10%; --bob: 6.5s; --delay: -2s; --pop: 180ms; }
.letter-signup__bubble--4 { --size: 84px; right: 4%; bottom: 12%; --bob: 9s; --delay: -6s; --pop: 270ms; }
.letter-signup__bubble--5 { --size: 42px; left: 3%; top: 50%; --bob: 7.5s; --delay: -3s; --pop: 360ms; }
@keyframes letter-signup-bob {
from { transform: translate3d(0, -7px, 0) rotate(-2deg); }
to { transform: translate3d(0, 7px, 0) rotate(2deg); }
}
@keyframes letter-signup-pop {
from { opacity: 0; scale: 0.6; }
to { opacity: 1; scale: 1; }
}
@media (prefers-reduced-motion: reduce) {
.letter-signup__bubble img { animation: none; }
}
/* Not enough side room for the bubbles: hide them, the avatar row still shows */
@media (max-width: 820px) {
.letter-signup__float { display: none; }
.letter-signup--float { padding: 40px 22px 32px; border-radius: 24px; }
#page-container .letter-signup--float .letter-signup__title { font-size: 36px !important; }
}
/* Visually hidden, still read by screen readers (Divi's version isn't loaded here) */
.letters-page .screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ── Author + related ─────────────────────────────────────────────────────── */
.letter__author {
display: flex;
gap: 16px;
align-items: flex-start;
margin-top: 48px;
padding-top: 24px;
border-top: 1px solid var(--ds-color-border);
}
.letter__author-name {
margin: 0 0 4px;
font-weight: 700;
font-size: 15px;
color: var(--ds-color-text-strong);
}
.letter__author-bio {
margin: 0;
font-size: 15px;
line-height: 20px;
color: var(--ds-color-muted);
}
.letters-related { margin-top: 64px; }
.letters-related .letters-label {
padding-bottom: 12px;
border-bottom: 1px solid var(--ds-color-border);
}
/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
.letters-popular__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; }
}
@media (max-width: 980px) {
.letters,
.letter { padding-top: 120px; }
.letters-columns { grid-template-columns: minmax(0, 1fr); max-width: var(--letters-main); gap: 48px; }
.letters-sidebar { position: static; }
}
@media (max-width: 720px) {
.letters,
.letter { padding: 112px 16px 72px; }
.letters-feature { height: 360px; }
/* With a cover: drawing on top, text below it, nothing overlapping */
.letters-feature:has(img.letters-feature__art) { height: auto; }
img.letters-feature__art {
position: static;
display: block;
width: 100%;
height: auto;
aspect-ratio: 3 / 2;
-webkit-mask-image: none;
mask-image: none;
}
.letters-feature:has(img.letters-feature__art) .letters-feature__text {
position: static;
width: auto;
padding: 0 24px 28px;
}
.letters-feature__text { left: 24px; bottom: 24px; width: calc(100% - 48px); }
.letters-feature__title { font-size: 32px; }
.letters-popular__grid { grid-template-columns: minmax(0, 1fr); }
.letters-list__link { grid-template-columns: minmax(0, 1fr) 96px; gap: 16px; padding: 20px 0; }
.letters-list__thumb { width: 96px; height: 64px; }
.letters-list__title { font-size: 17px; line-height: 24px; }
#page-container .letter__title { font-size: 36px !important; }
#page-container .letter__subtitle { font-size: 17px; }
#page-container .letter__body p,
#page-container .letter__body li { font-size: 18px; }
#page-container .letter__body h2 { font-size: 24px !important; margin-top: 44px !important; }
#page-container .letter__body h3 { font-size: 19px !important; }
.letter-table__card { padding: 16px; }
.letter-table__dots { margin-bottom: 16px; }
.letter__body .letter-table th,
.letter__body .letter-table td { min-width: 150px; }
.letter__body .cb-pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.letter__body .cb-pre code { min-width: 0; }
.cb-line { grid-template-columns: 36px 1fr; }
.cb .cb-copy__label { display: none; }
.cb .cb-copy { padding: 0 10px; }
.letter-signup,
.letter-cta { padding: 22px; }
}
/* ── Inline figures ( in a post) ──────────────────────────
Rebuilt from Tailark's illustration primitives (tailark.com/illustrations/flow):
bg-muted tray, bg-illustration cards with ring-1 + shadow-md, h-1 skeleton lines,
foreground/15 connectors with a travelling gradient beam, black/75 node. */
.letter-fig { margin: 36px 0 44px; }
.tk-tray {
display: flex;
justify-content: center;
padding: 48px 32px;
overflow: hidden;
border-radius: 12px;
background: rgba(9, 9, 11, 0.05);
}
#page-container .letter__body .letter-fig figcaption {
margin: 12px 4px 0;
font-size: 14px;
line-height: 20px;
color: var(--ds-color-faint);
}
.tk-stage {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: Inter, var(--ds-font-body);
color: #09090b;
transform: scale(0.95);
}
.tk-lines {
position: absolute;
inset: 0;
margin: 0 auto;
height: 100%;
pointer-events: none;
}
.tk-lines path { stroke: rgba(9, 9, 11, 0.15); stroke-linecap: round; }
.tk-lines .tk-beam, .tk-lines .tk-pulse, .tk-lines .tk-flow { stroke: inherit; }
.tk-card {
position: relative;
z-index: 10;
background: #fff;
border-radius: 12px;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.075),
0 4px 6px -1px rgba(0, 0, 0, 0.065),
0 2px 4px -2px rgba(0, 0, 0, 0.065);
}
/* Skeleton lines (h-1 rounded-full bg-foreground/10) */
.tk-skel { display: flex; flex-direction: column; gap: 6px; }
.tk-row { display: flex; gap: 8px; }
.tk-row--1 { gap: 4px; }
.tk-mt4 { margin-top: 16px; }
.tk-skel i { display: block; height: 4px; border-radius: 999px; background: rgba(9, 9, 11, 0.1); }
.tk-skel .tk-f { flex: 1; }
.tk-skel .tk-w8 { width: 32px; }
.tk-skel .tk-full { width: 100%; }
.tk-skel .tk-3 { width: 33.333%; }
.tk-skel .tk-23 { width: 66.666%; }
/* Merge: three usage cards → node → document */
.tk-stage--merge { min-width: 480px; }
.tk-lines--merge { width: 60%; }
.tk-grid3 { position: relative; z-index: 10; display: grid; grid-template-columns: repeat(3, 112px); gap: 12px; }
.tk-usage { display: flex; flex-direction: column; gap: 12px; padding: 12px; }
.tk-usage__head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.tk-usage__title { font-size: 12px; line-height: 1.25; font-weight: 500; }
.tk-usage__ico { flex: none; width: 14px; height: 14px; color: #09090b; }
.tk-node {
position: relative;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
margin: 96px 0 80px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.75);
box-shadow: 0 0 0 1px #000, 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(8px);
}
.tk-node__ico { width: 24px; height: 24px; color: #E9B989; }
.tk-node--split { margin: 72px 0; }
.tk-node--split .tk-node__ico { width: 20px; height: 20px; }
.tk-doc-wrap { position: relative; }
.tk-doc {
z-index: 1;
display: flex;
flex-direction: column;
gap: 12px;
width: 96px;
box-sizing: border-box;
padding: 12px;
border-radius: 6px 15% 6px 6px;
}
.tk-doc__title { font-size: 12px; font-weight: 600; }
.tk-doc__bar { width: 32px; height: 4px; margin-top: 4px; border-radius: 999px; background: #09090b; }
.tk-tag {
position: absolute;
right: -28px;
bottom: 16px;
z-index: 2;
padding: 2px 6px;
border-radius: 4px;
background: #C59060;
color: #fff;
font-size: 12px;
font-weight: 600;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
box-shadow: 0 10px 15px -3px rgba(120, 72, 30, 0.25), inset 0 0 0 1px rgba(9, 9, 11, 0.15);
}
/* Pills */
.tk-pill { display: flex; align-items: center; gap: 8px; width: fit-content; padding: 6px 12px 6px 6px; border-radius: 999px; white-space: nowrap; }
.tk-pill__label { font-size: 12px; line-height: 16px; font-weight: 600; }
.tk-pill--tile { padding: 4px 12px 4px 4px; border-radius: 12px; }
.tk-pill__sub { font-size: 10px; line-height: 14px; color: rgba(9, 9, 11, 0.5); }
.tk-ico { width: 16px; height: 16px; flex: none; }
.tk-ico--muted { color: #71717a; }
.tk-ico--brown { color: #C59060; }
.tk-tile { position: relative; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; }
.tk-tile::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(9, 9, 11, 0.05); border-radius: 8px; }
.tk-tile--muted { background: rgba(113, 113, 122, 0.1); color: #71717a; }
.tk-tile--brown { background: rgba(197, 144, 96, 0.14); color: #C59060; }
/* Fan: trigger → dark pill → three outputs */
.tk-stage--fan { min-width: 480px; min-height: 264px; }
.tk-lines--fan { width: 80%; }
.tk-fan { position: relative; z-index: 10; display: flex; align-items: center; gap: 48px; }
.tk-dark-pill {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px 6px 6px;
border-radius: 999px;
background: rgba(9, 9, 11, 0.88);
color: #fff;
font-size: 12px;
font-weight: 600;
white-space: nowrap;
box-shadow: 0 0 0 1px #000, 0 10px 15px -3px rgba(0, 0, 0, 0.15), 0 4px 6px -4px rgba(0, 0, 0, 0.15);
backdrop-filter: blur(8px);
}
.tk-outs { display: flex; flex-direction: column; gap: 56px; }
.tk-outs .tk-pill { padding: 8px 16px 8px 12px; }
/* Split: source → node → three outputs */
.tk-stage--split { min-width: 600px; }
.tk-lines--split { width: 50%; }
.tk-split-outs { position: relative; z-index: 10; display: grid; grid-template-columns: repeat(3, 150px); justify-items: center; }
.tk-split-outs .tk-pill { padding: 4px 12px 4px 4px; }
.tk-split-outs .tk-ico { width: 28px; height: 28px; padding: 6px; box-sizing: border-box; border-radius: 999px; background: rgba(113, 113, 122, 0.1); }
.tk-split-outs .tk-ico--brown { background: rgba(197, 144, 96, 0.14); }
/* Beams (Tailark: beam-move, source-to-logo, logo-to-outputs) */
.tk-beam { stroke-width: 1; stroke-dasharray: 80 300; stroke-dashoffset: 680; animation: tk-beam-move 6.4s linear infinite; }
.tk-beam--ink { stroke: #09090b !important; }
.tk-beam--late { animation-delay: 2s; filter: drop-shadow(0 1px 2px rgba(197, 144, 96, 0.45)); }
@keyframes tk-beam-move { 100% { stroke-dashoffset: -780px; } }
.tk-pulse { stroke-width: 1.5; stroke-dasharray: 0.3 2; stroke-dashoffset: 1.3; animation: tk-pulse 2.6s linear infinite; }
.tk-pulse--out { animation-delay: 0.9s; }
@keyframes tk-pulse { 0% { stroke-dashoffset: 1.3; } 100% { stroke-dashoffset: -1; } }
.tk-flow { stroke-dasharray: 4 40; stroke-dashoffset: 40; animation: tk-out 3s linear infinite; }
.tk-flow--in { stroke-dasharray: 4 30; stroke-dashoffset: 30; animation: tk-in 2s linear infinite; }
@keyframes tk-in { 0% { stroke-dashoffset: 400px; } 100% { stroke-dashoffset: 0; } }
@keyframes tk-out { 0% { stroke-dashoffset: 550px; } 10% { stroke-dashoffset: 400px; } 100% { stroke-dashoffset: 0; } }
.lf-armed:not(.is-in) .tk-beam, .lf-armed:not(.is-in) .tk-pulse, .lf-armed:not(.is-in) .tk-flow { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
.tk-beam, .tk-pulse, .tk-flow { animation: none; opacity: 0; }
}
@media (max-width: 760px) {
.tk-tray { padding: 32px 12px; }
.tk-stage--merge { zoom: 0.8; }
.tk-stage--fan { zoom: 0.62; }
.tk-stage--split { zoom: 0.58; }
}
@media (max-width: 480px) {
.tk-stage--merge { zoom: 0.62; }
.tk-stage--fan { zoom: 0.58; }
.tk-stage--split { zoom: 0.55; }
}
/* ── Figures: extra motion ─────────────────────────────────────────────────── */
/* Faster, overlapping beams */
.tk-beam { animation-duration: 4.2s; }
.tk-beam--late { animation-delay: 1.2s; }
.tk-pulse { animation-duration: 1.8s; }
.tk-pulse--out { animation-delay: 0.6s; }
.tk-flow { animation-duration: 2.4s; }
.tk-flow--in { animation-duration: 1.6s; }
/* Node: ping ring + slow breathe */
.tk-node::before,
.tk-node::after {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
border: 1px solid rgba(197, 144, 96, 0.55);
animation: tk-ping 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
pointer-events: none;
}
.tk-node::after { animation-delay: 1.2s; }
@keyframes tk-ping { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(1.9); opacity: 0; } }
.tk-node__ico { animation: tk-breathe 2.4s ease-in-out infinite; }
@keyframes tk-breathe { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(233, 185, 137, 0)); } 50% { transform: scale(1.12); filter: drop-shadow(0 0 6px rgba(233, 185, 137, 0.7)); } }
.tk-dark-pill .tk-ico { animation: tk-wiggle 2.8s ease-in-out infinite; transform-origin: 30% 70%; }
@keyframes tk-wiggle { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-14deg); } 86% { transform: rotate(10deg); } 94% { transform: rotate(-4deg); } }
/* Gentle float on cards and pills, each slightly out of phase */
.tk-usage, .tk-doc, .tk-outs .tk-pill, .tk-split-outs .tk-pill, .tk-stage--split > .tk-pill, .tk-fan > .tk-pill {
animation: tk-float 4.5s ease-in-out infinite;
}
.tk-usage:nth-child(2), .tk-outs .tk-pill:nth-child(2), .tk-split-outs .tk-pill:nth-child(2) { animation-delay: -1.5s; }
.tk-usage:nth-child(3), .tk-outs .tk-pill:nth-child(3), .tk-split-outs .tk-pill:nth-child(3) { animation-delay: -3s; }
.tk-doc { animation-delay: -0.8s; }
@keyframes tk-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
/* Skeleton shimmer */
.tk-skel i {
background: linear-gradient(90deg, rgba(9, 9, 11, 0.1) 0%, rgba(9, 9, 11, 0.1) 40%, rgba(197, 144, 96, 0.35) 50%, rgba(9, 9, 11, 0.1) 60%, rgba(9, 9, 11, 0.1) 100%);
background-size: 300% 100%;
animation: tk-shimmer 2.8s linear infinite;
}
@keyframes tk-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -50% 0; } }
/* RESULT tag and the fix icon */
.tk-tag { animation: tk-tag 3.2s ease-in-out infinite; transform-origin: left center; }
@keyframes tk-tag { 0%, 60%, 100% { transform: rotate(0) scale(1); } 68% { transform: rotate(-6deg) scale(1.12); } 76% { transform: rotate(4deg) scale(1.05); } 84% { transform: rotate(0) scale(1); } }
.tk-split-outs .tk-ico--brown { animation: tk-spin 3.2s cubic-bezier(0.6, 0, 0.4, 1) infinite; }
@keyframes tk-spin { 0%, 55% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
.tk-outs .tk-ico--brown { animation: tk-nudge 2.4s ease-in-out infinite; }
@keyframes tk-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(2px); } }
/* Entrance: cards rise in, outputs pop in after the node */
.lf-armed .tk-grid3 > *, .lf-armed .tk-node, .lf-armed .tk-doc-wrap, .lf-armed .tk-fan > *, .lf-armed .tk-outs > *, .lf-armed .tk-stage--split > .tk-pill, .lf-armed .tk-split-outs > * {
opacity: 0;
translate: 0 14px;
scale: 0.96;
transition: opacity 0.5s ease, translate 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), scale 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lf-armed.is-in .tk-grid3 > *, .lf-armed.is-in .tk-node, .lf-armed.is-in .tk-doc-wrap, .lf-armed.is-in .tk-fan > *, .lf-armed.is-in .tk-outs > *, .lf-armed.is-in .tk-stage--split > .tk-pill, .lf-armed.is-in .tk-split-outs > * {
opacity: 1; translate: 0 0; scale: 1;
}
.lf-armed.is-in .tk-grid3 > :nth-child(2), .lf-armed.is-in .tk-fan > :nth-child(2), .lf-armed.is-in .tk-outs > :nth-child(1), .lf-armed.is-in .tk-split-outs > :nth-child(1) { transition-delay: 0.12s; }
.lf-armed.is-in .tk-grid3 > :nth-child(3), .lf-armed.is-in .tk-outs > :nth-child(2), .lf-armed.is-in .tk-split-outs > :nth-child(2) { transition-delay: 0.24s; }
.lf-armed.is-in .tk-outs > :nth-child(3), .lf-armed.is-in .tk-split-outs > :nth-child(3) { transition-delay: 0.36s; }
.lf-armed.is-in .tk-node { transition-delay: 0.35s; }
.lf-armed.is-in .tk-doc-wrap { transition-delay: 0.55s; }
.lf-armed.is-in .tk-fan > :nth-child(3) .tk-pill { transition-delay: 0.3s; }
.lf-armed .tk-split-outs > * { transition-delay: 0s; }
.lf-armed.is-in .tk-split-outs > :nth-child(1) { transition-delay: 0.5s; }
.lf-armed.is-in .tk-split-outs > :nth-child(2) { transition-delay: 0.62s; }
.lf-armed.is-in .tk-split-outs > :nth-child(3) { transition-delay: 0.74s; }
.lf-armed.is-in .tk-outs > :nth-child(1) { transition-delay: 0.45s; }
.lf-armed.is-in .tk-outs > :nth-child(2) { transition-delay: 0.57s; }
.lf-armed.is-in .tk-outs > :nth-child(3) { transition-delay: 0.69s; }
/* Hold every loop until the figure is on screen */
.lf-armed:not(.is-in) .tk-node::before, .lf-armed:not(.is-in) .tk-node::after, .lf-armed:not(.is-in) .tk-node__ico,
.lf-armed:not(.is-in) .tk-skel i, .lf-armed:not(.is-in) .tk-usage, .lf-armed:not(.is-in) .tk-doc, .lf-armed:not(.is-in) .tk-pill,
.lf-armed:not(.is-in) .tk-tag, .lf-armed:not(.is-in) .tk-ico { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
.tk-node::before, .tk-node::after { display: none; }
.tk-node__ico, .tk-dark-pill .tk-ico, .tk-usage, .tk-doc, .tk-pill, .tk-skel i, .tk-tag, .tk-ico { animation: none !important; }
}
/* ── Figures, set 2 (portfolio letter): filter, proof strip, sort, exit path ──
Same Tailark primitives as above. .tk-rise items enter in sequence via --d. */
.tk-lines--static { position: relative; inset: auto; margin: 0; height: auto; flex: none; display: block; }
.lf-armed .tk-rise {
opacity: 0;
translate: 0 14px;
scale: 0.96;
transition: opacity 0.5s ease, translate 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), scale 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
transition-delay: var(--d, 0s);
}
.lf-armed.is-in .tk-rise { opacity: 1; translate: 0 0; scale: 1; }
.tk-flow-row { position: relative; z-index: 10; display: flex; align-items: center; }
.tk-col { display: flex; flex-direction: column; gap: 16px; }
.tk-col .tk-pill, .tk-booked { height: 44px; box-sizing: border-box; min-width: 168px; }
.tk-col--outs { gap: 36px; }
.tk-node--inline { margin: 0; flex: none; }
.tk-col .tk-pill, .tk-booked { animation: tk-float 4.5s ease-in-out infinite; }
.tk-col .tk-pill:nth-child(2) { animation-delay: -1.5s; }
.tk-col .tk-pill:nth-child(3) { animation-delay: -3s; }
/* Filter: the non-fit output drifts off and comes back, on a loop */
.tk-stage--filter { min-width: 540px; }
.tk-leave .tk-pill__label { color: rgba(9, 9, 11, 0.55); }
.lf-armed.is-in .tk-leave { animation: tk-leave 4.2s ease-in-out 1.6s infinite; }
@keyframes tk-leave {
0%, 15% { transform: translateX(0); opacity: 1; }
55% { transform: translateX(26px); opacity: 0; }
56% { transform: translateX(-10px); opacity: 0; }
85%, 100% { transform: translateX(0); opacity: 1; }
}
/* Proof strip: browser card, hero, counting stats, scan line */
@property --tk-a { syntax: ""; inherits: false; initial-value: 34; }
@property --tk-b { syntax: ""; inherits: false; initial-value: 2; }
@property --tk-c { syntax: ""; inherits: false; initial-value: 8; }
.tk-stage--proof { min-width: 440px; }
.tk-browser { position: relative; width: 420px; overflow: hidden; border-radius: 12px; }
.tk-browser__bar { display: flex; gap: 5px; padding: 10px 12px; border-bottom: 1px solid rgba(9, 9, 11, 0.06); }
.tk-browser__bar i { width: 7px; height: 7px; border-radius: 999px; background: rgba(9, 9, 11, 0.12); }
.tk-browser__body { display: flex; flex-direction: column; gap: 18px; padding: 18px 20px 20px; }
.tk-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.tk-tag--inline { position: static; margin-bottom: 4px; font-size: 9px; padding: 1px 6px; animation: none; }
.tk-hero__line { width: 88%; height: 9px; border-radius: 999px; background: rgba(9, 9, 11, 0.08); overflow: hidden; }
.tk-hero__line--short { width: 56%; }
.tk-hero__line i { display: block; height: 100%; border-radius: inherit; background: #09090b; transform-origin: left center; }
.lf-armed .tk-hero__line i { transform: scaleX(0); transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.25s; }
.lf-armed .tk-hero__line--short i { transition-delay: 0.4s; }
.lf-armed.is-in .tk-hero__line i { transform: scaleX(1); }
.tk-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tk-stat { padding: 12px; border-radius: 10px; }
.tk-stat__num { font-size: 24px; line-height: 1; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: #09090b; }
.tk-stat:first-child .tk-stat__num { color: #C59060; }
.tk-stat__label { margin-top: 6px; font-size: 10px; line-height: 12px; color: rgba(9, 9, 11, 0.5); }
.tk-count--a { counter-reset: tka var(--tk-a); }
.tk-count--a::before { content: counter(tka); }
.tk-count--b { counter-reset: tkb var(--tk-b); }
.tk-count--b::before { content: counter(tkb); }
.tk-count--c { counter-reset: tkc var(--tk-c); }
.tk-count--c::before { content: counter(tkc); }
.lf-armed .tk-count--a { --tk-a: 0; transition: --tk-a 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0.6s; }
.lf-armed .tk-count--b { --tk-b: 0; transition: --tk-b 1s steps(2) 0.75s; }
.lf-armed .tk-count--c { --tk-c: 30; transition: --tk-c 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0.9s; }
.lf-armed.is-in .tk-count--a { --tk-a: 34; }
.lf-armed.is-in .tk-count--b { --tk-b: 2; }
.lf-armed.is-in .tk-count--c { --tk-c: 8; }
.tk-faded { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; opacity: 0.5; }
.tk-faded__card { height: 34px; border-radius: 8px; background: rgba(9, 9, 11, 0.05); }
.tk-scan {
position: absolute; left: 0; right: 0; top: 30px; height: 46px; pointer-events: none;
background: linear-gradient(180deg, rgba(197, 144, 96, 0) 0%, rgba(197, 144, 96, 0.16) 85%, rgba(197, 144, 96, 0.55) 100%);
opacity: 0;
}
.lf-armed.is-in .tk-scan { animation: tk-scan 4s ease-in-out 1.8s infinite; }
@keyframes tk-scan { 0% { transform: translateY(-40px); opacity: 0; } 10% { opacity: 1; } 60% { transform: translateY(200px); opacity: 1; } 70%, 100% { transform: translateY(220px); opacity: 0; } }
/* Sort: date order ⇄ outcome order on a loop */
.tk-stage--sort { min-width: 420px; }
.tk-toggle { position: relative; z-index: 10; display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.075), 0 4px 6px -1px rgba(0, 0, 0, 0.065); font-size: 12px; font-weight: 600; }
.tk-toggle__opt { position: relative; z-index: 1; padding: 5px 14px; text-align: center; white-space: nowrap; color: rgba(9, 9, 11, 0.5); }
.tk-toggle__opt--out { color: #fff; }
.tk-toggle__thumb { position: absolute; top: 3px; bottom: 3px; left: 50%; width: calc(50% - 3px); border-radius: 999px; background: rgba(9, 9, 11, 0.88); }
.tk-cols { position: relative; z-index: 10; display: grid; grid-template-columns: repeat(3, 120px); gap: 12px; margin: 22px 0 10px; font-size: 11px; font-weight: 600; }
.tk-cols span { display: flex; align-items: center; gap: 6px; }
.tk-dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; flex: none; }
.tk-dot--conv { background: #C59060; }
.tk-dot--ret { background: #09090b; }
.tk-dot--adopt { background: #a1a1aa; }
.tk-sortgrid { position: relative; z-index: 10; display: grid; grid-template-columns: repeat(3, 120px); grid-auto-rows: 64px; gap: 12px; }
.tk-gcard__in { height: 100%; box-sizing: border-box; padding: 10px; display: flex; flex-direction: column; gap: 9px; border-radius: 10px; }
.tk-gcard__top { display: flex; align-items: center; gap: 6px; }
.tk-gcard__year { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lf-armed.is-in .tk-gcard__in { animation: tk-sort 7s cubic-bezier(0.6, 0, 0.3, 1) 1.2s infinite; }
@keyframes tk-sort {
0%, 36% { transform: translateX(var(--dx, 0px)); }
46%, 90% { transform: translateX(0); }
100% { transform: translateX(var(--dx, 0px)); }
}
.tk-gcard__in { --dx: inherit; }
.lf-armed.is-in .tk-toggle__thumb { animation: tk-thumb 7s cubic-bezier(0.6, 0, 0.3, 1) 1.2s infinite; }
@keyframes tk-thumb { 0%, 36% { transform: translateX(calc(-100% + 0px)); } 46%, 90% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
.lf-armed.is-in .tk-toggle__opt--date { animation: tk-opt-on 7s 1.2s infinite; }
.lf-armed.is-in .tk-toggle__opt--out { animation: tk-opt-off 7s 1.2s infinite; }
@keyframes tk-opt-on { 0%, 38% { color: #fff; } 44%, 92% { color: rgba(9, 9, 11, 0.5); } 98%, 100% { color: #fff; } }
@keyframes tk-opt-off { 0%, 38% { color: rgba(9, 9, 11, 0.5); } 44%, 92% { color: #fff; } 98%, 100% { color: rgba(9, 9, 11, 0.5); } }
.lf-armed.is-in .tk-cols { animation: tk-cols 7s 1.2s infinite; }
@keyframes tk-cols { 0%, 38% { opacity: 0.15; } 46%, 90% { opacity: 1; } 100% { opacity: 0.15; } }
/* Exit path: rhythm chips light in order, cursor clicks the one button, beam to the booked pill */
.tk-stage--exit { min-width: 510px; }
.tk-doc--exit { position: relative; width: 236px; gap: 12px; padding: 14px; border-radius: 10px; }
.tk-rhythm { display: flex; flex-wrap: nowrap; gap: 3px; }
.tk-rhythm span { padding: 2px 4px; border-radius: 4px; font-size: 8.5px; white-space: nowrap; font-weight: 600; background: rgba(9, 9, 11, 0.05); color: rgba(9, 9, 11, 0.55); }
.lf-armed.is-in .tk-rhythm span { animation: tk-chip 0.4s ease forwards; }
.lf-armed.is-in .tk-rhythm span:nth-child(1) { animation-delay: 0.6s; }
.lf-armed.is-in .tk-rhythm span:nth-child(2) { animation-delay: 0.8s; }
.lf-armed.is-in .tk-rhythm span:nth-child(3) { animation-delay: 1s; }
.lf-armed.is-in .tk-rhythm span:nth-child(4) { animation-delay: 1.2s; }
@keyframes tk-chip { to { background: rgba(197, 144, 96, 0.16); color: #8a5a2e; } }
.tk-cta-btn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; border-radius: 8px; background: #C59060; color: #fff; font-size: 12px; font-weight: 600; box-shadow: 0 6px 12px -4px rgba(120, 72, 30, 0.35); }
.tk-cta-btn .tk-ico { width: 14px; height: 14px; }
.tk-cursor { position: absolute; z-index: 3; left: 150px; bottom: 6px; width: 18px; height: 18px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)); opacity: 0; }
.lf-armed.is-in .tk-cursor { animation: tk-cursor 4.6s ease-in-out 1.4s infinite; }
@keyframes tk-cursor {
0% { opacity: 0; transform: translate(70px, 40px); }
12% { opacity: 1; }
38% { opacity: 1; transform: translate(0, 0) scale(1); }
44% { transform: translate(0, 0) scale(0.82); }
50% { transform: translate(0, 0) scale(1); }
80% { opacity: 1; transform: translate(0, 0); }
100% { opacity: 0; transform: translate(10px, 14px); }
}
.lf-armed.is-in .tk-cta-btn { animation: tk-press 4.6s ease-in-out 1.4s infinite; }
@keyframes tk-press { 0%, 40% { transform: scale(1); } 44% { transform: scale(0.95); box-shadow: 0 2px 4px -2px rgba(120, 72, 30, 0.35); } 50%, 100% { transform: scale(1); } }
.tk-pulse--click { animation-delay: 3.4s; }
.lf-armed.is-in .tk-booked .tk-tile { animation: tk-booked 4.6s ease-in-out 1.4s infinite; }
@keyframes tk-booked { 0%, 55% { box-shadow: 0 0 0 0 rgba(197, 144, 96, 0); } 65% { box-shadow: 0 0 0 6px rgba(197, 144, 96, 0.22); } 85%, 100% { box-shadow: 0 0 0 0 rgba(197, 144, 96, 0); } }
.lf-armed:not(.is-in) .tk-col .tk-pill, .lf-armed:not(.is-in) .tk-booked { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
.tk-col .tk-pill, .tk-booked, .tk-leave, .tk-scan, .tk-gcard__in, .tk-toggle__thumb, .tk-toggle__opt, .tk-cols, .tk-cursor, .tk-cta-btn, .tk-booked .tk-tile { animation: none !important; }
}
@media (max-width: 760px) {
.tk-stage--filter { zoom: 0.6; }
.tk-stage--proof, .tk-stage--sort, .tk-stage--exit { zoom: 0.72; }
}
@media (max-width: 480px) {
.tk-stage--filter { zoom: 0.56; }
.tk-stage--proof, .tk-stage--sort, .tk-stage--exit { zoom: 0.64; }
}
/* ── Podcast video (click-to-load YouTube) ───────────────────────────────── */
.letter-video {
margin: 40px 0 48px;
padding: 8px;
background: #f6efe9;
border-radius: 16px;
}
.letter-video__frame {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #09090b;
border-radius: 10px;
box-shadow:
0 0 0 1px rgba(9, 9, 11, 0.06),
0 16px 40px -16px rgba(9, 9, 11, 0.25);
}
.letter-video__play {
all: unset;
position: absolute;
inset: 0;
cursor: pointer;
display: block;
}
.letter-video__play img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), filter 0.3s ease;
}
.letter-video__play:hover img { transform: scale(1.03); filter: brightness(0.9); }
.letter-video__btn {
position: absolute;
top: 50%;
left: 50%;
width: 68px;
height: 68px;
margin: -34px 0 0 -34px;
display: grid;
place-items: center;
color: #fff;
background: rgba(9, 9, 11, 0.72);
border-radius: 999px;
box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.18);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition: transform 0.25s ease, background 0.25s ease;
}
.letter-video__btn svg { width: 26px; height: 26px; margin-left: 3px; }
.letter-video__play:hover .letter-video__btn,
.letter-video__play:focus-visible .letter-video__btn { transform: scale(1.08); background: var(--letters-gold, #c59060); }
.letter-video__play:focus-visible { outline: 2px solid var(--letters-gold, #c59060); outline-offset: -4px; }
.letter-video__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.letter-video__cap {
display: flex;
flex-direction: column;
gap: 6px;
padding: 16px 12px 10px;
}
.letter-video__eyebrow {
font-family: var(--ds-font-mono, "Geist Mono", ui-monospace, monospace);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #8a6a4d;
}
.letter-video__title {
font-size: 17px;
font-weight: 600;
line-height: 1.35;
color: #09090b;
}
.letter__body .letter-video__takeaways {
margin: 6px 0 4px;
padding-left: 18px;
}
.letter__body .letter-video__takeaways li {
margin: 4px 0;
font-size: 15px;
line-height: 1.55;
color: #3f3f46;
}
.letter__body .letter-video__link {
align-self: flex-start;
font-size: 14px;
font-weight: 500;
color: #09090b;
text-decoration: underline;
text-underline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.letter-video__play img, .letter-video__btn { transition: none; }
}
/* ── Post: back to all letters ───────────────────────────────────────────── */
.letter__back {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0 0 20px;
padding: 6px 12px 6px 10px;
font-size: 14px;
font-weight: 500;
line-height: 20px;
color: #3f3f46;
text-decoration: none;
background: #fff;
border-radius: 999px;
box-shadow: 0 0 0 1px rgba(9, 9, 11, 0.08), 0 1px 2px rgba(9, 9, 11, 0.04);
transition: color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.letter__back svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform 0.2s ease;
}
.letter__back:hover { color: #09090b; box-shadow: 0 0 0 1px rgba(9, 9, 11, 0.16), 0 2px 6px rgba(9, 9, 11, 0.06); }
.letter__back:hover svg { transform: translateX(-2px); }
.letter__back:focus-visible { outline: 2px solid var(--letters-gold, #c59060); outline-offset: 2px; }
/* wrappers (WebP covers, video thumbs) stay layout-neutral */
.letters-page picture { display: contents; }
/* ── List thumbs: keep the in its own grid cell ───────────────────
A global picture { display: contents } let its take the thumb column
and pushed the image onto a new row. Pin text and picture to row one. */
.letters-list__link > picture { display: block; grid-row: 1; grid-column: 2; }
.letters-list__link > .letters-list__text { grid-row: 1; grid-column: 1; }
.letters-list__link > picture .letters-list__thumb { display: block; }
/* Keep reading: image on the left, copy on the right */
.letters-related .letters-list__link { grid-template-columns: 160px minmax(0, 1fr); align-items: center; }
.letters-related .letters-list__link > picture,
.letters-related .letters-list__link > .letters-list__thumb { grid-column: 1; grid-row: 1; }
.letters-related .letters-list__link > .letters-list__text { grid-column: 2; }
@media (max-width: 720px) {
.letters-related .letters-list__link { grid-template-columns: 96px minmax(0, 1fr); }
}
/* Tailark "Invoice" (workspace illustrations), matched to the live preview:
18px radius white card, ring-1 black/7.5 + shadow-xl, two ghost cards stacked behind
(inset-x 21px / top 14px, and inset-x 31.5px / top 7px at card/75), Geist Mono id and
amount, mini signed doc, label rows. No bottom fade here, so every row stays readable. */
.tk-invc-stage { display: flex; justify-content: center; width: 100%; font-family: Inter, var(--ds-font-body); color: #09090b; transform: scale(0.95); }
.tk-invc-stack { position: relative; width: 100%; max-width: 360px; padding: 21px 14px 0; }
.tk-invc-ghost { position: absolute; bottom: 24px; border-radius: 18px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.075); }
.tk-invc-ghost--1 { left: 21px; right: 21px; top: 14px; z-index: 1; background: #fff; }
.tk-invc-ghost--2 { left: 31.5px; right: 31.5px; top: 7px; background: rgba(255, 255, 255, 0.75); }
.tk-invc {
position: relative;
z-index: 10;
padding: 28px;
border-radius: 18px;
background: #fff;
font-size: 13px;
line-height: 1.45;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.075), 0 20px 25px -5px rgba(0, 0, 0, 0.065), 0 8px 10px -6px rgba(0, 0, 0, 0.065);
}
.tk-invc__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; margin-bottom: 21px; }
.tk-invc__logo { display: block; width: 20px; height: 20px; color: #C59060; }
.tk-invc__id { margin-top: 14px; font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.tk-invc__amount { margin-top: 3.5px; transform: translateX(-3.5px); font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 24px; line-height: 1.25; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tk-invc__due { font-size: 11px; font-weight: 500; }
.tk-invc__roi { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 4px; background: #C59060; color: #fff; font-weight: 600; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); box-shadow: 0 6px 10px -3px rgba(120, 72, 30, 0.25), inset 0 0 0 1px rgba(9, 9, 11, 0.15); white-space: nowrap; }
.tk-invc__rows { display: flex; flex-direction: column; gap: 5.25px; }
.tk-invc__row { display: grid; grid-template-columns: 112px 1fr; align-items: center; }
.tk-invc__row span { color: #52525b; }
.tk-invc__row b { font-weight: 600; font-variant-numeric: tabular-nums; }
/* Motion. Final state is the default, so no-JS and reduced-motion readers see everything.
On scroll-in: ghosts fan out from behind, card rises, amount counts up, rows tick in,
then the ROI chip pops. Idle: card and mini doc float, mini doc shimmers, signature draws. */
.lf-armed .tk-invc-ghost { opacity: 0; translate: 0 10px; scale: 0.97; transition: opacity 0.5s ease, translate 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), scale 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
.lf-armed .tk-invc-ghost--1 { transition-delay: 0.15s; }
.lf-armed .tk-invc-ghost--2 { transition-delay: 0.28s; }
.lf-armed .tk-invc { opacity: 0; translate: 0 16px; transition: opacity 0.5s ease, translate 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
.lf-armed .tk-invc__row { opacity: 0; translate: 0 6px; transition: opacity 0.4s ease var(--d, 0.5s), translate 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) var(--d, 0.5s); }
.lf-armed .tk-invc__roi { opacity: 0; scale: 0.6; transition: opacity 0.3s ease 1.15s, scale 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) 1.15s; }
.lf-armed.is-in .tk-invc-ghost, .lf-armed.is-in .tk-invc, .lf-armed.is-in .tk-invc__row, .lf-armed.is-in .tk-invc__roi { opacity: 1; translate: 0 0; scale: 1; }
.lf-armed.is-in .tk-invc__row b { animation: tk-invc-tick 0.9s ease var(--d) both; }
@keyframes tk-invc-tick { 0% { color: #09090b; } 35% { color: #C59060; } 100% { color: #09090b; } }
.tk-invc { animation: tk-float 5s ease-in-out infinite; }
.tk-invc__roi { animation: tk-tag 3.2s ease-in-out 2s infinite; transform-origin: left center; }
@media (prefers-reduced-motion: reduce) {
.tk-invc, .tk-invc__roi { animation: none !important; }
}
@media (max-width: 600px) {
.tk-invc { padding: 21px; }
.tk-invc__amount { font-size: 21px; }
.tk-invc__top { gap: 14px; }
.tk-invc__row { grid-template-columns: 104px 1fr; }
}
/* ROI of design calculator: the invoice card, made interactive */
.roi-calc { margin: 24px 0 32px; }
.roi-calc .tk-invc-stack { max-width: 420px; }
.roi-calc .tk-invc-stage { transform: none; }
.roi-calc__tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: -6px 0 20px; padding: 3px; border-radius: 999px; background: #f4f4f5; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); }
.roi-calc__tabs button { appearance: none; border: 0; margin: 0; padding: 6px 10px; border-radius: 999px; background: transparent; font: 600 12px/1.2 Inter, var(--ds-font-body); color: rgba(9, 9, 11, 0.55); cursor: pointer; transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; }
.roi-calc__tabs button[aria-selected="true"] { background: rgba(9, 9, 11, 0.88); color: #fff; box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.25); }
.roi-calc__tabs button:focus-visible { outline: 2px solid #C59060; outline-offset: 2px; }
.roi-calc__group { padding-top: 14px; margin-top: 14px; border-top: 1px dashed #e4e4e7; }
.roi-calc .tk-invc__top { margin-bottom: 4px; }
.roi-calc__label { margin-bottom: 6px; font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #71717a; }
.roi-calc__row { grid-template-columns: 1fr auto; gap: 12px; }
.roi-calc__row label { color: #52525b; }
.roi-calc__in { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 3px; min-width: 120px; padding: 2px 0; border-bottom: 1px dotted #d4d4d8; transition: border-color 0.2s ease; }
.roi-calc__in:focus-within { border-bottom: 1px solid #C59060; }
.roi-calc__in i { font-style: normal; color: #a1a1aa; font-size: 12px; }
.roi-calc__in input { width: 76px; padding: 0; border: 0; background: transparent; text-align: right; font: 600 13px/1.45 Inter, var(--ds-font-body); font-variant-numeric: tabular-nums; color: #09090b; -moz-appearance: textfield; }
.roi-calc__in input::-webkit-outer-spin-button, .roi-calc__in input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.roi-calc__in input:focus { outline: none; }
.roi-calc__result .tk-invc__row { grid-template-columns: 1fr auto; }
.roi-calc__result .tk-invc__row b { text-align: right; }
#page-container .letter__body .roi-calc__verdict { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(197, 144, 96, 0.12); color: #6b4423; font-size: 13px; line-height: 1.45; font-weight: 500; }
.roi-calc.is-negative .tk-invc__roi { background: #f4f4f5; color: #09090b; text-shadow: none; box-shadow: inset 0 0 0 1px rgba(9, 9, 11, 0.08); }
#page-container .letter__body .roi-calc.is-negative .roi-calc__verdict { background: #f4f4f5; color: #3f3f46; }
.roi-calc .tk-invc { animation: none; }
@media (max-width: 600px) {
.roi-calc__in { min-width: 100px; }
.roi-calc__in input { width: 64px; }
}
.roi-calc [hidden] { display: none !important; }
.roi-calc__in input { width: 7ch; field-sizing: content; min-width: 2ch; }
/* Calculator fields: Tailark "Self-Correction Loop" field style (white, 8px radius, ring-1 black/7.5,
shadow black/5, Geist Mono). Active field gets the coloured ring + tinted shadow, in brand brown. */
.roi-calc__row { padding: 3px 0; }
.roi-calc__in {
min-width: 132px;
box-sizing: border-box;
padding: 6px 9px;
border: 0;
border-bottom: 0;
border-radius: 8px;
background: #fff;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.075), 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
cursor: text;
transition: box-shadow 0.2s ease;
}
.roi-calc__in:hover { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.06); }
.roi-calc__in:focus-within {
border-bottom: 0;
box-shadow: 0 0 0 1px rgba(197, 144, 96, 0.6), 0 0 0 4px rgba(197, 144, 96, 0.14), 0 1px 3px 0 rgba(120, 72, 30, 0.1), 0 1px 2px -1px rgba(120, 72, 30, 0.1);
}
.roi-calc__in input, .roi-calc__in i { font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
.roi-calc__in input { font-size: 13px; font-weight: 500; flex: 1; min-width: 2ch; }
.roi-calc__in i { font-size: 11px; color: #71717a; }
@media (max-width: 600px) { .roi-calc__in { min-width: 112px; } }
#page-container .roi-calc__in input:focus,
#page-container .roi-calc__in input:focus-visible,
.roi-calc__in input:focus,
.roi-calc__in input:focus-visible { outline: none !important; box-shadow: none !important; border: 0 !important; }