` landmark at all — confirmed against real exported markup — so every rule in this file is scoped off WordPress's automatic BODY classes instead of tag names. Confirmed directly from live body tags: Pages: Posts: `body.page` paragraphs and lists get a 55ch measure at a slightly larger size (--fs-lg) — pages are scanned for actionable info, not read start-to-finish. `body.single-post` paragraphs and lists get a 68ch measure at a slightly smaller size (--fs-md) — better suited to sustained reading. This is now the DEFAULT for every paragraph in the content area on both post types — there is no separate opt-in class. A previous version of this file used a `.eb` ("editorial body") class that authors had to manually apply to get this treatment; that's been removed and folded into the base rule, since manually tagging every paragraph doesn't scale and isn't how this should work. A page can never carry both body classes at once, so there's no cascade race between the two rules. ⚠ REQUIRED EDITOR STEP — READ THIS BEFORE FILING A "STYLES NOT APPLYING" BUG. The 55ch/68ch measure rules above only take effect when BOTH of these are true in the block editor for that page/post: 1. The content is wrapped in a Group block (a plain `

`). 2. That Group block's Layout setting "Inner blocks use content width" is TURNED OFF. Leaving that toggle ON lets WordPress core's own constrained-layout system (`.is-layout-constrained`, driven by theme.json's contentSize) take over the width of child blocks instead of our custom max-width — the two systems fight, and WP core wins, which is why the paragraph can look completely unstyled even though the CSS rule matches. This was confirmed empirically: content stayed full-width until both conditions above were met. If a page/post still looks unstyled after verifying the body class and DOM structure, check this toggle first. THE OFFSET-SHADOW ("STICKER") SYSTEM Solid, unblurred box-shadows in yolk-yellow are the site's signature print-zine/sticker effect, currently live on buttons (always on, with a pressed/click interaction), pullquotes (on by default — add `.plain` to opt out), and headings (opt-in via the `.sticker` class, stackable with `.outline`). Offsets are tiered — --shadow-offset-lg/md/sm — scaled to the size of what they're attached to. GOTCHA: this effect only works because yolk-yellow contrasts against midnight; a shadow in any dark color will simply vanish into the background. GOTCHAS & STRUCTURAL NOTES - Heavy !important usage throughout is intentional, not sloppy — the block editor writes a lot of inline styles directly onto elements (colors, fonts, borders picked in the sidebar UI), and those inline styles win over an ordinary stylesheet rule unless we force it. - `:root body` prefixing on many selectors is a deliberate specificity bump for the same reason — it's not decorative nesting. - `!important` on a custom property (see the --wp--preset--font-family overrides) only resolves competing declarations of that same custom property. If a block ever outputs a fully-resolved inline font-family instead of a var() reference, this override has nothing to grab onto. - Selector lists that repeat the same class in several positions (`h1.outline`, `.outline h1`, etc.) exist because WordPress applies style-variation classes inconsistently — sometimes on the element itself, sometimes on a wrapping block. Both patterns need covering. Where there are more than two or three variants, they're grouped with `:is()` to keep the block readable rather than a wall of commas. - Body copy runs at font-weight 400 to prevent halation (the visual bleeding of light pixels into dark pixels) which makes thinner serifs hard to read on a high-contrast dark background. - All media queries live in one section at the end of the file rather than beside the components they adjust. Check there first before assuming a component has no responsive behavior. - `.is-style-display` (used to flag a heading for the outline/underline border treatment in section 05) and `.is-style-text-display` (used for the giant shouted uppercase mono paragraph treatment in 04A) are two DIFFERENT, unrelated classes despite the similar names. Don't merge their rules. - Do not reach for `main` or `article` as a selector anywhere in this file — confirmed absent from this theme's rendered markup. Use `body.page` / `body.single-post` for content-type-specific rules, or `.entry-content` / `.wp-block-post-content` for rules that should apply the same way regardless of page vs. post. FILE ORGANIZATION Numbered sections (01–13) run roughly in cascade order: fonts and design tokens first, base element resets next, then increasingly specific editorial and component treatments, utility classes, and finally all responsive breakpoints. Keep new rules in the section they belong to rather than appending to the bottom of the file — the ordering matters for the cascade, not just for readability. ============================================================================ */ /* ============================================================================ DESIGN SYSTEM HIERARCHY & RESTRAINT DIRECTIVE ---------------------------------------------------------------------------- Decorative heading treatments (outlines, underlines, stickers) and visual accents must be applied with strict restraint to maintain visual hierarchy and avoid clutter. Do not mix treatments arbitrarily across page types. Adhere to the following structural assignment across all templates: 1. PRIMARY NAV PAGES Treatment: Outline + Sticker (.sticker) + Heading Highlights Role: Maximum impact and high visual weight for core entry points. 2. SECONDARY NAV PAGES Treatment: Outline + Heading Highlights Role: Heavy structural framing without the offset sticker shadow. 3. ARTICLES & EDITORIAL COPY Treatment: Underline ONLY (used sparingly) + Paragraph Highlights Role: Clean downward editorial flow that preserves reading measure. 4. PULLQUOTES Treatment: Sticker ONLY (yolk-yellow offset shadow) Role: Standout editorial breakout cards distinct from section headers. The yolk-yellow offset shadow is our signature accent; rationing its use ensures it retains high visual value when present. ============================================================================ */ /* ========================================================================== 01. @FONT-FACE DEFINITIONS (VARIABLE FONTS) -------------------------------------------------------------------------- These six @font-face blocks sit at the very top of the file, ahead of everything else, because they're on the critical render path: the browser needs to discover and start fetching them as early as possible in the parse to avoid a Flash of Unstyled Text and the layout shift that comes with a late font swap. Each of the three IBM Plex families (Sans, Serif, Mono) is loaded as a single variable-font file per style, covering the full 100–700 weight range in one asset rather than shipping eight static cuts. `font-display: swap` lets the browser paint immediately with a system-font fallback and hot-swap to Plex once it's hydrated, so first paint never blocks on font delivery. ========================================================================== */ /* --- IBM PLEX SANS (variable) --- */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 100 700; font-display: swap; src: url('/wp-content/themes/studio85/assets/fonts/ibm-plex-variable/IBM%20Plex%20Sans%20Var-Roman.woff2') format('woff2-variations'), url('/wp-content/themes/studio85/assets/fonts/ibm-plex-variable/IBM%20Plex%20Sans%20Var-Roman.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Sans'; font-style: italic; font-weight: 100 700; font-display: swap; src: url('/wp-content/themes/studio85/assets/fonts/ibm-plex-variable/IBM%20Plex%20Sans%20Var-Italic.woff2') format('woff2-variations'), url('/wp-content/themes/studio85/assets/fonts/ibm-plex-variable/IBM%20Plex%20Sans%20Var-Italic.woff2') format('woff2'); } /* --- IBM PLEX SERIF (variable) --- */ @font-face { font-family: 'IBM Plex Serif'; font-style: normal; font-weight: 100 700; font-display: swap; src: url('/wp-content/themes/studio85/assets/fonts/ibm-plex-variable/2026/08/IBM%20Plex%20Serif%20Var-Roman.woff2') format('woff2-variations'), url('/wp-content/themes/studio85/assets/fonts/ibm-plex-variable/2026/08/IBM%20Plex%20Serif%20Var-Roman.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Serif'; font-style: italic; font-weight: 100 700; font-display: swap; src: url('/wp-content/themes/studio85/assets/fonts/ibm-plex-variable/IBM%20Plex%20Serif%20Var-Italic.woff2') format('woff2-variations'), url('/wp-content/themes/studio85/assets/fonts/ibm-plex-variable/IBM%20Plex%20Serif%20Var-Italic.woff2') format('woff2'); } /* --- IBM PLEX MONO (variable) --- */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 100 700; font-display: swap; src: url('/wp-content/themes/studio85/assets/fonts/ibm-plex-variable/IBM%20Plex%20Mono%20Var-Roman.woff2') format('woff2-variations'), url('/wp-content/themes/studio85/assets/fonts/ibm-plex-variable/IBM%20Plex%20Mono%20Var-Roman.woff2') format('woff2'); } /* This italic cut was previously missing entirely — confirm IBM%20Plex%20Mono%20Var-Italic.woff2 is actually uploaded to /wp-content/uploads/2026/08/ before shipping. */ @font-face { font-family: 'IBM Plex Mono'; font-style: italic; font-weight: 100 700; font-display: swap; src: url('/wp-content/themes/studio85/assets/fonts/ibm-plex-variable/IBM%20Plex%20Mono%20Var-Italic.woff2') format('woff2-variations'), url('/wp-content/themes/studio85/assets/fonts/ibm-plex-variable/IBM%20Plex%20Mono%20Var-Italic.woff2') format('woff2'); } /* ========================================================================== 02. CUSTOM PROPERTIES, FLUID SCALE & DESIGN TOKENS ========================================================================== */ :root, .editor-styles-wrapper { /* --- Base Root Scaling --- */ font-size: 100%; /* 1rem === 16px user default standard */ /* --- Fluid Typographic Modular Scale --- */ --fs-xs: clamp(0.75rem, 0.71rem + 0.2vw, 0.875rem); /* Captions & Attributions (12px - 14px) */ --fs-sm: clamp(0.875rem, 0.83rem + 0.2vw, 1rem); /* Small Body / Secondary (14px - 16px) */ --fs-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); /* Standard Body / UI (16px - 18px) */ --fs-md: clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem); /* Post paragraphs (17px - 20px) */ --fs-lg: clamp(1.1875rem, 1.05rem + 0.7vw, 1.5rem); /* Page paragraphs / h4 (19px - 24px) */ --fs-xl: clamp(1.375rem, 1.15rem + 1.1vw, 1.875rem); /* Level 3 Heading (h3) (22px - 30px) */ --fs-2xl: clamp(1.625rem, 1.28rem + 1.7vw, 2.375rem); /* Level 2 Heading (h2) (26px - 38px) */ --fs-3xl: clamp(2rem, 1.45rem + 2.75vw, 3rem); /* Level 1 Heading (h1) (32px - 48px) */ --fs-4xl: clamp(2.5rem, 1.63rem + 4.35vw, 4rem); /* Display / Impact Headers (40px - 64px) */ /* --- Brand Color Palette --- */ --color-midnight: var(--wp--preset--color--custom-midnight, #131313); --color-dusk: var(--wp--preset--color--custom-dusk, #32302d); --color-cream: var(--wp--preset--color--custom-more-cream, #fefef5); --color-yolk-yellow: var(--wp--preset--color--custom-yolk-yellow, #e8d918); --color-warm-gray: var(--wp--preset--color--custom-pub-berry-1, #c2b6a8); /* --- Font Family Tokens --- */ --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-serif: 'IBM Plex Serif', Georgia, serif; --font-mono: 'IBM Plex Mono', Consolas, monospace; /* --- Theme JSON / Gutenberg Font Overrides --- */ --wp--preset--font-family--serif: var(--font-serif) !important; --wp--preset--font-family--sans-serif: var(--font-sans) !important; --wp--preset--font-family--monospace: var(--font-mono) !important; --wp--preset--font-family--heading: var(--font-mono) !important; --wp--preset--font-family--body: var(--font-serif) !important; /* --- Motion, Transitions & Depth --- */ --transition-fast: 0.2s ease; --transition-smooth: 0.3s ease-in-out; --z-base: 1; --z-elevated: 10; --z-overlay: 100; /* --- Shadow & Depth (Sticker / Offset Shadow System) --- */ --shadow-color: var(--color-yolk-yellow); --shadow-offset-lg: 10px; --shadow-offset-md: 7px; --shadow-offset-sm: 4px; } /* ========================================================================== 03. BASE TYPOGRAPHY & ELEMENT RESETS ========================================================================== */ /* --- Custom Brutalist Scrollbar --- */ ::-webkit-scrollbar { width: 16px; background: var(--color-midnight); border-left: 2px solid var(--color-dusk); } ::-webkit-scrollbar-thumb { background-color: var(--color-yolk-yellow); border: 2px solid var(--color-midnight); border-radius: 0; } /* Canvas Base */ body { background-color: var(--color-midnight); color: var(--color-cream); font-family: var(--font-serif); font-size: var(--fs-base); font-weight: 400; /* Bumped to prevent halation */ font-style: normal; line-height: 1.6; } /* Paragraphs & Lists Default */ p, ul, ol { font-family: var(--font-serif); font-size: var(--fs-base); font-weight: 400; /* Bumped to prevent halation */ font-style: normal; line-height: 1.6; } /* Headings Systems (Using Fluid Scale) */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-mono); font-weight: 600; font-style: normal; } h1 { font-size: var(--fs-3xl); line-height: 1.15; } h2 { font-size: var(--fs-2xl); line-height: 1.2; } h3 { font-size: var(--fs-xl); line-height: 1.25; } h4 { font-size: var(--fs-lg); line-height: 1.3; } h5, h6 { font-size: var(--fs-base); line-height: 1.35; } /* Inline Formatting */ strong, b { font-weight: 700; } em, i { font-style: italic; } /* Media Base & Motion Reset */ img { max-width: 100%; height: auto; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Focus & Interaction */ a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--color-yolk-yellow); outline-offset: 3px; } a, a:link, a:visited { transition: color var(--transition-smooth), background-color var(--transition-smooth), border-color var(--transition-smooth); text-decoration: underline; text-underline-offset: 3px; } .wp-block-list a, .entry-content a { border-bottom: none !important; text-decoration: underline; text-underline-offset: 3px; } /* ========================================================================== 04A. PARAGRAPH & READING TYPOGRAPHY -------------------------------------------------------------------------- Paragraphs are the fundamental reading pieces of the site. Base reading measure is now split by body class (see the header comment at the top of this file) rather than by tag, and applies globally to every paragraph/list in the content area — no opt-in class required. ⚠ For the widths below to actually apply: content must sit inside a Group block, and that Group block's "Inner blocks use content width" Layout toggle must be OFF. See the full explanation at the top of this file. This is the #1 cause of "I changed the CSS and nothing happened." ========================================================================== */ /* --- 1a. Base PAGE Copy — scoped to body.page (dense/scannable, 55ch, larger type) --- */ body.page .entry-content p, body.page .wp-block-post-content p, body.page .entry-content ul, body.page .wp-block-post-content ul, body.page .entry-content ol, body.page .wp-block-post-content ol { font-family: var(--font-serif); font-size: var(--fs-lg); /* 19px - 24px */ font-weight: 400; line-height: 1.7; letter-spacing: -0.01em; color: var(--color-cream); max-width: 55ch; /* Tighter measure for scannable service/utility pages */ margin-left: 0; margin-right: auto; margin-bottom: 1.5rem; } /* --- 1b. Base POST Copy — scoped to body.single-post (long-form reading, 68ch) --- */ body.single-post .entry-content p, body.single-post .wp-block-post-content p, body.single-post .entry-content ul, body.single-post .wp-block-post-content ul, body.single-post .entry-content ol, body.single-post .wp-block-post-content ol { font-family: var(--font-serif); font-size: var(--fs-md); /* 17px - 20px */ font-weight: 400; line-height: 1.75; letter-spacing: -0.01em; color: var(--color-cream); max-width: 68ch; /* Optimal editorial reading measure */ margin-left: 0; margin-right: auto; margin-bottom: 1.75rem; } /* Standard link treatment within body copy — unscoped by page/post since there's no size/measure difference in link styling itself. */ .entry-content p a, .wp-block-post-content p a { color: inherit !important; text-decoration: underline !important; text-underline-offset: 3px !important; transition: opacity var(--transition-fast), color var(--transition-fast) !important; } .entry-content p a:hover, .wp-block-post-content p a:hover { opacity: 0.9 !important; color: var(--color-yolk-yellow) !important; } /* --- 2. The Annotation Variant --- */ /* Uses Plex Mono for a technical, structured feel, acting as a secondary reading block rather than just an indented paragraph. */ :root body :is(.is-style-annotation, p.is-style-text-annotation) { font-family: var(--font-mono) !important; font-size: var(--fs-base) !important; line-height: 1.6 !important; color: var(--color-cream) !important; background-color: rgba(255, 255, 255, 0.03) !important; /* Subtle grouping background */ border: 0 !important; border-left: 2px solid var(--color-warm-gray) !important; /* Hard structural edge */ text-align: left; display: block !important; box-sizing: border-box !important; width: 100% !important; max-width: 68ch !important; margin: 2.5rem auto !important; padding: 1.5rem 1.5rem 1.5rem 2rem !important; } /* --- 3. Subtitle / Dek Variant --- */ /* Used for introductory text following a heading */ .is-style-text-subtitle, p.is-style-text-subtitle { font-family: var(--font-mono) !important; font-weight: 300 !important; font-size: var(--fs-lg) !important; /* Hooked into fluid tokens instead of fixed 1.35rem */ line-height: 1.4 !important; color: var(--color-cream) !important; margin-left: 1rem !important; margin-top: -0.5em !important; margin-bottom: 2rem !important; max-width: 100% !important; /* Slightly shorter measure for deks */ } /* --- 3b. Heading Kicker Variant --- */ /* A tight, shouted mono label built specifically to sit right under a thick-bordered .outline heading — a different job from the Subtitle/ Dek above, which is a softer sans-serif intro paragraph for ordinary headings. The kicker is small, all-caps, yolk-yellow, and prefixed with the same "/////" tick mark used elsewhere on the site (see the MOMENTUM heading treatment), so it reads as part of the same visual system as the sticker/outline heading it follows rather than a separate paragraph. Usage: add the `kicker` block style to the paragraph immediately following an .outline or .underline heading. Works with any heading level — spacing isn't tied to a specific h1–h6 size. */ .kicker, p.kicker { font-family: var(--font-mono) !important; font-weight: 600 !important; font-size: var(--fs-sm) !important; line-height: 1.4 !important; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-yolk-yellow) !important; margin-top: 1rem !important; margin-bottom: 2rem !important; max-width: 68ch !important; } .kicker::before { content: "///// "; color: var(--color-yolk-yellow); } /* Tighter coupling when it directly follows an outline/underline heading — pulls the kicker up closer to the heading's border so the pairing reads as one unit instead of two separate elements. */ :root body :is(h1.outline, h1.is-style-outline, h1.underline, h1.is-style-underline) + .kicker, :root body :is(h2.outline, h2.is-style-outline, h2.underline, h2.is-style-underline) + .kicker, :root body :is(h3.outline, h3.is-style-outline, h3.underline, h3.is-style-underline) + .kicker, :root body :is(h4.outline, h4.is-style-outline, h4.underline, h4.is-style-underline) + .kicker { margin-top: 0.6rem !important; max-width: 100% !important; } /* HI-VIZ DECORATION ELEMENT */ /* 1. Turn the heading into a flex container to push content to opposite ends */ :is(h1, h2, h3, h4):is(.outline, .is-style-outline, .underline, .is-style-underline) { display: flex; justify-content: left; align-items: left; width: 100%; } /* 2. Add the five slashes and the yellow square to .viz */ :is(h1, h2, h3, h4):is(.outline, .is-style-outline, .underline, .is-style-underline) ~ .viz { display: inline-flex; align-items: right; margin-bottom: .2em; /* Space between the slashes and the yellow border */ margin-left: auto; /* Pushes .viz to the far right if flex isn't on parent */ } /* 3. Create the yellow square using background-color */ :is(h1, h2, h3, h4):is(.outline, .is-style-outline, .underline, .is-style-underline) ~ .viz::after { content: " "; display: block; align-items: right; margin-left: auto; width: 100px; margin-bottom: .2em; height: auto; /* Matches heading text height, or set fixed px like 30px */ background-color: var(--color-yolk-yellow); } /* 4. Render the slashes dynamically */ :is(h1, h2, h3, h4):is(.outline, .is-style-outline, .underline, .is-style-underline) ~ .viz::before { content: "/////"; font-weight: bold; letter-spacing: 2px; color: var(--color-yolk-yellow); /* Or any color you prefer */ } /* --- 4. Display Paragraph Variant --- */ /* Massive, shouted text blocks */ p.is-style-text-display, .is-style-text-display p { font-family: var(--font-mono) !important; font-weight: 700 !important; font-size: var(--fs-4xl) !important; line-height: 1.05 !important; letter-spacing: -0.03em; text-transform: uppercase; color: var(--color-cream); margin-bottom: 1.5rem; max-width: 100%; /* Break out of the reading measure */ } /* Visual Interest Suffix for Display Paragraphs */ p.visual-intrest::after, .is-style-text-display.visual-intrest::after, .visual-intrest p::after { content: " /////"; color: var(--color-yolk-yellow); } /* ========================================================================== 04B. TECHNICAL & EDITORIAL TYPOGRAPHY ========================================================================== */ /* --- Code & Hardware Control Keys --- */ code, pre, samp { font-family: var(--font-mono) !important; font-size: 0.875em; background-color: var(--color-dusk); color: var(--color-yolk-yellow); padding: 0.15em 0.4em; border-radius: 0; /* full brutalist — was 3px */ border: 1px solid rgba(232, 217, 24, 0.25); box-decoration-break: clone; -webkit-box-decoration-break: clone; } kbd { font-family: var(--font-mono) !important; font-size: 0.8em; background-color: var(--color-midnight); color: var(--color-cream); padding: 0.15em 0.45em; border-radius: 0; /* full brutalist — was 3px */ border: 1px solid var(--color-warm-gray); box-shadow: 0 2px 0 var(--color-dusk); } /* --- Editorial Quotes --- */ blockquote { font-family: var(--font-sans); font-weight: 400; font-style: italic; border-left: 4px solid var(--color-yolk-yellow) !important; background-color: rgba(232, 217, 24, 0.08); padding: 1.25rem 1.5rem !important; margin: 2rem 0 !important; border-radius: 0; /* full brutalist — was 0 8px 8px 0 */ } blockquote cite, blockquote footer { font-family: var(--font-sans); font-weight: 400; font-style: normal; } .wp-block-quote p { margin-bottom: 0 !important; } /* Print-Zine Pullquote Breakout */ .wp-block-pullquote, blockquote.is-style-pullquote { border: 4px solid var(--color-cream) !important; background: var(--color-dusk) !important; box-sizing: border-box; padding: 2rem 1.75rem !important; margin: 3rem auto !important; max-width: 640px; text-align: center; box-shadow: var(--shadow-offset-lg) var(--shadow-offset-lg) 0 var(--shadow-color) !important; } /* --- Plain Pullquote (opt-out of the sticker treatment) --- */ .wp-block-pullquote.plain, blockquote.is-style-pullquote.plain, blockquote.is-style-plain { border: none !important; background: transparent !important; box-shadow: none !important; max-width: none; padding: 1.75rem 0 !important; margin: 3rem 0 !important; } .wp-block-pullquote p, blockquote.is-style-pullquote p { font-family: var(--font-sans) !important; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem) !important; font-weight: 600 !important; line-height: 1.3 !important; letter-spacing: -0.02em; color: var(--color-cream) !important; } .wp-block-pullquote cite { font-family: var(--font-mono) !important; font-size: 0.85rem !important; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-warm-gray); } /* ========================================================================== 04C. INTERVIEW / Q&A WRAPPER -------------------------------------------------------------------------- For back-and-forth interview transcripts: one paragraph block per turn of speech, each starting with the speaker's initials. Alternates each turn structurally (side, border, background) rather than by color hue — stays inside the one-accent-color rule at the top of this file; yolk-yellow is reserved for the speaker tag only. CSS CANNOT auto-detect "everything before the colon" — there's no way for a stylesheet to inspect text content and act on part of it. What this actually requires from the author: manually bold the speaker's initials with the editor's Bold button (or type **JS:** in Markdown view), which produces a real tag. The rule below then styles that as a distinct speaker tag. Skipping the manual bold means the initials render as plain text with no special treatment. MARKUP: wrap the whole exchange in a Group block with the `is-style-interview` block style (or class="interview" if applying it directly). Each turn is its own paragraph block inside that group: [Group: is-style-interview]
JS: First question or line...

LB: Response...

JS: Follow-up...
[/Group] Odd-numbered paragraphs (1st, 3rd, 5th…) read as the interviewer/first voice; even-numbered paragraphs read as the second voice. If more than two people are speaking, this two-way alternation won't track who's talking — treat it as a two-voice pattern by design, not a per-speaker system. ========================================================================== */ .is-style-interview, .interview { margin: 3rem 0; } .is-style-interview p, .interview p { font-family: var(--font-sans) !important; font-size: var(--fs-md) !important; font-weight: 400 !important; line-height: 1.7 !important; color: var(--color-cream) !important; max-width: 62ch !important; box-sizing: border-box !important; padding: 1.25rem 1.5rem !important; margin: 0 0 1.5rem 0 !important; border-radius: 0 !important; /* full brutalist, no exceptions */ } /* Odd turns (1st voice) — flush left, cream border */ .is-style-interview p:nth-of-type(odd), .interview p:nth-of-type(odd) { background-color: transparent !important; border: none !important; border-left: 4px solid var(--color-cream) !important; margin-left: 0 !important; margin-right: auto !important; } /* Even turns (2nd voice) — pushed right, dusk fill, warm-gray border */ .is-style-interview p:nth-of-type(even), .interview p:nth-of-type(even) { background-color: var(--color-dusk) !important; border: none !important; border-right: 4px solid var(--color-warm-gray) !important; margin-left: auto !important; margin-right: 0 !important; } /* Speaker tag (the manually-bolded initials before the colon) */ .is-style-interview p strong, .interview p strong { font-family: var(--font-mono) !important; font-weight: 700 !important; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-yolk-yellow) !important; } /* ========================================================================== 05. DISPLAY HEADING DECORATIONS (OUTLINE & UNDERLINE) ========================================================================== */ /* --- Shared Base for Outlined & Underlined Display Headings --- */ :root body :is(h1, h2, h3, h4, h5, h6).is-style-display, :root body .is-style-display :is(h1, h2, h3, h4, h5, h6) { display: inline-block !important; box-sizing: border-box !important; } /* --- Level 1 Headings (18px Borders) --- */ :root body :is(h1.outline, h1.is-style-outline, .outline h1, .is-style-outline h1) { border: solid 18px var(--color-cream) !important; padding: 0.2em 0.4em !important; } :root body :is(h1.underline, h1.is-style-underline, .underline h1, .is-style-underline h1) { border-bottom: solid 18px var(--color-cream) !important; padding-bottom: 0.15em !important; } /* --- Level 2 Headings (12px Borders) --- */ :root body :is(h2.outline, h2.is-style-outline, .outline h2, .is-style-outline h2) { border: solid 12px var(--color-cream) !important; padding: 0.2em 0.4em !important; } :root body :is(h2.underline, h2.is-style-underline, .underline h2, .is-style-underline h2) { border-bottom: solid 12px var(--color-cream) !important; padding-bottom: 0.15em !important; } /* --- Level 3 Headings (10px Borders) --- */ :root body :is(h3.outline, h3.is-style-outline, .outline h3, .is-style-outline h3) { border: solid 10px var(--color-cream) !important; padding: 0.2em 0.35em !important; } :root body :is(h3.underline, h3.is-style-underline, .underline h3, .is-style-underline h3) { border-bottom: solid 10px var(--color-cream) !important; padding-bottom: 0.12em !important; } /* --- Level 4 Headings (8px Borders) --- */ :root body :is(h4.outline, h4.is-style-outline, .outline h4, .is-style-outline h4) { border: solid 8px var(--color-cream) !important; padding: 0.15em 0.3em !important; } :root body :is(h4.underline, h4.is-style-underline, .underline h4, .is-style-underline h4) { border-bottom: solid 8px var(--color-cream) !important; padding-bottom: 0.1em !important; } /* --- Level 5 Headings (4px Borders) --- */ :root body :is(h5.outline, h5.is-style-outline, .outline h5, .is-style-outline h5) { border: solid 4px var(--color-cream) !important; padding: 0.12em 0.25em !important; } :root body :is(h5.underline, h5.is-style-underline, .underline h5, .is-style-underline h5) { border-bottom: solid 4px var(--color-cream) !important; padding-bottom: 0.08em !important; } /* --- Level 6 Headings (2px Borders) --- */ :root body :is(h6.outline, h6.is-style-outline, .outline h6, .is-style-outline h6) { border: solid 2px var(--color-cream) !important; padding: 0.1em 0.2em !important; } :root body :is(h6.underline, h6.is-style-underline, .underline h6, .is-style-underline h6) { border-bottom: solid 2px var(--color-cream) !important; padding-bottom: 0.05em !important; } /* --- Sticker Heading (optional offset-shadow accent) --- */ :root body :is(h1, h2).sticker, :root body .sticker :is(h1, h2) { display: inline-block !important; box-sizing: border-box !important; box-shadow: var(--shadow-offset-lg) var(--shadow-offset-lg) 0 var(--shadow-color) !important; } :root body :is(h3, h4).sticker, :root body .sticker :is(h3, h4) { display: inline-block !important; box-sizing: border-box !important; box-shadow: var(--shadow-offset-md) var(--shadow-offset-md) 0 var(--shadow-color) !important; } :root body :is(h5, h6).sticker, :root body .sticker :is(h5, h6) { display: inline-block !important; box-sizing: border-box !important; box-shadow: var(--shadow-offset-sm) var(--shadow-offset-sm) 0 var(--shadow-color) !important; } /* ========================================================================== 06. HIGHLIGHTS & MARK TAG FIXES ========================================================================== */ ::selection, :root mark, :root .highlight mark { background-color: var(--color-yolk-yellow) !important; color: var(--color-midnight) !important; text-shadow: none !important; } mark, .has-inline-color mark { display: inline; line-height: 1.4 !important; padding: 0.15em 0.3em 0.25em 0.3em !important; box-decoration-break: clone; -webkit-box-decoration-break: clone; overflow: visible !important; } /* ========================================================================== 07. EDITORIAL BODY & GUTENBERG SPECIFICITY OVERRIDES -------------------------------------------------------------------------- The old `.eb` ("editorial body") opt-in class and its font/link/hover rules have been removed from this section — that treatment is now the automatic default for every post paragraph via body.single-post in 04A, so there's nothing left for authors to manually apply. ========================================================================== */ /* Vertical Cadence Spacing */ .entry-content h2, .entry-content h3, .wp-block-post-content h2, .wp-block-post-content h3 { margin-top: 2em !important; margin-bottom: 0.5em !important; } h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p { padding-top: 0.25em !important; } /* Gutenberg Theme Font Mapping Overrides */ .has-heading-font-family, .has-mono-font-family, .has-monospace-font-family { font-family: var(--font-mono) !important; } .has-body-font-family, .has-serif-font-family { font-family: var(--font-serif) !important; } .has-sans-serif-font-family { font-family: var(--font-sans) !important; } p.wp-block-post-excerpt__excerpt { font-family: var(--font-serif) !important; font-weight: 300 !important; /* Adjusted slightly up for halation consistency */ } p.wp-block-post-excerpt__more-text { font-family: var(--font-mono) !important; font-weight: 400 !important; /* Adjusted slightly up for halation consistency */ } /* ========================================================================== 08. UTILITY CLASSES (CORE ATOMIC SYSTEM) ========================================================================== */ /* Family Overrides */ .font-plex-sans { font-family: var(--font-sans) !important; } .font-plex-serif { font-family: var(--font-serif) !important; } .font-plex-mono { font-family: var(--font-mono) !important; } /* Weight Utilities */ .font-thin, .w-100 { font-weight: 100 !important; } .font-extralight, .w-200 { font-weight: 200 !important; } .font-light, .w-300 { font-weight: 300 !important; } .font-regular, .w-400 { font-weight: 400 !important; } .font-text, .w-450 { font-weight: 450 !important; } .font-medium, .w-500 { font-weight: 500 !important; } .font-semibold, .w-600 { font-weight: 600 !important; } .font-bold, .w-700 { font-weight: 700 !important; } .has-light-font-weight { font-weight: 300 !important; } .has-regular-font-weight { font-weight: 400 !important; } .has-medium-font-weight { font-weight: 500 !important; } .has-semibold-font-weight { font-weight: 600 !important; } .has-bold-font-weight { font-weight: 700 !important; } .font-italic { font-style: italic !important; } .font-normal { font-style: normal !important; } /* ========================================================================== 09. LIST SYSTEM & ICON GLYPH VARIATIONS -------------------------------------------------------------------------- Every rule in this section previously carried a dead `main` prefix — removed throughout, since these blocks/lists appear the same way whether they sit on a page or a post. ========================================================================== */ :is(ul.wp-block-list.star, ul.wp-block-list.arrow, ul.wp-block-list.play, ul.wp-block-list.external), :root :is(ul.wp-block-page-list, ul.wp-block-list.arrow-wid, ul.wp-block-list.pointer, ul.wp-block-list.angle, ul.wp-block-list.check, ul.wp-block-latest-posts.wp-block-latest-posts__list.arrow-tree) { list-style: none; margin-left: 0; padding-left: 1.5rem; } /* Scoped to the same variant classes above, plus the page-list nav, so plain unstyled bulleted lists elsewhere on the site keep their default markers. */ :root :is(ul.wp-block-list.star, ul.wp-block-list.arrow, ul.wp-block-list.arrow-wid, ul.wp-block-list.pointer, ul.wp-block-list.play, ul.wp-block-list.angle, ul.wp-block-list.check, ul.wp-block-list.external) li::marker, ul.wp-block-page-list li::marker { content: ""; display: none; } .wp-block-list a { overflow-wrap: break-word; word-break: break-word; } /* Background Image Star List */ ul.wp-block-list.star { padding-left: 0; } ul.wp-block-list.star li { background-image: url('https://panamasound.com/wp-content/uploads/2026/01/ylw-star-1.png'); background-repeat: no-repeat; background-position: 0 0.25em; background-size: 16px 16px; padding-left: 30px; margin-bottom: 12px; display: block; } /* Pseudo-Element Glyphs */ :root :is(ul.wp-block-list.arrow, ul.wp-block-list.arrow-wid, ul.wp-block-list.pointer, ul.wp-block-list.play, ul.wp-block-list.angle, ul.wp-block-list.external, ul.wp-block-latest-posts.wp-block-latest-posts__list.arrow-tree, ul.wp-block-list.check) li, p.wp-block-post-excerpt__more-text a { position: relative; } :root :is(ul.wp-block-list.arrow, ul.wp-block-list.arrow-wid, ul.wp-block-list.pointer, ul.wp-block-list.play, ul.wp-block-list.angle, ul.wp-block-latest-posts.wp-block-latest-posts__list.arrow-tree, ul.wp-block-list.check) li::before, p.wp-block-post-excerpt__more-text a::before { position: absolute; left: -1.5rem; color: var(--color-yolk-yellow); font-weight: bold; } :root ul.wp-block-list.arrow li::before { content: '\2192'; } :root ul.wp-block-list.arrow-wid li::before { content: '\2794'; } :root ul.wp-block-list.pointer li::before { content: '\27A4'; } :root ul.wp-block-list.play li::before, p.wp-block-post-excerpt__more-text a::before { content: '\25B6'; } :root ul.wp-block-list.angle li::before { content: '\276F'; } :root ul.wp-block-list.check li::before { content: '\2714'; } ul.wp-block-list.external li::after, p.external a::after { content: ' \2197'; color: var(--color-yolk-yellow); display: inline-block; } /* ========================================================================== 10. TABLES & MEDIA COMPONENTS -------------------------------------------------------------------------- Same fix as section 09 — dropped the dead `main` prefix from every selector here. ========================================================================== */ .wp-block-table table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; } table th { border-bottom: 2px solid var(--color-yolk-yellow); text-align: left; padding: 10px 12px; font-family: var(--font-mono); } table td { padding: 10px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } table tr:hover td { background-color: rgba(255, 255, 255, 0.03); } /* Media Elements */ .wp-block-image img { box-sizing: border-box; border: 12px solid var(--color-warm-gray); border-radius: 0; /* full brutalist — was 8px */ transition: border-color var(--transition-smooth); } .wp-block-image img:hover { border-color: var(--color-yolk-yellow); } figcaption, .wp-element-caption, small { font-size: var(--fs-xs); line-height: 1.4; } .entry-content figcaption, .wp-block-image figcaption { font-style: italic; opacity: 0.85; text-align: center; margin-top: 0.75rem !important; letter-spacing: 0.02em; } /* ========================================================================== 11. BUTTON & LINK-BUTTON OVERRIDES ========================================================================== */ /* 1. Base Styles for Native Buttons AND WordPress Block Links */ :root body :is(button, input[type="button"], input[type="submit"], .wp-block-button__link, .wp-block-button .wp-block-button__link) { border: solid 5px var(--color-cream) !important; border-radius: 0px !important; color: var(--color-cream) !important; background-color: transparent; text-decoration: underline !important; text-underline-offset: 3px !important; box-sizing: border-box !important; box-shadow: var(--shadow-offset-sm) var(--shadow-offset-sm) 0 var(--shadow-color) !important; transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast) !important; } /* 2. Interactive Hover & Focus States */ :root body :is(button, input[type="button"], input[type="submit"], .wp-block-button__link, .wp-block-button .wp-block-button__link):is(:hover, :focus-visible) { color: var(--color-yolk-yellow) !important; border-color: var(--color-yolk-yellow) !important; text-decoration: underline !important; background-color: transparent !important; } /* 3. Pressed / Click State */ :root body :is(button, input[type="button"], input[type="submit"], .wp-block-button__link, .wp-block-button .wp-block-button__link):active { transform: translate(var(--shadow-offset-sm), var(--shadow-offset-sm)) !important; box-shadow: 0 0 0 var(--shadow-color) !important; } /* 4. Reduced Motion Fallback */ @media (prefers-reduced-motion: reduce) { :root body :is(button, input[type="button"], input[type="submit"], .wp-block-button__link, .wp-block-button .wp-block-button__link):active { transform: none !important; } } /* ========================================================================== 12. HEADER & FOOTER STRUCTURE ========================================================================== */ header nav, .header-logo { align-items: flex-start !important; } .wp-block-group.footer-nav-container { align-items: flex-start !important; gap: 3rem !important; } .wp-block-group.is-horizontal.is-content-justification-space-between { align-items: flex-start !important; } .wp-block-group.is-horizontal > .wp-block-group, .wp-block-group.is-horizontal h2.wp-block-heading, .wp-block-group.is-horizontal ul { margin-top: 0 !important; padding-top: 0 !important; } .footer-nav ul, .wp-block-latest-posts.arrow-tree { font-size: 1.125rem; padding-left: 0 !important; margin-left: 0 !important; list-style: none !important; } :root .footer-nav ul li { font-family: var(--font-sans) !important; font-weight: 300; font-style: normal; } .footer-posts, .footer-posts h2 a { color: var(--color-warm-gray) !important; } .footer-mainlinks, .footer-mainlinks h2 a { color: var(--color-cream) !important; } .footer-nav a, .wp-block-latest-posts a { text-decoration: underline; transition: opacity var(--transition-fast); } .footer-nav a:hover, .wp-block-latest-posts a:hover { opacity: 0.95; text-decoration: underline; } .footer-nav h2, .footer-nav h2 a, .wp-block-group h2.wp-block-heading { margin-top: 0 !important; margin-bottom: 1rem !important; text-transform: uppercase; } .wp-block-group h2.wp-block-heading a, .wp-block-group.footer-nav-container h2.wp-block-heading a { text-decoration: underline !important; } header nav a:hover, .wp-block-group h2.wp-block-heading a:hover { text-decoration: underline !important; color: var(--color-yolk-yellow) !important; transition: ease-in-out .5s; } footer.wp-block-template-part p.copyright { font-family: var(--font-mono) !important; font-size: small; text-align: right; } /* ========================================================================== 13. RESPONSIVE BREAKPOINTS & LAYOUT ENGINES ========================================================================== */ /* --- Mobile Viewports (<= 600px) --- */ @media screen and (max-width: 600px) { :root :where(.wp-block-list > li) { line-height: 1.5em; margin-left: 10px !important; margin-right: 10px !important; } :root :where(.wp-block-list) { padding-left: 15px !important; padding-right: 15px !important; } } /* --- Mobile / Small Tablet Viewports (<= 767px) --- */ @media screen and (max-width: 767px) { p.is-style-text-display, .is-style-text-display p { margin: 10px 15px !important; } /* Slightly tighter rhythm for post paragraphs on small screens */ body.single-post .entry-content p, body.single-post .wp-block-post-content p { line-height: 1.65; margin-bottom: 1.25rem; padding-left: 0.25rem; padding-right: 0.25rem; } /* Same treatment for page paragraphs on small screens */ body.page .entry-content p, body.page .wp-block-post-content p { line-height: 1.6; margin-bottom: 1.1rem; padding-left: 0.25rem; padding-right: 0.25rem; } } /* --- Tablet / Desktop Boundary (<= 1024px) --- */ @media (max-width: 1024px) { /* Force dynamic Gutenberg grid columns to stack vertically on small displays */ .wp-block-grid, .is-layout-grid { display: flex !important; flex-direction: column !important; gap: 24px !important; } } /* --- Desktop Wide Layout Engine (>= 1025px) --- */ @media (min-width: 1025px) { /* Global Width Cap: Prevents post/page contents from stretching excessively on large monitors. Includes .page alongside .single-post — the container itself needs capping on both content types, not just posts. */ .single-post .entry-content > :where(:not(.alignfull)), .page .entry-content > :where(:not(.alignfull)), .wp-block-group.is-layout-constrained > :where(:not(.alignfull)), .wp-site-blocks > .is-layout-constrained > :where(:not(.alignfull)) { max-width: 1140px !important; margin-left: auto !important; margin-right: auto !important; } /* Dynamic CSS Grid: Auto-fit calculates item distribution without blank slot spaces */ .wp-block-grid, .is-layout-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important; gap: 40px !important; width: 100% !important; } /* Force grid child elements to stretch fully inside assigned track slots */ .wp-block-grid > *, .is-layout-grid > * { max-width: 100% !important; width: 100% !important; } }