/* ============================================================
   JBDS — styles.css
   Theme: 1.0.0
   ============================================================ */

/* ── RESET & BASE ──────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-sans);
    background-color: var(--canvas--light);
    color: var(--text--body--dark);
    line-height: var(--body-line-height);
    overflow-x: hidden;
    cursor: url('../images/cursor-default.svg') 13 2, default;
}

/* Hover cursor — all interactive elements */
a,
button,
[role="button"],
label[for],
.btn,
.card,
select,
input[type="submit"],
input[type="button"],
input[type="reset"],
input[type="checkbox"],
input[type="radio"],
input[type="range"] {
    cursor: url('../images/cursor-hover.svg') 17 3, pointer;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: var(--text--link--default);
    text-decoration: none;
    font-weight: var(--body-font-weight-link);
}

a:hover {
    color: var(--text--link--hover);
    text-decoration: underline;
}

a:active {
    color: var(--text--link--pressed);
}

a.onDark {
    color: var(--text--link--default_onDark);
    text-decoration: none;
}

a.onDark:hover {
    color: var(--text--link--hover_onDark);
    text-decoration: underline;
}

a.onDark:active {
    color: var(--text--link--pressed_onDark);
}

ul {
    list-style: none;
}

/* ── HERO SECTIONS ──────────────────────────────────────────────────── */

/* Base hero — shared styles across all variants */
.hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    padding-top: var(--space-7xl);
    /* 128px — clears mobile navbar + breathing room */
    padding-bottom: var(--space-4xl);
    /* 64px — standard bottom breathing room */
}

.hero__light {
    background-color: var(--canvas--lightest);
}

.hero__dark {
    background-color: var(--canvas--darkest);
}

.hero__info {
    background-color: var(--canvas--info);
}

.hero__success {
    background-color: var(--canvas--success);
}

.hero__caution {
    background-color: var(--canvas--caution);
}

.hero__warning {
    background-color: var(--canvas--warning);
}

.hero__danger {
    background-color: var(--canvas--danger);
}

/* Mobile only (≤820px) — navbar is at the bottom, so no top clearance needed */
@media (max-width: 820px) {
    .hero {
        padding-top: var(--space-3xl);
        /* 48px — comfortable breathing room from top edge */
    }
}

/*
 * Fixed background layer for the hero.
 * Using a real element instead of background-attachment:fixed because
 * Safari/iOS ignores background-attachment:fixed on scroll containers.
 * position:fixed keeps it pinned to the viewport on all browsers/devices.
 * JS adds a small translateY for parallax drift.
 */
.hero__bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/dotted-bg.jpg');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    z-index: 0;
    pointer-events: none;
    will-change: transform;
}

/* Ensure hero content always stacks above the fixed background layer */
.hero .container {
    position: relative;
    z-index: 1;
}

/*
 * Any section after the hero must stack above .hero__bg (z-index: 0).
 * position:relative + z-index:1 lifts it into the correct stacking layer.
 * background-color ensures the dotted pattern doesn't bleed through.
 * The ~ combinator covers every current and future sibling section.
 */
.hero~section {
    position: relative;
    z-index: 1;
    background-color: var(--neutral--white);
}

/* Tablet–desktop (821px–1279px) — navbar is fixed at top, ~96px tall */
@media (min-width: 821px) {
    .hero {
        padding-top: var(--space-7xl);
        /* 128px — clears tablet navbar + breathing room */
        padding-bottom: var(--space-5xl);
    }
}

/* Large desktop (1280px+) — navbar starts at bottom, not top */
@media (min-width: 1280px) {
    .hero {
        padding-top: var(--space-5xl);
        /* 80px — breathing room from top edge only */
        padding-bottom: var(--space-7xl);
        /* 128px — clears navbar (80px) + bottom gap (24px) + buffer */
    }
}

/*
 * hero__symmetric — used on pages where the navbar is at the top (not bottom),
 * so top and bottom padding should be equal for true visual centering.
 * Overrides the asymmetric desktop padding set above.
 */
.hero__symmetric {
    padding-bottom: var(--space-4xl);
    /* matches the base hero bottom padding */
}

.hero__tight {
    padding-bottom: 0px;
    margin-bottom: 0px;
    margin-top: 104px;
    /* no padding-bottom */
}

@media (min-width: 821px) {
    .hero__symmetric {
        padding-bottom: var(--space-7xl);
        /* match tablet top padding (128px) for equal centering */
    }
}

@media (min-width: 1280px) {
    .hero__symmetric {
        padding-top: var(--space-7xl);
        /* 128px — match bottom so content sits at true center */
        padding-bottom: var(--space-7xl);
    }
}

@media (max-width: 820px) {
    .hero__symmetric {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Hero vh variants — only apply on desktop (1280px+) */
@media (min-width: 1280px) {
    .hero__full {
        min-height: var(--section-vh-full);
    }

    .hero__lg {
        min-height: var(--section-vh-lg);
    }

    .hero__half {
        min-height: var(--section-vh-half);
    }
}

/*
 * .hero ~ .parallax-img (0-2-0) beats .hero ~ section (0-1-1).
 * Restores the theme canvas color and removes the default section padding
 * so the absolutely-positioned images fill edge-to-edge.
 */
.hero~.parallax-img {
    background-color: var(--theme-accent, var(--canvas--info));
    padding-left: 0;
    padding-right: 0;
}

/* Image column needs relative positioning so the badge anchors to it */
.hero__image-col {
    position: relative;
}

/* Center the image within the column at all sizes.                          */
/* Uses compound selector (.col--half.hero__image-col) for higher specificity */
/* than the utilities.css desktop reset (.col--half { align-items: flex-start }) */
.col--half.hero__image-col {
    align-items: center;
}

.hero__image {
    position: relative;
    /* needed for z-index to apply on a non-absolute element */
    z-index: 2;
    /* sits above diamonds --1 and --5 (z-index: 1) */
    width: 100%;
    max-width: 600px;
    height: auto;
    display: block;
    border-radius: var(--radius-pill);
    border-style: solid;
    border-width: var(--border-thin);
    border-color: var(--neutral--white);
    box-shadow: 0px 16px 48px rgba(0, 0, 0, 0.30);
    /* elevation-4 */
    will-change: transform;
}


/* Badge pill — absolutely anchored to bottom of the image column */
.hero__badge {
    position: absolute;
    bottom: var(--space-xl);
    right: 0%;
}

/* ── FEATURED WORK SECTION ──────────────────────────────────── */

.featured-work {
    padding-top: var(--space-7xl);
    /* 128px — generous breathing room above heading */
    padding-bottom: var(--space-5xl);
}

/*
 * Specificity note: .hero ~ section { background-color: white } has 0-1-1.
 * .hero ~ .featured-work uses 0-2-0 and wins, letting us swap the hard white
 * for a gradient that opens transparent (showing the fixed dotted bg through)
 * and melts into solid white over 200px.
 */
.hero~.featured-work {
    background: linear-gradient(to bottom,
            transparent 0%,
            var(--canvas--light) 200px);
}

.featured-work__header {
    margin-bottom: var(--space-3xl);
    /* 48px */
}

/* Cards container — stacks vertically on all sizes */
.featured-work__grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    /* 24px between featured card and the secondary row */
}

/* Secondary row — 1 column on mobile, 2 columns on tablet+ */
.featured-work__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
}

@media (min-width: 821px) {
    .featured-work__row {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── ABOUT SECTION ──────────────────────────────────────────── */

/* Right column — portrait stacked above callout, fills full row height.
   height must stay auto so align-items:stretch on the parent row can
   stretch this column to match the left column. The portrait uses
   height:0 + flex:1 to contribute 0 to this column's natural sizing,
   so the left column's content height wins the row height calculation. */
.about__right {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    /* height: auto (default) — required for align-items:stretch to work */
}

/* Portrait — background-image div so crop position is fully controllable.
   height:0 + flex:1 1 0 means the div contributes nothing to the right
   column's natural height, so the left column's text content sets the row
   height; flex:1 then grows the portrait to fill remaining space above the
   callout. background-position: center 20% keeps the face away from the
   bottom edge at any crop size. */
.about__portrait {
    width: 100%;
    height: 0;
    flex: 1 1 0;
    min-height: 260px;
    /* guaranteed visible at all two-column sizes */
    border-radius: var(--radius-emphasis);
    background-image: url('../images/portrait.jpg');
    background-size: cover;
    background-position: center 25%;
    /* 20% from top keeps the face centred and chin off the bottom edge */
    background-repeat: no-repeat;
}

/* Tablet (821px–1279px) — two-column layout but use a square aspect-ratio
   instead of flex-grow. This shows more vertical content from the photo
   (less aggressive zoom) without needing a different source image. */
@media (min-width: 821px) and (max-width: 1279px) {
    .about__portrait {
        height: auto;
        min-height: 0;
        aspect-ratio: 1 / 1;
        flex: 0 0 auto;
    }
}

/* Mobile — columns stack vertically; use a tall aspect-ratio crop instead
   of flex-grow so the portrait always has a natural, responsive height. */
@media (max-width: 820px) {
    .about__portrait {
        height: auto;
        min-height: 0;
        aspect-ratio: 3 / 4;
        /* taller portrait crop on mobile — shows face + shoulders nicely */
        flex: 0 0 auto;
    }
}

/* Certification badge row */
.about__badges {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    flex-wrap: wrap;
}

.about__badge {
    height: 112px;
    width: auto;
}


/* section.about = 0-1-1, same specificity as .hero ~ section but later
   in the file — wins the cascade and applies the correct background. */
section.about {
    background-color: var(--canvas--light);
}

.about {
    padding-top: var(--space-7xl);
    /* 128px */
    padding-bottom: var(--space-7xl);
    scroll-margin-top: 80px;
    /* mobile: navbar is at the bottom, so marquee lands flush at the top edge */
}

@media (min-width: 821px) {
    .about {
        scroll-margin-top: 153px;
        /* tablet+: navbar is fixed at the top, offset by its height */
    }
}


/*
 * Override row--middle (align-items: center) so both columns stretch to the
 * same height. This gives the right column a definite height that the portrait's
 * flex:1 can resolve against.
 */
.about .row {
    align-items: stretch;
    gap: var(--space-4xl);
    /* 64px — slightly wider column gap than the default row--gap-xl (48px) */
}

/* About left column is always left-aligned — copy reads poorly centered */
.about .col--half {
    text-align: left;
    align-items: flex-start;
}

/* ── SKILLS MARQUEE ──────────────────────────────────────────── */

/*
 * Specificity: .hero ~ section is 0-1-1 (class + element).
 * section.skills is also 0-1-1 — same specificity, but later in the file
 * so it wins, overriding the white background and padding.
 */
section.skills {
    height: 80px;
    background-color: var(--surface--subtle--success);
    padding-left: 0;
    padding-right: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* Full-width overflow clip — no container padding */
.marquee {
    width: 100%;
    overflow: hidden;
    display: flex;
}

/*
 * Track holds two identical copies side-by-side.
 * Animating translateX(-50%) moves exactly one copy-width to the left.
 * When copy 1 exits, copy 2 is perfectly in place — no jump, no gap.
 */
.marquee__track {
    display: flex;
    animation: marquee-scroll 30s linear infinite;
    will-change: transform;
}

/*
 * Each list is one full copy of the skills.
 * padding-right matches the gap so the spacing at the copy-join
 * is identical to the spacing between any two items inside the list.
 */
.marquee__content {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding-right: var(--space-lg);
    /* bridges the join between copy 1 and copy 2 */
    flex-shrink: 0;
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.marquee__content li {
    display: flex;
    align-items: center;
    font-family: var(--font-sans);
    font-size: var(--label-font-size);
    font-weight: var(--fw-500);
    color: var(--text--body--darkest);
    white-space: nowrap;
    line-height: 1;
}

@keyframes marquee-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .marquee__track {
        animation-play-state: paused;
    }
}

/* ── BLOG SECTION ────────────────────────────────────────────── */

/*
 * .hero ~ .blog (0-2-0) beats .hero ~ section (0-1-1).
 * We set only background-color here — the parallax background image lives on
 * .parallax__bg so it can be driven by the parallax JS.
 * section.blog (0-1-1, after .hero~section in source) adds overflow:hidden
 * to clip the oversize .parallax__bg without affecting fixed layers above it.
 */
.hero~.blog {
    background-color: var(--canvas--light);
}

/* .hero ~ .blog-page (0-2-0) beats .hero ~ section (0-1-1).
 * Removes the blanket white background the generic rule applies. */
.hero~.blog-page {
    background-color: var(--canvas--light);
}

section.blog {
    overflow: hidden;
    /* Promote to a GPU composite layer so that overflow:hidden correctly clips
       .parallax__bg, which has will-change:transform (also GPU-composited).
       Without this, the child's compositor layer can escape the parent clip. */
    transform: translateZ(0);
}

section.blog {
    padding-top: var(--space-7xl);
    padding-bottom: var(--space-7xl);
}

/*
 * Parallax background element for sections.
 * Extends 20% above and below the section (total height: 140%) so there's
 * plenty of room for the JS translateY without revealing a gap.
 * Positive speed in PARALLAX_LAYERS → element drifts slower than the
 * section scroll → classic "depth layer" parallax feel.
 */
.parallax__bg {
    position: absolute;
    top: -50%;
    left: 0;
    width: 100%;
    height: 140%;
    background-image: url('../images/gradient-bg-2.png');
    background-size: cover;
    background-position: center;
    z-index: 0;
    pointer-events: none;
    will-change: transform;
}

/* Lift content above the parallax bg layer */
section.blog .container {
    position: relative;
    z-index: 1;
}

/* Header row — heading left, "View all" link right */
.blog__header {
    display: flex;
    align-items: baseline;
    gap: var(--space-xl);
    margin-bottom: var(--space-3xl);
}



/* Cards grid — 1 col mobile, 3 cols tablet+ */
.blog__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    /* 24px between cards */
}

@media (min-width: 821px) {
    .blog__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* ── FOOTER / CONTACT SECTION ────────────────────────────────── */

.site-footer {
    position: relative;
    z-index: 1;
    background-color: var(--canvas--dark);
    color: var(--text--body--light);
    padding-top: var(--space-7xl);
    padding-bottom: var(--space-xl);
}

/* ── Full-width header above the columns ─────────── */

.footer__header {
    margin-bottom: var(--space-3xl);
    text-align: left;
}

/* Wider column gap than the default row--gap-xl (48px) */
.site-footer .row {
    gap: var(--space-5xl);
}

/* ── Right column ─────────────────────────────────── */

.footer__right {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

/* ── Contact link list ────────────────────────────── */

.footer__contact-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    list-style: none;
}

.footer__contact-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.footer__contact-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer__contact-icon svg {
    width: 18px;
    height: 18px;
    color: var(--neutral--white);
}

.footer__links {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    list-style: none;
}

.footer__links a:hover {
    text-decoration: none;
}

.footer__signature {
    border-top: var(--border-hairline) solid var(--border--subtle--onDark);
    margin-top: var(--space-5xl);
    padding-top: var(--space-lg);
    text-align: center;
}

.footer__signature p {
    font-size: var(--label-sm-font-size);
    color: var(--text--body--subtle--onDark);
    margin: 0;
}

/* ── Responsive ───────────────────────────────────── */

@media (max-width: 820px) {
    .site-footer .row {
        gap: var(--space-3xl);
    }

    .footer__right {
        gap: var(--space-2xl);
    }

    .footer__links {
        align-items: center;
    }

    .footer__header .heading-2 {
        font-size: var(--heading-5-font-size);
        line-height: var(--heading-5-line-height);
    }
}

@media (min-width: 821px) {
    .footer__links {
        align-items: flex-start;
    }
}


/* ── LAYOUT ─────────────────────────────────────────────────── */

/* Container — centered, padded, max-width constrained by screen size  */
/* Max-width values are controlled via responsive vars in semantic-variables.css */
.container {
    width: 100%;
    max-width: var(--container-max-default);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-lg);
    /* 16px min — keeps content off screen edges on mobile */
    padding-right: var(--space-lg);
}

/* Container size variants */
.container-narrow {
    max-width: var(--container-max-narrow);
}

.container-wide {
    max-width: var(--container-max-wide);
}

.container-flush {
    max-width: var(--container-max-flush);
    margin: var(--space-none);
    padding: var(--space-none);
    padding-left: var(--space-none);
    padding-right: var(--space-none);
}

/* Row — flex wrapper that holds columns */
/* gap creates space between columns only — never inside them */
.row {
    display: flex;
    flex-wrap: wrap;
}

.row--gap-xs {
    gap: var(--space-sm);
}

/*  8px */
.row--gap-sm {
    gap: var(--space-lg);
}

/* 16px */
.row--gap-md {
    gap: var(--space-xl);
}

/* 24px */
.row--gap-xl {
    gap: var(--space-3xl);
}

/* 48px */

/* Columns — stack full-width on mobile by default */
.col,
.col--half,
.col--third,
.col--two-thirds,
.col--auto {
    flex: 1 1 100%;
    min-width: 0;
}

/* Columns activate side-by-side at tablet and above */
@media (min-width: 1280px) {

    /* Equal-width — splits remaining space evenly */
    .col {
        flex: 1 1 0;
    }

    /* Proportional ratios — gap is handled automatically by flexbox */
    .col--half {
        flex: 1;
    }

    /* pair two of these for a 50/50 split */
    .col--third {
        flex: 1;
    }

    /* use three for a 33/33/33 split      */
    .col--two-thirds {
        flex: 2;
    }

    /* pair with .col--third for a 66/33   */

    /* Shrinks to fit its content */
    .col--auto {
        flex: 0 0 auto;
    }
}

/* Columns are vertical flex containers */
/* Center-aligned by default when stacked on mobile */
.col,
.col--half,
.col--third,
.col--two-thirds {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Reset to left-aligned when side-by-side on desktop */
@media (min-width: 1280px) {

    .col,
    .col--half,
    .col--third,
    .col--two-thirds {
        align-items: flex-start;
        text-align: left;
    }
}

/* Vertical gap inside a column */
.col--gap-sm {
    gap: var(--space-lg);
}

.col--gap-md {
    gap: var(--space-xl);
}

.col--gap-lg {
    gap: var(--space-2xl);
}

.col--gap-xl {
    gap: var(--space-3xl);
}

/* ── MARGIN-TOP UTILITIES ───────────────────────────────────── */
/* Use these to set specific vertical spacing between elements   */
/* instead of uniform col--gap when gaps need to vary           */

.mt-xs {
    margin-top: var(--space-xs);
}

/*  4px */
.mt-sm {
    margin-top: var(--space-sm);
}

/*  8px */
.mt-md {
    margin-top: var(--space-md);
}

/* 12px */
.mt-lg {
    margin-top: var(--space-lg);
}

/* 16px */
.mt-xl {
    margin-top: var(--space-xl);
}

/* 24px */
.mt-2xl {
    margin-top: var(--space-2xl);
}

/* 32px */
.mt-3xl {
    margin-top: var(--space-3xl);
}

/* 48px */
.mt-4xl {
    margin-top: var(--space-4xl);
}

/* 64px */
/* ── ABOUT SECTION ──────────────────────────────────────────── */

/* Italic + orange emphasis inside the about heading */
.about__heading-em {
    font-family: var(--fancy-font-family);
    font-style: var(--font-style-italic);
    color: var(--text-brand-accent2);
}

/* Right column — portrait stacked above callout, fills full row height.
   height must stay auto so align-items:stretch on the parent row can
   stretch this column to match the left column. The portrait uses
   height:0 + flex:1 to contribute 0 to this column's natural sizing,
   so the left column's content height wins the row height calculation. */
.about__right {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    /* height: auto (default) — required for align-items:stretch to work */
}

/* Portrait — background-image div so crop position is fully controllable.
   height:0 + flex:1 1 0 means the div contributes nothing to the right
   column's natural height, so the left column's text content sets the row
   height; flex:1 then grows the portrait to fill remaining space above the
   callout. background-position: center 20% keeps the face away from the
   bottom edge at any crop size. */
.about__portrait {
    width: 100%;
    height: 0;
    flex: 1 1 0;
    min-height: 260px;
    /* guaranteed visible at all two-column sizes */
    border-radius: var(--radius-emphasis);
    background-image: url('../images/portrait.jpg');
    background-size: cover;
    background-position: center 25%;
    /* 20% from top keeps the face centred and chin off the bottom edge */
    background-repeat: no-repeat;
}

/* Tablet (821px–1279px) — two-column layout but use a square aspect-ratio
   instead of flex-grow. This shows more vertical content from the photo
   (less aggressive zoom) without needing a different source image. */
@media (min-width: 821px) and (max-width: 1279px) {
    .about__portrait {
        height: auto;
        min-height: 0;
        aspect-ratio: 1 / 1;
        flex: 0 0 auto;
    }
}

/* Mobile — columns stack vertically; use a tall aspect-ratio crop instead
   of flex-grow so the portrait always has a natural, responsive height. */
@media (max-width: 820px) {
    .about__portrait {
        height: auto;
        min-height: 0;
        aspect-ratio: 3 / 4;
        /* taller portrait crop on mobile — shows face + shoulders nicely */
        flex: 0 0 auto;
    }
}

/* Certification badge row */
.about__badges {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    flex-wrap: wrap;
}

.about__badge {
    height: 112px;
    width: auto;
}


/* ── ALIGNMENT UTILITIES ────────────────────────────────────── */

/* Row — controls how columns align vertically relative to each other */
/* (align-items targets the cross axis, which is vertical on a row)  */
.row--top {
    align-items: flex-start;
}

.row--middle {
    align-items: center;
}

.row--bottom {
    align-items: flex-end;
}

/* Col — controls where content sits vertically within the column */
/* (justify-content targets the main axis, which is vertical on a col) */
.col--top {
    justify-content: flex-start;
}

.col--middle {
    justify-content: center;
}

.col--bottom {
    justify-content: flex-end;
}

/* Col — controls horizontal alignment of content within the column  */
/* (align-items targets the cross axis, which is horizontal on a col) */
/* These override the default mobile/desktop alignment set above      */
.col--left {
    align-items: flex-start;
}

.col--center {
    align-items: center;
}

.col--right {
    align-items: flex-end;
}


/* ── PADDING UTILITIES ──────────────────────────────────────── */
/* Apply to any element: columns, containers, cards, sections, etc. */
/* p = all sides | px = horizontal | py = vertical               */

.p-none {
    padding: var(--space-none);
}

.p-xs {
    padding: var(--space-sm);
}

/*  8px */
.p-sm {
    padding: var(--space-lg);
}

/* 16px */
.p-md {
    padding: var(--space-xl);
}

/* 24px */
.p-xl {
    padding: var(--space-3xl);
}

/* 48px */

.px-none {
    padding-left: var(--space-none);
    padding-right: var(--space-none);
}

.px-xs {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
}

/*  8px */
.px-sm {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
}

/* 16px */
.px-md {
    padding-left: var(--space-xl);
    padding-right: var(--space-xl);
}

/* 24px */
.px-xl {
    padding-left: var(--space-3xl);
    padding-right: var(--space-3xl);
}

/* 48px */

.py-none {
    padding-top: var(--space-none);
    padding-bottom: var(--space-none);
}

.py-xs {
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
}

/*  8px */
.py-sm {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
}

/* 16px */
.py-md {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
}

/* 24px */
.py-xl {
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-3xl);
}

/* 48px */



/* ========================
   TYPOGRAPHY UTILITY CLASSES 
   * 
   * v 2.0 - updated on 4/17/26
   * 
   ======================== */

/* ------------------------
   DISPLAY
   ------------------------ */
.display {
    font-weight: var(--display-font-weight);
    font-size: var(--display-font-size);
    line-height: var(--display-line-height);
    letter-spacing: var(--display-letter-spacing);
}

.display--sm {
    font-size: var(--display-sm-font-size);
    line-height: var(--display-sm-line-height);
}

.display--lg {
    font-size: var(--display-lg-font-size);
    line-height: var(--display-lg-line-height);
}

.display--xl {
    font-size: var(--display-xl-font-size);
    line-height: var(--display-xl-line-height);
}

/* ------------------------
   HEADING 1
   ------------------------ */
.heading-1 {
    font-weight: var(--heading-1-font-weight);
    font-size: var(--heading-1-font-size);
    line-height: var(--heading-1-line-height);
    letter-spacing: var(--heading-1-letter-spacing);
}

.heading-1--sm {
    font-size: var(--heading-1-sm-font-size);
    line-height: var(--heading-1-sm-line-height);
}

.heading-1--lg {
    font-size: var(--heading-1-lg-font-size);
    line-height: var(--heading-1-lg-line-height);
}

.heading-1--xl {
    font-size: var(--heading-1-xl-font-size);
    line-height: var(--heading-1-xl-line-height);
}

/* ------------------------
   HEADING 2
   ------------------------ */
.heading-2 {
    font-weight: var(--heading-2-font-weight);
    font-size: var(--heading-2-font-size);
    line-height: var(--heading-2-line-height);
    letter-spacing: var(--heading-2-letter-spacing);
}

.heading-2--sm {
    font-size: var(--heading-2-sm-font-size);
    line-height: var(--heading-2-sm-line-height);
}

.heading-2--lg {
    font-size: var(--heading-2-lg-font-size);
    line-height: var(--heading-2-lg-line-height);
}

.heading-2--xl {
    font-size: var(--heading-2-xl-font-size);
    line-height: var(--heading-2-xl-line-height);
}

/* ------------------------
   HEADING 3
   ------------------------ */
.heading-3 {
    font-weight: var(--heading-3-font-weight);
    font-size: var(--heading-3-font-size);
    line-height: var(--heading-3-line-height);
    letter-spacing: var(--heading-3-letter-spacing);
}

.heading-3--sm {
    font-size: var(--heading-3-sm-font-size);
    line-height: var(--heading-3-sm-line-height);
}

.heading-3--lg {
    font-size: var(--heading-3-lg-font-size);
    line-height: var(--heading-3-lg-line-height);
}

.heading-3--xl {
    font-size: var(--heading-3-xl-font-size);
    line-height: var(--heading-3-xl-line-height);
}

/* ------------------------
   HEADING 4
   ------------------------ */
.heading-4 {
    font-weight: var(--heading-4-font-weight);
    font-size: var(--heading-4-font-size);
    line-height: var(--heading-4-line-height);
    letter-spacing: var(--heading-4-letter-spacing);
}

.heading-4--sm {
    font-size: var(--heading-4-sm-font-size);
    line-height: var(--heading-4-sm-line-height);
}

.heading-4--lg {
    font-size: var(--heading-4-lg-font-size);
    line-height: var(--heading-4-lg-line-height);
}

.heading-4--xl {
    font-size: var(--heading-4-xl-font-size);
    line-height: var(--heading-4-xl-line-height);
}

/* ------------------------
   HEADING 5
   ------------------------ */
.heading-5 {
    font-weight: var(--heading-5-font-weight);
    font-size: var(--heading-5-font-size);
    line-height: var(--heading-5-line-height);
    letter-spacing: var(--heading-5-letter-spacing);
}

.heading-5--sm {
    font-size: var(--heading-5-sm-font-size);
    line-height: var(--heading-5-sm-line-height);
}

.heading-5--lg {
    font-size: var(--heading-5-lg-font-size);
    line-height: var(--heading-5-lg-line-height);
}

.heading-5--xl {
    font-size: var(--heading-5-xl-font-size);
    line-height: var(--heading-5-xl-line-height);
}

/* ------------------------
   HEADING 6
   ------------------------ */
.heading-6 {
    font-weight: var(--heading-6-font-weight);
    font-size: var(--heading-6-font-size);
    line-height: var(--heading-6-line-height);
    letter-spacing: var(--heading-6-letter-spacing);
}

.heading-6--sm {
    font-size: var(--heading-6-sm-font-size);
    line-height: var(--heading-6-sm-line-height);
}

.heading-6--lg {
    font-size: var(--heading-6-lg-font-size);
    line-height: var(--heading-6-lg-line-height);
}

.heading-6--xl {
    font-size: var(--heading-6-xl-font-size);
    line-height: var(--heading-6-xl-line-height);
}

/* ------------------------
   SUBHEADING
   ------------------------ */
.subheading {
    font-weight: var(--subheading-font-weight);
    font-size: var(--subheading-font-size);
    line-height: var(--subheading-line-height);
    letter-spacing: var(--subheading-letter-spacing);
}

.subheading--sm {
    font-size: var(--subheading-sm-font-size);
    line-height: var(--subheading-sm-line-height);
}

.subheading--lg {
    font-size: var(--subheading-lg-font-size);
    line-height: var(--subheading-lg-line-height);
}

.subheading--xl {
    font-size: var(--subheading-xl-font-size);
    line-height: var(--subheading-xl-line-height);
}

/* ------------------------
   BODY
   ------------------------ */
.body {
    font-weight: var(--body-font-weight);
    font-size: var(--body-font-size);
    line-height: var(--body-line-height);
    letter-spacing: var(--body-letter-spacing);
}

.body--sm {
    font-size: var(--body-sm-font-size);
    line-height: var(--body-sm-line-height);
}

.body--lg {
    font-size: var(--body-lg-font-size);
    line-height: var(--body-lg-line-height);
}

.body--xl {
    font-size: var(--body-xl-font-size);
    line-height: var(--body-xl-line-height);
}

.body--2xl {
    font-size: var(--body-2xl-font-size);
    line-height: var(--body-2xl-line-height);
}

/* Body inline elements */
/* .fancy must be defined after these for letter-spacing override to work */
.body a {
    font-weight: var(--body-font-weight-link);
}

.body strong {
    font-weight: var(--body-font-weight-strong);
}

/* MOBILE RESPONSIVE TYPE STYLES ----------------------------------------- */

@media (max-width: 767px) {
    .display {
        font-size: var(--display-sm-font-size);
        line-height: var(--display-sm-line-height);
    }

    .heading-1 {
        font-size: var(--heading-1-sm-font-size);
        line-height: var(--heading-1-sm-line-height);
    }

    .heading-2 {
        font-size: var(--heading-2-sm-font-size);
        line-height: var(--heading-2-sm-line-height);
    }

    .heading-3 {
        font-size: var(--heading-3-sm-font-size);
        line-height: var(--heading-3-sm-line-height);
    }

    .heading-4 {
        font-size: var(--heading-4-sm-font-size);
        line-height: var(--heading-4-sm-line-height);
    }

    .heading-5 {
        font-size: var(--heading-5-sm-font-size);
        line-height: var(--heading-5-sm-line-height);
    }

    .heading-6 {
        font-size: var(--heading-6-sm-font-size);
        line-height: var(--heading-6-sm-line-height);
    }

    .subheading {
        font-size: var(--subheading-sm-font-size);
        line-height: var(--subheading-sm-line-height);
    }

    .body {
        font-size: var(--body-sm-font-size);
        line-height: var(--body-sm-line-height);
    }

    .label {
        font-size: var(--label-sm-font-size);
        line-height: var(--label-sm-line-height);
    }

    .eyebrow {
        font-size: var(--eyebrow-sm-font-size);
        line-height: var(--eyebrow-sm-line-height);
    }
}

/* ============================================================
   POST PROSE — Front-end typography for blog post body content.
   Mirrors editor-styles.css exactly; scoped to .post-page__body
   so these rules only affect the_content() output on single posts.
   ============================================================ */


/* ── Canvas / Base ───────────────────────────────────────────── */

.cs-body__content,
.entry-content,
.post-page__body {
    font-family: var(--font-sans);
    font-size: var(--body-xl-font-size);
    line-height: var(--body-xl-line-height);
    color: var(--text--body--dark);
    max-width: 800px;
    margin: 0 auto;
}

.post-page__body {
    margin-top: 64px;
}

.entry-content .wp-block-heading,
.cs-body__content .wp-block-heading {
    border: none;
    padding-top: 0;
    margin-top: 0;
}


/* ── Font Size Presets ───────────────────────────────────────── */
/* Applied when a writer picks S / M / L / XL / 2XL in the editor.
   WordPress adds .has-{slug}-font-size to the block. line-height
   is the part that actually matters — font-size is overridden by
   WordPress's inline style, so we use !important on that. */

.cs-body__content .has-small-font-size,
.entry-content .has-small-font-size,
.post-page__body .has-small-font-size {
    font-size: var(--body-sm-font-size) !important;
    line-height: var(--body-sm-line-height) !important;
}

.cs-body__content .has-medium-font-size,
.entry-content .has-medium-font-size,
.post-page__body .has-medium-font-size {
    font-size: var(--body-font-size) !important;
    line-height: var(--body-line-height) !important;
}

.cs-body__content .has-large-font-size,
.entry-content .has-large-font-size,
.post-page__body .has-large-font-size {
    font-size: var(--body-lg-font-size) !important;
    line-height: var(--body-lg-line-height) !important;
}

.cs-body__content .has-x-large-font-size,
.entry-content .has-x-large-font-size,
.post-page__body .has-x-large-font-size {
    font-size: var(--body-xl-font-size) !important;
    line-height: var(--body-xl-line-height) !important;
}

.cs-body__content .has-xx-large-font-size,
.entry-content .has-xx-large-font-size,
.post-page__body .has-xx-large-font-size {
    font-size: var(--body-3xl-font-size) !important;
    line-height: var(--body-3xl-line-height) !important;
    letter-spacing: var(--body-3xl-letter-spacing) !important;
}

.cs-body__content .has-eyebrow-font-size,
.entry-content .has-eyebrow-font-size,
.post-page__body .has-eyebrow-font-size {
    font-size: var(--eyebrow-lg-font-size) !important;
    line-height: var(--eyebrow-lg-line-height) !important;
    letter-spacing: var(--eyebrow-letter-spacing-letter-spacing) !important;
    text-transform: uppercase;
    color: var(--theme-callout-text, var(--text--body--info));
    margin: 0;
}

@media (max-width: 821px) {

    .cs-body__content .has-xx-large-font-size,
    .entry-content .has-xx-large-font-size,
    .post-page__body .has-xx-large-font-size {
        font-size: var(--body-2xl-font-size) !important;
        line-height: var(--body-2xl-line-height) !important;
        letter-spacing: var(--body-2xl-letter-spacing) !important;
    }
}


/* ── Paragraphs ─────────────────────────────────────────────── */

/* Lead paragraph — first <p> in the post body gets the subtle color automatically.
   The class is kept as a fallback for manual use elsewhere. */

.post-page__body>p:first-of-type,
.post-page__body .post-page__lead,
.post-page__lead {
    color: var(--text--body--dark);
}

.cs-body__content p,
.entry-content p,
.post-page__body p {
    color: var(--text--body--dark);
    margin-top: 0;
    margin-bottom: var(--space-xl);
}


/* ── Headings ───────────────────────────────────────────────── */

.cs-body__content h1,
.entry-content h1,
.post-page__body h1,
.cs-body__content h2,
.entry-content h2,
.post-page__body h2,
.cs-body__content h3,
.entry-content h3,
.post-page__body h3,
.cs-body__content h4,
.entry-content h4,
.post-page__body h4,
.cs-body__content h5,
.entry-content h5,
.post-page__body h5,
.cs-body__content h6,
.entry-content h6,
.post-page__body h6 {
    font-family: var(--font-sans);
    color: var(--text--body--dark);
}

.cs-body__content h1,
.entry-content h1,
.post-page__body h1 {
    font-size: var(--heading-1-font-size);
    line-height: var(--heading-1-line-height);
    font-weight: var(--heading-1-font-weight);
    margin-top: var(--space-4xl);
    margin-bottom: var(--space-4xl);
}

.cs-body__content h2,
.entry-content h2,
.post-page__body h2 {
    font-size: var(--heading-2-font-size);
    line-height: var(--heading-2-line-height);
    font-weight: var(--heading-2-font-weight);
    margin-top: var(--space-4xl);
    margin-bottom: var(--space-2xl);
}

.cs-body__content h3,
.entry-content h3,
.post-page__body h3 {
    font-size: var(--heading-3-font-size);
    line-height: var(--heading-3-line-height);
    font-weight: var(--heading-3-font-weight);
    margin-top: var(--space-3xl);
    margin-bottom: var(--space-xl);
}

.cs-body__content h4,
.entry-content h4,
.post-page__body h4 {
    font-size: var(--heading-4-font-size);
    line-height: var(--heading-4-line-height);
    font-weight: var(--heading-4-font-weight);
    margin-top: var(--space-3xl);
    margin-bottom: var(--space-xl);
}

.cs-body__content h5,
.entry-content h5,
.post-page__body h5 {
    font-size: var(--heading-5-font-size);
    line-height: var(--heading-5-line-height);
    font-weight: var(--heading-5-font-weight);
    margin-top: var(--space-3xl);
    margin-bottom: var(--space-xl);
}

.cs-body__content h6,
.entry-content h6,
.post-page__body h6 {
    font-size: var(--heading-6-font-size);
    line-height: var(--heading-6-line-height);
    font-weight: var(--heading-6-font-weight);
    margin-top: var(--space-3xl);
    margin-bottom: var(--space-xl);
}


/* ── Inline Text Elements ───────────────────────────────────── */

.cs-body__content a,
.entry-content a,
.post-page__body a {
    color: var(--text--link--default);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 150ms ease;
}

.cs-body__content a:hover,
.entry-content a:hover,
.post-page__body a:hover {
    color: var(--text--link--hover);
    text-decoration-thickness: 2px;
}

.cs-body__content strong,
.cs-body__content b,
.entry-content strong,
.entry-content b,
.post-page__body strong,
.post-page__body b {
    font-weight: var(--body-font-weight);
    color: var(--text--body--dark);
}

.cs-body__content em,
.cs-body__content i,
.entry-content em,
.entry-content i,
.post-page__body em,
.post-page__body i {
    font-style: italic;
}

.cs-body__content s,
.cs-body__content del,
.entry-content s,
.entry-content del,
.post-page__body s,
.post-page__body del {
    text-decoration: line-through;
    color: var(--text--body--dark-subtle);
}

.cs-body__content mark,
.entry-content mark,
.post-page__body mark {
    background-color: var(--canvas--subtle--caution);
    color: var(--text--body--dark);
    padding: 0 var(--space-3xs);
    border-radius: var(--radius-subtle);
}

.cs-body__content small,
.entry-content small,
.post-page__body small {
    font-size: var(--body-sm-font-size);
    line-height: var(--body-sm-line-height);
    color: var(--text--body--dark-subtle);
}

.cs-body__content abbr[title],
.entry-content abbr[title],
.post-page__body abbr[title] {
    text-decoration: underline dotted;
    cursor: help;
}

.cs-body__content code,
.entry-content code,
.post-page__body code {
    font-family: var(--font-serif);
    font-size: 0.875em;
    background-color: var(--canvas--light);
    color: var(--text--body--danger);
    padding: var(--space-3xs) var(--space-xs);
    border-radius: var(--radius-subtle);
    border: var(--border-hairline) solid var(--border--subtle--neutral);
}


/* ── Lists ──────────────────────────────────────────────────── */

.cs-body__content ul,
.cs-body__content ol,
.entry-content ul,
.entry-content ol,
.post-page__body ul,
.post-page__body ol {
    font-size: 18px;
    line-height: 1.7;
    color: var(--text--body--dark);
    padding-left: var(--space-2xl);
    margin-top: 0;
    margin-bottom: var(--space-xl);
}

.cs-body__content ul,
.entry-content ul,
.post-page__body ul {
    list-style-type: square;
}

.cs-body__content ol,
.entry-content ol,
.post-page__body ol {
    list-style-type: decimal;
}

.cs-body__content li,
.entry-content li,
.post-page__body li {
    margin-bottom: var(--space-sm);
}

.cs-body__content li>ul,
.cs-body__content li>ol,
.entry-content li>ul,
.entry-content li>ol,
.post-page__body li>ul,
.post-page__body li>ol {
    margin-top: var(--space-sm);
    margin-bottom: 0;
}


/* ── Blockquote ─────────────────────────────────────────────── */

.cs-body__content blockquote,
.cs-body__content .wp-block-quote,
.entry-content blockquote,
.entry-content .wp-block-quote,
.post-page__body blockquote,
.post-page__body .wp-block-quote {
    margin: var(--space-3xl) 0;
    padding: var(--space-xl) var(--space-2xl);
    border-left: 4px dotted var(--border--default--danger);
    background-color: var(--canvas--light);
    border-radius: 0 var(--radius-standard) var(--radius-standard) 0;
}

.cs-body__content blockquote p,
.cs-body__content .wp-block-quote p,
.entry-content blockquote p,
.entry-content .wp-blockquote p,
.post-page__body blockquote p,
.post-page__body .wp-block-quote p {
    font-family: var(--font-serif);
    font-size: var(--body-2xl-font-size);
    line-height: var(--body-2xl-font-size);
    font-style: italic;
    color: var(--text--body--dark);
    margin-bottom: var(--space-sm);
}

.cs-body__content blockquote cite,
.cs-body__content .wp-block-quote cite,
.cs-body__content .wp-block-quote footer,
.entry-content blockquote cite,
.entry-content .wp-block-quote cite,
.entry-content .wp-block-quote footer,
.post-page__body blockquote cite,
.post-page__body .wp-block-quote cite,
.post-page__body .wp-block-quote footer {
    font-size: var(--body-sm-font-size);
    font-style: normal;
    color: var(--text--body--dark-subtle);
}


/* ── Pullquote ──────────────────────────────────────────────── */

.cs-body__content .wp-block-pullquote,
.entry-content .wp-block-pullquote,
.post-page__body .wp-block-pullquote {
    border-top: 4px dotted var(--border--default--neutral);
    border-bottom: 4px dotted var(--border--default--neutral);
    padding: var(--space-6xl) 0;
    text-align: left;
    margin: var(--space-3xl) 0;
}

.cs-body__content .wp-block-pullquote blockquote,
.entry-content .wp-block-pullquote blockquote,
.post-page__body .wp-block-pullquote blockquote {
    border-left: none;
    background: none;
    padding: 0;
    margin: 0;
}

.cs-body__content .wp-block-pullquote p,
.entry-content .wp-block-pullquote p,
.post-page__body .wp-block-pullquote p {
    font-size: var(--body-3xl-font-size);
    line-height: var(--body-3xl-line-height);
    font-style: italic;
    margin-bottom: var(--space-2xl)
}

.cs-body__content .wp-block-pullquote cite,
.entry-content .wp-block-pullquote cite,
.post-page__body .wp-block-pullquote cite {
    font-size: var(--eyebrow-font-size);
    font-weight: var(--eyebrow-font-weight);
    color: var(--text--body--danger);
    text-transform: uppercase;
    letter-spacing: var(--eyebrow-letter-spacing);
}


/* ── Code Blocks ────────────────────────────────────────────── */

.cs-body__content pre,
.cs-body__content .wp-block-code,
.cs-body__content .wp-block-preformatted,
.entry-content pre,
.entry-content .wp-block-code,
.entry-content .wp-block-preformatted,
.post-page__body pre,
.post-page__body .wp-block-code,
.post-page__body .wp-block-preformatted {
    font-family: var(--font-serif);
    font-size: 14px;
    line-height: 1.6;
    background-color: var(--neutral--800);
    color: var(--text--body--danger_onDark);
    padding: var(--space-xl);
    border-radius: var(--radius-standard);
    overflow-x: auto;
    margin: var(--space-2xl) 0;
    white-space: pre;
}

.cs-body__content pre code,
.entry-content pre code,
.post-page__body pre code {
    background: none;
    border: none;
    padding: 0;
    font-size: inherit;
    color: inherit;
}


/* ── Separator ──────────────────────────────────────────────── */

.cs-body__content hr,
.cs-body__content .wp-block-separator,
.entry-content hr,
.entry-content .wp-block-separator,
.post-page__body hr,
.post-page__body .wp-block-separator {
    border: none;
    border-top: var(--border-hairline) solid var(--border--subtle--neutral);
    margin: var(--space-6xl) 0;
}


/* ── Images & Media ─────────────────────────────────────────── */

.cs-body__content img,
.entry-content img,
.post-page__body img {
    max-width: 100%;
    height: auto;
    display: block;
}

.cs-body__content figure,
.entry-content figure,
.post-page__body figure {
    margin: var(--space-2xl) 0;
}

.cs-body__content figcaption,
.cs-body__content .wp-block-image figcaption,
.entry-content figcaption,
.entry-content .wp-block-image figcaption,
.post-page__body figcaption,
.post-page__body .wp-block-image figcaption {
    font-size: var(--eyebrow-font-size);
    line-height: var(--eyebrow-line-height);
    color: var(--text--body--dark-subtle);
    text-align: center;
    margin-top: var(--space-sm);
}

/* Inline images within the prose */
.post-page__inline-img {
    display: block;
    width: 100%;
    border-radius: var(--radius-emphasis);
    margin-top: var(--space-xl);
    margin-bottom: var(--space-xl);
}


/* ── Tables ─────────────────────────────────────────────────── */

.post-page__body table,
.post-page__body .wp-block-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    margin: var(--space-2xl) 0;
}

.post-page__body th,
.post-page__body .wp-block-table th {
    font-weight: 600;
    text-align: left;
    padding: var(--space-sm) var(--space-lg);
    border-bottom: 2px solid var(--border--default--neutral);
    color: var(--text--body--dark);
}

.post-page__body td,
.post-page__body .wp-block-table td {
    padding: var(--space-sm) var(--space-lg);
    border-bottom: var(--border-hairline) solid var(--border--subtle--neutral);
    color: var(--text--body--dark);
    vertical-align: top;
}

.post-page__body tr:last-child td {
    border-bottom: none;
}


/* ── Buttons ────────────────────────────────────────────────── */

.post-page__body .wp-block-button__link {
    font-family: var(--font-sans);
    font-size: var(--label-font-size);
    font-weight: var(--label-font-weight);
    letter-spacing: var(--label-letter-spacing);
    padding: var(--space-sm) var(--space-xl);
    border-radius: var(--radius-pill);
    border: var(--border-hairline) solid currentColor;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}

.post-page__body .wp-block-button:not(.is-style-outline) .wp-block-button__link {
    background-color: var(--surface--light);
    color: var(--text--button--primary--default);
    border-color: var(--border--default--neutral);
}

.post-page__body .is-style-outline .wp-block-button__link {
    background-color: transparent;
    color: var(--text--button--ghost--default);
    border-color: currentColor;
}


/* ── Media & Text Block ─────────────────────────────────────── */

.post-page__body .wp-block-media-text {
    gap: var(--space-2xl);
    margin: var(--space-2xl) 0;
}

.post-page__body .wp-block-media-text .wp-block-media-text__media img {
    border-radius: var(--radius-standard);
}

.post-page__body .wp-block-media-text .wp-block-media-text__content {
    padding: var(--space-xl);
}


/* ── Columns ────────────────────────────────────────────────── */

.post-page__body .wp-block-columns {
    gap: var(--space-2xl);
    margin: var(--space-2xl) 0;
}


/* ── Group ──────────────────────────────────────────────────── */

.post-page__body .wp-block-group {
    padding: var(--space-2xl);
    border-radius: var(--radius-standard);
}

/* Row layout */
.post-page__body .wp-block-group.is-layout-flex {
    padding: var(--space-2xl);
}

/* Stack layout */
.post-page__body .wp-block-group.is-layout-flow {
    padding: var(--space-2xl);
}

/* Grid layout */
.post-page__body .wp-block-group.is-layout-grid {
    padding: var(--space-2xl);
}

/* ── Details ───────────────────────────────────────────────── */

.post-page__body .wp-block-details {
    /* the outer container */
    padding-bottom: var(--space-md);
}

.post-page__body .wp-block-details summary {
    /* the clickable toggle row */
    padding-bottom: var(--space-md);
}

.post-page__body .wp-block-details summary:hover {
    /* hover state on the toggle */
    color: var(--text--body--info);
}


/* ── Embeds ─────────────────────────────────────────────────── */

.post-page__body .wp-block-embed {
    margin: var(--space-2xl) 0;
}

.post-page__body .wp-block-embed figcaption {
    font-size: var(--eyebrow-font-size);
    color: var(--text--body--dark-subtle);
    text-align: center;
    margin-top: var(--space-sm);
}

/* ------------------------
   LABEL
   ------------------------ */
.label {
    font-weight: var(--label-font-weight);
    font-size: var(--label-font-size);
    line-height: var(--label-line-height);
    letter-spacing: var(--label-letter-spacing);
}

.label--sm {
    font-size: var(--label-sm-font-size);
    line-height: var(--label-sm-line-height);
}

.label--lg {
    font-size: var(--label-lg-font-size);
    line-height: var(--label-lg-line-height);
}

.label--xl {
    font-size: var(--label-xl-font-size);
    line-height: var(--label-xl-line-height);
}

/* ------------------------
   EYEBROW
   ------------------------ */
.eyebrow {
    font-weight: var(--eyebrow-font-weight);
    font-size: var(--eyebrow-font-size);
    line-height: var(--eyebrow-line-height);
    letter-spacing: var(--eyebrow-letter-spacing);
    text-transform: uppercase;
}

.eyebrow--sm {
    font-size: var(--eyebrow-sm-font-size);
    line-height: var(--eyebrow-sm-line-height);
}

.eyebrow--lg {
    font-size: var(--eyebrow-lg-font-size);
    line-height: var(--eyebrow-lg-line-height);
}

.eyebrow--xl {
    font-size: var(--eyebrow-xl-font-size);
    line-height: var(--eyebrow-xl-line-height);
}

/* -------------------------
   FANCY
   Modifier for display and
   heading text only.
   Must be defined last so
   letter-spacing overrides.
   ------------------------- */
.fancy {
    font-family: var(--fancy-font-family);
    font-style: var(--fancy-font-style);
    font-weight: var(--fancy-font-weight);
    letter-spacing: var(--fancy-letter-spacing);
}

/* Different text colors - only apply to headings and eyebrows, NEVER paragraphs. */
.text-subtle {
    color: var(--text--body--dark-subtle);
}

.info {
    color: var(--text--body--info);
}

.success {
    color: var(--text--body--success);
}

.caution {
    color: var(--text--body--caution);
}

.warning {
    color: var(--text--body--warning);
}

.danger {
    color: var(--text--body--danger);
}

.text-subtle_onDark {
    color: var(--text--body--light-subtle);
}

.info_onDark {
    color: var(--text--body--info_onDark);
}

.success_onDark {
    color: var(--text--body--success_onDark);
}

.caution_onDark {
    color: var(--text--body--caution_onDark);
}

.warning_onDark {
    color: var(--text--body--warning_onDark);
}

.danger_onDark {
    color: var(--text--body--danger_onDark);
}



/* ── ELEVATION UTILITIES ─────────────────────────────────────── */

.elevation-inset {
    box-shadow: inset 0px 4px 16px 4px rgba(0, 0, 0, 0.5);
}

.elevation-1 {
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.05);
}

.elevation-2 {
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.05);
}

.elevation-3 {
    box-shadow: 0px 12px 32px -8px rgba(0, 0, 0, 0.1);
}

.elevation-4 {
    box-shadow: 0px 16px 32px -6px rgba(0, 0, 0, 0.1);
}

.elevation-5 {
    box-shadow: 0px 32px 48px -16px rgba(0, 0, 0, 0.15);
}



/* ── PAGE-SPECIFIC LAYOUTS ─────────────────────────────────
   Section padding, grid structures, and flow positioning for
   page-level containers. Visual identity (color, typography,
   borders, shadows) lives in components.css.
   ─────────────────────────────────────────────────────────── */

/* Case study — screens showcase */

.parallax-img {
    position: relative;
    overflow: hidden;
    /* Explicit height replaces the old padding+stage approach.
       overflow:hidden clips images at the section boundary only. */
    height: 60vw;
}

.parallax-img__stage {
    position: absolute;
    inset: 0;
    /* Fills the full section so %-based image positions are
       relative to the entire colored area, not a smaller inner box. */
}

.parallax-img__img {
    position: absolute;
    will-change: transform;
}

/* Kalpa — three floating screens, centered vertically in the section */
.parallax-img__img--desktop {
    width: 56%;
    left: 8%;
    top: 15%;
    box-shadow: -8px 16px 48px 24px rgba(0, 0, 0, 0.15);
}

/* Cherish — single image, flush with section top */
.parallax-img__img--desktop__2 {
    width: 100%;
    left: -10%;
    top: -50px;
}

/* Cynerge — large centered image, flush to section top */
.parallax-img__img--desktop__3 {
    width: 74%;
    left: 13%;
    top: -500px;
    box-shadow: 0 48px 64px 64px rgba(0, 0, 0, 0.15);
}

.parallax-img__img--tablet {
    width: 26%;
    left: 57%;
    top: 30%;
    box-shadow: -8px 16px 48px 24px rgba(0, 0, 0, 0.15);
}

.parallax-img__img--mobile {
    width: 10%;
    right: 8%;
    top: 25%;
    box-shadow: -8px 16px 48px 24px rgba(0, 0, 0, 0.15);
}

/* Mobile: stack screens vertically */
@media (max-width: 820px) {
    .parallax-img {
        height: 130vw;
    }

    .parallax-img__img--desktop {
        width: 90%;
        left: 5%;
        top: 15%;
    }

    .parallax-img__img--desktop__2 {
        width: 100%;
        left: 0;
        top: 0;
    }

    .parallax-img__img--desktop__3 {
        width: 90%;
        left: 5%;
        top: -100px;
    }

    .parallax-img__img--tablet {
        width: 40%;
        left: 18%;
        top: 45%;
    }

    .parallax-img__img--mobile {
        width: 20%;
        left: 61%;
        top: 50%;
    }
}

/* Case study — body / story section */

.cs-body {
    padding-top: var(--space-7xl);
    padding-bottom: var(--space-7xl);
}

/* Two-column grid: fixed sidebar + fluid content */
.cs-body__layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--space-5xl);
    align-items: start;
}

/*
 * align-self: stretch makes the sidebar grid item fill the full
 * row height so .cs-index has a tall containing block to stick in.
 */
.cs-body__sidebar {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
}

/* Sticky project index — desktop only */
@media (min-width: 1201px) {
    .cs-index {
        position: sticky;
        top: 100px;
    }

    /* WP admin bar adds 32px to the top of the page when logged in */
    .admin-bar .cs-index {
        top: 132px;
    }
}

.cs-body__content {
    display: flex;
    flex-direction: column;
}


/* Collapse to single column below 1200px */
@media (max-width: 1200px) {
    .cs-body__layout {
        grid-template-columns: 1fr;
        gap: var(--space-3xl);
    }

    .cs-body__sidebar {
        position: static;
    }
}


/* More case studies section */

.cs-more {
    padding-top: var(--space-4xl);
    padding-bottom: var(--space-7xl);
}

.cs-more .header-row {
    display: flex;
    align-items: flex-end;
    gap: var(--space-xl);
    margin-bottom: var(--space-3xl);
}

.cs-more__heading {
    margin-bottom: 0;
}

.cs-more__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
}

@media (min-width: 821px) {
    .cs-more__grid {
        grid-template-columns: 1fr 1fr;
    }
}


/* Blog landing page */

/* Desktop: sidebar + container sit side-by-side using flex */
.blog-page {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding-top: var(--space-4xl);
    padding-bottom: var(--space-7xl);
    padding-left: 0;
    padding-right: var(--space-lg);
    max-width: var(--container-max-default);
    margin-left: auto;
    margin-right: auto;
}

/* Sidebar — desktop only: sticky column */
@media (min-width: 821px) {
    .blog-page__sidebar {
        flex: 0 0 300px;
        padding: 0;
        margin: 0;
        position: sticky;
        top: 164px;
    }

    /* Container fills remaining width */
    .blog-page .container {
        flex: 1;
        min-width: 0;
        max-width: none;
        margin-top: 0;
        padding: 0;
    }

}

/* 2-column card grid */
.blog-page__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    margin-top: 36px;
    margin-bottom: 36px;
}

/* Cards hidden by filter JS get display:none via hidden attr */
.blog-page__grid [hidden] {
    display: none;
}

/* Pagination — sits below the card grid, full width */
.showcase_pagination {
    margin-top: var(--space-3xl);
    margin-bottom: var(--space-3xl);
}

@media (max-width: 820px) {
    .showcase_pagination {
        margin-bottom: var(--space-5xl);
    }
}

.showcase_pagination ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}

.showcase_pagination ul li {
    margin: 0;
    padding: 0;
}

.showcase_pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 var(--space-sm);
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: var(--label-font-size);
    font-weight: 400;
    color: var(--text--nav--default);
    text-decoration: none;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.showcase_pagination .page-numbers:hover {
    background-color: var(--surface--subtle--neutral);
    color: var(--text--nav--hover);
    text-decoration: none;
}

.showcase_pagination .page-numbers.current {
    background-color: var(--surface--dark);
    color: var(--text--body--light);
    border-color: var(--surface--dark);
    font-weight: 600;
}

.showcase_pagination .prev,
.showcase_pagination .next {
    font-size: var(--label-font-size);
}

/* Empty state — shown when all mobile filter pills are deselected */
.blog-page__empty {
    grid-column: 1 / -1;
    /* spans all columns */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xl);
    min-height: 40vh;
    padding: var(--space-4xl) var(--space-lg);
    text-align: center;
}

/* Placeholder — swap src for your animation when ready */
.blog-page__empty-img {
    width: 120px;
    height: auto;
    opacity: 1;
}

.blog-page__empty-text {
    max-width: 28ch;
    color: var(--text--body--dark);
    font-size: var(--body-font-size);
    margin: 0;
}

.blog-page__empty-subtext {
    max-width: 42ch;
    color: var(--text--body--medium);
    font-size: var(--body-sm-font-size);
    margin: 0;
}

/* ── Donut easter egg ─────────────────────────────────────────── */
.donut-easter-egg {
    display: flex;
    gap: var(--space-3xl);
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
}

#donut-svg {
    width: 160px;
    height: 160px;
    flex-shrink: 0;
}

.donut-controls {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    text-align: left;
    min-width: 160px;
}

.donut-controls__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.donut-controls__label {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text--body--medium);
    margin: 0;
}

.donut-controls__swatches {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

.swatch {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    transition: transform 150ms ease, box-shadow 150ms ease;
    flex-shrink: 0;
    padding: 0;
}

.swatch:hover {
    transform: scale(1.2);
    box-shadow: 0 0 0 2px var(--border--subtle--neutral);
}

.swatch.active {
    box-shadow: 0 0 0 2px var(--text--body--dark);
    transform: scale(1.1);
}

/* Mobile: sidebar is always fixed; JS drives the top value so it
   starts at its natural scroll position and clamps to 0 on scroll */
@media (max-width: 820px) {
    .blog-page {
        flex-direction: column;
        padding: 0;
        max-width: none;
        margin: 0;
        gap: 0;
    }

    .blog-page__sidebar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
    }

    .blog-page .container {
        padding-left: var(--space-lg);
        padding-right: var(--space-lg);
        width: 100%;
        /* Sentinel in JS holds the vertical space — no static padding-top needed */
    }

    .blog-page__grid {
        grid-template-columns: 1fr;
    }
}

/* Narrow tablet: single column grid */
@media (min-width: 821px) and (max-width: 1100px) {
    .blog-page__grid {
        grid-template-columns: 1fr;
    }
}


/* Post page */

/* Article body section */
.hero~.post-page {
    padding-top: var(--space-7xl);
    padding-bottom: var(--space-5xl);
    background: linear-gradient(to bottom, transparent 0%, var(--canvas--light) 200px);
}

/* Mobile: tighten spacing around the article body */
@media (max-width: 820px) {

    .post-page__body {
        margin-top: var(--space-xl);
        padding-top: var(--space-none);
        padding-bottom: var(--space-4xl);
    }
}

/* Mid-desktop: default container width */
@media (min-width: 821px) and (max-width: 1199px) {
    .post-page .container {
        max-width: var(--container-max-default);
    }
}

/* Large desktop: pull in to narrow for comfortable line lengths */
@media (min-width: 1200px) {
    .post-page .container {
        max-width: var(--container-max-narrow);
    }
}

/* Prose column — fills the container width */
.post-page__body {
    max-width: 100%;
}


/* Resume page */

.resume-page {
    padding-top: var(--space-5xl);
    padding-bottom: var(--space-7xl);
}

/* Contact + Summary two-column bar */
.resume__info {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--space-4xl);
    align-items: start;
}

@media (max-width: 820px) {
    .resume__info {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }
}

/* Tablet: switch from narrow to default container so the resume
   doesn't feel cramped on mid-size screens */
@media (min-width: 821px) and (max-width: 1279px) {

    .hero__tight .container--narrow,
    .resume-page .container--narrow {
        max-width: var(--container-max-default);
    }
}


/* ── POST PAGE.  ─────────────────────────────────────────────
   Structure: .hero (two-column: left = back + title + lead,
                                 right = featured image)
              .post-page (article prose)
   ──────────────────────────────────────────────────────────── */

/* ── Post hero — image overlay, artistically curated ─────────── */

/*
 * Layout model:
 *   • The section is 100vh, flex-column, vertically centered
 *   • The image is position:absolute — right side, starts at navbar
 *     bottom (top: 64px), spans to the section bottom
 *   • Text content sits above (z-index:1), white box behind title+lead
 */

.hero--post {
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Image: absolutely positioned, right side, flush below the navbar */
.post-page__hero-img {
    position: absolute;
    top: 124px;
    /* 100px — navbar height (24px padding × 2 + ~48px content) */
    right: 0;
    width: 58%;
    /* slightly more than half the screen */
    bottom: 0;
    /* stretches to the section's bottom edge */
    height: 90%;
    object-fit: cover;
    z-index: 0;
    display: block;
}

/* Content wrapper: stacks back-link above the white text box */
.post-page__hero-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    width: 100%;
    top: 75px;
}

/* Back-bar: on desktop, a transparent flow wrapper; on mobile it becomes a fixed white nav */
.post-page__back-bar {
    display: block;
}

/* Back-to-blog link: indented to align with text inside the white box */
.post-page__back {
    padding-left: var(--space-4xl);
}

/* White background box behind the title + lead */
.post-page__hero-text {
    width: 65%;
    background-color: var(--surface--light);
    padding: var(--space-4xl) var(--space-4xl);
    box-shadow: 8px 12px 88px 32px rgba(0, 0, 0, 0.05);
}

/* Title: no max-width inside the hero — the box width controls line length */
.post-page__hero-text .post-page__title {
    max-width: none;
}

/* ── Responsive: stack on mobile/tablet ────────────────────── */
@media (max-width: 820px) {
    .hero--post {
        min-height: unset;
        justify-content: flex-start;
        background-color: var(--surface--light);
        padding-top: 0;
    }

    /* Fixed white "Back to Blog" navbar — sits at top of viewport, below main nav */
    .post-page__back-bar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background-color: var(--surface--light);
        border-bottom: 1px solid var(--border--subtle--neutral);
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.05);
        z-index: 999;
        padding: var(--space-md) var(--space-lg);
        display: flex;
        align-items: center;
    }

    /* Image sits directly below the fixed bar */
    .post-page__hero-img {
        order: 1;
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    /* Title + lead drop below the image */
    .post-page__hero-content {
        order: 2;
        top: auto;
        padding-top: var(--space-xl);
    }

    /* Inside the fixed bar, no extra left padding — the bar provides it */
    .post-page__back {
        padding-left: 0;
        margin-top: 0;
    }

    .post-page__hero-text {
        width: auto;
        margin: -48px var(--space-2xl);
        padding: var(--space-2xl) var(--space-xl);
        box-shadow: 8px 12px 24px 32px rgba(0, 0, 0, 0.05);
    }
}

/* Back-to-blog link — sits above the h1 inside the hero */
.post-page__back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
}

/* Article title */
.post-page__title {
    max-width: 22ch;
}

/* ── RESUME PAGE ─────────────────────────────────────────────
   Sections: header (in .hero), then .resume-page for body content.
   ──────────────────────────────────────────────────────────── */

.resume__contact-item a {
    color: inherit;
}

/* Action buttons above name */
.resume__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-3xl);
}

/* The big "Resume | Brittany Buckley" heading lives in the hero,
   using .heading.heading-xl — only need bottom spacing here */
.resume__name {
    margin-bottom: var(--space-md);
}

.resume__tagline {
    font-size: var(--body-font-size);
    color: var(--text--body--dark-subtle);
    max-width: 64ch;
}



/* .resume-page padding → utilities.css */

/* Full-bleed rule inside the narrow container */
.resume__rule {
    border: none;
    border-top: var(--border-hairline) solid var(--border--subtle--neutral);
    margin: var(--space-3xl) 0;
}

/* ── Contact + Summary two-column bar ───────────────────── */
/* .resume__info grid layout → utilities.css                */

.resume__contact-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.resume__contact-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--body-sm-font-size);
    color: var(--text--body--dark);
}

.resume__contact-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--icon--x-strong);
}



/* Section label — small-caps eyebrow (PROFESSIONAL EXPERIENCE etc.) */
.resume__section-label {
    margin-bottom: var(--space-md);
}

.resume__summary-text {
    font-size: var(--body-sm-font-size);
    line-height: var(--body-line-height);
    color: var(--text--body--dark);
}

/* ── Experience & Education entries ─────────────────────── */

.resume__section {
    /* vertical spacing provided by .resume__rule above */
    padding-top: 0;
    padding-bottom: 0;
}

.resume__job+.resume__job {
    margin-top: var(--space-2xl);
    padding-top: var(--space-2xl);
    border-top: var(--border-hairline) solid var(--border-subtle);
}

.resume__edu+.resume__edu {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: var(--border-hairline) solid var(--border-subtle);
}

.resume__job-header,
.resume__edu-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-lg);
    flex-wrap: wrap;
    margin-bottom: var(--space-sm);
}

.resume__job-meta,
.resume__edu-meta {
    font-size: var(--body-sm-font-size);
    margin: 0;
}

.resume__job-title,
.resume__edu-name {
    font-weight: var(--fw-600);
    font-size: var(--body-font-size);
}

.resume__job-sep,
.resume__edu-sep {
    color: var(--text--body--dark-subtle);
    margin: 0 var(--space-xs);
}

.resume__job-company,
.resume__edu-institution {
    color: var(--text--body--dark-subtle);
}

.resume__job-date,
.resume__edu-date {
    font-size: var(--body-sm-font-size);
    color: var(--text--body--dark-subtle);
    white-space: nowrap;
    font-style: italic;
    flex-shrink: 0;
}

.resume__bullets {
    list-style: disc;
    padding-left: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.resume__bullets li {
    font-size: var(--body-sm-font-size);
    line-height: var(--body-line-height);
    color: var(--text--body--dark);
}