/*!
Theme Name: WooGraphQL Block Theme
Theme URI: https://woographql.com
Author: AxisTaylor, LLC
Author URI: https://axistaylor.com
Description: A modern block theme for WooGraphQL built with Full Site Editing.
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: woographql-block-theme
Tags: block-themes, full-site-editing, e-commerce, woocommerce

WooGraphQL Block Theme, (C) 2026 AxisTaylor, LLC
WooGraphQL Block Theme is distributed under the terms of the GNU GPL.
*/


@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css');
/**
 * Plain-CSS bundle used by consumers that don't run Tailwind processing
 * (notably the WordPress block theme's PostCSS pipeline). Contains the
 * design tokens (imports/breakpoints/fonts/sizing/animations/brand)
 * plus utility resets — but NOT `css/base.css`, which uses `@apply` and
 * `@layer base` and therefore can't ship through a non-Tailwind chain.
 *
 * Element-level base styles (body background, headings, links, etc.)
 * are inlined below as concrete CSS so both surfaces — the Next.js
 * frontend and the WP editor canvas — get the same visual treatment.
 * Crucially they are NOT wrapped in `@layer base`: WP's editor canvas
 * ships an unlayered `body { background-color: white }` reset, and any
 * Cascade Layer L5 rule loses to unlayered author rules. Keeping the
 * rules unlayered makes them win in the editor by source order.
 */
/* Source Serif 4 — heading/display serif. Variable on weight (200–900)
   AND optical size (8–60), so a 22px h4 picks up a sturdier stroke
   contrast automatically while a 78px hero h1 stays elegant. Italic
   axis included for emphasis. */
/* Onest — body/UI sans. Variable (100–900) with italic. We pull the
   weights the wireframes actually use: 400 body, 500 heads, 600 UI. */
/* IBM Plex Mono — code blocks. 400 inline / 500 emphasized / 600 strong. */
/* Bootstrap Icons (jsDelivr CDN) — class-based icon font covering both
   UI iconography and major brand logos in a single library with one
   uniform naming convention. Usage:
     <i class="bi bi-github"></i>      Brand icon
     <i class="bi bi-house"></i>       UI icon
   The class drives the glyph via ::before { content }; the element's
   text content stays empty. License: MIT. Served from jsDelivr with
   proper Access-Control-Allow-Origin headers, so multisite installs
   that load this stylesheet from a different origin than the page
   (the bundled @fortawesome/fontawesome-free webfont approach was
   failing with CORS errors in that exact setup) can fetch the font
   files cleanly. Pinned to 1.11.3 so a future major bump can't shift
   class slugs out from under existing button content. */
/**
 * Responsive breakpoint tokens for WooGraphQL theme.
 */
:root {
  --breakpoint-xs: 320px;
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 976px;
  --breakpoint-xl: 1440px;
  --breakpoint-2xl: 1400px;
}
/**
 * Tailwind font family + type scale tokens.
 *
 * Pairing:
 *   sans  — Onest         (technical-but-warm geometric, body + UI)
 *   serif — Source Serif 4 (variable opsz + wght, editorial heads that
 *                           stay legible at body-adjacent sizes)
 *   mono  — IBM Plex Mono  (designed mono for code blocks)
 *
 * The system stack on each line is the SSR / no-network fallback that gets
 * swapped out the moment the webfont resolves.
 *
 * The size scale is design-tuned from the editorial redesign refs (see
 * apps/woographql.com/redesign-refs). Each slug lands on a value the
 * wireframes actually use — `lg` = 19px (hero sub), `xl` = 22px (h4 /
 * feature heading), `4xl/5xl` are clamp()'d to match the responsive
 * h2/h1 ranges (36→56 and 48→78) verbatim. Line-heights mirror the
 * tight editorial rhythm used in the refs.
 */
:root {
  --font-family-sans: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  --font-family-serif: 'Source Serif 4', Georgia, 'Times New Roman', Times, serif;
  --font-family-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  /* Type scale — each step is a size the wireframes use. */

  /* xs (11px) — code-block titles, eyebrows, badge labels */
  --text-xs: 0.6875rem;
  --text-xs--line-height: 1rem;

  /* sm (14px) — small UI, captions, dense table rows */
  --text-sm: 0.875rem;
  --text-sm--line-height: 1.4;

  /* base (16px) — body copy */
  --text-base: 1rem;
  --text-base--line-height: 1.6;

  /* lg (19px) — hero sub-heading, lede paragraphs */
  --text-lg: 1.1875rem;
  --text-lg--line-height: 1.5;

  /* xl (22px) — h4, feature headlines */
  --text-xl: 1.375rem;
  --text-xl--line-height: 1.35;

  /* 2xl (24px) — h3 within cards, comparison columns */
  --text-2xl: 1.5rem;
  --text-2xl--line-height: 1.3;

  /* 3xl (30px) — price-card heading, mid-tier section heads */
  --text-3xl: 1.875rem;
  --text-3xl--line-height: 1.2;

  /* 4xl — h2 / section titles, responsive 36 → 56 (matches wireframe) */
  --text-4xl: clamp(2.25rem, 4.5vw + 1rem, 3.5rem);
  --text-4xl--line-height: 1.1;

  /* 5xl — h1 / hero, responsive 48 → 78 (matches wireframe) */
  --text-5xl: clamp(3rem, 6vw + 1rem, 4.875rem);
  --text-5xl--line-height: 1.05;

  /* 6xl–9xl — large display weights for the occasional oversize layout. */
  --text-6xl: 5.5rem;       /*  88px */
  --text-6xl--line-height: 1.05;
  --text-7xl: 6.5rem;       /* 104px */
  --text-7xl--line-height: 1;
  --text-8xl: 8rem;         /* 128px */
  --text-8xl--line-height: 1;
  --text-9xl: 10rem;        /* 160px */
  --text-9xl--line-height: 1;

  /* Tracking — match the wireframe's tight editorial letter-spacing. */
  --tracking-tighter: -0.025em;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;

  /* Weights — Onest variable + Instrument Serif variable both cover the
     full 100-700 range; the wireframe leans 400 body / 500 heads / 600 UI. */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
}
/**
 * Spacing, sizing, and layout tokens for WooGraphQL.
 *
 * The numeric --spacing-N scale is the source of truth for Tailwind
 * utilities (p-N, gap-N, mb-N, …) *and* for `theme.json` `spacingSizes`
 * in the WordPress block theme. Both surfaces consume the same `var()`
 * references, so a fresh Gutenberg page renders with the same vertical
 * rhythm as the Next.js frontend without per-block tweaks.
 *
 * Each step lands on a value that appears in the editorial redesign refs
 * (see apps/woographql.com/redesign-refs). Where a slug shifts off the
 * Tailwind default (e.g. spacing-5 = 18px instead of 20px), the new
 * value is the one the design actually uses repeatedly — the small drift
 * is intentional so the whole system snaps into one rhythm.
 *
 * The most heavily-used "default block gap" in the wireframes is 22px
 * (spacing-6) — section-title margins, paragraph spacing, card lede →
 * content gaps. Gutenberg's `styles.spacing.blockGap` and
 * `styles.elements.heading.spacing.margin` point at it.
 */
:root {
  --spacing-px: 1px;
  --spacing-0: 0;

  /* Sub-base values for hairline tuning (icon nudges, dense controls). */
  --spacing-0-1: 0.1rem;       /*  1.6px */
  --spacing-0-2: 0.2rem;       /*  3.2px */

  /* Base scale, design-tuned. Each step is a value the wireframes use. */
  --spacing-1: 0.25rem;        /*   4px — micro gap, fine alignment */
  --spacing-1-1: 0.375rem;     /*   6px — extra-tight inline */
  --spacing-2: 0.5rem;         /*   8px — tight gap, button-icon spacing */
  --spacing-2-1: 0.625rem;     /*  10px — button vertical padding */
  --spacing-3: 0.75rem;        /*  12px — small gap, control-internal */
  --spacing-4: 1rem;           /*  16px — base unit, single-line margin */
  --spacing-5: 1.125rem;       /*  18px — relaxed margin / button padding */
  --spacing-6: 1.375rem;       /*  22px — DEFAULT BLOCK GAP (paragraph / heading-to-body) */
  --spacing-7: 1.75rem;        /*  28px — card padding, generous block gap */
  --spacing-8: 2.25rem;        /*  36px — card padding large, heading-to-content */
  --spacing-9: 3rem;           /*  48px — wide group gap */
  --spacing-10: 3.5rem;        /*  56px — between major rows */
  --spacing-11: 4rem;          /*  64px — extra row spacing */
  --spacing-12: 4.5rem;        /*  72px — column gap on desktop */
  --spacing-14: 5rem;          /*  80px — SECTION PADDING (mobile) */
  --spacing-16: 6rem;          /*  96px — interim */
  --spacing-18: 6.25rem;       /* 100px — generous section */
  --spacing-20: 7.5rem;        /* 120px — SECTION PADDING (desktop) */
  --spacing-24: 8.75rem;       /* 140px — XL hero section */
  --spacing-32: 10rem;         /* 160px — hero-scale */

  /* Full-width tokens kept for legacy callers (data tables, schema docs). */
  --spacing-240: 59.563rem;
  --spacing-256: 64rem;

  /* Container max-widths used by layout wrappers and `theme.json`
     settings.layout.contentSize / wideSize. */
  --container-content: 64rem;   /* 1024px — focused reading column */
  --container-wide: 68.75rem;   /* 1100px — matches WP block theme's .alignwide max-width */
  --container-docs: 87.5rem;    /* 1400px — docs landing + 3-col docs layout */

  /* Heights kept as-is. */
  --height-240: 59.563rem;
  --height-256: 64rem;
  --height-1\/2-screen: 50vh;
  --height-1\/4-screen: 25vh;
  --height-3\/4-screen: 75vh;
  --height-1\/3-screen: 33vh;
  --height-2\/3-screen: 66vh;

  /* Viewport minus the global nav (--spacing-11 = 4rem / 64px). Used by
     sticky side rails (docs sidebar, docs right rail) that need to scroll
     independently inside the viewport below the nav. */
  --height-below-nav: calc(100vh - var(--spacing-11));

  --list-style-type-circle: circle;
  --list-style-type-square: square;
  --list-style-type-roman: upper-roman;

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);
  --radius-4xl: calc(var(--radius) + 16px);

  --shadow-2xs: 0 1px rgb(0 0 0 / 0.1);
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.12);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.2), 0 1px 2px -1px rgb(0 0 0 / 0.15);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.2), 0 2px 4px -2px rgb(0 0 0 / 0.15);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.2), 0 4px 6px -4px rgb(0 0 0 / 0.15);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.2), 0 8px 10px -6px rgb(0 0 0 / 0.15);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.4);
}
/**
 * Animation tokens for WooGraphQL theme.
 */
:root {
  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;
}
@keyframes accordion-down {
  from { height: 0; }
  to { height: var(--radix-accordion-content-height); }
}
@keyframes accordion-up {
  from { height: var(--radix-accordion-content-height); }
  to { height: 0; }
}
/**
 * Brand color palette and theme variables for WooGraphQL.
 *
 * Palette mirrors the editorial redesign refs (paper-on-ink rhythm):
 *   ink   = cello   (#1D3557 deep navy — headings, primary buttons)
 *   blue  = wedgewood (#457B9D — supporting accent)
 *   mint  = peppermint (#DCF1D5 — soft glow / success)
 *   red   = amaranth  (#E63946 — CTA / destructive)
 *   paper = paper     (#FBFAF5 / #F7F4EC / #e8e4d8 — warm off-whites)
 *
 * All values use oklch for perceptual uniformity. Brand scales (50–900)
 * are the inner layer Tailwind utilities can target directly
 * (bg-paper-100, text-cello-800, etc.); the semantic tokens below
 * (--background, --foreground, --primary…) compose them for shadcn /
 * theme.json consumers.
 */
:root {
  /* Peppermint — Soft mint accent (#DCF1D5 anchor at 200) */
  --color-peppermint-50: oklch(0.985 0.012 134);
  --color-peppermint-100: oklch(0.962 0.026 136);
  --color-peppermint-200: oklch(0.939 0.038 138);
  --color-peppermint-300: oklch(0.885 0.066 138);
  --color-peppermint-400: oklch(0.795 0.110 139);
  --color-peppermint-500: oklch(0.700 0.140 139);
  --color-peppermint-600: oklch(0.580 0.135 139);
  --color-peppermint-700: oklch(0.450 0.108 138);
  --color-peppermint-800: oklch(0.310 0.072 137);
  --color-peppermint-900: oklch(0.180 0.040 135);
  --color-peppermint: var(--color-peppermint-200);

  /* Cello — Deep navy "ink" primary (#1D3557 anchor at 700) */
  --color-cello-50: oklch(0.779 0.062 257.0);
  --color-cello-100: oklch(0.744 0.073 257.2);
  --color-cello-200: oklch(0.673 0.094 257.4);
  --color-cello-300: oklch(0.603 0.115 257.0);
  --color-cello-400: oklch(0.535 0.123 257.5);
  --color-cello-500: oklch(0.467 0.105 257.3);
  --color-cello-600: oklch(0.400 0.087 257.0);
  --color-cello-700: oklch(0.328 0.068 257.3);
  --color-cello-800: oklch(0.221 0.039 258.3);
  --color-cello-900: oklch(0.082 0.008 240.8);
  --color-cello: var(--color-cello-700);

  /* Wedgewood — Mid-blue supporting (#457B9D anchor at 400) */
  --color-wedgewood-50: oklch(0.945 0.016 233.2);
  --color-wedgewood-100: oklch(0.890 0.032 233.4);
  --color-wedgewood-200: oklch(0.781 0.064 234.8);
  --color-wedgewood-300: oklch(0.673 0.095 236.5);
  --color-wedgewood-400: oklch(0.560 0.078 238.0);
  --color-wedgewood-500: oklch(0.476 0.066 237.3);
  --color-wedgewood-600: oklch(0.390 0.053 238.1);
  --color-wedgewood-700: oklch(0.302 0.038 237.8);
  --color-wedgewood-800: oklch(0.202 0.021 237.2);
  --color-wedgewood-900: oklch(0.030 0.021 264.1);
  --color-wedgewood: var(--color-wedgewood-400);

  /* Amaranth — Coral red CTA / destructive (#E63946 anchor at 400) */
  --color-amaranth-50: oklch(0.948 0.022 10.4);
  --color-amaranth-100: oklch(0.899 0.045 12.8);
  --color-amaranth-200: oklch(0.799 0.095 13.7);
  --color-amaranth-300: oklch(0.710 0.148 16.4);
  --color-amaranth-400: oklch(0.612 0.208 22.2);
  --color-amaranth-500: oklch(0.521 0.176 21.9);
  --color-amaranth-600: oklch(0.425 0.140 21.6);
  --color-amaranth-700: oklch(0.325 0.103 20.6);
  --color-amaranth-800: oklch(0.215 0.060 19.0);
  --color-amaranth-900: oklch(0.056 0.024 344.7);
  --color-amaranth: var(--color-amaranth-400);

  /* Paper — Warm off-white surfaces and warm gray text.
     #FBFAF5 (paper) at 100, #F7F4EC (cream) at 200, #e8e4d8 (line) at 300. */
  --color-paper-50: oklch(0.989 0.004 90);
  --color-paper-100: oklch(0.979 0.005 90);
  --color-paper-200: oklch(0.963 0.009 87);
  --color-paper-300: oklch(0.913 0.013 85);
  --color-paper-400: oklch(0.795 0.018 82);
  --color-paper-500: oklch(0.625 0.016 78);
  --color-paper-600: oklch(0.475 0.013 75);
  --color-paper-700: oklch(0.345 0.010 70);
  --color-paper-800: oklch(0.220 0.008 65);
  --color-paper-900: oklch(0.120 0.005 60);
  --color-paper: var(--color-paper-100);
}
/*
 * Light theme — paper-on-ink rhythm. The page background is warm paper
 * (#FBFAF5), cards lift slightly to paper-50, surfaces drop to cream
 * (paper-200), dividers use the warm line (paper-300).
 *
 * Changing a brand scale above propagates here automatically.
 *
 * Gradient tokens — radial "lit corner" wash from the foreground
 * pair (82% mixed with transparent) at the top-right, fading into
 * the matching background colour at 35% of the ellipse radius.
 *
 * Semantic gradients (--gradient-background, --gradient-primary, …)
 * resolve through the live --primary / --primary-foreground / etc.
 * variables, so they flip with theme mode automatically — defined
 * once here and inherited by both light and dark.
 *
 * Brand-anchored gradients (--gradient-cello, --gradient-paper,
 * --gradient-peppermint-cello) use the brand scale directly so they
 * look identical in both modes.
 *
 * --gradient-portrait is a diagonal ink → mid-navy → wedgewood ramp
 * used on portrait/author cards (linear 150°, cello → cello-600 →
 * wedgewood).
 *
 * Consumed by the WP block theme's theme.json — each gradient preset's
 * `gradient` field is `var(--gradient-<slug>)`, so Packagist consumers
 * never have to keep two copies of the gradient string in sync.
 *
 * Comments must stay OUTSIDE this rule body so nextpress's
 * `scopeStylesheet` treats it as variables-only and extracts it to a
 * global `:root { … }` (otherwise it gets rewritten to
 * `:scope { … }` inside `@scope ([data-rendered])` and the WP content
 * area falls back to light-mode tokens in dark mode).
 */
:root {
  --background: var(--color-paper-100);
  --foreground: var(--color-cello);
  --card: var(--color-paper-50);
  --card-foreground: var(--color-cello);
  --popover: var(--color-paper-50);
  --popover-foreground: var(--color-cello);
  --primary: var(--color-cello);
  --primary-foreground: var(--color-paper-100);
  --secondary: var(--color-wedgewood);
  --secondary-foreground: var(--color-paper-100);
  --accent: var(--color-amaranth);
  --accent-foreground: var(--color-paper-100);
  --destructive: var(--color-amaranth);
  --destructive-foreground: var(--color-paper-100);
  --muted: var(--color-paper-200);
  --muted-foreground: var(--color-paper-500);
  --border: var(--color-paper-300);
  --input: var(--color-paper-300);
  --ring: var(--color-cello-400);
  --chart-1: var(--color-peppermint-300);
  --chart-2: var(--color-cello-400);
  --chart-3: var(--color-wedgewood-400);
  --chart-4: var(--color-amaranth-400);
  --chart-5: var(--color-cello-700);
  --radius: 0.625rem;
  --sidebar: var(--color-paper-200);
  --sidebar-foreground: var(--color-cello);
  --sidebar-primary: var(--color-cello);
  --sidebar-primary-foreground: var(--color-paper-100);
  --sidebar-accent: var(--color-paper-300);
  --sidebar-accent-foreground: var(--color-cello);
  --sidebar-border: var(--color-paper-300);
  --sidebar-ring: var(--color-cello-400);

  /* Status semantics — used by chips, alerts, account UI, etc.
     Each status ships a *bg, *fg, and *soft (subtle tinted surface) so
     a single chip selector can pick its full palette via one prefix. */
  --status-success: oklch(0.560 0.110 152);
  --status-success-fg: var(--color-paper-100);
  --status-success-soft: oklch(0.945 0.045 152);
  --status-info: var(--color-wedgewood);
  --status-info-fg: var(--color-paper-100);
  --status-info-soft: var(--color-wedgewood-50);
  --status-pending: oklch(0.660 0.140 65);
  --status-pending-fg: var(--color-paper-100);
  --status-pending-soft: oklch(0.945 0.050 75);
  --status-danger: var(--color-amaranth);
  --status-danger-fg: var(--color-paper-100);
  --status-danger-soft: var(--color-amaranth-50);

  --gradient-background: radial-gradient(ellipse at top right, color-mix(in oklch, var(--foreground) 82%, transparent), var(--background) 35%);
  --gradient-primary: radial-gradient(ellipse at top right, color-mix(in oklch, var(--primary-foreground) 82%, transparent), var(--primary) 35%);
  --gradient-secondary: radial-gradient(ellipse at top right, color-mix(in oklch, var(--secondary-foreground) 82%, transparent), var(--secondary) 35%);
  --gradient-accent: radial-gradient(ellipse at top right, color-mix(in oklch, var(--accent-foreground) 82%, transparent), var(--accent) 35%);
  --gradient-destructive: radial-gradient(ellipse at top right, color-mix(in oklch, var(--destructive-foreground) 82%, transparent), var(--destructive) 35%);
  --gradient-muted: radial-gradient(ellipse at top right, color-mix(in oklch, var(--muted-foreground) 82%, transparent), var(--muted) 35%);
  --gradient-card: radial-gradient(ellipse at top right, color-mix(in oklch, var(--card-foreground) 82%, transparent), var(--card) 35%);
  --gradient-popover: radial-gradient(ellipse at top right, color-mix(in oklch, var(--popover-foreground) 82%, transparent), var(--popover) 35%);
  --gradient-cello: radial-gradient(ellipse at top right, color-mix(in oklch, var(--color-paper-100) 82%, transparent), var(--color-cello) 35%);
  --gradient-paper: radial-gradient(ellipse at top right, color-mix(in oklch, var(--color-cello) 82%, transparent), var(--color-paper-100) 35%);
  --gradient-peppermint-cello: radial-gradient(ellipse at top right, color-mix(in oklch, var(--color-peppermint-200) 82%, transparent), var(--color-cello) 35%);
  --gradient-portrait: linear-gradient(150deg, var(--color-cello) 0%, var(--color-cello-600) 60%, var(--color-wedgewood) 100%);
}
/*
 * Dark theme — inverted ink-on-paper. Background is cello-800 (deep
 * brand navy, but lifted off pitch-black so the contrast with paper
 * foreground sits in the comfortable 10–12:1 zone rather than the
 * eye-fatiguing 16:1 we had with the previous L=0.14 base). Elevated
 * surfaces step up to cello-700 (the anchor navy that the brand pairs
 * with paper foreground in light mode — same hue family, just used
 * here as the "raised card" tier instead of as the primary CTA).
 *
 * Layering rhythm:
 *   background  → cello-800     (L≈0.22, page surface)
 *   muted/sidebar → oklch(0.275) (mid step — slightly above bg)
 *   card/popover/sidebar-accent → cello-700 (L≈0.33, raised tier)
 *   border       → oklch(0.420 / 0.5) (visible on raised tier)
 */
:root.dark {
  --background: var(--color-cello-800);
  --foreground: var(--color-paper-100);
  --card: var(--color-cello-700);
  --card-foreground: var(--color-paper-100);
  --popover: var(--color-cello-700);
  --popover-foreground: var(--color-paper-100);
  --primary: var(--color-paper-100);
  --primary-foreground: var(--color-cello);
  --secondary: var(--color-wedgewood-300);
  --secondary-foreground: var(--color-cello);
  --accent: oklch(0.680 0.220 22);
  --accent-foreground: var(--color-paper-100);
  --destructive: oklch(0.680 0.220 22);
  --destructive-foreground: var(--color-paper-100);
  --muted: oklch(0.275 0.050 257);
  --muted-foreground: oklch(0.730 0.020 80);
  --border: oklch(0.420 0.050 257 / 0.5);
  --input: oklch(0.420 0.050 257 / 0.5);
  --ring: var(--color-wedgewood-300);
  --chart-1: var(--color-peppermint-300);
  --chart-2: var(--color-paper-100);
  --chart-3: var(--color-wedgewood-300);
  --chart-4: var(--color-amaranth-300);
  --chart-5: var(--color-cello-400);
  --sidebar: oklch(0.275 0.050 257);
  --sidebar-foreground: var(--color-paper-100);
  --sidebar-primary: var(--color-paper-100);
  --sidebar-primary-foreground: var(--color-cello);
  --sidebar-accent: var(--color-cello-700);
  --sidebar-accent-foreground: var(--color-paper-100);
  --sidebar-border: oklch(0.420 0.050 257 / 0.5);
  --sidebar-ring: var(--color-wedgewood-300);

  /* Dark mode status palette — lighter foregrounds for legibility, soft
     surfaces dropped to translucent overlays so they sit naturally on
     elevated cards. */
  --status-success: oklch(0.760 0.130 152);
  --status-success-fg: var(--color-cello-800);
  --status-success-soft: oklch(0.760 0.130 152 / 0.14);
  --status-info: var(--color-wedgewood-300);
  --status-info-fg: var(--color-cello-800);
  --status-info-soft: oklch(0.673 0.095 236 / 0.14);
  --status-pending: oklch(0.785 0.155 75);
  --status-pending-fg: var(--color-cello-800);
  --status-pending-soft: oklch(0.785 0.155 75 / 0.14);
  --status-danger: oklch(0.720 0.220 22);
  --status-danger-fg: var(--color-paper-100);
  --status-danger-soft: oklch(0.680 0.220 22 / 0.14);
}
@media @import "./css/utility.css"{

/**
 * Base element styles and resets.
 *
 * Brand colors (@theme) and theme variables (light/dark token swaps)
 * are defined in brand.css. The size scale (--text-*) comes from
 * fonts.css.
 *
 * Heading sizes here mirror the per-level rules in the WordPress
 * block theme's theme.json so a Next.js-rendered <h1> and a Gutenberg
 * `core/heading` (level 1) lay out identically.
 */

/* Registered custom properties for the drifting page-decoration
   spotlight (used by `@keyframes spotlight` below). Registration is
   what makes <percentage> values animate smoothly via the typed-value
   pipeline; without @property the browser falls back to discrete
   substitution and the spotlight jumps between keyframes. */
@property --spot-x {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 25%;
}
@property --spot-y {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 35%;
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }

  html {
    @apply font-sans;
  }

  /* Body — base typography + the page-decoration layers.
     Three background-image layers stacked (first = top):
       1. 1px tinted dots on a 28px lattice (drafting-paper grid).
       2. A soft 700px radial gradient — the "drifting light".
       3. Inline SVG fractal noise (paper-surface texture).
     The light at layer 2 uses a per-mode blend-mode so it reveals the
     grain beneath it: in light mode `multiply` with an ink-tinted spot
     darkens the area, raising contrast against the dark ink grain; in
     dark mode `screen` with a cream-tinted spot brightens the area,
     raising contrast against the bright cream grain. Either way, the
     section of grain the light is currently behind reads with more
     presence than the rest of the page.
     The spot position is driven by --spot-x / --spot-y (registered
     above so they animate smoothly) — the dots and grain stay
     anchored, only the light drifts. `prefers-reduced-motion` parks
     the spot at a static position. */
  body {
    @apply bg-background text-foreground text-base leading-relaxed;
    font-family: var(--font-family-sans);
    background-image:
      radial-gradient(
        circle at center,
        color-mix(in oklch, var(--color-cello) 7%, transparent) 1px,
        transparent 1.5px
      ),
      radial-gradient(
        900px circle at var(--spot-x) var(--spot-y),
        color-mix(in oklch, var(--color-cello-900) 28%, transparent),
        transparent 60%
      ),
      url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.11 0 0 0 0 0.21 0 0 0 0 0.34 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 28px 28px, 100% 100%, auto;
    background-repeat: repeat, no-repeat, repeat;
    background-attachment: fixed, fixed, fixed;
    background-blend-mode: normal, multiply, normal;
    animation: spotlight 50s ease-in-out infinite alternate;
  }

  /* Dark mode drops the fractal-noise grain layer — the lifted
     cello-800 base reads cleaner against paper text without the
     paper-tinted noise on top, and the drifting spot still gives
     the page a sense of depth on its own. Two layers only here
     (dots + spot), so the size / repeat / attachment / blend-mode
     declarations carry two values instead of the light-mode three. */
  :root.dark body {
    background-image:
      radial-gradient(
        circle at center,
        color-mix(in oklch, var(--color-paper-100) 12%, transparent) 1px,
        transparent 1.5px
      ),
      radial-gradient(
        900px circle at var(--spot-x) var(--spot-y),
        color-mix(in oklch, var(--color-paper-100) 18%, transparent),
        transparent 60%
      );
    background-size: 28px 28px, 100% 100%;
    background-repeat: repeat, no-repeat;
    background-attachment: fixed, fixed;
    background-blend-mode: normal, screen;
  }

  /* The drifting spotlight — a slow vertical wander down the right
     side of the viewport and back up. --spot-x stays pinned to the
     right edge so the spot feels like a fixed light source whose
     position shifts only along the y-axis. Combined with `alternate`
     in the body's animation declaration, the spot eases between top
     and bottom over the full duration. */
  @keyframes spotlight {
    from { --spot-x: 130%; --spot-y: 10%; }
    to   { --spot-x: 130%; --spot-y: 90%; }
  }

  @media (prefers-reduced-motion: reduce) {
    body { animation: none; }
  }

  /* Headings — serif for h1–h4 (editorial weight), sans for h5/h6
     (which double as eyebrow + section-tag styles). Weights mirror
     the wireframe: 500 for serif heads, 600 for sans heads. */
  h1, h2, h3, h4 {
    font-family: var(--font-family-serif);
    color: var(--foreground);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-tight);
  }

  h5, h6 {
    font-family: var(--font-family-sans);
    color: var(--foreground);
    font-weight: var(--font-weight-semibold);
  }

  h1 { @apply text-5xl; line-height: 1.05; letter-spacing: var(--tracking-tighter); }
  h2 { @apply text-4xl; line-height: 1.1; }
  h3 { @apply text-3xl; line-height: 1.2; }
  h4 { @apply text-xl; line-height: 1.35; }
  h5 { @apply text-lg; line-height: 1.5; }
  h6 {
    @apply text-base;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
  }

  /* Links */
  a {
    @apply text-primary underline underline-offset-2 transition-colors;
  }

  a:hover {
    @apply text-secondary;
  }

  /* Paragraphs */
  p {
    @apply text-foreground leading-relaxed;
  }

}

@layer utilities {
  .container-space {
    @apply px-4 md:px-8 lg:px-16;
  }
}
}
.editor-styles-wrapper {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-family-sans);
  font-size: var(--text-base);
  line-height: 1.625;
  background-image:
    radial-gradient(
      circle at center,
      color-mix(in oklch, var(--color-cello) 7%, transparent) 1px,
      transparent 1.5px
    ),
    radial-gradient(
      900px circle at var(--spot-x) var(--spot-y),
      color-mix(in oklch, var(--color-cello-900) 28%, transparent),
      transparent 60%
    ),
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.11 0 0 0 0 0.21 0 0 0 0 0.34 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 28px 28px, 100% 100%, auto;
  background-repeat: repeat, no-repeat, repeat;
  background-attachment: fixed, fixed, fixed;
  background-blend-mode: normal, multiply, normal;
  animation: spotlight 50s ease-in-out infinite alternate;
}
/* Dark mode drops the fractal-noise grain layer — matches the
   Next.js body rule in css/base.css. Pen-dot lattice + drifting
   spot remain. */
:root.dark .editor-styles-wrapper {
  background-image:
    radial-gradient(
      circle at center,
      color-mix(in oklch, var(--color-paper-100) 12%, transparent) 1px,
      transparent 1.5px
    ),
    radial-gradient(
      900px circle at var(--spot-x) var(--spot-y),
      color-mix(in oklch, var(--color-paper-100) 18%, transparent),
      transparent 60%
    );
  background-size: 28px 28px, 100% 100%;
  background-repeat: repeat, no-repeat;
  background-attachment: fixed, fixed;
  background-blend-mode: normal, screen;
}
@media (prefers-reduced-motion: reduce) {
  .editor-styles-wrapper {
    animation: none;
  }
}
/* Buttons.
 *
 * The compound selector `.wp-block-button .wp-block-button__link` matches
 * core's own padding rule at the same (0,2,0) specificity, and `.wp-element-
 * button` covers buttons rendered outside `.wp-block-button` (e.g. our cart
 * action <button> elements). Because this stylesheet enqueues after core's
 * block-library CSS, ours wins on tie — without this we'd inherit core's
 * `padding: calc(.667em + 2px) calc(1.333em + 2px)`.
 *
 * Sizing matches the editorial redesign refs' `.btn`: 10px × 18px
 * padding, 14px sans text at weight 500, 8-ish px radius. */
.wp-block-button .wp-block-button__link,
.wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background-color: var(--primary);
  padding: var(--spacing-4) var(--spacing-5);
  font-family: var(--font-family-sans);
  font-size: var(--text-sm);
  line-height: 1.2;
  font-weight: 500;
  color: var(--primary-foreground);
  text-decoration: none;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
.wp-block-button .wp-block-button__link:hover,
.wp-element-button:hover {
  background-color: var(--secondary);
  text-decoration: none;
}
.wp-block-button.is-style-primary .wp-block-button__link,
.wp-block-button.is-style-fill .wp-block-button__link {
  background-color: var(--primary);
  color: var(--primary-foreground);
}
.wp-block-button.is-style-secondary .wp-block-button__link {
  background-color: var(--secondary);
  color: var(--secondary-foreground);
}
.wp-block-button.is-style-cta .wp-block-button__link {
  background-color: var(--accent);
  color: var(--accent-foreground);
}
/* Mint: peppermint background, deep navy text. Used on the consultancy
 * CTA over the cello-bg card on /about ("Visit AxisTaylor"). Brand-
 * anchored so the colour doesn't flip in dark mode. */
.wp-block-button.is-style-mint .wp-block-button__link {
  background-color: var(--color-peppermint);
  color: var(--color-cello);
}
/* Social: small bordered chip in mono font for bio / footer social
 * rows (e.g. the @kidunot89 buttons on /about). Card-tone fill with a
 * theme-aware border; hover lifts with a wedgewood-toned border via
 * --ring. */
.wp-block-button.is-style-social .wp-block-button__link {
  background-color: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  font-family: var(--font-family-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  padding: var(--spacing-2-1) var(--spacing-4);
  transition: border-color 0.15s, transform 0.15s, color 0.15s;
}
/* Outline: transparent background, primary border + text. We re-declare
 * padding because core's `.is-style-outline > .wp-block-button__link`
 * rule ships its own (0.667em 1.333em) at the same specificity. The
 * 1.5px border is folded into the box via `box-sizing: border-box` so
 * the outline button matches the fill button's external footprint
 * pixel-for-pixel — otherwise outline renders 3px taller.
 *
 * Border + text resolve through `--outline-color`, which the parent
 * context can override (see the .has-cello-background-color /
 * .has-paper-background-color rules below). When unset, falls back to
 * --primary, which is theme-mode-appropriate by default. */
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--outline-color, var(--primary));
  border: 1.5px solid var(--outline-color, var(--primary));
  padding: var(--spacing-4) var(--spacing-5);
  box-sizing: border-box;
}
/* Dark-mode outline button anchors to --foreground rather than
 * --primary. Decouples the default outline tone from brand-CTA
 * colour decisions (so a future palette swap that re-points
 * --primary at e.g. amaranth doesn't drag every neutral outline
 * button with it). --outline-color overrides from contextual
 * background classes still win. */
:root.dark .wp-block-button.is-style-outline .wp-block-button__link {
  color: var(--outline-color, var(--foreground));
  border-color: var(--outline-color, var(--foreground));
}
/* Contextual outline colour swaps. The outline button defaults to
 * --primary, which matches the page background in either theme mode —
 * great until the button sits on top of a named brand colour
 * (.has-cello-background-color, .has-paper-background-color) that
 * happens to clash with the current --primary. Set --outline-color on
 * the parent so the outline picks the contrasting brand tone.
 *
 *   Cello (dark navy) bg in LIGHT mode → --primary is cello → swap to
 *   --primary-foreground (light).
 *
 *   Cello bg in DARK mode → --primary is paper-100 (light) → leave the
 *   default; the explicit override below restores --primary so a
 *   nested .has-paper-background-color rule can't drag it dark.
 *
 *   Paper (off-white) bg in DARK mode → --primary is paper-100 → swap
 *   to --primary-foreground (dark).
 *
 *   Paper bg in LIGHT mode → --primary is cello (dark) → leave default. */
.has-cello-background-color {
  --outline-color: var(--primary-foreground);
}
:root.dark .has-cello-background-color {
  --outline-color: var(--primary);
}
:root.dark .has-paper-background-color {
  --outline-color: var(--primary-foreground);
}
/* Gradient backgrounds need the same contextual swap. The gradient
 * classes are mode-stable (cello-glow is always dark navy regardless
 * of theme; paper-glow is always light), so use brand tokens directly
 * instead of theme-token chains — that way the rule doesn't have to
 * branch on :root.dark to stay correct in either mode.
 *
 * Theme-aware gradients (primary, secondary, accent, destructive,
 * muted, card, popover, background) DO flip with theme mode, but their
 * foreground pair always contrasts with the bg by definition, so
 * --primary-foreground / --secondary-foreground / etc. is the right
 * outline tone in both modes. */
.has-cello-gradient-background,
.has-peppermint-cello-gradient-background {
  --outline-color: var(--color-paper-100);
}
.has-paper-gradient-background {
  --outline-color: var(--color-cello);
}
.has-background-gradient-background {
  --outline-color: var(--foreground);
}
.has-primary-gradient-background {
  --outline-color: var(--primary-foreground);
}
.has-secondary-gradient-background {
  --outline-color: var(--secondary-foreground);
}
.has-accent-gradient-background {
  --outline-color: var(--accent-foreground);
}
.has-destructive-gradient-background {
  --outline-color: var(--destructive-foreground);
}
.has-muted-gradient-background {
  --outline-color: var(--muted-foreground);
}
.has-card-gradient-background {
  --outline-color: var(--card-foreground);
}
.has-popover-gradient-background {
  --outline-color: var(--popover-foreground);
}
.wp-block-button.is-style-primary .wp-block-button__link:hover,
.wp-block-button.is-style-secondary .wp-block-button__link:hover,
.wp-block-button.is-style-cta .wp-block-button__link:hover,
.wp-block-button.is-style-fill .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  filter: brightness(0.75);
}
.wp-block-button.is-style-primary .wp-block-button__link:hover,
.wp-block-button.is-style-fill .wp-block-button__link:hover {
  background-color: var(--primary);
  color: var(--primary-foreground);
}
.wp-block-button.is-style-secondary .wp-block-button__link:hover {
  background-color: var(--secondary);
  color: var(--secondary-foreground);
}
.wp-block-button.is-style-cta .wp-block-button__link:hover {
  background-color: var(--accent);
  color: var(--accent-foreground);
}
/* Mint and social opt out of the shared brightness(0.75) hover filter
 * above (they aren't listed in the selector) and use a custom lift +
 * shadow / border-colour swap instead. */
.wp-block-button.is-style-mint .wp-block-button__link:hover {
  background-color: var(--color-peppermint);
  color: var(--color-cello);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--color-peppermint) 25%, transparent);
}
.wp-block-button.is-style-social .wp-block-button__link:hover {
  background-color: var(--card);
  color: var(--foreground);
  border-color: var(--ring);
  transform: translateY(-2px);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: transparent;
  color: var(--outline-color, var(--primary));
  border-color: var(--outline-color, var(--primary));
}
/* Lists */
ul, ol {
  padding-left: var(--spacing-6);
}
ul > * + *,
ol > * + * {
  margin-top: var(--spacing-2);
}
ul {
  list-style-type: disc;
}
ol {
  list-style-type: decimal;
}
/* Separators */
hr, .wp-block-separator {
  border-color: var(--border);
  margin-top: var(--spacing-6);
  margin-bottom: var(--spacing-6);
}
/* Images */
.wp-block-image img {
  border-radius: var(--radius-lg);
}
/* Code */
code {
  background-color: var(--muted);
  padding: 0.125rem var(--spacing-1);
  border-radius: 0.25rem;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}
pre {
  background-color: var(--muted);
  padding: var(--spacing-4);
  border-radius: var(--radius-lg);
  overflow-x: auto;
}
pre code {
  background-color: transparent;
  padding: 0;
}
/* Blockquotes */
blockquote {
  border-left: 4px solid var(--primary);
  padding-left: var(--spacing-4);
  font-style: italic;
  color: var(--muted-foreground);
}
/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid var(--border);
  padding: var(--spacing-2) var(--spacing-4);
}
th {
  background-color: var(--muted);
  font-weight: 600;
}
/* Layout constraints to match theme.json */
body {
  max-width: 100vw;
  overflow-x: hidden;
  color: var(--foreground);
}
:where(.wp-site-blocks) > * {
  margin-block-start: 0;
  margin-block-end: 0;
}
:where(.wp-block-columns) {
  margin-bottom: 0 !important;
}
/* Content width constraints */
.wp-block-post-content > *,
.is-layout-constrained > *:not(.alignwide):not(.alignfull) {
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
}
/* Wide alignment */
.alignwide,
.wp-block-post-content > .alignwide,
.is-layout-constrained > .alignwide {
  max-width: 1100px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Full alignment */
.alignfull,
.wp-block-post-content > .alignfull,
.is-layout-constrained > .alignfull {
  max-width: none !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}
/* Prevent alignfull from breaking out of column containers */
.wp-block-column .alignfull,
.wp-block-columns .wp-block-column > .alignfull {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* Auto margin sides (set per-block via the Auto Margin toolbar tool) */
.has-auto-margin-top { margin-top: auto !important; }
.has-auto-margin-right { margin-right: auto !important; }
.has-auto-margin-bottom { margin-bottom: auto !important; }
.has-auto-margin-left { margin-left: auto !important; }
/* Columns block — separator between siblings.
 * Set via the Column Separator panel in the editor (column-separator
 * extension). Attribute serialises as data-separator="…" on the
 * .wp-block-columns wrapper, with an optional
 * data-hide-separator-on-mobile="true" companion.
 *
 * The 781/782px breakpoint matches core's default stacking point for
 * columns. Above it, columns sit side-by-side and the separator is
 * vertical (border-left on the second-and-later columns). Below it,
 * columns stack and the separator becomes horizontal (border-top),
 * unless hide-on-mobile is set. Padding/margin opens space so the
 * line doesn't run flush against the column content. */
/* Color hook — each separator variant resolves --separator-color
   first, falling back to a sensible theme default. The Color Palette
   in the column-separator editor extension sets the custom property
   inline on the wrapper. */
@media (min-width: 782px) {
  /* Line variants — render the rule as a border on the column edge.
     padding-left opens breathing space between the rule and content. */
  .wp-block-columns[data-separator="thin-line"] > .wp-block-column + .wp-block-column,
  .wp-block-columns[data-separator="dashed"] > .wp-block-column + .wp-block-column,
  .wp-block-columns[data-separator="double-line"] > .wp-block-column + .wp-block-column,
  .wp-block-columns[data-separator="accent-bar"] > .wp-block-column + .wp-block-column {
    padding-left: var(--spacing-7);
  }
  .wp-block-columns[data-separator="thin-line"] > .wp-block-column + .wp-block-column {
    border-left: 1px solid var(--separator-color, var(--border));
  }
  .wp-block-columns[data-separator="dashed"] > .wp-block-column + .wp-block-column {
    border-left: 1px dashed var(--separator-color, var(--border));
  }
  .wp-block-columns[data-separator="double-line"] > .wp-block-column + .wp-block-column {
    border-left: 3px double var(--separator-color, var(--border));
  }
  .wp-block-columns[data-separator="accent-bar"] > .wp-block-column + .wp-block-column {
    border-left: 2px solid var(--separator-color, var(--accent));
  }

  /* Dot variant — single 8px dot floated in the middle of the
     column-gap. To keep the dot at the *row's* vertical center even
     when the user sets vertical-align on the columns block (which
     shrinks each column to its content height), we:
       - force the second-and-later column to `align-self: stretch`
         so its box always matches the row height, and
       - center the pseudo with `inset-block: 0; margin-block: auto`,
         which interpolates correctly against the now-stretched box
         regardless of content height.
     The column-gap token (`var(--spacing-9)`) comes from theme.json
     `core/columns.spacing.blockGap.left`. */
  .wp-block-columns[data-separator="dot"] > .wp-block-column + .wp-block-column {
    position: relative;
    align-self: stretch;
  }
  .wp-block-columns[data-separator="dot"] > .wp-block-column + .wp-block-column::before {
    content: '';
    position: absolute;
    left: calc(var(--spacing-9) / -2);
    top: 0;
    bottom: 0;
    width: 0.5rem;
    height: 0.5rem;
    margin-block: auto;
    transform: translateX(-50%);
    border-radius: 50%;
    background-color: var(--separator-color, var(--border));
    pointer-events: none;
    z-index: 1;
  }
}
@media (max-width: 781px) {
  /* Line variants stacked — border-top with matching padding/margin
     so the rule isn't flush against content. */
  .wp-block-columns[data-separator="thin-line"] > .wp-block-column + .wp-block-column,
  .wp-block-columns[data-separator="dashed"] > .wp-block-column + .wp-block-column,
  .wp-block-columns[data-separator="double-line"] > .wp-block-column + .wp-block-column,
  .wp-block-columns[data-separator="accent-bar"] > .wp-block-column + .wp-block-column {
    padding-top: var(--spacing-7);
    margin-top: var(--spacing-7);
  }
  .wp-block-columns[data-separator="thin-line"] > .wp-block-column + .wp-block-column {
    border-top: 1px solid var(--separator-color, var(--border));
  }
  .wp-block-columns[data-separator="dashed"] > .wp-block-column + .wp-block-column {
    border-top: 1px dashed var(--separator-color, var(--border));
  }
  .wp-block-columns[data-separator="double-line"] > .wp-block-column + .wp-block-column {
    border-top: 3px double var(--separator-color, var(--border));
  }
  .wp-block-columns[data-separator="accent-bar"] > .wp-block-column + .wp-block-column {
    border-top: 2px solid var(--separator-color, var(--accent));
  }

  /* Dot variant stacked — same dot, axes swapped. Horizontal centering
     via `inset-inline: 0; margin-inline: auto`. */
  .wp-block-columns[data-separator="dot"] > .wp-block-column + .wp-block-column {
    position: relative;
  }
  .wp-block-columns[data-separator="dot"] > .wp-block-column + .wp-block-column::before {
    content: '';
    position: absolute;
    top: calc(var(--spacing-9) / -2);
    left: 0;
    right: 0;
    width: 0.5rem;
    height: 0.5rem;
    margin-inline: auto;
    transform: translateY(-50%);
    border-radius: 50%;
    background-color: var(--separator-color, var(--border));
    pointer-events: none;
    z-index: 1;
  }

  /* hide-on-mobile — drop both the line-variant border/spacing and
     the dot pseudo so stacked columns sit flush again. */
  .wp-block-columns[data-separator][data-hide-separator-on-mobile="true"]
    > .wp-block-column + .wp-block-column {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
  }
  .wp-block-columns[data-separator="dot"][data-hide-separator-on-mobile="true"]
    > .wp-block-column + .wp-block-column::before {
    display: none;
  }
}