@layer reset {
    html {
        font-size: 100%;
        word-break: break-word;
        text-wrap: pretty;
    }

    :root {
        /* Background - pure white */
        --color-bg: #fff;

        /* Grayscale */
        --color-off-white: #f9f9f8;
        --color-secondary: #e9e9e7;
        --color-tertiary: #bcbbb5;
        --color-gray-dark: #63635e;
        --color-text: #21201c;

        /* Accent */
        --color-green: #217031;

        /* Spacing scale - 4px system */
        --space-4: 0.25rem;
        --space-8: 0.5rem;
        --space-12: 0.75rem;
        --space-16: 1rem;
        --space-20: 1.25rem;
        --space-24: 1.5rem;
        --space-32: 2rem;
        --space-40: 2.5rem;
        --space-48: 3rem;
        --space-64: 4rem;
        --space-80: 5rem;
        --space-124: 7.75rem;
    }

    body {
        font-family: "Inter", sans-serif;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
        transition: opacity 0.2s ease-in;
        max-width: 45rem;
        margin: 0 auto;
        color: var(--color-text);
    }

    h1 {
        font-weight: 500;
        font-size: 2rem;
        line-height: 2.5rem;
        letter-spacing: -0.01em;
    }

    h2 {
        font-weight: 500;
        font-size: 1.5rem;
        line-height: 2rem;
        letter-spacing: 0.01em;
    }

    h3 {
        font-weight: 500;
        font-size: 1.125rem;
        line-height: 1.6875rem;
        letter-spacing: -0.01em;
    }

    p {
        font-weight: 400;
        font-size: 1.125rem;
        line-height: 1.6875rem;
        letter-spacing: -0.01em;
    }

    strong,
    b {
        font-weight: 500;
    }

    a {
        color: var(--color-text);
        text-decoration: underline;
        text-decoration-color: var(--color-gray-dark);
        text-underline-offset: 0.125em;
        text-decoration-thickness: 0.0625em;
        transition: all 0.2s ease;
        cursor: pointer;
    }

    a:hover {
        color: #217031;
        text-decoration-color: var(--color-green);
    }

    a:focus-visible {
        outline: 2px solid var(--color-green);
        outline-offset: 2px;
        border-radius: 2px;
    }

    @media (min-width: 768px) {
        body {
            width: 95%;
        }
    }
}

@layer components {
    /* Navigation */
    nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 5rem;
        padding-bottom: var(--space-24);
        margin-bottom: var(--space-16);
    }

    nav h3 {
        margin: 0;
        font-weight: 500;
    }

    nav h3 a {
        text-decoration: none;
        color: var(--color-text);
        font-weight: inherit;
    }

    nav h3 a:hover {
        color: var(--color-green);
    }

    nav ul {
        display: flex;
        gap: var(--space-24);
        list-style: none;
        margin: 0;
        padding: 0;
    }

    nav ul li {
        margin: 0;
    }

    nav ul li a {
        text-decoration: none;
        color: var(--color-gray-dark);
        font-size: 1.125rem;
        line-height: 1.6875rem;
        letter-spacing: -0.01em;
    }

    nav ul li a:hover {
        color: var(--color-green);
    }

    nav ul li a.active {
        color: var(--color-green);
    }

    /* Footer */
    footer {
        margin-top: var(--space-80);
        padding: var(--space-24) 0 var(--space-40) 0;
        border-top: 1px solid var(--color-secondary);
    }

    footer div {
        display: flex;
        gap: var(--space-32);
        flex-wrap: wrap;
    }

    footer a {
        text-decoration: none;
        color: var(--color-gray-dark);
        font-size: 1.125rem;
        line-height: 1.6875rem;
        letter-spacing: -0.01em;
    }

    footer a:hover {
        color: var(--color-green);
    }

    /* Hero section spacing */
    .hero {
        margin-top: var(--space-64);
    }

    .hero h1 {
        margin-bottom: var(--space-24);
    }

    .hero p {
        margin-bottom: var(--space-24);
    }

    .hero img {
        display: block;
        width: 100%;
        aspect-ratio: 2 / 1;
        object-fit: cover;
        border-radius: var(--space-8);
        margin-bottom: var(--space-80);
    }

    /* Work highlights section */
    .work-highlights {
        margin-bottom: var(--space-80);
    }

    .work-highlights h3 {
        margin-bottom: var(--space-24);
        color: var(--color-gray-dark);
    }

    .work-highlights article {
        margin-bottom: var(--space-48);
        border: 1px solid var(--color-secondary);
        border-radius: var(--space-8);
        padding: var(--space-24) var(--space-16) 0 var(--space-16);
        overflow: hidden;
        transition: border-color 0.2s ease;
        max-height: 360px;
        display: flex;
        flex-direction: column;
    }

    .work-highlights article:last-child {
        margin-bottom: 0;
    }

    .work-highlights article:hover {
        border-color: var(--color-green);
    }

    .work-highlights article a {
        text-decoration: none;
        color: var(--color-text);
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .work-highlights article a:focus-visible {
        outline: 2px solid var(--color-green);
        outline-offset: 4px;
        border-radius: var(--space-8);
    }

    .work-highlights article h3 {
        margin: 0 0 var(--space-8) 0;
        color: var(--color-text);
        transition: color 0.2s ease;
    }

    .work-highlights article:hover h3 {
        color: var(--color-green);
    }

    .work-highlights article:hover h3::after {
        content: " →";
    }

    .work-highlights article p {
        margin: 0 0 var(--space-16) 0;
        color: var(--color-text);
        transition: margin-bottom 0.2s ease;
    }

    .work-highlights article:hover p {
        margin-bottom: var(--space-4);
    }

    .work-highlights article img {
        display: block;
        width: 100%;
        margin: 0;
        flex: 1 1 auto;
        min-height: 0;
        object-fit: cover;
        border-radius: 0 0 var(--space-8) var(--space-8);
        transition: transform 0.2s ease;
    }

    .work-highlights article:hover img {
        transform: translateY(-12px);
    }

    /* Latest writing section */
    .latest-writing {
        margin-bottom: var(--space-80);
    }

    .hero + .latest-writing {
        margin-top: var(--space-64);
    }

    .latest-writing h3 {
        margin-bottom: var(--space-24);
        color: var(--color-gray-dark);
    }

    .article-list-item {
        display: flex;
        gap: var(--space-16);
        align-items: baseline;
        margin-bottom: var(--space-12);
    }

    .article-list-item:last-child {
        margin-bottom: 0;
    }

    .article-list-item time {
        font-size: 1.125rem;
        line-height: 1.6875rem;
        color: var(--color-gray-dark);
        flex-shrink: 0;
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.025em;
    }

    .article-list-item a {
        font-size: 1.125rem;
        line-height: 1.6875rem;
    }

    /* Work page spacing */
    .work-page h1 {
        margin-top: var(--space-64);
        margin-bottom: var(--space-24);
    }

    .work-page .work-intro {
        margin-bottom: var(--space-40);
    }

    .work-page .work-highlights {
        margin-top: 0;
        margin-bottom: 0;
    }

    /* More case studies section */
    .more-case-studies {
        margin-top: var(--space-80);
        margin-bottom: var(--space-80);
    }

    .more-case-studies h3 {
        margin-bottom: var(--space-24);
        color: var(--color-gray-dark);
    }

    /* Case study list item */
    .case-study-list-item {
        display: flex;
        gap: var(--space-16);
        align-items: flex-start;
        margin-bottom: var(--space-12);
    }

    .case-study-list-item:last-child {
        margin-bottom: 0;
    }

    .case-study-list-item time {
        font-size: 1.125rem;
        line-height: 1.6875rem;
        color: var(--color-gray-dark);
        flex-shrink: 0;
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.025em;
    }

    .case-study-content {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
    }

    .case-study-content a {
        font-size: 1.125rem;
        line-height: 1.6875rem;
    }

    .case-study-description {
        font-size: 1.125rem;
        line-height: 1.6875rem;
        color: var(--color-gray-dark);
        margin: 0;
    }

    /* Photo masonry grid */
    .photo-grid {
        display: grid;
        grid-template-columns: repeat(3, 260px);
        column-gap: 24px;
        row-gap: 20px;
        margin-top: var(--space-80);
        margin-bottom: var(--space-80);
        max-width: 828px;
        margin-left: auto;
        margin-right: auto;
        justify-content: center;
    }

    .photo-grid img,
    .photo-grid picture img {
        width: 260px;
        display: block;
        border-radius: 2px;
        object-fit: cover;
    }

    .photo-grid picture {
        display: block;
    }

    .photo-grid img[data-ratio="1:1"],
    .photo-grid picture img[data-ratio="1:1"] {
        aspect-ratio: 1 / 1;
    }

    .photo-grid img[data-ratio="4:5"],
    .photo-grid picture img[data-ratio="4:5"] {
        aspect-ratio: 4 / 5;
    }

    .photo-grid img[data-ratio="4:3"],
    .photo-grid picture img[data-ratio="4:3"] {
        aspect-ratio: 4 / 3;
    }

    /* Post page styles */
    .post-date {
        display: block;
        font-size: 1.125rem;
        line-height: 1.6875rem;
        color: var(--color-gray-dark);
        margin-top: var(--space-64);
        margin-bottom: var(--space-16);
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.025em;
    }

    .post-container {
        margin-bottom: var(--space-80);
    }

    .post-title {
        margin-bottom: var(--space-32);
    }

    .post-content {
        margin-bottom: var(--space-48);
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    .post-content h2 {
        margin-top: var(--space-48);
        margin-bottom: var(--space-24);
        font-weight: 500;
        font-size: 1.5rem;
        line-height: 2rem;
        letter-spacing: 0.01em;
    }

    .post-content h3 {
        margin-top: var(--space-32);
        margin-bottom: var(--space-16);
        font-weight: 500;
        font-size: 1.125rem;
        line-height: 1.6875rem;
        letter-spacing: -0.01em;
    }

    .post-content p {
        margin-bottom: var(--space-24);
    }

    .post-content ul,
    .post-content ol {
        margin-bottom: var(--space-24);
        margin-left: calc(-1 * var(--space-8));
        padding-left: 0;
        list-style-position: outside;
    }

    .post-content li {
        margin-bottom: var(--space-12);
        padding-left: var(--space-8);
        font-size: 1.125rem;
        line-height: 1.6875rem;
        letter-spacing: -0.01em;
    }

    .post-content blockquote {
        margin: var(--space-32) 0;
        padding-left: 0;
        border-left: none;
        font-size: 1.5rem;
        line-height: 2rem;
        font-weight: 500;
        color: var(--color-text);
        font-style: normal;
    }

    .post-content blockquote p {
        margin-bottom: var(--space-16);
    }

    .post-content img,
    .post-content picture img {
        display: block;
        max-width: 100%;
        height: auto;
        margin: var(--space-32) 0;
        border-radius: var(--space-8);
    }

    .post-content picture {
        display: block;
        margin: var(--space-32) 0;
    }

    .action-link {
        display: inline-block;
        text-decoration: none;
        color: var(--color-gray-dark);
        font-size: 1.125rem;
        line-height: 1.6875rem;
        letter-spacing: -0.01em;
        margin-top: var(--space-32);
    }

    .action-link:hover {
        color: var(--color-green);
    }

    /* Visually hidden for accessibility */
    .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }

    /* Mobile responsive */
    @media (max-width: 768px) {
        body {
            width: 95%;
        }

        nav {
            flex-direction: column;
            align-items: flex-start;
            padding-top: var(--space-16);
        }

        nav h3 {
            margin-bottom: var(--space-4);
        }

        nav ul {
            gap: var(--space-32);
        }

        .hero {
            margin-top: var(--space-48);
        }

        .hero img {
            margin-bottom: var(--space-64);
        }

        .photo-grid {
            grid-template-columns: 1fr;
            margin-top: var(--space-64);
            margin-bottom: var(--space-64);
            max-width: 100%;
        }

        .photo-grid img,
        .photo-grid picture img {
            width: 100%;
        }

        .work-highlights {
            margin-bottom: var(--space-64);
        }

        .latest-writing {
            margin-bottom: var(--space-64);
        }

        .article-list-item {
            flex-direction: column;
            gap: var(--space-4);
            align-items: flex-start;
        }

        .work-page h1 {
            margin-top: var(--space-48);
        }

        .more-case-studies {
            margin-top: var(--space-64);
            margin-bottom: var(--space-64);
        }

        .case-study-list-item {
            flex-direction: column;
            gap: var(--space-4);
            align-items: flex-start;
        }

        footer {
            padding-top: var(--space-16);
        }

        footer div {
            flex-direction: column;
            gap: var(--space-16);
        }
    }
}