@layer reset, tokens, base, layout, components, utilities;

@font-face {
    font-family: "Inclusive Sans";
    src: url("../assets/fonts/InclusiveSans-VF.woff2") format("woff2-variations");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inclusive Sans";
    src: url("../assets/fonts/InclusiveSans-Italic-VF.woff2") format("woff2-variations");
    font-weight: 400 700;
    font-style: italic;
    font-display: swap;
}
@supports (interpolate-size: allow-keywords) {
    :root {
        interpolate-size: allow-keywords;
    }

    [open]::details-content {
        height: auto;
    }
}
@layer tokens {
    :root {
        /* == Typography == */
        --ff-base:
            "Inclusive Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
            sans-serif;

        /* Settings - Modify here */
        --fluid-vmin: 500px;
        --fluid-vmax: 1200px;

        --base-min: 1.125rem;
        --base-max: 1.25rem;

        --type-scale-small: 1.067;
        --type-scale-large: 1.2;

        /* Calculations - Doesn't need to be updated */
        --fluid: clamp(
            0,
            (100vw - var(--fluid-vmin)) / (var(--fluid-vmax) - var(--fluid-vmin)),
            1
        ); /* In the future - progress() */
        --base: calc(var(--base-min) + var(--fluid) * (var(--base-max) - var(--base-min)));
        --type-scale: calc(
            var(--type-scale-small) + var(--fluid) * (var(--type-scale-large) - var(--type-scale-small))
        );

        --fs--2: calc(var(--base) / pow(var(--type-scale), 2));
        --fs--1: calc(var(--base) / var(--type-scale));
        --fs-0: var(--base);
        --fs-1: calc(var(--base) * var(--type-scale));
        --fs-2: calc(var(--base) * pow(var(--type-scale), 2));
        --fs-3: calc(var(--base) * pow(var(--type-scale), 3));
        --fs-4: calc(var(--base) * pow(var(--type-scale), 4));

        /* == Spacing == */
        --space-3xs: 0.125rem; /*  2px */
        --space-2xs: 0.25rem; /*  4px */
        --space-xs: 0.5rem; /*  8px */
        --space-sm: 0.75rem; /* 12px */
        --space-md: 1rem; /* 16px (1rem) */
        --space-lg: 1.5rem; /* 24px */
        --space-xl: 2rem; /* 32px */
        --space-2xl: 3rem; /* 48px */
        --space-3xl: 4rem; /* 64px */
        --space-4xl: 6rem; /* 96px */

        /* == Colors == */
        --neutral-dark: oklch(0.2081 0.0153 84.58);
        --surface-1: oklch(0.9653 0.0143 84.58);
        --surface-2: oklch(0.9453 0.0243 84.58);
        --surface-3: oklch(0.9353 0.0343 84.58);
        --text-primary: var(--neutral-dark);
        --text-secondary: oklch(0.5123 0.0153 84.58);
        --border-color: var(--neutral-dark);
        --transparent-dark: rgba(0, 0, 0, 0.1);

        --accent-red: oklch(0.6222 0.2049 31.99);
        --accent-pink: oklch(0.7395 0.1353 5.69);
        --accent-yellow: oklch(0.793 0.1574 75.49);
        --accent-green: oklch(0.627 0.1423 154.76);
        --accent-blue: oklch(0.4506 0.1423 272.16);
        --accent-purple: oklch(0.5466 0.1603 298.71);

        --paper-bg: #fcfcf9;
        --paper-shadow: rgba(0, 0, 0, 0.12);
        --mount-color: #1e1e1e;
        --mount-shadow: rgba(0, 0, 0, 0.35);

        /* Borders */
        --border-width: 2px;
        --border-width-subtle: 1px;
        --border-radius: 12px;

        /* Layout */
        --gutter: clamp(1.25rem, 4vw, 3.5rem);
        --content-measure: 68ch;
        --wide-measure: 1100px;
    }
}

@layer reset {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html {
        scroll-behavior: smooth;
        -moz-text-size-adjust: none;
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
    }

    :target {
        scroll-margin-block: 2rem;
    }

    h1,
    h2,
    h3,
    h4,
    p {
        margin-block: 0;
    }

    img {
        max-inline-size: 100%;
        height: auto;
        display: block;
    }

    figure,
    blockquote {
        margin: 0;
    }

    dd,
    dt {
        margin: 0;
        padding: 0;
    }
}
@layer base {
    body {
        min-block-size: 100svh;
        display: grid;
        grid-template-rows: auto 1fr auto;
        margin: 0;

        font-family: var(--ff-base);
        font-size: var(--fs-0);
        line-height: 1.6;
        color: var(--text-primary);
        background: var(--surface-1);
    }
    h1,
    h2,
    h3,
    h4 {
        text-wrap: pretty;
        font-weight: 600;
        line-height: 1.2;
    }

    h1 {
        font-size: var(--fs-4);
        letter-spacing: -0.02em;
    }
    h2 {
        font-size: var(--fs-3);
    }
    h3 {
        font-size: var(--fs-2);
    }
    h4 {
        font-size: var(--fs-1);
    }

    p {
        font-size: var(--fs-0);
        text-wrap: pretty;
    }
    input,
    button,
    textarea,
    select {
        font: inherit;
        color: inherit;
    }
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
@layer layout {
    .site-grid {
        display: grid;
        grid-template-columns:
            [full-width-start] minmax(var(--gutter), 1fr)
            [wide-start] minmax(0, calc((var(--wide-measure) - var(--content-measure)) / 2))
            [content-start] min(100% - (var(--gutter) * 2), var(--content-measure)) [content-end]
            minmax(0, calc((var(--wide-measure) - var(--content-measure)) / 2)) [wide-end]
            minmax(var(--gutter), 1fr) [full-width-end];
    }

    .site-grid > * {
        grid-column: content;
    }

    /* Track Modifiers */
    .content {
        grid-column: content-start / content-end;
    }

    .wide {
        grid-column: wide-start / wide-end;
    }
    .full-bleed,
    .site-grid > header,
    .site-grid > footer {
        grid-column: full-width-start / full-width-end;
    }

    /*.content-flow {
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
        max-width: 70ch;
        margin-inline: auto;
        width: 100%;
    }
    .content-flow .wide {
        max-width: none;
        width: 100%;

    }*/

    /*.content-flow {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        row-gap: var(--space-3xl);
        column-gap: var(--space-2xl);
        container-type: inline-size;
        container-name: content-flow;
    }
    .content-flow > header,
    .content-flow > section,
    .content-flow > aside {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: subgrid;
        row-gap: var(--space-lg);
    }
    .content-flow > header > *,
    .content-flow > section > *,
    .content-flow > aside > *,
    .content-flow > div > * {
        grid-column: 1 / -1;
    }*/

    /* Automatically responsive, self-collapsing grids with zero media queries */
    .grid-2 {
        display: grid;
        gap: var(--space-xl);
        grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
        align-items: start;
    }

    .grid-3 {
        display: grid;
        gap: var(--space-xl);
        grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    }

    .grid-4 {
        display: grid;
        gap: var(--space-xl);
        grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    }

    .grid-2.grid-wide-left {
        grid-template-columns: 2fr 1fr; /* Left column is twice as wide as the right */
    }

    .grid-2.grid-wide-right {
        grid-template-columns: 1fr 2fr; /* Right column is twice as wide */
    }

    /*@container content-flow (max-width: 750px) {
        .content-flow {
            grid-template-columns: 1fr;
            row-gap: var(--space-2xl);
        }

        .content-flow > header > *,
        .content-flow > section > *,
        .content-flow > aside > * {
            grid-column: 1 / -1 !important;
        }
    }*/

    /* Bento grid*/
    .project-overview-wrapper {
        container-type: inline-size;
        container-name: project-container;
    }
    .signup-grid-wrapper {
        container-type: inline-size;
        container-name: signup-grid-container;
    }

    .signup-grid {
        display: grid;
        gap: var(--space-md);
        grid-template-columns: 1fr 1fr;
    }

    .signup-grid-span-2 {
        grid-row: span 2;
        grid-column: 1;
    }

    .bento-grid {
        display: grid;
        gap: var(--space-md);
        /* Sets up your 3-column asymmetric layout (e.g. 2 main tracks + sidebar track) */
        grid-template-columns: 1fr 1fr 0.75fr;

        > div {
            border: var(--border-width) solid var(--border-color);
            border-radius: 6px;
            padding: var(--space-md);
        }

        /* Span utility classes */
        .col-span-2 {
            grid-column: span 2;
        }
        .row-span-2 {
            grid-row: span 2;
        }
    }

    /* Collapse to 1 column on smaller container widths */
    @container project-container (max-width: 650px) {
        .bento-grid {
            grid-template-columns: 1fr;

            > div {
                grid-column: span 1 !important;
                grid-row: span 1 !important;
            }
        }
    }
    @container signup-grid-container (max-width: 250px) {
        .signup-grid {
            grid-template-columns: 1fr;
            > div {
                grid-column: span 1 !important;
                grid-row: span 1 !important;
            }
        }
    }
    .large-pair dt {
        font-size: var(--fs-2);
        font-weight: 600;
    }
    .pair {
        dt {
            font-weight: 600;
        }
    }
    .project-metadata {
        display: grid;
        gap: var(--space-md);
        min-height: 100%;
    }
    .project-role {
        h2 {
            font-size: var(--fs-2);
        }
    }

    /*Spacing*/
    .site-grid .article > * {
        margin-block-end: var(--space-3xl);
    }
    .site-grid .article > header {
        margin-block-end: var(--space-xl);
    }

    .article {
        h2,
        h3,
        p {
            margin-block-end: var(--space-md);
        }
    }

    .signup-hero {
        background-color: var(--accent-pink);
        margin-block-end: var(--space-xl);
        padding: var(--space-xl);
        /*border-radius: var(--border-radius);*/
    }

    .signup-steps {
        margin-block-start: var(--space-lg) !important;
    }
    .gap {
        display: flex;
        flex-direction: column;
        gap: var(--space-lg);
    }
}
@layer components {
    .permissions-hero {
        background-color: var(--accent-yellow);
        margin-block-end: var(--space-xl);
        padding: var(--space-xl);
    }
    .button {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        text-decoration: none;
        color: #fff;
        font-size: var(--fs-0);
        font-weight: 500;
        padding-block: var(--space-xs);
        padding-inline: var(--space-md);
        background-color: var(--neutral-dark, #111);
        border-radius: calc(var(--border-radius) / 2);
        width: fit-content;
        transition: background-color 0.2s ease;
    }

    .button svg {
        height: 1.1em;
        width: auto;
    }

    .button:hover {
        background-color: color-mix(in oklch, var(--neutral-dark, #111) 80%, white);
    }

    .button-subtle {
        color: var(--text-primary);
        text-decoration: none;
        border: none;
        font-size: var(--fs--1);
        padding-block: var(--space-xs);
        padding-inline: var(--space-md);
        border-radius: calc(var(--border-radius) / 2);
        background-color: transparent;
        cursor: pointer;
    }

    .button-subtle:hover {
        background-color: var(--transparent-dark);
    }

    .badge {
        --badge-bg: var(--surface-1);

        display: inline-block;
        padding-block: var(--space-3xs);
        padding-inline: var(--space-sm);
        border: var(--border-width) solid var(--border-color);
        border-radius: 100vw;
        font-size: var(--fs--1);
        font-weight: 500;
        color: white;
        background-color: var(--badge-bg);

        &[data-color="red"] {
            --badge-bg: var(--accent-red);
        }
        &[data-color="pink"] {
            --badge-bg: var(--accent-pink);
        }
        &[data-color="yellow"] {
            --badge-bg: var(--accent-yellow);
        }
        &[data-color="green"] {
            --badge-bg: var(--accent-green);
        }
        &[data-color="blue"] {
            --badge-bg: var(--accent-blue);
        }
        &[data-color="purple"] {
            --badge-bg: var(--accent-purple);
        }
    }
    .badge.is-overlay {
        position: absolute;
        width: max-content;
        top: 0;
        transform: translate(-50%, -50%);

        &[data-position="25%"] {
            left: 25%;
        }
        &[data-position="50%"] {
            left: 50%;
        }
        &[data-position="75%"] {
            left: 75%;
        }
    }

    /* Author comment bubble */
    .author-comment {
        --img-width: 48px;
        --bubble-bg: var(--surface-1);

        &[data-color="red"] {
            --bubble-bg: var(--accent-red);
        }
        &[data-color="pink"] {
            --bubble-bg: var(--accent-pink);
        }
        &[data-color="yellow"] {
            --bubble-bg: var(--accent-yellow);
        }
        &[data-color="green"] {
            --bubble-bg: var(--accent-green);
        }
        &[data-color="blue"] {
            --bubble-bg: var(--accent-blue);
        }
        &[data-color="purple"] {
            --bubble-bg: var(--accent-purple);
        }

        display: grid;
        grid-template-columns: repeat(3, max-content);
        grid-template-rows: repeat(3, max-content);
        align-items: center;
        width: max-content;

        img {
            grid-row: 2;
            grid-column: 2;
            width: var(--img-width, 48px);
            height: var(--img-width, 48px);
            border-radius: 50%;
            object-fit: cover;
        }

        .bubble {
            font-size: var(--fs--1);
            padding-block: var(--space-xs);
            padding-inline: var(--space-md);
            background-color: var(--bubble-bg);
            border: var(--border-width) solid var(--neutral-dark);
            border-radius: var(--border-radius);
            max-width: 30ch;

            /* bottom right positioning */
            grid-row: 3;
            grid-column: 3;
            border-start-start-radius: 0;
        }

        &[data-position="bottom-left"] .bubble {
            grid-row: 3;
            grid-column: 1;
            border-radius: var(--border-radius);
            border-start-end-radius: 0;
        }
        &[data-position="bottom-right"] .bubble {
            grid-row: 3;
            grid-column: 3;
            border-radius: var(--border-radius);
            border-start-start-radius: 0;
        }
        &[data-position="top-left"] .bubble {
            grid-row: 1;
            grid-column: 1;
            border-radius: var(--border-radius);
            border-end-end-radius: 0;
        }
        &[data-position="top-right"] .bubble {
            grid-row: 1;
            grid-column: 3;
            border-radius: var(--border-radius);
            border-end-start-radius: 0;
        }
    }
    .author-comment.is-overlay {
        position: absolute;
        bottom: calc(0% + var(--space-lg));
        right: calc(0% + var(--space-lg));
        z-index: 10;
    }
    .img-wrapper {
        position: relative;
    }

    /* Tabs */
    .tabs {
        display: flex;
        flex-direction: column-reverse;
        gap: var(--space-md);
        align-items: center;
        margin-block-end: var(--space-md);
    }

    .tabs input[type="radio"] {
        display: none;
    }

    .tab-nav {
        display: flex;
        /*background-color: var(--transparent-dark);*/
        border: var(--border-width) solid var(--border-color);
        border-radius: calc(var(--border-radius) / 2);
    }

    .tabs label {
        padding-block: var(--space-2xs);
        padding-inline: var(--space-xl);
        color: var(--text-primary);
        cursor: pointer;
        font-size: var(--fs--2);
        transition: background-color 0.2s ease;
        white-space: nowrap;
        text-align: left;
    }

    .tabs label:hover {
        background-color: var(--transparent-dark);
    }

    .tab-images {
        position: relative;
        width: 100%;
    }

    .tabs img {
        display: none;
        width: 100%;
        height: auto;
        border-radius: calc(var(--border-radius) / 2);
        /*border: 1px solid var(--border-color);*/
    }
    /* === STATE CONTROLS === */

    /* Show the active image based on checked radio */
    #t1:checked ~ .tab-images #c1,
    #t2:checked ~ .tab-images #c2 {
        display: block;
    }

    /* Highlight the active vertical tab label */
    #t1:checked ~ .tab-nav label[for="t1"],
    #t2:checked ~ .tab-nav label[for="t2"] {
        background-color: var(--neutral-dark);
        color: #fff;
        border-color: var(--neutral-dark);
    }

    #tab-user:checked ~ .tab-images #img-user,
    #tab-group:checked ~ .tab-images #img-group,
    #tab-account:checked ~ .tab-images #img-account {
        display: block;
    }

    #tab-user:checked ~ .tab-nav label[for="tab-user"],
    #tab-group:checked ~ .tab-nav label[for="tab-group"],
    #tab-account:checked ~ .tab-nav label[for="tab-account"] {
        background-color: var(--neutral-dark);
        color: #fff;
        border-color: var(--neutral-dark);
    }

    /* Mobile Responsiveness: Stack the internal tabs and collapse 8/4 grid */
    @container case-study (max-width: 750px) {
        .tabs {
            grid-template-columns: 1fr; /* Stack buttons above image on mobile */
        }

        .tab-nav {
            flex-direction: row; /* Switch tab buttons to a horizontal row on mobile for space saving */
            overflow-x: auto;
        }
    }

    /* Step card labels */
    .grid-2:has(.step-card),
    .grid-3:has(.step-card),
    .grid-4:has(.step-card) {
        margin: 0;
        padding: 0;
    }

    .step-card {
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
    }
    .step-header {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-sm);
    }
    .step-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        background-color: var(--neutral-dark);
        color: white;
        border-radius: 50%;
        font-size: var(--fs--1, 0.875rem);
        font-weight: bold;
        flex-shrink: 0; /* Prevents the circle from warping if title text wraps */
    }
    .step-title {
        font-size: var(--fs-0, 1rem);
        font-weight: 600;
        margin: 0;
        line-height: 1.2;
    }

    /* Divider line with text in the middle */
    .text-divider {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: var(--space-lg); /* Space between the lines and the text */
        margin-block: var(--space-2xl);
        color: var(--text-primary); /* Adjust text color as needed */
        font-size: var(--fs-0);
        font-style: italic;
        letter-spacing: 0.05em;
    }
    .text-divider::before,
    .text-divider::after {
        content: "";
        height: 1px;
        background-color: #d1d5db; /* Border/line color */
    }

    .card-fluid {
        position: relative;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: var(--space-md);
        border: var(--border-width) solid var(--border-color);
        border-radius: var(--border-radius);
        padding: var(--space-lg);
        margin-block-end: var(--space-xl);
    }

    .card-thumb {
        /*aspect-ratio: 5/4;*/
        object-fit: cover;
        width: 100%;
        padding: var(--space-lg);
        border-radius: calc(var(--border-radius) - var(--space-xs));
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.08))
            drop-shadow(0 12px 24px rgba(0, 0, 0, 0.06));
    }

    .card-body {
        display: grid;
        gap: var(--space-sm);
        align-content: start;
    }

    .callout-block {
        padding: var(--space-md);
        border: var(--border-width) solid var(--border-color);
        border-radius: var(--border-radius);
        font-style: italic;
    }

    /* Animated accordian */
    .accordion-wrapper {
        container-type: inline-size;
        container-name: accordion-section;
        width: 100%;
    }

    .animated-accordion {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 22rem; /* Locked height prevents any vertical jumping */
        gap: var(--space-sm);
    }

    .animated-accordion details {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        transition:
            flex 0.5s cubic-bezier(0.25, 1, 0.5, 1),
            background-color 0.3s ease;

        border-radius: calc(var(--border-radius) / 2);
        border: var(--border-width) solid var(--border-color);
        color: var(--neutral-dark);
        cursor: pointer;
        min-width: 0;
    }

    /* Expanded State on Desktop */
    .animated-accordion details[open] {
        flex: 5;
        cursor: default;
        flex-direction: row;
    }

    /* Multi-colored solid backgrounds */
    .animated-accordion details:nth-child(1) {
        background-color: var(--accent-pink);
    }
    .animated-accordion details:nth-child(2) {
        background-color: var(--accent-red);
    }
    .animated-accordion details:nth-child(3) {
        background-color: var(--accent-blue);
    }
    .animated-accordion details:nth-child(4) {
        background-color: var(--accent-green);
    }
    .animated-accordion details:nth-child(5) {
        background-color: var(--accent-yellow);
    }

    .animated-accordion summary {
        list-style: none;
        display: flex;
        flex-direction: column-reverse;
        flex: 1;
        justify-content: space-between;
        align-items: center;
        height: 100%;

        padding: var(--space-sm);
        box-sizing: border-box;
        user-select: none;
        min-height: 100px;

        ::-webkit-details-marker {
            display: none;
        }

        svg {
            width: 28px;
            height: 28px;
            flex-shrink: 0;
        }

        h3 {
            writing-mode: vertical-rl;
            transform: rotate(180deg);
            white-space: nowrap;
            font-size: var(--fs-1);
            font-weight: 600;
            margin: 0;
        }
    }

    .animated-accordion p {
        display: none;
        padding: 2rem;
        margin: 0;
        font-size: var(--fs-0);
        line-height: 1.6;
        overflow-y: auto; /* Handles extra-long text gracefully without breaking layout */
        max-height: 100%;
        opacity: 0;
        transform: translateY(10px);
        transition:
            display 0.3s ease 0.2s,
            opacity 0.3s ease 0.2s,
            transform 0.3s ease 0.2s;
    }

    /* When open, reveal the paragraph and trigger its smooth transition */
    .animated-accordion details[open] p {
        display: block;
        flex: 1;
        opacity: 1;
        transform: translateY(0);
    }

    @keyframes fadeInText {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @container accordion-section (max-width: 768px) {
        .animated-accordion {
            flex-direction: column;
            height: auto;
        }

        .animated-accordion details {
            flex: unset;
            width: 100%;
            height: auto;
            flex-direction: column;
        }

        .animated-accordion details[open] {
            flex: unset;
            flex-direction: column;
        }

        .animated-accordion summary {
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            padding: 1.25rem 1.5rem;
            height: auto;
            min-height: auto;
        }

        .animated-accordion summary svg {
            margin-bottom: 0;
            order: 2;
        }

        .animated-accordion summary h3 {
            font-size: var(--fs-2);
            writing-mode: horizontal-tb;
            transform: none;
            order: 1;
        }

        .animated-accordion p {
            padding: 0 1.5rem 1.5rem 1.5rem;
        }
    }

    .happy-work-list li {
        margin-block-end: var(--space-sm);
    }

    /* 3. Header & Navigation */
    .page-header {
        padding-block: var(--space-lg);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        gap: var(--space-md);
    }

    .zw-logo {
        display: inline-flex;
        align-items: center;
        color: var(--text-primary);
        text-decoration: none;

        svg {
            width: 2.25rem; /* 36px equivalent */
            height: 2.25rem;
            fill: currentColor;
        }
    }

    .group {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: var(--space-sm);
        margin: 0;
        padding: 0;
    }
    .group > nav,
    .group .nav-list {
        display: contents;
    }
    .nav-list li {
        list-style: none;
    }

    .nav-list a {
        color: var(--text-primary);
        text-decoration: none;
        padding: var(--space-2xs) var(--space-sm);
        border-radius: calc(var(--border-radius) / 2);
        transition: background-color 0.2s ease;
        display: inline-block;
    }

    .nav-list a:hover {
        background-color: var(--transparent-dark);
    }

    /* LinkedIn Icon Alignment & Default Color */
    .nav-social {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--text-primary);
        padding: var(--space-2xs) var(--space-xs);
        transition:
            background-color 0.2s ease,
            color 0.2s ease;
    }

    .nav-social svg {
        height: var(--fs-1); /* Matches font height of nav text links */
        width: auto;
        fill: currentColor;
    }

    .nav-social:hover {
        color: var(--accent-blue);
    }

    @media (min-width: 530px) {
        .page-header {
            flex-direction: row;
        }
        .group {
            justify-content: flex-end;
        }
    }

    /* 4. Footer & Call to Action (CTA) */
    .cta {
        padding-inline: var(--space-2xl);
        padding-block: var(--space-3xl);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-lg);
        border-radius: var(--border-radius);
        border: 1px solid var(--border-subtle);
        background-color: var(--surface-2);
        text-align: center;
    }

    .page-footer {
        font-size: var(--fs--1);

        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: var(--space-md);
        padding-block: var(--space-lg) var(--space-2xl);
        color: var(--text-secondary);
    }
    .page-footer p {
        font-size: var(--fs--1);
    }

    .page-footer span {
        text-align: end;
    }

    /* 5. Signature Pegboard Hero & Popover API */
    /* ==========================================
           PEGBOARD HERO CONTAINER & BACKGROUNDS
           ========================================== */
    .pegboard-hero {
        position: relative;
        display: grid;
        justify-items: center;
        min-height: fit-content;
        height: 70svh;
        box-shadow:
            0 2px 4px rgba(0, 0, 0, 0.08),
            0 8px 16px rgba(0, 0, 0, 0.1),
            0 24px 48px rgba(0, 0, 0, 0.12);
        padding: var(--gutter);
        margin-inline: var(--gutter);

        /* Multi-layered Background:
             1. Dot Grid (6px dots, 36px spacing)
             2. Top-Center Light Gradient (#DFB68B to #B77E42)
          */
        background-color: #b77e42;
        background-image:
            radial-gradient(circle, #3d2612 2px, transparent 3.5px),
            radial-gradient(ellipse at 50% 0%, #dfb68b 0%, #b77e42 75%);
        background-size:
            45px 45px,
            100% 100%;
        background-position:
            0 0,
            0 0;
    }
    .paper-roll-dispenser {
        position: relative;
        width: 100%;
        max-width: var(--wide-measure);
    }

    /* Side Mounting Brackets */
    .mount {
        position: absolute;
        top: 0;
        width: 10px;
        height: 60px;
        background-color: var(--mount-color);
        border-radius: 2px;
        /*box-shadow:
            inset 1px 1px 1px rgba(255, 255, 255, 0.2),
            2px 5px 12px var(--mount-shadow);*/
        z-index: 3;
    }

    .mount-left {
        left: 0;
        transform: translateX(-100%);
    }

    .mount-right {
        right: 0;
        transform: translateX(100%);
    }

    /* Cylindrical Rolled White Paper */
    .paper-roll {
        position: relative;
        height: 44px;
        margin-block-start: 8px;
        /*border-radius: 22px / 11px;*/
        /* Multi-stop highlight & shadow gradient to simulate light hitting a cylinder */
        background: linear-gradient(
            to bottom,
            #d8d4cb 0%,
            #ece7de 18%,
            #fbf9f4 35%,
            #ffffff 42%,
            #f4f1ea 60%,
            #e4e0d7 82%,
            #b8b3a8 100%
        );
        box-shadow:
            0 4px 8px var(--paper-shadow),
            inset 0 1px 2px rgba(255, 255, 255, 0.9);
        z-index: 2;
    }

    /* 1. Turn the paper sheet into a container query context */
    .paper-sheet {
        position: relative;
        container-type: inline-size;
        container-name: paper; /* Gives our container a custom name */

        margin: -8px 10px 0 10px;
        padding: 2.2rem 1.8rem 2.8rem 1.8rem;
        background-color: var(--paper-bg);
        background-image: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.16) 0px,
            rgba(0, 0, 0, 0.04) 14px,
            transparent 36px
        );
        box-shadow:
            0 12px 24px -4px rgba(0, 0, 0, 0.18),
            inset 0 0 30px rgba(0, 0, 0, 0.02);
        z-index: 1;
    }
    /* Child Content Area */
    .paper-content {
        min-height: 25svh;
        color: var(--text-primary);
        h1 {
            font-size: var(--fs-3);
            text-wrap: balance;
        }
    }
    .paper-sheet::after {
        content: "";
        position: absolute;
        bottom: -10px;
        left: 0;
        right: 0;
        height: 12px;
        background-color: var(--paper-bg); /* Inherits your exact CSS variable! */
        /* Refined, organic multi-tier deckle tear wave */
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M0,0 L120,0 L120,4 C100,11 85,5 65,10 C45,6 25,12 0,4 Z' fill='%23000'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M0,0 L120,0 L120,4 C100,11 85,5 65,10 C45,6 25,12 0,4 Z' fill='%23000'/%3E%3C/svg%3E");
        -webkit-mask-size: 96px 12px;
        mask-size: 96px 12px;
        -webkit-mask-repeat: repeat-x;
        mask-repeat: repeat-x;
        filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.14));
        z-index: 2;
    }

    /* 2. DEFAULT (MOBILE / NARROW CONTAINER):
       Sticky notes live inside the document flow, making the sheet taller. */

    .sticky-notes-container :nth-child(1) {
        transform: rotate(1deg);
    }
    .sticky-notes-container :nth-child(2) {
        transform: rotate(-2deg);
    }
    .sticky-notes-container :nth-child(3) {
        transform: rotate(2deg);
    }
    .sticky-notes-container :nth-child(4) {
        transform: rotate(0deg);
    }

    /* Skeuomorphic Sticky Note Base with Clean, Multi-Layered Realistic Shadows */
    .sticky-notes-container {
        position: static; /* In-flow layout */
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2-column grid for mobile */
        gap: var(--space-md);
        z-index: 2;
    }

    /* 3. DESKTOP / WIDE CONTAINER QUERY:
       When the paper sheet is wider than 520px, switch to absolute overhanging layout! */
    @container paper (min-width: 520px) {
        .sticky-notes-container {
            position: absolute;
            bottom: auto; /* Overhangs the bottom torn edge */
            left: 1.8rem;
            right: 1.8rem;

            display: grid;
            grid-template-columns: repeat(4, 1fr); /* 4 columns across */
            gap: 1rem;
            z-index: 5;
            pointer-events: none; /* Prevents container box from capturing clicks */
        }

        /* Re-enable pointer events on the individual notes when overhanging */
        .sticky-note {
            pointer-events: auto;
        }
    }

    /* Individual Sticky Note Base & Rotations */
    .sticky-note {
        --note-bg: var(--accent-yellow);
        position: relative;
        width: 100%;
        max-width: 130px;
        margin-inline: auto;
        aspect-ratio: 1 / 1;
        padding: var(--space-md);
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-radius: 2px;
        background-color: var(--note-bg);
        background-image:
            linear-gradient(to bottom, rgba(0, 0, 0, 0.07) 0px, transparent 14px),
            linear-gradient(to top, rgba(0, 0, 0, 0.04) 0px, transparent 20px);
        box-shadow:
            0 8px 18px -4px rgba(0, 0, 0, 0.22),
            0 2px 6px -1px rgba(0, 0, 0, 0.12),
            inset 0 -8px 16px -6px rgba(0, 0, 0, 0.05);
        transition:
            transform 0.25s cubic-bezier(0.25, 1, 0.5, 1),
            box-shadow 0.25s cubic-bezier(0.25, 1, 0.5, 1);
        transform-origin: top center;

        p {
            font-size: var(--fs--1);
        }

        &[data-color="red"] {
            --note-bg: var(--accent-red);
        }
        &[data-color="pink"] {
            --note-bg: var(--accent-pink);
        }
        &[data-color="yellow"] {
            --note-bg: var(--accent-yellow);
        }
        &[data-color="green"] {
            --note-bg: var(--accent-green);
        }
        &[data-color="blue"] {
            --note-bg: var(--accent-blue);
        }
        &[data-color="purple"] {
            --note-bg: var(--accent-purple);
        }
    }

    .cta {
        --cta-bg: var(--accent-yellow);
        padding-inline: var(--space-3xl);
        padding-block: var(--space-4xl);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-lg);
        border-radius: var(--border-radius);
        border: var(--border-width) solid var(--neutral-dark);
        background-color: var(--cta-bg);

        &[data-color="red"] {
            --cta-bg: var(--accent-red);
        }
        &[data-color="pink"] {
            --cta-bg: var(--accent-pink);
        }
        &[data-color="yellow"] {
            --cta-bg: var(--accent-yellow);
        }
        &[data-color="green"] {
            --cta-bg: var(--accent-green);
        }
        &[data-color="blue"] {
            --cta-bg: var(--accent-blue);
        }
        &[data-color="purple"] {
            --cta-bg: var(--accent-purple);
        }
    }
}
@layer utilities {
    .centered {
        text-align: center;
        font-weight: 600;
        font-size: var(--fs-0);
        margin-block: var(--space-xl);
    }
    .flex-wrap {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-xs);
    }
    /* Visually hidden utility for keyboard accessibility (skip links) */
    .skip-to-main {
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
        width: 1px;
        height: 1px;
        position: absolute;
        overflow: hidden;
    }

    .justify-end {
        justify-self: end;
    }
    .margin-block-end {
        margin-block-end: var(--space-xl);
    }
}