@layer custom {
    .portfolio-home .theme-header { background: var(--bs-bg-body); border-block-end-color: color-mix(in oklab, var(--bs-fg-body), transparent 84%); }
    .portfolio-home .theme-brand { letter-spacing: -.035em; }
    .portfolio-hero { padding-block: clamp(3.5rem, 8vw, 8rem) clamp(4rem, 8vw, 7rem); overflow: clip; }
    .portfolio-hero__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(19rem, .7fr); gap: clamp(3rem, 7vw, 8rem); align-items: center; }
    .portfolio-eyebrow { display: flex; align-items: center; gap: .65rem; margin: 0 0 1.25rem; color: var(--bs-primary-base); font-size: .75rem; font-weight: 700; letter-spacing: .13em; line-height: 1.3; text-transform: uppercase; }
    .portfolio-status-dot { inline-size: .5rem; block-size: .5rem; border-radius: 50%; background: currentColor; }
    .portfolio-hero h1 { max-inline-size: 9ch; margin: 0; color: var(--bs-secondary-base, #173f3a); font-family: Georgia, 'Times New Roman', serif; font-size: clamp(4.25rem, 8.8vw, 9.5rem); font-weight: 400; letter-spacing: -.065em; line-height: .94; overflow-wrap: normal; text-wrap: balance; }
    .portfolio-hero__intro { max-inline-size: 29rem; margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; color: var(--bs-fg-3, #51605a); font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.55; }
    .portfolio-actions { display: flex; flex-wrap: wrap; gap: .875rem; margin-block-start: 2rem; }
    .portfolio-button { display: inline-flex; min-block-size: 3.25rem; align-items: center; justify-content: center; gap: 1.5rem; padding: .8rem 1.2rem; border: 1px solid transparent; border-radius: .35rem; font-size: .95rem; font-weight: 700; text-decoration: none; transition: transform 160ms ease, background-color 160ms ease; }
    .portfolio-button:hover { transform: translateY(-2px); }
    .portfolio-button--primary { background: var(--bs-secondary-base, #173f3a); color: var(--bs-secondary-contrast, #fff8ed); }
    .portfolio-button--primary:hover { background: var(--bs-primary-base, #c94f24); color: #fff; }
    .portfolio-button--quiet { border-color: color-mix(in oklab, var(--bs-fg-body), transparent 70%); color: var(--bs-fg-body); }
    .portfolio-button--quiet:hover { background: var(--bs-bg-2); color: var(--bs-fg-body); }
    .portfolio-explore { position: relative; min-inline-size: 0; overflow: hidden; padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: .65rem; background: var(--bs-secondary-base, #173f3a); color: var(--bs-secondary-contrast, #fff8ed); }
    .portfolio-explore::before { position: absolute; inset: -8rem -10rem auto auto; inline-size: 24rem; aspect-ratio: 1; border: 1px solid currentColor; border-radius: 50%; content: ''; opacity: .12; pointer-events: none; }
    .portfolio-explore__top { display: flex; justify-content: space-between; gap: 1rem; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
    .portfolio-explore__mark { display: flex; align-items: baseline; min-block-size: clamp(10rem, 20vw, 17rem); font-family: Georgia, 'Times New Roman', serif; font-size: clamp(9rem, 17vw, 16rem); line-height: 1; letter-spacing: -.08em; }
    .portfolio-explore__mark span { color: var(--bs-primary-base, #c94f24); }
    .portfolio-explore__image { display: block; inline-size: 100%; block-size: clamp(10rem, 20vw, 17rem); margin-block: 1.5rem; object-fit: cover; border-radius: .35rem; }
    .portfolio-explore__links { position: relative; border-block-start: 1px solid color-mix(in oklab, currentColor, transparent 72%); }
    .portfolio-explore__links a { display: grid; grid-template-columns: 2.5rem 1fr auto; align-items: center; min-block-size: 3.5rem; gap: .75rem; border-block-end: 1px solid color-mix(in oklab, currentColor, transparent 72%); color: inherit; font-weight: 600; text-decoration: none; }
    .portfolio-explore__links a:hover { color: #fff; }
    .portfolio-explore__number { font-size: .7rem; font-weight: 400; opacity: .7; }
    .portfolio-journal { padding-block: clamp(3.5rem, 7vw, 6.5rem); border-block-start: 1px solid var(--bs-border-color); background: var(--bs-bg-1, var(--bs-bg-body)); }
    .portfolio-section-heading { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem; margin-block-end: 2rem; }
    .portfolio-section-heading h2 { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2.5rem, 4.5vw, 4.5rem); font-weight: 400; letter-spacing: -.05em; line-height: 1.05; }
    .portfolio-text-link { display: inline-flex; align-items: center; gap: .6rem; min-block-size: 44px; color: var(--bs-fg-body); font-weight: 700; text-underline-offset: .25em; }
    .portfolio-empty { display: flex; align-items: flex-start; gap: 1.25rem; padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid var(--bs-border-color); border-radius: .5rem; background: var(--bs-bg-body); }
    .portfolio-empty > i { color: var(--bs-primary-base); font-size: 1.75rem; line-height: 1; }
    .portfolio-empty h3 { margin: 0 0 .35rem; font-size: 1.2rem; }
    .portfolio-empty p { margin: 0; color: var(--bs-fg-3); }
    @media (max-width: 767px) {
        .portfolio-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 2.75rem; }
        .portfolio-hero h1 { font-size: clamp(3.75rem, 15vw, 6rem); }
        .portfolio-explore__mark { min-block-size: 9rem; font-size: 9rem; }
    }
    @media (prefers-reduced-motion: reduce) { .portfolio-button { transition: none; } .portfolio-button:hover { transform: none; } }
}

/* The CMS adds unlayered typography and link rules after theme assets. */
.portfolio-button--primary { color: var(--bs-secondary-contrast, #fff8ed); }
.portfolio-button--primary:hover { color: #fff; }
.portfolio-hero #portfolio-hero-title {
    color: var(--bs-secondary-base, #173f3a);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(4.25rem, 8.8vw, 9.5rem);
    font-weight: 400;
    line-height: .94;
}
.portfolio-section-heading h2 {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(2.5rem, 4.5vw, 4.5rem);
    font-weight: 400;
    line-height: 1.05;
}
@media (max-width: 767px) {
    .portfolio-hero #portfolio-hero-title { font-size: clamp(3.75rem, 15vw, 6rem); }
}