PageSourceSearch

https://formandfield.com/projects

html formandfield.com collected 2026-10-04 18:54:06 UTC 356,477 bytes, 3,589 lines download raw bytes

1<!DOCTYPE html>
2<!--
3
4        Made with cargo.site
5
6-->
7<html class="wf-initial-load">
8	<head>
9		<meta charset="utf-8">
10		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
11		<meta name="generator" content="Cargo (https://cargo.site)">
12
13		
14			<title>Projects — FormAndField</title>
15			
15<script>window.__PRELOADED_STATE__={"structure":{"byParent":{"root":["A0978241458","M0232165722","Q2242546844","D1176231124","W1115722228","L3418916892","Z3013557801","B3004925598"],"M0232165722":[],"D1176231124":[]},"bySort":{"A0978241458":0,"M0232165722":2,"Q2242546844":21,"D1176231124":22,"W1115722228":101,"L3418916892":102,"Z3013557801":103,"B3004925598":1},"indexById":{"A0978241458":0,"M0232165722":2,"Q2242546844":null,"D1176231124":4,"W1115722228":null,"L3418916892":null,"Z3013557801":null,"B3004925598":1},"liveIndexes":{}},"site":{"id":3623328,"direct_link":"https://formandfield.com","display_url":"formandfield.com","site_url":"681018","domain":"formandfield.com","domain_active":true,"domain_purchased":false,"domain_pending":false,"css_url":"https://formandfield.com/stylesheet","rss_url":"https://formandfield.com/rss","favicon_url":"https://freight.cargo.site/t/original/i/N3072501889885813271918056125753/FF-FFav.ico","website_title":"FormAndField","access_level":"public","is_private":false,"is_deleted":false,"is_upgraded":false,"is_template":false,"show_cargo_logo":false,"has_annex_upgrade":true,"has_domain_addon":true,"has_commerce_addon":false,"has_storage_addon":false,"can_duplicate":false,"can_copy":false,"site_password_enabled":false,"recent_date":"2026-09-29 03:30:47","upgrade_expire_date":"","version":"Cargo3","total_file_size":326693065,"promocode_type":null,"meta_tags":"","homepage_id":"A0978241458","homepage_purl":"home","mobile_homepage_id":"A0978241458","mobile_homepage_purl":"home","screenshot":{"id":87840549,"name":"screenshot-3703312613.jpg","hash":"B3155954706414097525848796609653","width":1792,"height":1120,"file_size":null,"file_type":"jpg","mime_type":"image/jpeg","is_image":true,"is_video":false},"site_preview_type":"screenshot","site_preview_image":[],"site_preview_url":"https://freight.cargo.site/w/1000/i/B3155954706414097525848796609653/screenshot-3703312613.jpg","has_site_description":true,"site_description":"FormAndField promotes joy and well-being through the design of empathetic interiors. We revel in synthesizing the creative with the highest level of execution, taking you from conception to completion. Based in San Francisco, FormAndField provides full-service interior design for the Bay Area and beyond.","custom_html":"\u003c!-- Google Analytics Code -->\n\u003cscript async src=\"https://www.googletagmanager.com/gtag/js?id=G-V7ZPSSPXE8\">\u003c/script>\n\u003cscript>\n  window.dataLayer = window.dataLayer || [];\n  function gtag(){dataLayer.push(arguments);}\n  gtag('js', new Date());\n\n  gtag('config', 'G-V7ZPSSPXE8');\n\u003c/script>\n\n\u003c!-- Cloudflare Turnstile -->\n\u003cscript src=\"https://challenges.cloudflare.com/turnstile/v0/api.js\" async defer>\u003c/script>\n\n\u003cscript>\n  function turnstileSuccess(token) {\n    document.getElementById(\"submit-button\").disabled = false;\n  }\n\n  function turnstileExpired() {\n    document.getElementById(\"submit-button\").disabled = true;\n  }\n\u003c/script>\n\n\n\u003c!--\n  FORM + FIELD — GLOBAL NEWSLETTER POPUP\n\n  Add this once in Cargo's global footer / custom HTML area so it is available\n  on every page. Replace the MAILCHIMP_FORM_ACTION value below with the form\n  action URL from Christine's Mailchimp embedded signup form.\n-->\n\n\u003cdiv class=\"ff-newsletter\" id=\"ff-newsletter\" hidden>\n    \u003cbutton\n        class=\"ff-newsletter__backdrop\"\n        type=\"button\"\n        aria-label=\"Close newsletter signup\"\n        data-ff-newsletter-close\n    >\u003c/button>\n\n    \u003csection\n        class=\"ff-newsletter__panel\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby=\"ff-newsletter-title\"\n        aria-describedby=\"ff-newsletter-description\"\n    >\n        \u003cbutton\n            class=\"ff-newsletter__close\"\n            type=\"button\"\n            aria-label=\"Close newsletter signup\"\n            data-ff-newsletter-close\n        >\n            \u003cspan aria-hidden=\"true\">\u003c/span>\n        \u003c/button>\n\n        \u003cdiv class=\"ff-newsletter__content\">\n            \u003ch2 class=\"ff-newsletter__title\" id=\"ff-newsletter-title\">\n                Join Our\u003cbr>Newsletter\n            \u003c/h2>\n\n            \u003cp class=\"ff-newsletter__description\" id=\"ff-newsletter-description\">\n                Featuring In-Depth Posts\u003cbr>On Design, Interviews,\u003cbr>New Projects, and News.\u003cbr>Bi-Monthly.\n            \u003c/p>\n\n            \u003cform\n                class=\"ff-newsletter__form\"\n                id=\"ff-newsletter-form\"\n                action=\"https://formandfield.us13.list-manage.com/subscribe/post?u=d6b1cfd8e10ee8b00ef7b9bda&amp;id=5c395d1268&amp;f_id=003100e9f0\"\n                method=\"post\"\n                target=\"ff-newsletter-mailchimp\"\n                novalidate\n            >\n                \u003clabel class=\"ff-newsletter__label\" for=\"ff-newsletter-email\">\n                    Email Address\n                \u003c/label>\n                \u003cinput\n                    class=\"ff-newsletter__email\"\n                    id=\"ff-newsletter-email\"\n                    name=\"EMAIL\"\n                    type=\"email\"\n                    inputmode=\"email\"\n                    autocomplete=\"email\"\n                    placeholder=\"[email protected]\"\n                    required\n                >\n\n                \u003c!-- Replace the name value with Mailchimp's b_[u]_[id] honeypot field. -->\n                \u003cdiv class=\"ff-newsletter__honeypot\" aria-hidden=\"true\">\n                    \u003cinput name=\"b_d6b1cfd8e10ee8b00ef7b9bda_5c395d1268\" type=\"text\" tabindex=\"-1\" value=\"\">\n                \u003c/div>\n\n                \u003cbutton class=\"ff-newsletter__submit\" type=\"submit\">\n                    Submit\n                \u003c/button>\n\n                \u003cp class=\"ff-newsletter__message\" aria-live=\"polite\">\u003c/p>\n            \u003c/form>\n\n            \u003cp class=\"ff-newsletter__privacy\">We respect your privacy.\u003c/p>\n        \u003c/div>\n    \u003c/section>\n\u003c/div>\n\n\u003ciframe\n    class=\"ff-newsletter__response-frame\"\n    name=\"ff-newsletter-mailchimp\"\n    title=\"Newsletter signup response\"\n>\u003c/iframe>\n\n\u003cscript>\n(function () {\n    \"use strict\";\n\n    var POPUP_ID = \"ff-newsletter\";\n    var STORAGE_KEY = \"ff_newsletter_popup_dismissed_v1\";\n    var DELAY_MS = 5000;\n    var popup = document.getElementById(POPUP_ID);\n\n    if (!popup || window.__ffNewsletterPopupReady) return;\n    window.__ffNewsletterPopupReady = true;\n\n    var form = document.getElementById(\"ff-newsletter-form\");\n    var email = document.getElementById(\"ff-newsletter-email\");\n    var message = popup.querySelector(\".ff-newsletter__message\");\n    var submitButton = popup.querySelector(\".ff-newsletter__submit\");\n    var closeButtons = popup.querySelectorAll(\"[data-ff-newsletter-close]\");\n    var lastFocusedElement = null;\n    var isOpen = false;\n\n    function hasBeenDismissed() {\n        try {\n            return window.localStorage.getItem(STORAGE_KEY) === \"true\";\n        } catch (error) {\n            return false;\n        }\n    }\n\n    function rememberDismissal() {\n        try {\n            window.localStorage.setItem(STORAGE_KEY, \"true\");\n        } catch (error) {\n            /* The popup still closes when storage is unavailable. */\n        }\n    }\n\n\tfunction hidePopup() {\n        switch (window.location.pathname) {\n            case '/client-bath-questionnaire':\n            case '/client-kitchen-questionnaire':\n            case '/client-style-+-preferences-questionnaire':\n            case '/client-phone-consultation':\n                return true;\n            default:\n              return false;\n        }\n    }\n\n    function openPopup() {\n        if (isOpen || hasBeenDismissed() || hidePopup()) return;\n\n        isOpen = true;\n        lastFocusedElement = document.activeElement;\n        popup.hidden = false;\n        document.documentElement.classList.add(\"ff-newsletter-is-open\");\n\n        window.requestAnimationFrame(function () {\n            popup.classList.add(\"is-visible\");\n            window.setTimeout(function () {\n                email.focus({ preventScroll: true });\n            }, 380);\n        });\n    }\n\n    function closePopup(remember) {\n        if (!isOpen) return;\n        isOpen = false;\n\n        if (remember !== false) rememberDismissal();\n\n        popup.classList.remove(\"is-visible\");\n        document.documentElement.classList.remove(\"ff-newsletter-is-open\");\n\n        window.setTimeout(function () {\n            popup.hidden = true;\n            if (lastFocusedElement && lastFocusedElement.focus) {\n                lastFocusedElement.focus({ preventScroll: true });\n            }\n        }, 380);\n    }\n\n    function getFocusableElements() {\n        return popup.querySelector(\".ff-newsletter__panel\").querySelectorAll(\n            'button:not([disabled]), input:not([disabled]), [href], [tabindex]:not
15([tabindex=\"-1\"])'\n        );\n    }\n\n    function handleKeydown(event) {\n        if (!isOpen) return;\n\n        if (event.key === \"Escape\") {\n            event.preventDefault();\n            closePopup(true);\n            return;\n        }\n\n        if (event.key !== \"Tab\") return;\n\n        var focusable = getFocusableElements();\n        var first = focusable[0];\n        var last = focusable[focusable.length - 1];\n\n        if (event.shiftKey && document.activeElement === first) {\n            event.preventDefault();\n            last.focus();\n        } else if (!event.shiftKey && document.activeElement === last) {\n            event.preventDefault();\n            first.focus();\n        }\n    }\n\n    Array.prototype.forEach.call(closeButtons, function (button) {\n        button.addEventListener(\"click\", function () {\n            closePopup(true);\n        });\n    });\n\n    document.addEventListener(\"keydown\", handleKeydown);\n\n    form.addEventListener(\"submit\", function (event) {\n        message.textContent = \"\";\n        email.removeAttribute(\"aria-invalid\");\n\n        if (!email.validity.valid) {\n            event.preventDefault();\n            email.setAttribute(\"aria-invalid\", \"true\");\n            message.textContent = \"Please enter a valid email address.\";\n            email.focus();\n            return;\n        }\n\n        rememberDismissal();\n        submitButton.disabled = true;\n        submitButton.textContent = \"Submitting\";\n\n        window.setTimeout(function () {\n            submitButton.textContent = \"Submitted\";\n            message.textContent = \"Thank you for signing up.\";\n            email.value = \"\";\n        }, 600);\n\n        window.setTimeout(function () {\n            closePopup(false);\n        }, 1800);\n    });\n\n    if (!hasBeenDismissed()) {\n        window.setTimeout(openPopup, DELAY_MS);\n    }\n\n    /* Console helper for testing: FFNewsletterPopup.reset() */\n    window.FFNewsletterPopup = {\n        open: openPopup,\n        close: function () { closePopup(true); },\n        reset: function () {\n            try { window.localStorage.removeItem(STORAGE_KEY); } catch (error) {}\n        }\n    };\n}());\n\u003c/script>\n\n\u003c!-- BASIN FORM CODE -->\n\u003cscript defer=\"\" src=\"https://js.usebasin.com/v2.11.1.min.js\">\u003c/script>","shop_id":null,"fonts":[{"family":"Favorit Variable","provider":"cargo"}],"tags":[]},"pages":{"byId":{"A0978241458":{"id":"A0978241458","title":"Home","purl":"home","page_type":"page","content":"\u003cdiv id=\"top\">\u003c/div>\n\n\u003c!--      THE Master FLOATING NOISE ANCHOR      -->\n\u003cdiv class=\"site-noise-overlay\">\u003c/div>\n\n\u003c!--      THE FULL-BLEED CEILING HERO SECTION      -->\n\u003cdiv class=\"home-hero-viewport\">\n    \u003cdiv class=\"hero-bg-frame\">\n    \u003cimg alt=\"\" src=\"https://freight.cargo.site/t/original/i/N3072482623645134087819609584953/CL_CRANE_369_edit-RS.jpg\" />\n\u003c/div>\n\n    \u003cdiv class=\"hero-graphic-overlay\">\n        \u003cdiv class=\"breathing-logo\">\n            \u003csvg fill=\"none\" height=\"100%\" viewBox=\"0 0 345 702\" width=\"100%\">\n                \u003cg clip-path=\"url(#clip0)\">\n                    \u003cpath d=\"M82.6803 0H0V82.988V346H82.6803V82.988H344.717V0H82.6803Z\">\u003c/path>\n                    \u003cpath d=\"M206.717 331.985C275.221 331.985 330.754 276.245 330.754 207.487C330.754 138.728 275.221 82.9883 206.717 82.9883C138.213 82.9883 82.6803 138.728 82.6803 207.487C82.6803 276.245 138.213 331.985 206.717 331.985Z\">\u003c/path>\n                \u003c/g>\n                \u003cpath d=\"M82.6804 356H0V438.988V702H82.6804V438.988H344.701V356H82.6804Z\">\u003c/path>\n                \u003cpath d=\"M206.717 687.985C275.221 687.985 330.754 632.245 330.754 563.487C330.754 494.728 275.221 438.988 206.717 438.988C138.214 438.988 82.6807 494.728 82.6807 563.487C82.6807 632.245 138.214 687.985 206.717 687.985Z\">\u003c/path>\n                \u003cdefs>\n                    \u003cclippath id=\"clip0\">\n                        \u003crect fill=\"white\" height=\"346\" width=\"345\">\u003c/rect>\n                    \u003c/clippath>\n                \u003c/defs>\n            \u003c/svg>\n        \u003c/div>\n    \u003c/div>\n\u003c/div>\n\n\u003cdiv class=\"main-content-canvas\">\n    \u003ccolumn-set class=\"home-live-breaker home-live-breaker-a\" gutter=\"1rem\" mobile-stack=\"true\">\u003ccolumn-unit slot=\"0\" span=\"1\">\u003c/column-unit>\u003ccolumn-unit slot=\"1\" span=\"5\">\u003cdiv class=\"home-live-callout\" style=\"text-align: left\"> Empathetic\u003cbr /> Interiors.           \u003c/div>\n        \u003c/column-unit>\u003ccolumn-unit slot=\"2\" span=\"5\">\n            \u003cgallery-freeform class=\"home-live-breaker-gallery\" gutter=\"1rem\" mobile-columns=\"1\" mobile-gutter=\"1rem\">\u003cmedia-item class=\"linked\" disable-zoom=\"true\" freeform-scale=\"100\" freeform-x=\"0\" freeform-y=\"0\" freeform-z=\"1\" hash=\"Z3042803393482523232841425796213\" href=\"project-soma-space-opera\" rel=\"history\" scale=\"100\">\n                    \u003cfigcaption class=\"caption\" slot=\"caption\">\n                        \u003ca href=\"project-soma-space-opera\" rel=\"history\">FEATURED: 1 — SOMA\u003c/a> Space Opera\u003c/figcaption>\n                \u003c/media-item>\u003c/gallery-freeform>\n        \u003c/column-unit>\u003ccolumn-unit slot=\"3\" span=\"1\">\u003c/column-unit>\u003c/column-set>\n\n    \u003cgallery-freeform class=\"home-main-gallery-after-breaker\" gutter=\"1rem\" mobile-columns=\"1\" mobile-gutter=\"7rem\" mobile-horizontal-align=\"center\">\u003cmedia-item autoplay=\"true\" browser-default=\"true\" disable-zoom=\"true\" freeform-scale=\"37.30\" freeform-x=\"11.704545454545455\" freeform-y=\"0\" freeform-z=\"3\" height=\"1080\" loop=\"true\" muted=\"true\" scale=\"37.30\" src=\"https://freight.cargo.site/m/G3049191733919179757443973199161/formandfield_16x9_horizontal_v2-1080p.mp4\" width=\"2048\">\u003cfigcaption class=\"caption\" slot=\"caption\">FEATURED: 2 — About FormAndField\u003c/figcaption>\u003c/media-item>\u003cmedia-item class=\"linked\" disable-zoom=\"true\" freeform-scale=\"34.80\" freeform-x=\"57.94834521760303\" freeform-y=\"10.985835214138802\" freeform-z=\"1\" hash=\"N3042797720998040102712046566517\" href=\"https://www.architecturaldigest.com/story/star-trek-and-dune-inspired-the-futuristic-design-of-this-san-francisco-home\" scale=\"34.80\" target=\"_blank\">\n            \u003cfigcaption class=\"caption\" slot=\"caption\">\n                \u003ca href=\"https://www.architecturaldigest.com/story/star-trek-and-dune-inspired-the-futuristic-design-of-this-san-francisco-home\" rel=\"history\" target=\"_blank\">FEATURED: 3 — ARCHITECTURAL DIGEST: Star Trek and Dune Inspired the Futuristic Design of This San Franci\u003c/a>sco\u003ca href=\"https://www.architecturaldigest.com/story/star-trek-and-dune-inspired-the-futuristic-design-of-this-san-francisco-home\" rel=\"history\" target=\"_blank\"> Home\u003c/a>\u003c/figcaption>\n        \u003c/media-item>\u003cmedia-item class=\"fieldnotes-portrait linked\" disable-zoom=\"true\" freeform-scale=\"40.40\" freeform-x=\"31.918618028348465\" freeform-y=\"46.704071147406616\" freeform-z=\"2\" hash=\"S3087034817101664855175718581561\" href=\"fieldnotes\" media-style=\"border-radius: 100rem;\" rel=\"history\" scale=\"40.40\" uses=\"inline-part-styles\">\n            \u003cfigcaption class=\"caption\" slot=\"caption\">\n                \u003ca href=\"fieldnotes-alison-mclennan-1\" rel=\"history\">*FieldNotes — Ideas, conversations, and observations \u003cbr />\non art, design, and the spaces we inhabit.\u003c/a>\n            \u003c/figcaption>\n        \u003c/media-item>\u003c/gallery-freeform>\n\n    \u003cdiv class=\"home-mobile-layout\">\n        \u003cdiv class=\"home-mobile-live-callout\" style=\"text-align: left\">\n                Empathetic   Interiors.\n               \n        \u003c/div>\n\n        \u003cgallery-freeform class=\"home-mobile-freeform\" gutter=\"1rem\" mobile-columns=\"1\" mobile-grid=\"false\" mobile-gutter=\"3rem\" mobile-horizontal-align=\"center\">\u003cmedia-item class=\"linked\" disable-zoom=\"true\" freeform-scale=\"88\" freeform-x=\"6\" freeform-y=\"0\" freeform-z=\"1\" hash=\"Z3042803393482523232841425796213\" href=\"project-soma-space-opera\" rel=\"history\" scale=\"88\">\n                \u003cfigcaption class=\"caption\" slot=\"caption\">\n                    \u003ca href=\"project-soma-space-opera\" rel=\"history\">FEATURED: 1 — SOMA\u003c/a> Space Opera\n\u003c/figcaption>\n            \u003c/media-item>\u003cmedia-item autoplay=\"true\" browser-default=\"false\" disable-zoom=\"true\" freeform-scale=\"88\" freeform-x=\"9.863636363636365\" freeform-y=\"143.00000000000003\" freeform-z=\"2\" hash=\"P3049182747956739131310094497081\" loop=\"true\" muted=\"true\" scale=\"88\">\n                \u003cfigcaption class=\"caption\" slot=\"caption\">\n                    \u003ca href=\"05-studio-page-1\" rel=\"history\">FEATURED: 2 — About FormAndField\u003c/a>\n                \u003c/figcaption>\n            \u003c/media-item>\u003cmedia-item class=\"linked\" disable-zoom=\"true\" freeform-scale=\"95.23\" freeform-x=\"2.2375160051216394\" freeform-y=\"220.26376440460945\" freeform-z=\"4\" hash=\"N3042797720998040102712046566517\" href=\"https://www.architecturaldigest.com/story/star-trek-and-dune-inspired-the-futuristic-design-of-this-san-francisco-home\" limit-by=\"width\" scale=\"95.23\" target=\"_blank\">\n                \u003cfigcaption class=\"caption\" slot=\"caption\">\n                    \u003ca href=\"https://www.architecturaldigest.com/story/star-trek-and-dune-inspired-the-futuristic-design-of-this-san-francisco-home\" target=\"_blank\">FEATURED: 3 — ARCHITECTURAL DIGEST: \u003cbr />\nStar \nTrek \nand Dune Inspired the Futuristic Design \u003cbr />\nof  This San Francisco Home\u003c/a>\n                \u003c/figcaption>\n            \u003c/media-item>\u003cmedia-item class=\"fieldnotes-portrait\" disable-zoom=\"true\" freeform-scale=\"88\" freeform-x=\"6.000000000000001\" freeform-y=\"312.8636363636363\" freeform-z=\"3\" hash=\"S3087034817101664855175718581561\" href=\"03-fieldnotes-landing\" media-style=\"border-radius: 100rem;\" rel=\"history\" scale=\"88\" uses=\"inline-part-styles\">\n                \u003cfigcaption class=\"caption\" slot=\"caption\">\n                    \u003ca href=\"03-fieldnotes-landing\" rel=\"history\">\n                *FieldNotes — Ideas, conversations, and observations on art, design, \u003cbr />\nand the spaces we inhabit.\n            \u003c/a>\n                \u003c/figcaption>\n            \u003c/media-item>\u003c/gallery-freeform>\n    \u003c/div>\n\n     \u003cdiv class=\"fieldnotes-ticker\">\n        \u003cdiv class=\"fieldnotes-ticker-track\">\n            \u003cspan>← ← ← *FieldNotes\u003c/span>\n            \u003cspan>← ← ← *FieldNotes\u003c/span>\n            \u003cspan>← ← ← *FieldNotes\u003c/span>\n            \u003cspan>← ← ← *FieldNotes\u003c/span>\n            \u003cspan>← ← ← *FieldNotes\u003c/span>\n            \u003cspan>← ← ← *FieldNotes\u003c/span>\n            \u003cspan>← ← ← *FieldNotes\u003c/span>\n            \u003cspan>← ← ← *FieldNotes\u003c/span>\n        \u003c/div>\n    \u003c/div>\n\n    \u003c!--      CLOSING LIVE-TYPE CALLOUT: remains above the footer/newsletter      -->\n    \u003ccolumn-set class=\"home-closing-callout\" gutter=\"1rem\" mobile-stack=\"true\">\u003ccolumn-unit slot=\"0\" span=\"1\">\u003c/column-unit>\u003ccolumn-unit slot=\"1\" span=\"7\">\n            \u003cdiv class=\"home-closing-callout-text\" style=\"text-align: left\">\u003cbr />\nCuriosity \u003cbr />\nand Experimentation.\u003c/div>\n        \u003c/column-unit>\u003ccolumn-unit slot=\"2\" span=\"2\">\u003c/column-unit>\u003ccolumn-unit slot=\"3\" span=\"2\">\u003c/column-unit>\u003c/column-set>\n\u003c/div>","local_css":"body {\n    --ff-body-background: var(--ff-sand);\n    --ff-body-grain-opacity: 0.22;\n}\n\n.ff-callout-graphic,\n.ff-callout-graphic::part(figure),\n.ff-callout-graphic::part(frame),\n.ff-callout-graphic::part(sizing-frame),\n.ff-callout-graphic::part(media),\n.ff-callout-graphic img {\n    background: transparent !important;\n    background-color: transparent !important;\n    filter: none !important;\n    mix-blend-mode: normal !important;\n    opacity: 1 !important;\n}
15\n\n[id=\"A0978241458\"] .page-content {\n    align-items: flex-start;\n    padding: 0 !important;\n    overflow-x: hidden !important;\n}\n\n.home-hero-viewport {\n    left: 50% !important;\n    right: auto !important;\n    margin-left: 0 !important;\n    margin-right: 0 !important;\n    margin-top: 0 !important;\n    transform: translateX(-50%) !important;\n    background-color: #000000 !important;\n    isolation: isolate;\n}\n\n.hero-bg-frame {\n    position: absolute !important;\n    inset: 0 !important;\n    z-index: 0 !important;\n    overflow: hidden !important;\n}\n\n.hero-bg-frame img {\n    display: block !important;\n}\n\n.hero-bg-frame::after {\n    display: none !important;\n}\n\n.hero-graphic-overlay {\n    z-index: 2 !important;\n}\n\n/* PHOTOSHOP-STYLE PINK MULTIPLY IMAGE HOVER - CAPTION SAFE */\n\n/* Keep the outer media component and figure transparent */\n.main-content-canvas gallery-freeform media-item:not([hash=\"placeholder\"]),\n.main-content-canvas gallery-freeform media-item:not([hash=\"placeholder\"])::part(figure),\n.main-content-canvas gallery-freeform media-item:not([hash=\"placeholder\"])::part(frame) {\n    background: transparent !important;\n    background-color: transparent !important;\n}\n\n/* Put the pink only behind the actual image area */\n.main-content-canvas gallery-freeform media-item:not([hash=\"placeholder\"])::part(sizing-frame) {\n    background-color: var(--ff-sand) !important;\n    overflow: hidden !important;\n}\n\n/* The image multiplies against that pink image-area background */\n.main-content-canvas gallery-freeform media-item:not([hash=\"placeholder\"])::part(media) {\n    filter: grayscale(1) contrast(0.98) brightness(1.04) !important;\n    mix-blend-mode: multiply !important;\n    opacity: 1 !important;\n    transition:\n        filter 420ms ease,\n        mix-blend-mode 420ms ease !important;\n}\n\n/* Hover returns to full color */\n.main-content-canvas gallery-freeform media-item:not([hash=\"placeholder\"]):hover::part(sizing-frame) {\n    background-color: transparent !important;\n}\n\n.main-content-canvas gallery-freeform media-item:not([hash=\"placeholder\"]):hover::part(media) {\n    filter: grayscale(0) contrast(1) brightness(1) !important;\n    mix-blend-mode: normal !important;\n}\n\n/* HERO IMAGE PINK MULTIPLY HOVER */\n.home-hero-viewport .hero-bg-frame {\n    background-color: var(--ff-sand) !important;\n}\n\n.home-hero-viewport .hero-bg-frame img {\n    filter: grayscale(1) contrast(0.98) brightness(1.04) !important;\n    mix-blend-mode: multiply !important;\n    opacity: 1 !important;\n    transition:\n        filter 420ms ease,\n        mix-blend-mode 420ms ease !important;\n}\n\n.home-hero-viewport:hover .hero-bg-frame {\n    background-color: transparent !important;\n}\n\n.home-hero-viewport:hover .hero-bg-frame img {\n    filter: grayscale(0) contrast(1) brightness(1) !important;\n    mix-blend-mode: normal !important;\n}\n\n/* CIRCULAR PORTRAIT IMAGE */\n.main-content-canvas gallery-freeform media-item[hash=\"P3015094254613036546168069109049\"],\n.main-content-canvas gallery-freeform media-item[hash=\"P3015094254613036546168069109049\"]::part(figure),\n.main-content-canvas gallery-freeform media-item[hash=\"P3015094254613036546168069109049\"]::part(frame),\n.main-content-canvas gallery-freeform media-item[hash=\"P3015094254613036546168069109049\"]::part(sizing-frame),\n.main-content-canvas gallery-freeform media-item[hash=\"P3015094254613036546168069109049\"]::part(media) {\n    border-radius: 50% !important;\n    overflow: hidden !important;\n}\n\n/* FREEFORM GALLERY SECTION HEIGHT */\n.main-content-canvas {\n    min-height: 180vh !important;\n}\n\n/* KEEP CARGO CAPTIONS, REMOVE PINK CAPTION BAR */\n.main-content-canvas gallery-freeform media-item::part(caption),\n.main-content-canvas gallery-freeform media-item::part(caption-background),\n.main-content-canvas gallery-freeform media-item::part(figure) {\n    background: transparent !important;\n    background-color: transparent !important;\n}\n\n.section-callout {\n    position: absolute;\n    z-index: 3;\n    font-family: \"Favorit\", \"Diatype Variable\", Arial, sans-serif;\n    font-size: 96px;\n    line-height: 1.1em;\n    font-weight: 420;\n    font-style: normal;\n    font-variation-settings: 'MONO' 0, 'slnt' 0;\n    text-align: left;\n    color: #000000;\n    letter-spacing: 0;\n    pointer-events: none;\n}\n\n.callout-a {\n    left: 6vw;\n    top: 28vh;\n}\n\n.callout-b {\n    left: 55vw;\n    top: 247vh;\n}\n\n/* BLUE HERO LOGOMARK */\n.hero-graphic-overlay {\n    display: flex !important;\n    opacity: 1;\n    visibility: visible !important;\n    z-index: 5 !important;\n    pointer-events: auto !important;\n    transition:\n        opacity 520ms ease,\n        filter 520ms ease !important;\n}\n\n.hero-graphic-overlay:hover {\n    opacity: 0;\n    filter: blur(6px);\n}\n\n.breathing-logo,\n.breathing-logo svg {\n    display: block !important;\n    width: 100% !important;\n    height: 100% !important;\n}\n\n.breathing-logo svg path {\n    fill: #2F52D9;\n    animation: ffBlueBreathe 9s ease-in-out infinite !important;\n}\n\n@keyframes ffBlueBreathe {\n    0% {\n        fill: #2F52D9;\n    }\n\n    50% {\n        fill: #5D7EFF;\n    }\n\n    100% {\n        fill: #2F52D9;\n    }\n}\n\n/* HOME MORNING CLEANUP */\n\n/* Keep the circular image circular, but let its caption render outside the crop. */\n.main-content-canvas gallery-freeform media-item[hash=\"P3015094254613036546168069109049\"],\n.main-content-canvas gallery-freeform media-item[hash=\"P3015094254613036546168069109049\"]::part(figure) {\n    border-radius: 0 !important;\n    overflow: visible !important;\n}\n\n.main-content-canvas gallery-freeform media-item[hash=\"P3015094254613036546168069109049\"]::part(frame),\n.main-content-canvas gallery-freeform media-item[hash=\"P3015094254613036546168069109049\"]::part(sizing-frame),\n.main-content-canvas gallery-freeform media-item[hash=\"P3015094254613036546168069109049\"]::part(media) {\n    border-radius: 50% !important;\n    overflow: hidden !important;\n}\n\n/* Highlight only the label word in selected captions. */\n.caption-highlight {\n    display: inline;\n    padding: 0 0.12em;\n    background: rgba(255, 255, 0, 0.30);\n    box-decoration-break: clone;\n    -webkit-box-decoration-break: clone;\n}\n\n/* Keep homepage editorial callouts on non-mono Favorit. */\n.section-callout {\n    font-family: \"Favorit Variable\", \"Favorit\", Arial, sans-serif !important;\n    font-weight: 400 !important;\n    font-style: normal !important;\n    font-variation-settings: \"slnt\" 0 !important;\n    font-feature-settings: normal !important;\n}\n\n/* FieldNotes ticker crossing the circular feature. */\n.fieldnotes-ticker {\n    position: absolute;\n    left: 0;\n    right: 0;\n    top: 173vh;\n    z-index: 6;\n    overflow: hidden;\n    pointer-events: none;\n    color: #3D5AFE !important;\n    font-family: var(--ff-font-mono) !important;\n    font-size: 72px !important;\n    line-height: 1 !important;\n    font-weight: 300 !important;\n    font-style: normal !important;\n    font-variation-settings: \"MONO\" 1, \"slnt\" 0 !important;\n    white-space: nowrap;\n}\n\n.fieldnotes-ticker-track {\n    display: flex;\n    width: max-content;\n    will-change: transform;\n    animation: fieldnotesTicker 26s linear infinite !important;\n}\n\n.fieldnotes-ticker span {\n    display: inline-block;\n    flex: 0 0 auto;\n    padding-right: 0.55em;\n    color: #3D5AFE !important;\n    font: inherit !important;\n    font-size: 72px !important;\n    line-height: 1 !important;\n    white-space: nowrap;\n}\n\n@keyframes fieldnotesTicker {\n    from {\n        transform: translate3d(0, 0, 0);\n    }\n\n    to {\n        transform: translate3d(-50%, 0, 0);\n    }\n}\n\n/* FieldNotes ticker - smoother glide */\n.fieldnotes-ticker {\n    position: absolute;\n    left: 0;\n    right: 0;\n    top: 193vh;\n    z-index: 6;\n    overflow: hidden;\n    pointer-events: none;\n    color: #3D5AFE !important;\n    font-family: var(--ff-font-mono) !important;\n    font-size: 72px !important;\n    line-height: 1 !important;\n    font-weight: 300 !important;\n    font-style: normal !important;\n    font-variation-settings: \"MONO\" 1, \"slnt\" 0 !important;\n    white-space: nowrap;\n    -webkit-font-smoothing: antialiased;\n    text-rendering: geometricPrecision;\n}\n\n.fieldnotes-ticker-track {\n    display: flex;\n    width: max-content;\n    will-change: transform;\n    transform: translate3d(0, 0, 0);\n    animation: fieldnotesTickerSmooth 42s linear infinite !important;\n}\n\n.fieldnotes-ticker span {\n    display: inline-block;\n    flex: 0 0 auto;\n    padding-right: 0.72em;\n    color: #3D5AFE !important;\n    font: inherit !important;\n    font-size: 72px !important;\n    line-height: 1 !important;\n    white-space: nowrap;\n}\n\n@keyframes fieldnotesTickerSmooth {\n    0% {\n        transform: translate3d(0, 0, 0);\n    }\n\n    100% {\n        transform: translate3d(-50%, 0, 0);\n    }\n}\n\n/* EXCLUDE EDITORIAL CALLOUT SVGS FROM IMAGE HOVER EFFECT */\nmedia-item:has(img[src*=\"FF-callout-\"]),\nmedia-item:has(img[src*=\"FF-callout-\"])::part(figure),\nmedia-item:has(img[src*=\"FF-callout-\"])::part(frame),\nmedia-item:has(img[src*=\"FF-callout-\"])::part(sizing-frame),\nmedia-item:has(img[src*=\"FF-callout-\"])::part(media),\nimg[src*=\"FF-callout-\"] {\n    background: transparent !important;\n    background-color: transparent !important;\n    filter: none !important;\n    mix-blend-mode: normal !important;\n    opacity: 1 !important;\n}\n\n/* DIRECT CALLOUT IMAGE RESET */\nimg[src*=\"FF-callout-\"] {\n    background: transparent !important;\n    background-color: transparent !important;\n    filter: none !important;\n    mix-blend-mode: normal !important;\n    opacity: 1 !important;\n}\n\n/* EXCLUDE EDITORIAL CALLOUT GRAPHICS FROM IMAGE HOVER EFFECT */\n.ff-callout-graphic,\n.ff-callout-graphic::part(figure),\n.ff-callout-graphic::part(frame),\n.ff-callout-graphic::part(sizing-frame),\n.ff-callout-graphic::part(media),\n.ff-callout-graphic img,\n.ff-callout-graphic svg {\n    background: transparent !important;\n    background-color: transparent !important;\n    filter: none !important;\n    mix-blend-mode: normal !important;\n    opacity: 1 !important;\n}\n\n.ff-callout-graphic:hover,\n.ff-callout-graphic:hover::part(figure),\n.ff-callout-graphic:hover::part(frame),\n.ff-callout-graphic:hover::part(sizing-frame),\n.ff-callout-graphic:hover::part(media),\n.ff-callout-graphic:hover img,\n.ff-callout-graphic:hover svg {\n    background: transparent !important;\n    background-color: transparent !important;\n    filter: none !important;\n    mix-blend-mode: normal !important;\n    opacity: 1 !important;\n}\n\n/* FINAL CALLOUT EXCLUSION — must remain after general image hover rules */\n.main-content-canvas gallery-freeform media-item.ff-callout-graphic::part(figure),\n.main-content-canvas gallery-freeform media-item.ff-callout-graphic::part(frame),\n.main-content-canvas gallery-freeform media-item.ff-callout-graphic::part(sizing-frame),\n.main-content-canvas gallery-freeform media-item.ff-callout-graphic:hover::part(figure),\n.main-content-canvas gallery-freeform media-item.ff-callout-graphic:hover::part(frame),\n.main-content-canvas gallery-freeform media-item.ff-callout-graphic:hover::part(sizing-frame) {\n    background: transparent !important;\n    background-color: transparent !important;\n}\n\n.main-content-canvas gallery-freeform media-item.ff-callout-graphic::part(media),\n.main-content-canvas gallery-freeform media-item.ff-callout-graphic:hover::part(media) {\n    filter: none !important;\n    mix-blend-mode: normal !important;\n    opacity: 1 !important;\n}\n\n/* DESKTOP HERO LOGOMARK — 15% SMALLER */\n@media (min-width: 768px) {\n    .hero-graphic-overlay {\n        width: 29.75vw !important;\n        max-width: 340px !important;\n    }\n}\n\n/* MOBILE HERO LOGOMARK — ENLARGED */\n@media (max-width: 767px) {\n    .hero-graphic-overlay {\n        width: 53.5vw !important;\n        max-width: none !important;\n    }\n}\n\n/* ========================================================\n   HOMEPAGE PASS 1 — FIELDNOTES PORTRAIT ONLY\n   Class-based so future image replacements retain behavior.\n   ======================================================== */\n\n/* Keep the host and figure transparent so the caption stays outside the crop. */\n.main-content-canvas gallery-freeform media-item.fieldnotes-portrait,\n.main-content-canvas gallery-freeform media-item.fieldnotes-portrait::part(figure) {\n    border-radius: 0 !important;\n    overflow: visible !important;\n    background: transparent !important;\n    background-color: transparent !important;\n}\n\n/* Clip only the actual image region to a circle. */\n.main-content-canvas gallery-freeform media-item.fieldnotes-portrait::part(frame),\n.main-content-canvas gallery-freeform media-item.fieldnotes-portrait::part(sizing-frame),\n.main-content-canvas gallery-freeform media-item.fieldnotes-portrait::part(media) {\n    border-radius: 50% !important;\n    overflow: hidden !important;\n}\n\n/*\n   Put the sand and grain inside the circular image frame.\n   The existing grayscale/multiply rule creates the warm duotone.\n*/\n.main-content-canvas gallery-freeform media-item.fieldnotes-portrait::part(sizing-frame) {\n    background-color: var(--ff-sand) !important;\n    background-image: var(--ff-grain-image) !important;\n    background-repeat: repeat !important;\n    background-size: 140px 140px !important;\n}\n\n/* Hover returns the portrait to clean full color. */\n.main-content-canvas gallery-freeform media-item.fieldnotes-portrait:hover::part(sizing-frame) {\n    background-color: transparent !important;\n    background-image: none !important;\n}\n\n.main-content-canvas gallery-freeform media-item.fieldnotes-portrait:hover::part(media) {\n    filter: grayscale(0) contrast(1) brightness(1) !important;\n    mix-blend-mode: normal !important;\n}\n\n/* ========================================================\n   HOMEPAGE PASS 1 — FIELDNOTES PORTRAIT ONLY\n   Class-based so future image replacements retain behavior.\n   ======================================================== */\n\n/* Keep the host and figure transparent so the caption stays outside the crop. */\n.main-content-canvas gallery-freeform media-item.fieldnotes-portrait,\n.main-content-canvas gallery-freeform media-item.fieldnotes-portrait::part(figure) {\n    border-radius: 0 !important;\n    overflow: visible !important;\n    background: transparent !important;\n    background-color: transparent !important;\n}\n\n/* Clip only the actual image region to a circle. */\n.main-content-canvas gallery-freeform media-item.fieldnotes-portrait::part(frame),\n.main-content-canvas gallery-freeform media-item.fieldnotes-portrait::part(sizing-frame),\n.main-content-canvas gallery-freeform media-item.fieldnotes-portrait::part(media) {\n    border-radius: 50% !important;\n    overflow: hidden !important;\n}\n\n/*\n   Put only the sand blend surface inside the circular image frame.\n   The page already supplies the animated grain; repeating it here\n   would create a second, darker tiled texture.\n*/\n.main-content-canvas gallery-freeform media-item.fieldnotes-portrait::part(sizing-frame) {\n    background-color: var(--ff-sand) !important;\n    background-image: none !important;\n}\n\n/* Hover returns the portrait to clean full color. */\n.main-content-canvas gallery-freeform media-item.fieldnotes-portrait:hover::part(sizing-frame) {\n    background-color: transparent !important;\n    background-image: none !important;\n}\n\n.main-content-canvas gallery-freeform media-item.fieldnotes-portrait:hover::part(media) {\n    filter: grayscale(0) contrast(1) brightness(1) !important;\n    mix-blend-mode: normal !important;\n}\n\n/* ========================================================\n   HOMEPAGE PASS 2 — FIRST LIVE-TYPE BREAKER ONLY\n   ======================================================== */\n\n.home-live-breaker {\n    al
15ign-items: center !important;\n    width: 100% !important;\n    margin: 0 0 clamp(70px, 8vw, 125px) !important;\n}\n\n.home-live-breaker column-unit {\n    min-width: 0 !important;\n}\n\n.home-live-callout {\n    white-space: pre-wrap !important;\n    font-family: \"Favorit Variable\", \"Favorit\", Arial, sans-serif !important;\n    line-height: 1.08 !important;\n    font-weight: 400 !important;\n    font-style: normal !important;\n    font-variation-settings: \"slnt\" 0 !important;\n    font-feature-settings: normal !important;\n    letter-spacing: -0.02em !important;\n    color: #000000 !important;\n}\n\n.home-live-breaker-gallery {\n    display: block !important;\n    width: 100% !important;\n    min-height: 46vw !important;\n    margin: 0 !important;\n}\n\n.home-main-gallery-after-breaker {\n    width: 100% !important;\n}\n\n@media (max-width: 767px) {\n    .home-live-breaker {\n        margin-bottom: 72px !important;\n    }\n\n    .home-live-callout {\n        padding: 0 18px 38px !important;\n        font-size: clamp(36px, 11vw, 54px) !important;\n        line-height: 1.1 !important;\n    }\n\n    .home-live-breaker-gallery {\n        min-height: 105vw !important;\n    }\n}\n\n/* ========================================================\n   HOMEPAGE PASS 3 — LIVE CALLOUT TYPE SCALE ONLY\n   Paste once at the very bottom of the existing page CSS.\n   ======================================================== */\n\n@media (min-width: 768px) {\n    .home-live-callout {\n        font-size: clamp(5.75rem, 6.6vw, 8rem) !important;\n        line-height: 1.08 !important;\n        letter-spacing: 0 !important;\n    }\n}\n\n/* ========================================================\n   HOMEPAGE PASS 4 — ATTACHED FIELDNOTES TICKER TEST\n\n   This test leaves the existing ticker HTML in place but hides it.\n   The moving ticker is drawn from Alison's draggable media item,\n   so it inherits that item's Cargo position.\n   ======================================================== */\n\n/* Hide only the old independently positioned ticker. */\n.main-content-canvas>.fieldnotes-ticker {\n    display: none !important;\n}\n\n/* Keep the ticker outside the circular crop and above the portrait. */\n.main-content-canvas gallery-freeform media-item.fieldnotes-portrait {\n    overflow: visible !important;\n}\n\n.main-content-canvas gallery-freeform media-item.fieldnotes-portrait::after {\n    content:\n        \"← ← ← *FieldNotes   ← ← ← *FieldNotes   ← ← ← *FieldNotes   ← ← ← *FieldNotes   \"\n        \"← ← ← *FieldNotes   ← ← ← *FieldNotes   ← ← ← *FieldNotes   ← ← ← *FieldNotes   \";\n    position: absolute !important;\n    left: 50% !important;\n    top: 46% !important;\n    z-index: 20 !important;\n    display: block !important;\n    width: max-content !important;\n    pointer-events: none !important;\n    white-space: nowrap !important;\n    color: #3D5AFE !important;\n    font-family: var(--ff-font-mono) !important;\n    font-size: 72px !important;\n    line-height: 1 !important;\n    font-weight: 300 !important;\n    font-style: normal !important;\n    font-variation-settings: \"MONO\" 1, \"slnt\" 0 !important;\n    will-change: transform;\n    animation: fieldnotesTickerAttached 26s linear infinite !important;\n}\n\n@keyframes fieldnotesTickerAttached {\n    from {\n        transform: translate3d(-25%, -50%, 0);\n    }\n\n    to {\n        transform: translate3d(-75%, -50%, 0);\n    }\n}\n\n@media (max-width: 767px) {\n    .main-content-canvas gallery-freeform media-item.fieldnotes-portrait::after {\n        font-size: 34px !important;\n    }\n}\n\n/* ========================================================\n   HOMEPAGE PASS 5 — INDEPENDENT MOBILE FREEFORM COMPOSITION\n   Footer intentionally excluded from this pass.\n   ======================================================== */\n\n/* Mobile composition stays out of the desktop page and editor. */\n.home-mobile-layout {\n    display: none !important;\n}\n\n/* Cargo's explicit mobile editor mode. */\nbody.mobile .home-live-breaker,\nbody.mobile .home-main-gallery-after-breaker {\n    display: none !important;\n}\n\nbody.mobile .home-mobile-layout {\n    display: block !important;\n    width: 100% !important;\n}\n\nbody.mobile .home-mobile-live-callout {\n    box-sizing: border-box !important;\n    width: 100% !important;\n    padding: 10vw 7vw 14vw !important;\n    font-family: \"Favorit Variable\", \"Favorit\", Arial, sans-serif !important;\n    font-size: clamp(52px, 15vw, 92px) !important;\n    line-height: 1.04 !important;\n    font-weight: 400 !important;\n    letter-spacing: -0.02em !important;\n}\n\nbody.mobile .home-mobile-freeform {\n    display: block !important;\n    width: 100% !important;\n    min-height: 350vw !important;\n    margin: 0 !important;\n}\n\n/* Real narrow browser viewport, including published phones. */\n@media (max-width: 767px) {\n\n    .home-live-breaker,\n    .home-main-gallery-after-breaker {\n        display: none !important;\n    }\n\n    .home-mobile-layout {\n        display: block !important;\n        width: 100% !important;\n    }\n\n    .home-mobile-live-callout {\n        box-sizing: border-box !important;\n        width: 100% !important;\n        padding: 10vw 7vw 14vw !important;\n        font-family: \"Favorit Variable\", \"Favorit\", Arial, sans-serif !important;\n        font-size: clamp(52px, 15vw, 92px) !important;\n        line-height: 1.04 !important;\n        font-weight: 400 !important;\n        letter-spacing: -0.02em !important;\n    }\n\n    .home-mobile-freeform {\n        display: block !important;\n        width: 100% !important;\n        min-height: 350vw !important;\n        margin: 0 !important;\n    }\n}\n\n/* ========================================================\n   HOME — CLOSING LIVE-TYPE CALLOUT\n   Sits after FieldNotes and before the newsletter/footer.\n   ======================================================== */\n\n.home-closing-callout {\n    box-sizing: border-box !important;\n    width: 100% !important;\n    margin: clamp(4rem, 8vw, 10rem) 0 !important;\n    padding: 0 !important;\n}\n\n.home-closing-callout-text {\n    margin: 0 !important;\n    padding: 0 !important;\n    font-family: \"Favorit Variable\", \"Favorit\", Arial, sans-serif !important;\n    font-size: clamp(3.25rem, 7vw, 9rem) !important;\n    line-height: 0.98 !important;\n    font-weight: 400 !important;\n    letter-spacing: 0 !important;\n}\n\nbody.mobile .home-closing-callout {\n    margin: 4rem 0 !important;\n}\n\nbody.mobile .home-closing-callout-text {\n    font-size: clamp(3rem, 14vw, 6rem) !important;\n    line-height: 1 !important;\n}\n\n@media (max-width: 767px) {\n    .home-closing-callout {\n        margin: 4rem 0 !important;\n    }\n\n    .home-closing-callout-text {\n        font-size: clamp(3rem, 14vw, 6rem) !important;\n        line-height: 1 !important;\n    }\n}\n\n/* ========================================================\n   HOME CLOSING CALLOUT — MOBILE REFINEMENT\n   ======================================================== */\n\n/* Cargo mobile editor */\nbody.mobile .home-closing-callout {\n    box-sizing: border-box !important;\n    width: 100% !important;\n    margin: 4rem 0 !important;\n    padding: 0 4vw !important;\n}\n\nbody.mobile .home-closing-callout-text {\n    width: 100% !important;\n    font-size: 11.7vw !important;\n    line-height: 1.05 !important;\n    overflow-wrap: normal !important;\n    word-break: keep-all !important;\n    hyphens: none !important;\n}\n\n/* Published mobile */\n@media (max-width: 767px) {\n    .home-closing-callout {\n        box-sizing: border-box !important;\n        width: 100% !important;\n        margin: 4rem 0 !important;\n        padding: 0 5vw !important;\n    }\n\n    .home-closing-callout-text {\n        width: 100% !important;\n        font-size: 10vw !important;\n        line-height: 1.05 !important;\n        overflow-wrap: normal !important;\n        word-break: keep-all !important;\n        hyphens: none !important;\n    }\n}\n\n/* ========================================================\n   MOBILE CLOSING CALLOUT — FINAL\n   ======================================================== */\n\n/* Cargo mobile designer */\nbody.mobile .home-closing-callout {\n    margin: 4rem 0 0.5rem !important;\n}\n\n/* Published mobile site */\n@media (max-width: 767px) {\n    .home-closing-callout {\n        margin: 4rem 0 0.5rem !important;\n    }\n}\n\n.home-closing-callout {\n    margin-bottom: 1.0rem !important;\n}\n\n/* MOBILE — TIGHTEN CALLOUT TO NEWSLETTER DRAWER */\nbody.mobile .home-closing-callout {\n    margin-bottom: 0 !important;\n}\n\n@media (max-width: 767px) {\n    .home-closing-callout {\n        margin-bottom: 0 !important;\n    }\n}","display":true,"stack":false,"pin":false,"overlay":false,"password_enabled":false,"page_count":0,"page_design_options":null,"backdrops":{"activeBackdrop":"none","backdropSettings":{"legacy/pixelation":{"image":"Q3014877184710418225643445368121"},"legacy/video":{"image":"Q3014877184710418225643445368121"}}},"pin_options":{},"overlay_options":{}
15,"thumb_media_id":83119068,"thumbnail":{"id":83119068,"master_muid":14497081,"name":"00-HERO-Marin-Foyer-Overall-Horizontal.jpg","display_name":null,"hash":"Q3014877184710418225643445368121","width":1500,"height":1000,"file_size":172466,"file_type":"jpg","mime_type":"image/jpeg","is_image":true,"is_video":false,"is_url":false,"is_placeholder":false,"has_audio_track":null,"duration":null,"url":null,"url_id":null,"url_thumb":null,"url_type":null,"created_at":"2026-07-02 15:07:00.869249","updated_at":"2026-07-02 15:07:00.869249","options":null},"thumb_meta":[],"media":[{"id":83119068,"display_name":"00-HERO-Marin-Foyer-Overall-Horizontal.jpg","name":"00-HERO-Marin-Foyer-Overall-Horizontal.jpg","hash":"Q3014877184710418225643445368121","width":1500,"height":1000,"file_size":172466,"file_size_human":"168.4KB","file_type":"jpg","mime_type":"image/jpeg","is_image":true,"is_video":false,"is_url":false,"in_use":true,"created_at":"2026-07-02T15:07:00.869249Z","updated_at":"2026-07-02T15:07:00.869249Z"},{"id":84006850,"display_name":"00-HERO-SOMA-Space-Opera-Guest-Room-Hero.jpg","name":"00-HERO-SOMA-Space-Opera-Guest-Room-Hero.jpg","hash":"N3042797720998040102712046566517","width":2880,"height":1921,"file_size":3375967,"file_size_human":"3.2MB","file_type":"jpg","mime_type":"image/jpeg","is_image":true,"is_video":false,"is_url":false,"in_use":true,"created_at":"2026-07-20T03:33:15.254435Z","updated_at":"2026-07-20T03:33:15.254435Z"},{"id":84006975,"display_name":"02-SOMA-Space-Opera-Entry.jpg","name":"02-SOMA-Space-Opera-Entry.jpg","hash":"Z3042803393482523232841425796213","width":2210,"height":2880,"file_size":3822416,"file_size_human":"3.6MB","file_type":"jpg","mime_type":"image/jpeg","is_image":true,"is_video":false,"is_url":false,"in_use":true,"created_at":"2026-07-20T03:38:22.658783Z","updated_at":"2026-07-20T03:38:22.658783Z"},{"id":84241936,"display_name":"FormAndField_16x9_Horizontal_v2","name":"FormAndField_16x9_Horizontal_v2","hash":"P3049182747956739131310094497081","width":1920,"height":1013,"mime_type":"text/uri-list","is_image":false,"is_video":false,"is_url":true,"in_use":true,"url":"https://vimeo.com/1212530799","url_id":"1212530799","url_thumb":"https://i.vimeocdn.com/video/2182984398-445f4260b63dfdaf9bcb3cdf81934a985ecb7dee76bdd8e507db0c292c39f041-d_200x150?region=us","url_type":"vimeo","created_at":"2026-07-24T03:42:08.542118Z","updated_at":"2026-07-24T03:42:08.542118Z"},{"id":85453220,"display_name":"Field-Notes-Header-Image1.1.jpg","name":"Field-Notes-Header-Image1.1.jpg","hash":"S3087034817101664855175718581561","width":3072,"height":3072,"file_size":1943924,"file_size_human":"1.9MB","file_type":"jpg","mime_type":"image/jpeg","is_image":true,"is_video":false,"is_url":false,"in_use":true,"created_at":"2026-08-16T21:41:33.264583Z","updated_at":"2026-08-16T21:41:33.264583Z"}],"tags":[],"access_level":"public"},"Q2242546844":{"id":"Q2242546844","title":"04 FieldNotes - Entry Template","purl":"04-fieldnotes-entry-template","page_type":"page","content":"\u003ccolumn-set mobile-stack=\"false\">\u003ccolumn-unit slot=\"0\">\u003cdiv style=\"text-align: left\">\u003ca class=\"simple-nav\" href=\"00-home\" rel=\"history\">FormAndField\u003c/a>\u003c/div>\u003c/column-unit>\u003ccolumn-unit slot=\"1\">\u003c/column-unit>\u003ccolumn-unit slot=\"2\">\u003cdiv style=\"text-align: right\">\u003cspan class=\"simple-nav\">\u003ca href=\"#\" rel=\"close-overlay\">INDEX\u003c/a>\u003c/span>\u003c/div>\u003c/column-unit>\u003c/column-set>\u003cbr />\n\n\u003ch1>HEADLINE HERE TEEKAY TK\u003cbr />\u003c/h1>\n\u003ch2>Curabitur congue accumsan ante, consectetur eleifend purus laoreet in. Ut facilisis tincidunt neque in pharetra. In ut libero ut ex commodo venenatis ac vel ligula. Suspendisse tortor   \u003cbr />\u003c/h2>\n\u003cbr />\n\u003cbr />\n\u003cbr />\n\u003cdiv class=\"project-hero project-hero-single\">\n    \u003cmedia-item class=\"zoomable\" hash=\"T3019578855403729950563282793785\">\u003cfigcaption class=\"caption\" slot=\"caption\">\u003cdiv style=\"text-align: left\">\u003cspan class=\"caption-fieldnotes\">A caption here teekay caption goes here.\u003c/span>\u003c/div>\u003c/figcaption>\u003c/media-item>\u003c/div>\n\u003cbr />\n\u003cbr />\n\u003cbr />\n\u003ccolumn-set gutter=\"1\">\u003ccolumn-unit slot=\"0\" span=\"1\">\u003c/column-unit>\u003ccolumn-unit slot=\"1\" span=\"10\">\u003cdiv style=\"text-align: left\">\u003cspan class=\"fieldnotes-intro\">\u003cb>\u003cu>Integer et placerat est, eu imperdiet nequep proin sit amet purus metus.\u003c/u>\u003c/b> In nec efficitur justo, sed maximus est. Ut ornare arcu eros, at condimentum enim imperdiet vitae. Morbi lorem augue, commodo vel ipsum ac, sollicitudin placerat urna. Praesent sit amet mauris tortor. Duis ac risus sem. Fusce at elementum justo, ac mollis turpis. Pellentesque accumsan purus ut tristique bibendum. Nam feugiat sit amet enim in .\u003c/span>\u003c/div>\u003c/column-unit>\u003ccolumn-unit slot=\"2\" span=\"1\">\u003cbr />\n\u003cbr />\n\u003c/column-unit>\u003c/column-set>\u003cbr />\n\u003cbr />\n\u003cbr />\n\u003ccolumn-set>\u003ccolumn-unit slot=\"0\" span=\"2\">\u003cbr />\n\u003cbr />\n\u003cbr />\n\u003c/column-unit>\u003ccolumn-unit slot=\"1\" span=\"8\">\u003cdiv style=\"text-align: left\">\u003cspan class=\"fieldnotes-body\">\u003cb>CL: Lorem ipsum dolor sit amet, consectetur adipiscing elit. \u003cbr />\n\n\u003c/b>\u003cbr />TK: \nAliquam fringilla massa massa, sit amet molestie orci suscipit sed. Ut tincidunt eleifend felis sit amet suscipit. Nulla accumsan diam enim. Integer scelerisque, velit vitae accumsan tempor, quam ex vestibulum elit, eget volutpat elit ipsum id ante. Morbi condimentum quis elit in finibus. Donec accumsan feugiat varius. Etiam ac libero at lectus blandit vulputate.\u003cbr />\u003c/span>\u003c/div>\u003cdiv style=\"text-align: left\">\u003cspan class=\"fieldnotes-body\">\u003cbr />Aenean lorem urna, tempus ac rhoncus vel, lacinia eu velit. In non quam eu odio molestie consectetur ac quis nisi. Curabitur ultrices metus iaculis nisi auctor, vitae ornare lorem interdum. Nullam faucibus dui et quam iaculis mattis. Proin quis ultricies est, ut posuere tortor. Proin tempus mauris lacus, sollicitudin varius ex dapibus eu. Nam feugiat mollis convallis. Nam convallis neque ut urna pretium aliquam. Duis malesuada quam fermentum, mollis ligula et, lobortis mi. Vestibulum et enim ligula. Nam sit amet faucibus justo. Aliquam erat volutpat. Duis at pretium massa.\u003c/span>\u003c/div>\u003c/column-unit>\u003ccolumn-unit slot=\"2\" span=\"2\">\u003c/column-unit>\u003c/column-set>\n\u003cbr />\n\u003cbr />\n\u003cbr />\n\u003cgallery-freeform gutter=\"1rem\">\u003cmedia-item class=\"zoomable\" freeform-scale=\"28.90\" freeform-x=\"55.20160682154196\" freeform-y=\"0\" freeform-z=\"2\" hash=\"placeholder\" height=\"3000\" limit-by=\"width\" scale=\"28.90\" width=\"2000\">\u003cfigcaption class=\"caption\" slot=\"caption\">\u003cdiv style=\"text-align: left\">\u003cspan class=\"caption-fieldnotes\">A caption will go here teeaky. A caption goes here tk. Photo: XXristine XXn\u003c/span>\u003c/div>\u003c/figcaption>\u003c/media-item>\u003cmedia-item class=\"zoomable\" freeform-scale=\"29\" freeform-x=\"14.785804499558758\" freeform-y=\"8.581939875992802\" freeform-z=\"1\" hash=\"placeholder\" height=\"3000\" width=\"2000\">\u003cfigcaption class=\"caption\" slot=\"caption\">\u003cdiv style=\"text-align: left\">\u003cspan class=\"caption-fieldnotes\">A caption will go here teeaky. A caption goes here tk. Photo: XXristine XXn\u003c/span>\u003c/div>\u003c/figcaption>\u003c/media-item>\u003cmedia-item class=\"zoomable\" freeform-scale=\"33\" freeform-x=\"46.08306877700479\" freeform-y=\"53.56487456018705\" freeform-z=\"3\" hash=\"placeholder\" height=\"2000\" width=\"2000\">\u003cfigcaption class=\"caption\" slot=\"caption\">\u003cdiv style=\"text-align: left\">\u003cspan class=\"caption-fieldnotes\">A caption will go here teeaky. A caption goes here tk. Photo: XXristine XXn\u003c/span>\u003c/div>\u003cbr />\n\u003c/figcaption>\u003c/media-item>\u003c/gallery-freeform>\u003cbr />\n\u003cbr />\n\u003cbr />\n\u003cbr />\n\u003ccolumn-set gutter=\"1rem\" mobile-hide-empty=\"false\" mobile-stack=\"true\">\u003ccolumn-unit slot=\"0\">\u003cspan class=\"filednotes-entry-callout\">“Tk didn’t buy new things.”\u003c/span>\u003c/column-unit>\u003c/column-set>\u003cbr />\n\u003cbr />\n\u003cbr />\n\u003ccolumn-set>\u003ccolumn-unit slot=\"0\" span=\"2\">\u003c/column-unit>\u003ccolumn-unit slot=\"1\" span=\"8\">\u003cdiv style=\"text-align: left\">\u003cspan class=\"fieldnotes-body\">\u003cb>CL: Lorem ipsum dolor sit amet, consectetur adipiscing elit? \u003cbr />\n\n\u003c/b>\u003cbr />TK: \nAliquam fringilla massa massa, sit amet molestie orci suscipit sed. Ut tincidunt eleifend felis sit amet suscipit. Nulla accumsan diam enim. Integer scelerisque, velit vitae accumsan tempor, quam ex vestibulum elit, eget volutpat elit ipsum id ante. Morbi condimentum quis elit in finibus. Donec accumsan feugiat varius. Etiam ac libero at lectus blandit vulputate.\u003cbr />\u003c/span>\u003c/div>\u003cdiv style=\"text-align: left\">\u003cspan class=\"fieldnotes-body\">\u003cbr />Aenean lorem urna, tempus ac rhoncus vel, lacinia eu velit. In non quam eu odio molestie consectetur ac quis nisi. Curabitur ultrices metus iaculis nisi auctor, vitae ornare lorem interdum. Nullam faucibus dui et quam iaculis mattis. Proin quis ultricies est, ut posuere tortor. Proin tempus mauris lacus, sollicitudin varius ex dapibus eu. Nam feugiat mollis convallis. Nam convallis neque ut urna pretium aliquam. Duis malesuada quam fermentum, mollis ligula et, lobortis mi. Vestibulum et enim ligula. Nam sit amet faucibus justo. Aliquam erat volutpat. Duis at pretium massa.\u003cbr />\n\u003cbr />\n\n\u003cb>CL: Aenean lorem urna, tempus ac rhoncus vel, lacinia eu velit?\u003cbr />\n\u003cbr />\n\n\u003c/b>TK: \nProin quis ultricies est, ut posuere tortor. Proin tempus mauris lacus, sollicitudin varius ex dapibus eu. Nam feugiat mollis convallis. Nam convallis neque ut urna pretium aliquam. Duis malesuada quam fermentum, mollis ligula et, lobortis mi. Vestibulum et enim ligula. Nam sit amet faucibus justo. Aliquam erat volutpat. Duis at pretium massa.\u003c/span>\u003c/div>\u003c/column-unit>\u003ccolumn-unit slot=\"2\" span=\"2\">\u003c/column-unit>\u003c/column-set>\u003cbr />\n\u003cbr />\n\u003cbr />\n\u003cbr />\n\u003cbr />\n\u003cbr />\n\u003cgallery-freeform gutter=\"1rem\">\u003cmedia-item class=\"zoomable\" freeform-scale=\"28.90\" freeform-x=\"55.20160682154196\" freeform-y=\"0\" freeform-z=\"2\" hash=\"placeholder\" height=\"3000\" limit-by=\"width\" scale=\"28.90\" width=\"2000\">\u003cfigcaption class=\"caption\" slot=\"caption\">\u003cdiv style=\"text-align: left\">\u003cspan class=\"caption-fieldnotes\">A caption will go here teeaky. A caption goes here tk. Photo: XXristine XXn\u003c/span>\u003c/div>\u003c/figcaption>\u003c/media-item>\u003cmedia-item class=\"zoomable\" freeform-scale=\"29\" freeform-x=\"14.785804499558758\" freeform-y=\"8.581939875992802\" freeform-z=\"1\" hash=\"placeholder\" height=\"3000\" width=\"2000\">\u003cfigcaption class=\"caption\" slot=\"caption\">\u003cdiv style=\"text-align: left\">\u003cspan class=\"caption-fieldnotes\">A caption will go here teeaky. A caption goes here tk. Photo: XXristine XXn\u003c/span>\u003c/div>\u003c/figcaption>\u003c/media-item>\u003cmedia-item class=\"zoomable\" freeform-scale=\"33\" freeform-x=\"46.08306877700479\" freeform-y=\"53.56487456018705\" freeform-z=\"3\" hash=\"placeholder\" height=\"2000\" width=\"2000\">\u003cfigcaption class=\"caption\" slot=\"caption\">\u003cdiv style=\"text-align: left\">\u003cspan class=\"caption-fieldnotes\">A caption will go here teeaky. A caption goes here tk. Photo: XXristine XXn\u003c/span>\u003c/div>\u003cbr />\n\u003c/figcaption>\u003c/media-item>\u003c/gallery-freeform>\u003cbr />\n\u003cbr />\n\u003cbr />\n\u003cbr />\n\u003cbr />\n\u003cbr />\n\u003ccolumn-set>\u003ccolumn-unit slot=\"0\" span=\"2\">\u003c/column-unit>\u003ccolumn-unit slot=\"1\" span=\"8\">\u003cdiv style=\"text-align: left\">\u003cspan class=\"fieldnotes-body\">\u003cb>CL: Lorem ipsum dolor sit amet, consectetur adipiscing elit? \u003cbr />\n\n\u003c/b>\u003cbr />TK: \nAliquam fringilla massa massa, sit amet molestie orci suscipit sed. Ut tincidunt eleifend felis sit amet suscipit. Nulla accumsan diam enim. Integer scelerisque, velit vitae accumsan tempor, quam ex vestibulum elit, eget volutpat elit ipsum id ante. Morbi condimentum quis elit in finibus. Donec accumsan feugiat varius. Etiam ac libero at lectus blandit vulputate.\u003cbr />\u003c/span>\u003c/div>\u003cdiv style=\"text-align: left\">\u003cspan class=\"fieldnotes-body\">\u003cbr />Aenean lorem urna, tempus ac rhoncus vel, lacinia eu velit. In non quam eu odio molestie consectetur ac quis nisi. Curabitur ultrices metus iaculis nisi auctor, vitae ornare lorem interdum. Nullam faucibus dui et quam iaculis mattis. Proin quis ultricies est, ut posuere tortor. Proin tempus mauris lacus, sollicitudin varius ex dapibus eu. Nam feugiat mollis convallis. Nam convallis neque ut urna pretium aliquam. Duis malesuada quam fermentum, mollis ligula et, lobortis mi. Vestibulum et enim ligula. Nam sit amet faucibus justo. Aliquam erat volutpat. Duis at pretium massa.\u003cbr />\n\u003cbr />\n\n\u003cb>CL: Aenean lorem urna, tempus ac rhoncus vel, lacinia eu velit?\u003cbr />\n\u003cbr />\n\n\u003c/b>TK: \nProin quis ultricies est, ut posuere tortor. Proin tempus mauris lacus, sollicitudin varius ex dapibus eu. Nam feugiat mollis convallis. Nam convallis neque ut urna pretium aliquam. Duis malesuada quam fermentum, mollis ligula et, lobortis mi. Vestibulum et enim ligula. Nam sit amet faucibus justo. Aliquam erat volutpat. Duis at pretium massa.\u003c/span>\u003c/div>\u003c/column-unit>\u003ccolumn-unit slot=\"2\" span=\"2\">\u003c/column-unit>\u003c/column-set>\u003cbr />\n\u003cbr />\n\u003cbr />\n\u003ccolumn-set gutter=\"1rem\" mobile-hide-empty=\"false\" mobile-stack=\"true\">\u003ccolumn-unit slot=\"0\">\u003cspan class=\"filednotes-entry-callout\">“Tkberglass—it tkves a tkrm tkow.”\u003c/span>\u003c/column-unit>\u003c/column-set>\u003cbr />\n\u003cbr />\n\u003cbr />\n\u003cgallery-freeform gutter=\"1rem\">\u003cmedia-item class=\"zoomable\" freeform-scale=\"43.50\" freeform-x=\"26.30174091435252\" freeform-y=\"0\" freeform-z=\"1\" hash=\"placeholder\" height=\"3000\" limit-by=\"width\" scale=\"43.50\" width=\"2000\">\u003c/media-item>\u003c/gallery-freeform>\u003cbr />\n\u003cbr />\n\u003cbr />\n\u003cbr />\n\u003ccolumn-set gutter=\"1rem\" mobile-hide-empty=\"false\" mobile-stack=\"true\">\u003ccolumn-unit slot=\"0\">\u003cspan class=\"filednotes-entry-callout\">“Tkberglass—it tkves a tkrm tkow.” —\u003cspan class=\"small-caps\">teekay name\u003c/span>\u003c/span>\u003c/column-unit>\u003c/column-set>\u003cbr />\n\u003cbr />\n\u003ccolumn-set mobile-stack=\"false\">\u003ccolumn-unit slot=\"0\">\u003cdiv style=\"text-align: left\">\u003ca class=\"simple-nav\" href=\"00-home\" rel=\"history\">FormAndField\u003c/a>\u003c/div>\u003c/column-unit>\u003ccolumn-unit slot=\"1\">\u003c/column-unit>\u003ccolumn-unit slot=\"2\">\u003cdiv style=\"text-align: right\">\u003ca class=\"simple-nav\" href=\"#\" rel=\"close-overlay\">INDEX\u003c/a>\u003c/div>\u003c/column-unit>\u003c/column-set>
15","local_css":"[id=\"Q2242546844\"] .page-content {\n    align-items: flex-start;\n    padding-top: 1.5rem;\n    padding-bottom: 1.5rem;\n}\n\n[id=\"Q2242546844\"] .page-layout {\n}\n\n[id=\"Q2242546844\"].page {\n    min-height: var(--viewport-height);\n    background-color: var(--ff-paper) !important;\n    position: relative;\n    isolation: isolate;\n}\n\n/* FREEFORM GALLERY */\n[id=\"Q2242546844\"] gallery-freeform {\n    position: relative;\n    display: block;\n}\n\n/* INTERIOR PAGE GRAIN */\n:root {\n    --ff-grain-image: url(\"https://freight.cargo.site/t/original/i/D3015126079544655064318932235577/GRAIN-11.png\");\n    --ff-paper: #FAF8F8;\n}\n\n[id=\"Q2242546844\"] .page-content {\n    position: relative;\n    isolation: isolate;\n}\n\n[id=\"Q2242546844\"] .page-content::before {\n    content: \"\" !important;\n    position: fixed !important;\n    inset: 0 !important;\n    z-index: -1 !important;\n    pointer-events: none !important;\n    opacity: 0.18 !important;\n    background-image: var(--ff-grain-image) !important;\n    background-repeat: repeat !important;\n    background-size: 140px 140px !important;\n    mix-blend-mode: multiply !important;\n    animation: interiorNoiseJitter 0.2s steps(4) infinite !important;\n}\n\n@keyframes interiorNoiseJitter {\n    0%, 100% { background-position: 0 0; }\n    10% { background-position: -2% -3%; }\n    20% { background-position: -6% 2%; }\n    30% { background-position: 3% -8%; }\n    40% { background-position: 8% 8%; }\n    50% { background-position: -8% 3%; }\n    60% { background-position: 6% 2%; }\n    70% { background-position: 0 5%; }\n    80% { background-position: 8% 12%; }\n    90% { background-position: -4% 4%; }\n}\n\n/* FIELDNOTES ENTRY BLUE TYPE */\n:root {\n    --ff-blue: #3D5AFE;\n}\n\n[id=\"Q2242546844\"],\n[id=\"Q2242546844\"] *,\n[id=\"Q2242546844\"] a,\n[id=\"Q2242546844\"] bodycopy,\n[id=\"Q2242546844\"] h1,\n[id=\"Q2242546844\"] h2,\n[id=\"Q2242546844\"] .caption {\n    color: var(--ff-blue) !important;\n}\n\n[id=\"Q2242546844\"] .caption,\n[id=\"Q2242546844\"] media-item::part(caption),\n[id=\"Q2242546844\"] media-item::part(caption-background) {\n    color: var(--ff-blue) !important;\n}\n\n[id=\"Q2242546844\"] h2 {\n    text-transform: uppercase !important;\n}\n\n/* PROJECT DETAIL HERO SYSTEM */\n.project-hero {\n    width: 100% !important;\n    aspect-ratio: 2 / 1 !important;\n    overflow: hidden !important;\n    margin: 0 !important;\n}\n\n.project-hero media-item {\n    display: block !important;\n    width: 100% !important;\n    height: 100% !important;\n}\n\n.project-hero media-item::part(figure),\n.project-hero media-item::part(frame),\n.project-hero media-item::part(sizing-frame),\n.project-hero media-item::part(media),\n.project-hero media-item::part(image) {\n    width: 100% !important;\n    height: 100% !important;\n}\n\n.project-hero media-item::part(figure),\n.project-hero media-item::part(frame),\n.project-hero media-item::part(sizing-frame) {\n    display: flex !important;\n    align-items: center !important;\n    justify-content: center !important;\n    overflow: hidden !important;\n}\n\n.project-hero media-item::part(media),\n.project-hero media-item::part(image),\n.project-hero media-item img,\n.project-hero media-item video {\n    width: 100% !important;\n    height: 100% !important;\n    max-width: none !important;\n    max-height: none !important;\n    object-fit: cover !important;\n    object-position: 50% 50% !important;\n}\n\n.project-hero-single {\n    display: block !important;\n}\n\n.project-hero-diptych {\n    display: grid !important;\n    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n    gap: 2rem !important;\n}\n\n.mobile .project-hero {\n    aspect-ratio: 4 / 3 !important;\n}\n\n.mobile .project-hero-diptych {\n    grid-template-columns: 1fr !important;\n    aspect-ratio: auto !important;\n}\n\n.mobile .project-hero-diptych media-item {\n    aspect-ratio: 4 / 3 !important;\n}\n}\n\n.page bodycopy a:hover,\n.page bodycopy a:focus-visible,\n.page bodycopy a:active,\nbodycopy a:hover,\nbodycopy a:focus-visible,\nbodycopy a:active {\n\ttext-decoration-color: rgba(255, 255, 0, 0.65) !important;\n}\n\nbodycopy a,\nbodycopy a:link,\nbodycopy a:visited,\nbodycopy .linked,\nbodycopy [href] {\n\tcolor: inherit !important;\n\ttext-decoration: none !important;\n\tbackground: rgba(255, 255, 0, 0.30) !important;\n\tpadding: 0 0.10em !important;\n\tbox-decoration-break: clone !important;\n\t-webkit-box-decoration-break: clone !important;\n}\n\nbodycopy a:hover,\nbodycopy a:focus,\nbodycopy a:active,\nbodycopy .linked:hover,\nbodycopy [href]:hover {\n\tbackground: rgba(255, 255, 0, 0.45) !important;\n}\n\nbodycopy a.simple-nav,\nbodycopy a.simple-nav:link,\nbodycopy a.simple-nav:visited,\nbodycopy a.simple-nav:hover,\nbodycopy a.simple-nav:active,\nbodycopy .simple-nav a,\nbodycopy .simple-nav a:link,\nbodycopy .simple-nav a:visited,\nbodycopy .simple-nav a:hover,\nbodycopy .simple-nav a:active {\n\tbackground: transparent !important;\n\tbackground-image: none !important;\n\tbox-shadow: none !important;\n\ttext-decoration: none !important;\n\tpadding: 0 !important;\n}","display":false,"stack":false,"pin":false,"overlay":true,"password_enabled":false,"page_count":0,"page_design_options":null,"backdrops":{"activeBackdrop":"none"},"pin_options":{},"overlay_options":{"closeOnClickout":true,"closeOnNavigate":true,"animateO
15nOpen":{"fade":false,"speed":0.8,"slideAmount":100,"slideDirection":"bottom","wipeShape":"default","easing":"smooth","scaleAmount":0,"rotateAmount":0},"animateOnClose":{"fade":true,"speed":0.8,"slideAmount":3,"slideDirection":"bottom","wipeShape":"default","easing":"smooth","scaleAmount":0,"rotateAmount":0},"closeOthersOnOpen":false,"closeSelf":false,"closeDelay":0,"transitionIntensity":2,"transitionPreset":"slide-up"},"thumb_media_id":83253657,"thumbnail":{"id":83253657,"master_muid":14497081,"name":"placeholder-3x2-landscape.svg","display_name":null,"hash":"T3019578855403729950563282793785","width":2000,"height":1334,"file_size":524,"file_type":"svg","mime_type":"image/svg+xml","is_image":true,"is_video":false,"is_url":false,"is_placeholder":false,"has_audio_track":null,"duration":null,"url":null,"url_id":null,"url_thumb":null,"url_type":null,"created_at":"2026-07-05 13:54:58.193489","updated_at":"2026-07-05 13:54:58.193489","options":null},"thumb_meta":[],"media":[{"id":83253657,"display_name":"placeholder-3x2-landscape.svg","name":"placeholder-3x2-landscape.svg","hash":"T3019578855403729950563282793785","width":2000,"height":1334,"file_size":524,"file_size_human":"524.0B","file_type":"svg","mime_type":"image/svg+xml","is_image":true,"is_video":false,"is_url":false,"in_use":true,"created_at":"2026-07-05T13:54:58.193489Z","updated_at":"2026-07-05T13:54:58.193489Z"}],"tags":[],"access_level":"public"},"W1115722228":{"id":"W1115722228","title":"TEMPLATE - PROJECT PAGE","purl":"template-project-page","page_type":"page","content":"\u003ccolumn-set mobile-stack=\"false\">\u003ccolumn-unit slot=\"0\">\n        \u003cdiv style=\"text-align: left\">\n            \u003ca class=\"simple-nav\" href=\"#\" rel=\"close-overlay\">FormAndField\u003c/a>\n        \u003c/div>\n    \u003c/column-unit>\u003ccolumn-unit slot=\"1\">\u003c/column-unit>\u003ccolumn-unit slot=\"2\">\n        \u003cdiv style=\"text-align: right\">\n            \u003ca class=\"simple-nav\" href=\"#\" rel=\"close-overlay\">INDEX\u003c/a>\n        \u003c/div>\n    \u003c/column-unit>\u003c/column-set>\n\n\u003cbr />\n\n\u003ch1>PROJECT NAME\u003c/h1>\n\u003cbr />\n\u003ch2>LOCATION\u003c/h2>\n\n\u003cbr />\n\u003cbr />\n\n\u003cdiv class=\"project-hero project-hero-single\">\n    \u003cmedia-item class=\"zoomable\" hash=\"placeholder\" height=\"2000\" limit-by=\"width\" scale=\"100\" width=\"3000\">\u003c/media-item>\n\u003c/div>\n\n\u003cbr />\n\n\u003cdiv class=\"project-info-drawer-anchor\">\n    \u003cdetails class=\"project-info-drawer\" open=\"\">\n        \u003csummary>INFO\u003c/summary>\n\n        \u003cdiv class=\"project-info-drawer-panel\">\n\n            \u003cdiv class=\"project-info-meta\" style=\"text-align: left\">\u003cdiv class=\"project-info-section\">\u003cspan class=\"project-info-body\">PROJECT: PROJECT NAME\u003cbr />\n→ Scope — Add scope\u003cbr />\n→ Collaborators — Add collaborators\u003cbr />\n→ Materials — Add materials\u003cbr />\n→ Photography — Add photographer\u003cbr />\n→ Landscape — Add landscape designer\n                \u003c/span>\u003c/div>\n\n                \u003cdiv class=\"project-info-section project-info-press\">\u003cspan class=\"project-info-body\">\nPRESS\u003cbr />\n↗ \u003ca href=\"#\" target=\"_blank\">Publication\u003c/a>\n                \u003c/span>\u003c/div>\n\n            \u003c/div>\n\n            \u003cdiv class=\"project-info-description\" style=\"text-align: left\">\n\n                \u003cdiv class=\"project-info-section\">\u003cspan class=\"project-info-body\">\nDESCRIPTION\u003cbr />\nReplace this placeholder with the project description.          \n\n                \u003c/span>\u003cgallery-slideshow autoplay=\"false\" class=\"project-info-slideshow\" disable-zoom=\"true\" gutter=\"1rem\" mobile-navigation=\"buttons\" navigation=\"cursor-zones\" transition-speed=\"0.5\">\u003cmedia-item class=\"\" hash=\"placeholder\" height=\"2000\" limit-by=\"width\" rotation=\"0\" scale=\"100\" width=\"3000\">\u003cfigcaption class=\"caption\" slot=\"caption\">\u003cdiv style=\"text-align: left\">\u003cspan class=\"caption-fieldnotes\">A caption describing the images goes here teekay. A description goes here. \u003c/span>\u003c/div>\u003c/figcaption>\u003c/media-item>\u003cmedia-item class=\"\" hash=\"placeholder\" height=\"2000\" limit-by=\"width\" rotation=\"0\" scale=\"100\" width=\"3000\">\u003cfigcaption class=\"caption\" slot=\"caption\">\u003cdiv style=\"text-align: left\">\u003cspan class=\"caption-fieldnotes\">A caption describing the images goes here teekay. A description goes here. \u003c/span>\u003c/div>\u003c/figcaption>\u003c/media-item>\u003cmedia-item class=\"\" hash=\"placeholder\" height=\"2000\" limit-by=\"width\" rotation=\"0\" scale=\"100\" width=\"3000\">\u003cfigcaption class=\"caption\" slot=\"caption\">\u003cdiv style=\"text-align: left\">\u003cspan class=\"caption-fieldnotes\">A caption describing the images goes here teekay. A description goes here. \u003c/span>\u003c/div>\u003c/figcaption>\u003c/media-item>\u003c/gallery-slideshow>\n\n            \u003c/div>\u003c/div>\n\n        \u003c/div>\n    \u003c/details>\n\u003c/div>\n\n\u003c!--   DESKTOP COMPOSITION: SECTION 1   -->\n\u003cgallery-freeform class=\"desktop-project-gallery project-gallery-section project-gallery-section-1\" gutter=\"1rem\">\u003cmedia-item class=\"zoomable\" freeform-scale=\"32\" freeform-x=\"12\" freeform-y=\"0\" freeform-z=\"1\" hash=\"placeholder\" height=\"2000\" scale=\"32\" width=\"3000\">\n        \u003cfigcaption class=\"caption\" slot=\"caption\">FIG: 01\u003c/figcaption>\n    \u003c/media-item>\u003cmedia-item class=\"zoomable\" freeform-scale=\"32\" freeform-x=\"56\" freeform-y=\"28\" freeform-z=\"2\" hash=\"placeholder\" height=\"2000\" scale=\"32\" width=\"3000\">\n        \u003cfigcaption class=\"caption\" slot=\"caption\">FIG: 02\u003c/figcaption>\n    \u003c/media-item>\u003c/gallery-freeform>\n\n\u003c!--   LIVE-TEXT / IMAGE BRIDGE 1   -->\n\u003ccolumn-set class=\"editorial-bridge editorial-bridge-1\" gutter=\"1rem\" mobile-stack=\"true\">\u003ccolumn-unit slot=\"0\" span=\"2\">\u003c/column-unit>\u003ccolumn-unit slot=\"1\" span=\"4\">\n        \u003cgallery-freeform class=\"editorial-bridge-gallery editorial-bridge-gallery-1\" gutter=\"1rem\">\u003cmedia-item class=\"zoomable\" freeform-scale=\"100\" freeform-x=\"0\" freeform-y=\"0\" freeform-z=\"1\" hash=\"placeholder\" height=\"2000\" scale=\"100\" width=\"3000\">\u003c/media-item>\u003c/gallery-freeform>\n    \u003c/column-unit>\u003ccolumn-unit slot=\"2\" span=\"1\">\u003c/column-unit>\u003ccolumn-unit slot=\"3\" span=\"4\">\n        \u003cdiv class=\"editorial-callout editorial-callout-1\">\nFIG: 03\u003cbr />\nReplace this placeholder with live Cargo type.\n        \u003c/div>\n    \u003c/column-unit>\u003ccolumn-unit slot=\"4\" span=\"1\">\u003c/column-unit>\u003c/column-set>\n\n\u003c!--   DESKTOP COMPOSITION: SECTION 2   -->\n\u003cgallery-freeform class=\"desktop-project-gallery project-gallery-section project-gallery-section-2\" gutter=\"1rem\">\u003cmedia-item class=\"zoomable\" freeform-scale=\"58\" freeform-x=\"20\" freeform-y=\"0\" freeform-z=\"1\" hash=\"placeholder\" height=\"2000\" scale=\"58\" width=\"3000\">\n        \u003cfigcaption class=\"caption\" slot=\"caption\">FIG: 04\u003c/figcaption>\n    \u003c/media-item>\u003c/gallery-freeform>\n\n\u003c!--   LIVE-TEXT / IMAGE BRIDGE 2   -->\n\u003ccolumn-set class=\"editorial-bridge editorial-bridge-2\" gutter=\"1rem\" mobile-stack=\"true\">\u003ccolumn-unit slot=\"0\" span=\"2\">\u003c/column-unit>\u003ccolumn-unit slot=\"1\" span=\"4\">\n        \u003cdiv class=\"editorial-callout editorial-callout-2\">\nFIG: 05\u003cbr />\nReplace this placeholder with live Cargo type.\n        \u003c/div>\n    \u003c/column-unit>\u003ccolumn-unit slot=\"2\" span=\"1\">\u003c/column-unit>\u003ccolumn-unit slot=\"3\" span=\"4\">\n        \u003cgallery-freeform class=\"editorial-bridge-gallery editorial-bridge-gallery-2\" gutter=\"1rem\">\u003cmedia-item class=\"zoomable\" freeform-scale=\"100\" freeform-x=\"0\" freeform-y=\"0\" freeform-z=\"1\" hash=\"placeholder\" height=\"2000\" scale=\"100\" width=\"3000\">\u003c/media-item>\u003c/gallery-freeform>\n    \u003c/column-unit>\u003ccolumn-unit slot=\"4\" span=\"1\">\u003c/column-unit>\u003c/column-set>\n\n\u003c!--   DESKTOP COMPOSITION: SECTION 3   -->\n\u003cgallery-freeform class=\"desktop-project-gallery project-gallery-section project-gallery-section-3\" gutter=\"1rem\">\u003cmedia-item class=\"zoomable\" freeform-scale=\"36\" freeform-x=\"12\" freeform-y=\"0\" freeform-z=\"1\" hash=\"placeholder\" height=\"2000\" scale=\"36\" width=\"3000\">\n        \u003cfigcaption class=\"caption\" slot=\"caption\">FIG: 06\u003c/figcaption>\n    \u003c/media-item>\u003cmedia-item class=\"zoomable\" freeform-scale=\"28\" freeform-x=\"58\" freeform-y=\"44\" freeform-z=\"2\" hash=\"placeholder\" height=\"2000\" scale=\"28\" width=\"3000\">\n        \u003cfigcaption class=\"caption\" slot=\"caption\">FIG: 07\u003c/figcaption>\n    \u003c/media-item>\u003c/gallery-freeform>\n\n\u003c!--  \n    MOBILE COMPOSITION\n    Populate this only after the desktop sequence is approved.\n    Use the same final media order, then art-direct independently.\n  -->\n\u003cgallery-freeform class=\"mobile-project-gallery\" gutter=\"1rem\" mobile-columns=\"1\" mobile-grid=\"false\" mobile-gutter=\"11rem\">\u003cmedia-item class=\"zoomable\" freeform-scale=\"80\" freeform-x=\"10\" freeform-y=\"0\" freeform-z=\"1\" hash=\"placeholder\" height=\"2000\" scale=\"80\" width=\"3000\">\n        \u003cfigcaption class=\"caption\" slot=\"caption\">FIG: 01\u003c/figcaption>\n    \u003c/media-item>\u003c/gallery-freeform>\n\n\u003cbr />\n\u003cbr />\n\u003cbr />\n\u003cbr />\n\n\u003ccolumn-set class=\"project-footer-nav\" mobile-stack=\"false\">\u003ccolumn-unit slot=\"0\">\n        \u003cdiv style=\"text-align: left\">\n            \u003ca class=\"simple-nav\" href=\"#\" rel=\"close-overlay\">FormAndField\u003c/a>\n        \u003c/div>\n    \u003c/column-unit>\u003ccolumn-unit slot=\"1\">\u003c/column-unit>\u003ccolumn-unit slot=\"2\">\n        \u003cdiv style=\"text-align: right\">\n            \u003ca class=\"simple-nav\" href=\"#\" rel=\"close-overlay\">INDEX\u003c/a>\n        \u003c/div>\n    \u003c/column-unit>\u003c/column-set>","local_css":"/* ========================================================\n   FORM + FIELD — CANONICAL PROJECT PAGE TEMPLATE\n\n   ID-free local CSS:\n   this file can travel with duplicated Cargo template pages.\
15n   ======================================================== */\n\n.page-content {\n    align-items: flex-start;\n    padding-top: 1.5rem;\n    padding-bottom: 1.5rem;\n    position: relative;\n    isolation: isolate;\n}\n\n.page {\n    min-height: var(--viewport-height);\n    position: relative;\n    isolation: isolate;\n    background-color: var(--ff-paper) !important;\n}\n\n/* INTERIOR PAGE GRAIN */\n:root {\n    --ff-grain-image: url(\"https://freight.cargo.site/t/original/i/D3015126079544655064318932235577/GRAIN-11.png\");\n    --ff-paper: #FAF8F8;\n}\n\n.page-content::before {\n    content: \"\" !important;\n    position: fixed !important;\n    inset: 0 !important;\n    z-index: -1 !important;\n    pointer-events: none !important;\n    opacity: 0.18 !important;\n    background-image: var(--ff-grain-image) !important;\n    background-repeat: repeat !important;\n    background-size: 140px 140px !important;\n    mix-blend-mode: multiply !important;\n    animation: interiorNoiseJitter 0.2s steps(4) infinite !important;\n}\n\n@keyframes interiorNoiseJitter {\n    0%, 100% { background-position: 0 0; }\n    10% { background-position: -2% -3%; }\n    20% { background-position: -6% 2%; }\n    30% { background-position: 3% -8%; }\n    40% { background-position: 8% 8%; }\n    50% { background-position: -8% 3%; }\n    60% { background-position: 6% 2%; }\n    70% { background-position: 0 5%; }\n    80% { background-position: 8% 12%; }\n    90% { background-position: -4% 4%; }\n}\n\n/* PROJECT HERO */\n.project-hero {\n    width: 100% !important;\n    aspect-ratio: 2 / 1 !important;\n    overflow: hidden !important;\n    margin: 0 !important;\n}\n\n.project-hero media-item {\n    display: block !important;\n    width: 100% !important;\n    height: 100% !important;\n}\n\n.project-hero media-item::part(figure),\n.project-hero media-item::part(frame),\n.project-hero media-item::part(sizing-frame),\n.project-hero media-item::part(media),\n.project-hero media-item::part(image) {\n    width: 100% !important;\n    height: 100% !important;\n}\n\n.project-hero media-item::part(figure),\n.project-hero media-item::part(frame),\n.project-hero media-item::part(sizing-frame) {\n    display: flex !important;\n    align-items: center !important;\n    justify-content: center !important;\n    overflow: hidden !important;\n}\n\n.project-hero media-item::part(media),\n.project-hero media-item::part(image),\n.project-hero media-item img,\n.project-hero media-item video {\n    width: 100% !important;\n    height: 100% !important;\n    max-width: none !important;\n    max-height: none !important;\n    object-fit: cover !important;\n    object-position: 50% 50% !important;\n}\n\n.project-hero-single {\n    display: block !important;\n}\n\n.project-hero-diptych {\n    display: grid !important;\n    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n    gap: 2rem !important;\n}\n\nbody.mobile .project-hero {\n    aspect-ratio: 4 / 3 !important;\n}\n\nbody.mobile .project-hero-diptych {\n    grid-template-columns: 1fr !important;\n    aspect-ratio: auto !important;\n}\n\nbody.mobile .project-hero-diptych media-item {\n    aspect-ratio: 4 / 3 !important;\n}\n\n/* CANONICAL DRAWER */\n.project-info-drawer-anchor {\n    position: relative !important;\n    top: auto !important;\n    width: 100% !important;\n    height: 0 !important;\n    margin-bottom: clamp(4rem, 6vw, 8rem) !important;\n    z-index: 9999 !important;\n    pointer-events: none !important;\n}\n\nbody.mobile .project-info-drawer-anchor {\n    margin-bottom: 3rem !important;\n}\n\n@media (max-width: 767px) {\n    .project-info-drawer-anchor {\n        margin-bottom: 3rem !important;\n    }\n}\n\n.project-info-drawer {\n    --drawer-tab: 30px;\n    --drawer-width: clamp(420px, 33.333vw, 640px);\n    position: absolute !important;\n    top: 0 !important;\n    right: calc(50% - 50vw) !important;\n    bottom: auto !important;\n    width: var(--drawer-width) !important;\n    height: auto !important;\n    min-height: 100vh !important;\n    max-height: none !important;\n    overflow: visible !important;\n    box-sizing: border-box !important;\n    transform: translateX(calc(100% - var(--drawer-tab))) !important;\n    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1) !important;\n    background: #d8ff21 !important;\n    color: #000000 !important;\n    box-shadow: -1px 0 0 rgba(0, 0, 0, 0.18) !important;\n    z-index: 9999 !important;\n    pointer-events: auto !important;\n}\n\n.project-info-drawer:not([open]) {\n    width: var(--drawer-width) !important;\n    height: auto !important;\n    min-height: 100vh !important;\n    overflow: visible !important;\n    transform: translateX(calc(100% - var(--drawer-tab))) !important;\n}\n\n.project-info-drawer[open] {\n    height: auto !important;\n    min-height: 100vh !important;\n    overflow: visible !important;\n    transform: translateX(0) !important;\n}\n\n.project-info-drawer summary {\n    position: absolute !important;\n    inset: 0 auto auto 0 !important;\n    display: block !important;\n    width: var(--drawer-tab) !important;\n    height: 100vh !important;\n    min-height: 100vh !important;\n    margin: 0 !important;\n    padding: 16px 6px !important;\n    box-sizing: border-box !important;\n    cursor: pointer !important;\n    list-style: none !important;\n    background: #d8ff21 !important;\n    writing-mode: vertical-rl !important;\n    text-orientation: mixed !important;\n    text-transform: uppercase !important;\n    font-family: \"Favorit Variable\", \"Favorit\", Arial, sans-serif !important;\n    font-size: 14px !important;\n    line-height: 1 !important;\n    font-weight: 350 !important;\n    z-index: 2 !important;\n}\n\n.project-info-drawer summary::-webkit-details-marker {\n    display: none !important;\n}\n\n.project-info-drawer-panel {\n    width: calc(100% - var(--drawer-tab)) !important;\n    height: auto !important;\n    min-height: 100vh !important;\n    max-height: none !important;\n    margin-left: var(--drawer-tab) !important;\n    padding: clamp(24px, 2vw, 32px) !important;\n    box-sizing: border-box !important;\n    overflow: visible !important;\n    font-family: \"Favorit Variable\", \"Favorit\", Arial, sans-serif !important;\n    font-size: 16px !important;\n    line-height: 1.25 !important;\n    font-weight: 350 !important;\n}\n\n.project-info-section {\n    padding-top: 1em !important;\n    border-top: 1px solid rgba(0, 0, 0, 0.55) !important;\n}\n\n.project-info-press,\n.project-info-description {\n    margin-top: 1.25em !important;\n}\n\n.project-info-drawer a,\n.project-info-drawer a:link,\n.project-info-drawer a:visited {\n    color: #000000 !important;\n    text-decoration: none !important;\n}\n\n.project-info-slideshow {\n    display: block !important;\n    width: 100% !important;\n    max-width: 100% !important;\n    min-width: 0 !important;\n    margin-top: 1.25em !important;\n    padding-top: 1em !important;\n    border-top: 1px solid rgba(0, 0, 0, 0.55) !important;\n    overflow: hidden !important;\n}\n\nbody.mobile .project-info-drawer {\n    --drawer-width: calc(100vw - 1rem);\n    right: calc(50% - 50vw) !important;\n}\n\nbody.mobile .project-info-drawer-panel {\n    padding: 24px 18px 32px !important;\n    font-size: 1.2rem !important;\n    line-height: 1.3 !important;\n}\n\n/* DESKTOP / MOBILE COMPOSITION SWITCH */\n\n/* Desktop default */\n.mobile-project-gallery {\n    display: none !important;\n}\n\n/* Cargo mobile mode */\nbody.mobile .desktop-project-gallery,\nbody.mobile .project-gallery-section,\nbody.mobile .editorial-bridge {\n    display: none !important;\n}\n\nbody.mobile .mobile-project-gallery {\n    display: block !important;\n}\n\n/* Browser-width fallback */\n@media (max-width: 767px) {\n    .desktop-project-gallery,\n    .project-gallery-section,\n    .editorial-bridge {\n        display: none !important;\n    }\n\n    .mobile-project-gallery {\n        display: block !important;\n    }\n}\n\n/* FREEFORM GALLERY + EDITORIAL BRIDGES */\n.project-gallery-section,\n.editorial-bridge {\n    width: 100% !important;\n    margin: 0 !important;\n}
15\n\n.editorial-bridge {\n    align-items: center !important;\n    margin-top: 6rem !important;\n    margin-bottom: 8rem !important;\n}\n\n.editorial-bridge column-unit {\n    min-width: 0 !important;\n}\n\n.editorial-callout {\n    width: 100% !important;\n    box-sizing: border-box !important;\n    text-align: left !important;\n}\n\n.editorial-bridge-gallery {\n    width: 100% !important;\n    min-height: 28vw !important;\n    margin: 0 !important;\n}\n\n.project-footer-nav {\n    position: relative !important;\n    z-index: 10000 !important;\n    background: var(--ff-paper) !important;\n}\n\n/* MOBILE-ONLY LIVE IMAGE / TYPE BREAKERS */\n\n.mobile-editorial-bridge {\n    display: none !important;\n}\n\nbody.mobile .mobile-editorial-bridge {\n    display: grid !important;\n    grid-template-columns: 1fr !important;\n    gap: 1.5rem !important;\n    width: 100% !important;\n    margin: 3rem 0 4rem !important;\n}\n\nbody.mobile .mobile-editorial-bridge column-unit,\nbody.mobile .mobile-editorial-bridge-gallery,\nbody.mobile .mobile-editorial-callout {\n    width: 100% !important;\n    min-width: 0 !important;\n    box-sizing: border-box !important;\n}\n\nbody.mobile .mobile-editorial-bridge-gallery {\n    min-height: 70vw !important;\n}\n\n@media (max-width: 767px) {\n    .mobile-editorial-bridge {\n        display: grid !important;\n        grid-template-columns: 1fr !important;\n        gap: 1.5rem !important;\n        width: 100% !important;\n        margin: 3rem 0 4rem !important;\n    }\n\n    .mobile-editorial-bridge column-unit,\n    .mobile-editorial-bridge-gallery,\n    .mobile-editorial-callout {\n        width: 100% !important;\n        min-width: 0 !important;\n        box-sizing: border-box !important;\n    }\n\n    .mobile-editorial-bridge-gallery {\n        min-height: 70vw !important;\n    }\n}\n\n/* ========================================================\n   PROJECT DRAWER — CSS-ONLY THIN CLOSE ICON\n   ======================================================== */\n\n/* Hidden while closed */\n.project-info-drawer > summary::after {\n    content: \"\" !important;\n    display: none !important;\n}\n\n/* Visible only while open */\n.project-info-drawer[open] > summary::after {\n    content: \"\" !important;\n    display: block !important;\n\n    position: absolute !important;\n    top: 8px !important;\n    left: 8px !important;\n    right: auto !important;\n    z-index: 20 !important;\n\n    box-sizing: border-box !important;\n    width: 34px !important;\n    height: 34px !important;\n    margin: 0 !important;\n    padding: 0 !important;\n\n    background:\n        linear-gradient(\n            45deg,\n            transparent calc(50% - 0.75px),\n            #000 calc(50% - 0.5px),\n            #000 calc(50% + 0.5px),\n            transparent calc(50% + 0.75px)\n        ),\n        linear-gradient(\n            -45deg,\n            transparent calc(50% - 0.75px),\n            #000 calc(50% - 0.5px),\n            #000 calc(50% + 0.5px),\n            transparent calc(50% + 0.75px)\n        ) !important;\n\n    background-size: 12px 12px !important;\n    background-position: center !important;\n    background-repeat: no-repeat !important;\n\n    cursor: pointer !important;\n}\n\n/* Cargo mobile editor */\nbody.mobile .project-info-drawer[open] > summary::after {\n    top: 3px !important;\n    left: 3px !important;\n    width: 40px !important;\n    height: 40px !important;\n    background-size: 10px 10px !important;\n}\n\n/* Published phones */\n@media (max-width: 767px) {\n    .project-info-drawer[open] > summary::after {\n        top: 14px !important;\n        left: 14px !important;\n        width: 40px !important;\n        height: 40px !important;\n        background-size: 24px 24px !important;\n    }\n}","display":false,"stack":false,"pin":false,"overlay":true,"password_enabled":false,"page_count":0,"page_design_options":null,"backdrops":{"activeBackdrop":"none"},"pin_options":{},"overlay_options":{"closeOnClickout":true,"closeOnNavigate":true,"animateOnOpen":{"fade":false,"speed":0.8,"slideAmount":100,"slideDirection":"bottom","wipeShape":"default","easing":"smooth","scaleAmount":0,"rotateAmou
15nt":0},"animateOnClose":{"fade":true,"speed":0.8,"slideAmount":3,"slideDirection":"bottom","wipeShape":"default","easing":"smooth","scaleAmount":0,"rotateAmount":0},"closeOthersOnOpen":false,"closeSelf":false,"closeDelay":0,"transitionIntensity":2,"transitionPreset":"slide-up"},"thumb_media_id":83130967,"thumbnail":{"id":83130967,"master_muid":14497081,"name":"15-Donner-Lake-Cabin-Bunk-Room.jpg","display_name":null,"hash":"P3015095342454428060967747007801","width":2246,"height":1500,"file_size":421962,"file_type":"jpg","mime_type":"image/jpeg","is_image":true,"is_video":false,"is_url":false,"is_placeholder":false,"has_audio_track":null,"duration":null,"url":null,"url_id":null,"url_thumb":null,"url_type":null,"created_at":"2026-07-02 18:24:06.416504","updated_at":"2026-07-02 18:24:06.416504","options":null},"thumb_meta":[],"media":[{"id":83130967,"display_name":"15-Donner-Lake-Cabin-Bunk-Room.jpg","name":"15-Donner-Lake-Cabin-Bunk-Room.jpg","hash":"P3015095342454428060967747007801","width":2246,"height":1500,"file_size":421962,"file_size_human":"412.1KB","file_type":"jpg","mime_type":"image/jpeg","is_image":true,"is_video":false,"is_url":false,"in_use":true,"created_at":"2026-07-02T18:24:06.416504Z","updated_at":"2026-07-02T18:24:06.416504Z"}],"tags":[],"access_level":"public"},"L3418916892":{"id":"L3418916892","title":"Header","purl":"header","page_type":"page","content":"\u003cdiv class=\"fixed-nav-bar\">\n    \u003cdiv class=\"nav-links\">\n        \u003cdiv class=\"nav-row nav-row-primary\">\n            \u003ca class=\"nav-item\" href=\"home\" rel=\"history\">FormAndField\u003c/a>\n            \u003ca class=\"nav-item\" href=\"projects\" rel=\"history\">Projects\u003c/a>\n        \u003c/div>\n\n        \u003cdiv class=\"nav-row nav-row-secondary\">\n            \u003ca class=\"nav-item\" href=\"studio\" rel=\"history\">Studio\u003c/a>\n            \u003ca class=\"nav-item\" href=\"contact\" rel=\"history\">Contact\u003c/a>\n            \u003ca class=\"nav-item\" href=\"fieldnotes\" rel=\"history\">*FieldNotes\u003c/a>\n        \u003c/div>\n    \u003c/div>\n\u003c/div>","local_css":"/* Desktop nav — between the original and Camden’s larger version */\n.fixed-nav-bar .nav-links .nav-item {\n    font-size: 1.25rem !important;\n}\n\n/* Cargo mobile preview */\nbody.mobile .fixed-nav-bar .nav-links .nav-item {\n    font-size: 1.8rem !important;\n}\n\n/* Published mobile site */\n@media (max-width: 767px) {\n    .fixed-nav-bar .nav-links .nav-item {\n        font-size: 1.8rem !important;\n    }\n}","display":true,"stack":false,"pin":true,"overlay":false,"password_enabled":false,"page_count":null,"page_design_options":null,"backdrops":{"activeBackdrop":"none"},"pin_options":{"screen_visibility":"all","position":"top","overlay":true,"fixed":true,"adjust":true},"overlay_options":{},"thumb_media_id":83115627,"thumbnail":{"id":83115627,"master_muid":14497081,"name":"FNF-Logomark-BLK.svg","display_name":null,"hash":"J3014823111326793103065764148537","width":300,"height":34,"file_size":2265,"file_type":"svg","mime_type":"image/svg+xml","is_image":true,"is_video":false,"is_url":false,"is_placeholder":false,"has_audio_track":null,"duration":null,"url":null,"url_id":null,"url_thumb":null,"url_type":null,"created_at":"2026-07-02 14:18:08.723199","updated_at":"2026-07-02 14:18:08.723199","options":null},"thumb_meta":[],"media":[{"id":83115627,"display_name":"FNF-Logomark-BLK.svg","name":"FNF-Logomark-BLK.svg","hash":"J3014823111326793103065764148537","width":300,"height":34,"file_size":2265,"file_size_human":"2.2KB","file_type":"svg","mime_type":"image/svg+xml","is_image":true,"is_video":false,"is_url":false,"in_use":true,"created_at":"2026-07-02T14:18:08.723199Z","updated_at":"2026-07-02T14:18:08.723199Z"}],"tags":[],"access_level":"public"},"Z3013557801":{"id":"Z3013557801","title":"Footer","purl":"footer","page_type":"page","content":"\u003cfooter class=\"site-footer\">\n\n\u003cdiv class=\"newsletter-drawer-anchor\">\n    \u003cdetails class=\"newsletter-drawer\">\n        \u003csummary>NEWSLETTER\u003c/summary>\n\n        \u003cdiv class=\"newsletter-drawer-panel\">\n            \u003cform action=\"https://formandfield.us13.list-manage.com/subscribe/post?u=d6b1cfd8e10ee8b00ef7b9bda&id=5c395d1268&f_id=003100e9f0\" class=\"footer-newsletter\" method=\"post\" target=\"ff-drawer-mailchimp\">\n                \u003cdiv class=\"footer-newsletter-label\">Newsletter Signup\u003c/div>\n\n                \u003cdiv class=\"footer-newsletter-row\">\n                    \u003cinput aria-label=\"Email address for newsletter signup\" autocomplete=\"email\" class=\"footer-newsletter-email\" name=\"EMAIL\" placeholder=\"[email protected]\" required=\"\" type=\"email\" />
15\n\n                    \u003cbutton aria-label=\"Subscribe to the Form and Field newsletter\" class=\"footer-newsletter-submit\" name=\"subscribe\" type=\"submit\">SUBMIT\u003c/button>\n                \u003c/div>\n\n                \u003cdiv aria-hidden=\"true\" style=\"position: absolute; left: -5000px;\">\n                    \u003cinput name=\"b_d6b1cfd8e10ee8b00ef7b9bda_5c395d1268\" tabindex=\"-1\" type=\"text\" value=\"\" />\n                \u003c/div>\n\n                \u003cdiv aria-live=\"polite\" class=\"footer-newsletter-message\">\u003c/div>\n            \u003c/form>\n\n            \u003ciframe name=\"ff-drawer-mailchimp\" style=\"display: none;\" title=\"Newsletter signup response\">\u003c/iframe>\n        \u003c/div>\n    \u003c/details>\n\u003c/div>\n\n\u003cscript>\n(function () {\n    var forms = document.querySelectorAll(\n        \".newsletter-drawer .footer-newsletter\"\n    );\n\n    Array.prototype.forEach.call(forms, function (form) {\n        if (form.__ffMailchimpReady) return;\n        form.__ffMailchimpReady = true;\n\n        var email = form.querySelector(\".footer-newsletter-email\");\n        var message = form.querySelector(\".footer-newsletter-message\");\n        var button = form.querySelector(\".footer-newsletter-submit\");\n\n        if (!email || !message || !button) return;\n\n        form.addEventListener(\"submit\", function (event) {\n            if (!email.checkValidity()) {\n                event.preventDefault();\n                email.reportValidity();\n                return;\n            }\n\n            button.disabled = true;\n            button.textContent = \"SUBMITTING\";\n\n            window.setTimeout(function () {\n                message.textContent = \"THANK YOU FOR SIGNING UP.\";\n                button.textContent = \"SUBMITTED\";\n                email.value = \"\";\n            }, 600);\n        });\n    });\n}());\n\u003c/script>\n\n\n    \u003ca class=\"footer-arrow\" href=\"#top\">↑\u003c/a>\n\n    \u003cdiv class=\"footer-wordmark\">FormAndField\u003c/div>\n\n    \u003cdiv class=\"footer-meta\">\n        \u003cspan>FormAndField ©2026\u003c/span>\n        \u003cspan>Based In San Francisco\u003c/span>\n    \u003c/div>\n\n\u003c/footer>","local_css":"[page-url=\"footer\"] {\n    .page-content {\n        padding: 0;\n    }\n\n    .site-footer {\n        position: relative;\n        isolation: isolate;\n        overflow: hidden;\n        box-sizing: border-box;\n        padding: 28px 20px 14px;\n        text-align: center;\n        font-family: \"Favorit Variable\", \"Favorit\", Arial, sans-serif;\n        font-weight: 350;\n        font-style: normal;\n        font-variation-settings: \"slnt\" 0;\n\n        .footer-arrow,\n        .footer-arrow:link,\n        .footer-arrow:visited,\n        .footer-arrow:hover,\n        .footer-arrow:active,\n        .footer-wordmark,\n        .footer-meta,\n        .footer-meta * {\n            color: var(--ff-footer-color, #000000) !important;\n        }\n\n        .footer-arrow {\n            display: inline-block;\n            margin-bottom: 8px;\n            font-size: 28px;\n            line-height: 1;\n            cursor: pointer;\n\n            &,\n            &:link,\n            &:visited,\n            &:hover,\n            &:active {\n                text-decoration: none !important;\n                border-bottom: 0 !important;\n                box-shadow: none !important;\n            }\n        }\n\n        .footer-wordmark {\n            display: block;\n            width: 100%;\n            margin: 0;\n            font-size: 16.7vw;\n            line-height: 0.78;\n            letter-spacing: -0.75vw;\n            white-space: nowrap;\n            text-align: left;\n            transform: translateX(-1.80rem);\n            text-align: center;\n            pointer-events: none;\n        }\n\n        .footer-meta {\n            display: grid !important;\n            grid-template-columns: 1fr 1fr !important;\n            gap: 16px !important;\n            width: 100%;\n            margin: 8px 0 0;\n            line-height: 1.1;\n            letter-spacing: 0.025em;\n            text-transform: uppercase;\n            -webkit-font-smoothing: antialiased;\n\n            &,\n            *,\n            bodycopy,\n            bodycopy *,\n            span,\n            span:first-child,\n            span:last-child {\n                font-size: 12px !important;\n            }\n\n            span,\n            span:first-child,\n            span:last-child {\n                display: block;\n                line-height: inherit;\n                text-transform: inherit;\n\n                &::after {\n                    content: none !important;\n                    display: none !important;\n                }\n            }\n\n            span:first-child {\n                text-align: left !important;\n            }\n\n            span:last-child {\n                text-align: right !important;\n            }\n        }\n\n        body.mobile & {\n            padding-top: 0;\n\n            .footer-wordmark {\n                font-size: 15.5vw;\n                line-height: 0.82;\n                text-align: center;\n                transform: translateX(-1.2vw);\n            }\n\n            .footer-meta {\n                gap: 8px !important;\n\n                &,\n                *,\n                bodycopy,\n                bodycopy *,\n                span,\n                span:first-child,\n                span:last-child {\n                    font-size: 8px !important;\n                }\n            }\n        }\n\n        @media (max-width: 767px) {\n            padding-top: 0;\n\n            .footer-meta {\n                gap: 8px !important;\n\n                &,\n                *,\n                bodycopy,\n                bodycopy *,\n                span,\n                span:first-child,\n                span:last-child {\n                    font-size: 8px !important;\n                }\n            }\n        }\n    }\n}","display":true,"stack":false,"pin":true,"overlay":false,"password_enabled":false,"page_count":0,"page_design_options":null,"backdrops":{"activeBackdrop":"none"},"pin_options":{"screen_visibility":"all","position":"bottom","overlay":false,"fixed":false,"adjust":true},"overlay_options":{},"thumb_media_id":83253662,"thumbnail":{"id":83253662,"master_muid":14497081,"name":"placeholder-1x1-square.svg","display_name":null,"hash":"Z3019578855329942974268444587321","width":2000,"height":2000,"file_size":522,"file_type":"svg","mime_type":"image/svg+xml","
15is_image":true,"is_video":false,"is_url":false,"is_placeholder":false,"has_audio_track":null,"duration":null,"url":null,"url_id":null,"url_thumb":null,"url_type":null,"created_at":"2026-07-05 13:54:58.204888","updated_at":"2026-07-05 13:54:58.204888","options":null},"thumb_meta":[],"media":[{"id":83253662,"display_name":"placeholder-1x1-square.svg","name":"placeholder-1x1-square.svg","hash":"Z3019578855329942974268444587321","width":2000,"height":2000,"file_size":522,"file_size_human":"522.0B","file_type":"svg","mime_type":"image/svg+xml","is_image":true,"is_video":false,"is_url":false,"in_use":true,"created_at":"2026-07-05T13:54:58.204888Z","updated_at":"2026-07-05T13:54:58.204888Z"}],"tags":[],"access_level":"public"},"B3004925598":{"id":"B3004925598","title":"Projects","purl":"projects","page_type":"page","content":"\u003cdiv id=\"top\">\u003c/div>\n\n\u003cdiv class=\"site-noise-overlay\">\u003c/div>\n\n\u003cdiv class=\"home-hero-viewport\">\n    \u003cdiv class=\"hero-bg-frame\">\n        \u003cimg alt=\"\" src=\"https://freight.cargo.site/t/original/i/N3042833849315243344343077534837/07-SOMA-Space-Opera-Kitchen-Artwork.jpg\" />\n    \u003c/div>\n\n    \u003cdiv class=\"projects-hero-title\">\n        \u003cdiv class=\"projects-hero-headline\">Form\u003cbr class=\"mobile-title-break\" />AndField\u003c/div>\n        \u003cdiv class=\"projects-hero-subhead\">Projects\u003c/div>\n    \u003c/div>\n\u003c/div>\n\n\u003cdiv class=\"main-content-canvas\">\n\n    \u003c!--      ===================================================\n         DESKTOP-ONLY PROJECTS COMPOSITION\n         ===================================================      -->\n    \u003cdiv class=\"projects-desktop-layout\">\n\n        \u003cgallery-freeform class=\"projects-gallery projects-gallery-a\" gutter=\"1rem\" mobile-columns=\"1\" mobile-gutter=\"7rem\">\u003cmedia-item class=\"linked\" disable-zoom=\"true\" freeform-scale=\"40.80\" freeform-x=\"17.546562500000004\" freeform-y=\"0\" freeform-z=\"1\" hash=\"Q3026327369237848673035805865273\" href=\"project-noe-valley-edwardian\" rel=\"history\" scale=\"40.80\">\n                \u003cfigcaption class=\"caption\" slot=\"caption\">\u003ca href=\"project-noe-valley-edwardian\" rel=\"history\">Noe Valley Edwardian\u003c/a>\u003c/figcaption>\n            \u003c/media-item>\u003c/gallery-freeform>\n\n        \u003ccolumn-set class=\"projects-breaker projects-breaker-a\" gutter=\"1rem\" mobile-stack=\"true\">\u003ccolumn-unit slot=\"0\" span=\"1\">\u003c/column-unit>\u003ccolumn-unit slot=\"1\" span=\"5\">\n                \u003cdiv class=\"projects-live-callout\" style=\"text-align: left\">Memory Is Not Static, But Embodied.\u003cbr />\u003c/div>\n            \u003c/column-unit>\u003ccolumn-unit slot=\"2\" span=\"5\">\n                \u003cgallery-freeform class=\"projects-breaker-gallery\" gutter=\"1rem\" mobile-columns=\"1\" mobile-gutter=\"1rem\">\u003cmedia-item class=\"linked\" disable-zoom=\"true\" freeform-scale=\"100\" freeform-x=\"0\" freeform-y=\"0\" freeform-z=\"1\" hash=\"Y3026467443150126348766656935225\" href=\"project-los-altos-modern\" rel=\"history\" scale=\"100\">\n                        \u003cfigcaption class=\"caption\" slot=\"caption\">\u003ca href=\"project-los-altos-modern\" rel=\"history\">Los Altos Modern\u003c/a>\u003c/figcaption>\n                    \u003c/media-item>\u003c/gallery-freeform>\n            \u003c/column-unit>\u003ccolumn-unit slot=\"3\" span=\"1\">\u003c/column-unit>\u003c/column-set>\n\n        \u003cgallery-freeform class=\"projects-gallery projects-gallery-b\" gutter=\"1rem\" mobile-columns=\"1\" mobile-gutter=\"7rem\">\u003cmedia-item class=\"linked\" disable-zoom=\"true\" freeform-scale=\"65.00\" freeform-x=\"8.81\" freeform-y=\"0\" freeform-z=\"1\" hash=\"Y3042855385520014518770398182517\" href=\"project-soma-space-opera\" rel=\"history\" scale=\"65.00\">\n                \u003cfigcaption class=\"caption\" slot=\"caption\">\u003ca href=\"project-soma-space-opera\" rel=\"history\">SOMA Space Opera\u003c/a>\u003c/figcaption>\n            \u003c/media-item>\u003cmedia-item class=\"linked\" disable-zoom=\"true\" freeform-scale=\"50\" freeform-x=\"31.161250000000003\" freeform-y=\"54.32145833333334\" freeform-z=\"2\" hash=\"U3021283126956482907605307307321\" href=\"project-berkeley-craftsman\" rel=\"history\" scale=\"50\">\n                \u003cfigcaption class=\"caption\" slot=\"caption\">\u003ca href=\"project-berkeley-craftsman\" rel=\"history\">Berkeley Craftsman\u003c/a>\u003c/figcaption>\n            \u003c/media-item>\u003cmedia-item class=\"linked\" disable-zoom=\"true\" freeform-scale=\"40\" freeform-x=\"54.13385416666667\" freeform-y=\"104.80287109374997\" freeform-z=\"4\" hash=\"E3021575898865685334419786511673\" href=\"project-noe-valley-mediterranean\" rel=\"history\" scale=\"43.10\">\n                \u003cfigcaption class=\"caption\" slot=\"caption\">\u003ca href=\"project-noe-valley-mediterranean\" rel=\"history\">Noe Valley Mediterranean\u003c/a>\u003c/figcaption>\n            \u003c/media-item>\u003cmedia-item class=\"linked\" disable-zoom=\"true\" freeform-scale=\"40\" freeform-x=\"5.019895833333334\" freeform-y=\"112.50625000000001\" freeform-z=\"3\" hash=\"Y3021580890573078424298163352889\" href=\"project-potrero-hill-duplex\" rel=\"history\" scale=\"33.40\">\n                \u003cfigcaption class=\"caption\" slot=\"caption\">\u003ca href=\"project-potrero-hill-duplex\" rel=\"history\">Potrero Hill Duplex\u003c/a>\u003c/figcaption>\n            \u003c/media-item>\u003cmedia-item class=\"linked\" disable-zoom=\"true\" freeform-scale=\"39.50\" freeform-x=\"54.211041666666674\" freeform-y=\"145.53019205729169\" freeform-z=\"5\" hash=\"B3021582999921369764837971539257\" href=\"project-san-anselmo-contemporary\" rel=\"history\" scale=\"39.50\">\n                \u003cfigcaption class=\"caption\" slot=\"caption\">\u003ca href=\"project-san-anselmo-contemporary\" rel=\"history\">San Anselmo Contemporary\u003c/a>\u003c/figcaption>\n            \u003c/media-item>\u003cmedia-item class=\"linked\" freeform-scale=\"41.20\" freeform-x=\"5.9895833333333375\" freeform-y=\"182.81046549479169\" freeform-z=\"6\" hash=\"R3021584690233422726991605216569\" href=\"project-dolores-heights-modern\" rel=\"history\" scale=\"41.20\">\u003cfigcaption class=\"caption\" slot=\"caption\">\u003ca href=\"project-dolores-heights-modern\" rel=\"history\">Dolores Heights Modern\u003c/a>\u003c/figcaption>\u003c/media-item>\u003c/gallery-freeform>\n\n        \n\n        \u003ccolumn-set class=\"projects-breaker projects-breaker-c\" gutter=\"1rem\" mobile-stack=\"true\">\u003ccolumn-unit slot=\"0\" span=\"1\">\u003c/column-unit>\u003ccolumn-unit slot=\"1\" span=\"5\">\n                \u003cdiv class=\"projects-live-callout\" style=\"text-align: left\">A\u003cbr />\nPractice\u003cbr />
15\nof\u003cbr />\nListening.\n\u003c/div>\n            \u003c/column-unit>\u003ccolumn-unit slot=\"2\" span=\"5\">\n                \u003cgallery-freeform class=\"projects-breaker-gallery\" gutter=\"1rem\" mobile-columns=\"1\" mobile-gutter=\"1rem\">\u003cmedia-item class=\"linked\" disable-zoom=\"true\" freeform-scale=\"100\" freeform-x=\"0\" freeform-y=\"0\" freeform-z=\"1\" hash=\"A3021585897997097464977078170937\" href=\"project-atherton-estate\" rel=\"history\" scale=\"100\">\n                        \u003cfigcaption class=\"caption\" slot=\"caption\">\u003ca href=\"project-atherton-estate\" rel=\"history\">Atherton Estate\u003c/a>\u003c/figcaption>\n                    \u003c/media-item>\u003c/gallery-freeform>\n            \u003c/column-unit>\u003ccolumn-unit slot=\"3\" span=\"1\">\u003c/column-unit>\u003c/column-set>\n\n        \u003cgallery-freeform class=\"projects-gallery projects-gallery-c\" gutter=\"1rem\" mobile-columns=\"1\" mobile-gutter=\"7rem\">\u003cmedia-item class=\"linked\" disable-zoom=\"true\" freeform-scale=\"56.10\" freeform-x=\"7.08\" freeform-y=\"0\" freeform-z=\"1\" hash=\"G3021611842235832493038852977977\" href=\"project-cow-hollow-eclectic\" rel=\"history\" scale=\"56.10\">\n                \u003cfigcaption class=\"caption\" slot=\"caption\">\u003ca href=\"project-cow-hollow-eclectic\" rel=\"history\">Cow Hollow Eclectic\u003c/a>\u003c/figcaption>\n            \u003c/media-item>\u003cmedia-item class=\"linked\" disable-zoom=\"true\" freeform-scale=\"46.60\" freeform-x=\"29.605312500000004\" freeform-y=\"55.89993164062499\" freeform-z=\"2\" hash=\"P3015095342454428060967747007801\" href=\"project-donner-lake-cabin\" rel=\"history\" scale=\"46.60\">\n                \u003cfigcaption class=\"caption\" slot=\"caption\">\u003ca href=\"project-donner-lake-cabin\" rel=\"history\">Donner Lake Cabin\u003c/a>\u003c/figcaption>\n            \u003c/media-item>\u003cmedia-item class=\"linked\" disable-zoom=\"true\" freeform-scale=\"33.20\" freeform-x=\"13.564479166666665\" freeform-y=\"102.58979166666666\" freeform-z=\"4\" hash=\"L3031560285112748244939586452597\" href=\"project-clarendon-heights-contemporary\" rel=\"history\" scale=\"33.20\">\n                \u003cfigcaption class=\"caption\" slot=\"caption\">\u003ca href=\"project-clarendon-heights-contemporary\" rel=\"history\">Clarendon Heights Contemporary\u003c/a>\u003c/figcaption>\n            \u003c/media-item>\u003cmedia-item class=\"linked\" disable-zoom=\"true\" freeform-scale=\"40\" freeform-x=\"54.80489583333333\" freeform-y=\"107.67010416666668\" freeform-z=\"3\" hash=\"I3030073738414261945479815806069\" href=\"project-san-francisco-eichler\" rel=\"history\" scale=\"33.20\">\n                \u003cfigcaption class=\"caption\" slot=\"caption\">\u003ca href=\"project-san-francisco-eichler\" rel=\"history\">San Francisco Eichler\u003c/a>\u003c/figcaption>\n            \u003c/media-item>\u003cmedia-item class=\"linked\" disable-zoom=\"true\" freeform-scale=\"42.20\" freeform-x=\"29.77949662061794\" freeform-y=\"183.25490734551403\" freeform-z=\"5\" hash=\"L3030107751148174349657210141813\" href=\"project-los-altos-hills-tudor\" rel=\"history\" scale=\"42.20\">\n                \u003cfigcaption class=\"caption\" slot=\"caption\">\u003ca href=\"project-los-altos-hills-tudor\" rel=\"history\">Los Altos Hills Tudor\u003c/a>\u003c/figcaption>\n            \u003c/media-item>\u003c/gallery-freeform>\n\n       \u003ccolumn-set class=\"projects-breaker projects-breaker-d\" gutter=\"1rem\" mobile-stack=\"true\">\u003ccolumn-unit slot=\"0\" span=\"6\">\n        \u003cgallery-freeform class=\"projects-breaker-gallery\" gutter=\"1rem\" mobile-columns=\"1\" mobile-gutter=\"1rem\">\u003cmedia-item class=\"linked\" disable-zoom=\"true\" freeform-scale=\"100\" freeform-x=\"0\" freeform-y=\"0\" freeform-z=\"1\" hash=\"I3030016999642138868535312039029\" href=\"project-sweet-july\" rel=\"history\" scale=\"100\">\n                \u003cfigcaption class=\"caption\" slot=\"caption\">\n                    \u003ca href=\"project-sweet-july\" rel=\"history\">Sweet July\u003c/a>\n                \u003c/figcaption>\n            \u003c/media-item>\u003c/gallery-freeform>\n    \u003c/column-unit>\u003ccolumn-unit slot=\"1\" span=\"1\">\u003c/column-unit>\u003ccolumn-unit slot=\"2\" span=\"5\">\n        \u003cdiv class=\"projects-live-callout\" style=\"text-align: left\">\nBalance       Through\u003cbr />\nJuxtaposition.\n        \u003c/div>\n    \u003c/column-unit>\u003c/column-set>\n\n        \u003cgallery-freeform class=\"projects-gallery projects-gallery-d\" gutter=\"1rem\" mobile-columns=\"1\" mobile-gutter=\"7rem\">\u003cmedia-item class=\"linked\" freeform-scale=\"35.20\" freeform-x=\"33.61527462121212\" freeform-y=\"0\" freeform-z=\"1\" hash=\"E3026770704523645129412020059253\" href=\"project-saverglass\" rel=\"history\" scale=\"35.20\">\n                \u003cfigcaption class=\"caption\" slot=\"caption\">\u003ca href=\"project-saverglass\" rel=\"history\">Saverglass\u003c/a>\u003c/figcaption>\n            \u003c/media-item>\u003c/gallery-freeform>\n    \u003c/div>\n\n    \u003c!--      ===================================================\n         MOBILE-ONLY PROJECTS COMPOSITION\n         One independent gallery for mobile art direction.\n         ===================================================      -->\n\u003c!--      =====================================================\n     REPLACE the complete existing:\n     \u003cdiv class=\"projects-mobile-layout\"> ... \u003c/div>\n     with this block.\n     =====================================================      -->\n\n\u003cdiv class=\"projects-mobile-layout\">\n\n\u003cgallery-freeform class=\"projects-mobile-gallery projects-mobile-gallery-a\" gutter=\"1rem\" mobile-columns=\"1\" mobile-grid=\"false\" mobile-gutter=\"4rem\" mobile-horizontal-align=\"center\">\u003cmedia-item class=\"\" disable-zoom=\"true\" freeform-scale=\"88\" freeform-x=\"6\" freeform-y=\"0\" freeform-z=\"1\" hash=\"Q3026327369237848673035805865273\" scale=\"88\">\n        \u003cfigcaption class=\"caption\" slot=\"caption\">\n            \n                Noe Valley Edwardian\n            \n        \u003c/figcaption>\n    \u003c/media-item>\u003c/gallery-freeform>\n\n    \u003cdiv class=\"projects-mobile-callout\" style=\"text-align: left\">Memory Is Not Static, But Embodied.\u003c/div>\n\n    \u003cgallery-freeform class=\"projects-mobile-gallery projects-mobile-gallery-b\" gutter=\"1rem\" mobile-columns=\"1\" mobile-grid=\"false\" mobile-gutter=\"4rem\" mobile-horizontal-align=\"center\">\u003cmedia-item class=\"linked\" disable-zoom=\"true\" freeform-scale=\"7
155\" freeform-x=\"5.0106534090909145\" freeform-y=\"0\" freeform-z=\"3\" hash=\"Y3026467443150126348766656935225\" href=\"project-los-altos-modern\" limit-by=\"width\" rel=\"history\" scale=\"77.70\">\u003cfigcaption class=\"caption\" slot=\"caption\">\u003ca href=\"project-los-altos-modern\" rel=\"history\">Los Altos Modern\u003c/a>\u003c/figcaption>\u003c/media-item>\u003cmedia-item class=\"linked\" disable-zoom=\"true\" freeform-scale=\"100\" freeform-x=\"0\" freeform-y=\"81.86363636363637\" freeform-z=\"5\" hash=\"Y3042855385520014518770398182517\" href=\"project-soma-space-opera\" rel=\"history\" scale=\"88\">\u003cfigcaption class=\"caption\" slot=\"caption\">\u003ca href=\"project-soma-space-opera\" rel=\"history\">SOMA Space Opera\u003c/a>\u003c/figcaption>\u003c/media-item>\u003cmedia-item class=\"linked\" disable-zoom=\"true\" freeform-scale=\"82.41\" freeform-x=\"12.035353535353542\" freeform-y=\"188.68019313505422\" freeform-z=\"6\" hash=\"U3021283126956482907605307307321\" href=\"project-berkeley-craftsman\" limit-by=\"width\" rel=\"history\" scale=\"82.41\">\u003cfigcaption class=\"caption\" slot=\"caption\">\u003ca href=\"project-berkeley-craftsman\" rel=\"history\">Berkeley Craftsman\u003c/a>\u003c/figcaption>\u003c/media-item>\u003cmedia-item class=\"linked\" disable-zoom=\"true\" freeform-scale=\"100\" freeform-x=\"0\" freeform-y=\"278.31818181818176\" freeform-z=\"1\" hash=\"Y3021580890573078424298163352889\" href=\"project-potrero-hill-duplex\" limit-by=\"width\" rel=\"history\" scale=\"97.49\">\u003cfigcaption class=\"caption\" slot=\"caption\">\u003ca href=\"project-potrero-hill-duplex\" rel=\"history\">Potrero Hill Duplex\u003c/a>\u003c/figcaption>\u003c/media-item>\u003cmedia-item class=\"linked\" disable-zoom=\"true\" freeform-scale=\"90.80\" freeform-x=\"0\" freeform-y=\"429.61971567527144\" freeform-z=\"7\" hash=\"E3021575898865685334419786511673\" href=\"project-noe-valley-mediterranean\" limit-by=\"width\" rel=\"history\" scale=\"90.80\">\u003cfigcaption class=\"caption\" slot=\"caption\">\u003ca href=\"project-noe-valley-mediterranean\" rel=\"history\">Noe Valley Mediterranean\u003c/a>\u003c/figcaption>\u003c/media-item>\u003cmedia-item class=\"linked\" disable-zoom=\"true\" freeform-scale=\"88\" freeform-x=\"9.863636363636365\" freeform-y=\"512.7272727272727\" freeform-z=\"2\" hash=\"B3021582999921369764837971539257\" href=\"project-san-anselmo-contemporary\" rel=\"history\" scale=\"88\">\u003cfigcaption class=\"caption\" slot=\"caption\">\u003ca href=\"project-san-anselmo-contemporary\" rel=\"history\">San Anselmo Contemporary\u003c/a>\u003c/figcaption>\u003c/media-item>\u003cmedia-item class=\"linked\" disable-zoom=\"true\" freeform-scale=\"100\" freeform-x=\"0\" freeform-y=\"652.1289062500001\" freeform-z=\"4\" hash=\"R3021584690233422726991605216569\" href=\"project-dolores-heights-modern\" limit-by=\"width\" rel=\"history\" scale=\"68.10\">\u003cfigcaption class=\"caption\" slot=\"caption\">\u003ca href=\"project-dolores-heights-modern\" rel=\"history\">Dolores Heights Modern\u003c/a>\u003c/figcaption>\u003c/media-item>\u003c/gallery-freeform>\n\n    \u003cdiv class=\"projects-mobile-callout\" style=\"text-align: left\">     A\u003cbr />\n     Practice\u003cbr />\n     of\u003cbr />\n     Listening\u003c/div>\n\n    \n\n    \n\n    \u003cgallery-freeform class=\"projects-mobile-gallery projects-mobile-gallery-d\" gutter=\"1rem\" mobile-columns=\"1\" mobile-grid=\"false\" mobile-gutter=\"4rem\" mobile-horizontal-align=\"center\">\u003cmedia-item class=\"linked\" disable-zoom=\"true\" freeform-scale=\"75.10\" freeform-x=\"4.40909090909091\" freeform-y=\"0\" freeform-z=\"2\" hash=\"A3021585897997097464977078170937\" href=\"project-atherton-estate\" limit-by=\"width\" rel=\"history\" scale=\"75.10\">\u003cfigcaption class=\"caption\" slot=\"caption\">\u003ca href=\"project-atherton-estate\" rel=\"history\">Atherton Estate\u003c/a>\u003c/figcaption>\u003c/media-item>\u003cmedia-item class=\"linked\" disable-zoom=\"true\" freeform-scale=\"80\" freeform-x=\"20\" freeform-y=\"83.45454545454545\" freeform-z=\"3\" hash=\"G3021611842235832493038852977977\" href=\"project-cow-hollow-eclectic\" limit-by=\"width\" rel=\"history\" scale=\"79.80\">\u003cfigcaption class=\"caption\" slot=\"caption\">\u003ca href=\"project-cow-hollow-eclectic\" rel=\"history\">Cow Hollow Eclectic\u003c/a>\u003c/figcaption>\u003c/media-item>\u003cmedia-item class=\"linked\" disable-zoom=\"true\" freeform-scale=\"100\" freeform-x=\"0\" freeform-y=\"173.9545454545455\" freeform-z=\"1\" hash=\"P3015095342454428060967747007801\" href=\"project-donner-lake-cabin\" rel=\"history\" scale=\"88\">\u003cfigcaption class=\"caption\" slot=\"caption\">\u003ca href=\"project-donner-lake-cabin\" rel=\"history\">Donner Lake Cabin\u003c/a>\u003c/figcaption>\u003c/media-item>\u003cmedia-item class=\"linked\" disable-zoom=\"true\" freeform-scale=\"86.20\" freeform-x=\"3.6751601664796123\" freeform-y=\"272.3875794986907\" freeform-z=\"5\" hash=\"L3031560285112748244939586452597\" href=\"project-clarendon-heights-contemporary\" limit-by=\"width\" rel=\"history\" scale=\"86.20\">\u003cfigcaption class=\"caption\" slot=\"caption\">\u003ca href=\"project-clarendon-heights-contemporary\" rel=\"history\">Clarendon Heights Contemporary\u003c/a>\u003c/figcaption>\u003c/media-item>\u003cmedia-item class=\"linked\" disable-zoom=\"true\" freeform-scale=\"90\" freeform-x=\"9.999999999999993\" freeform-y=\"402.709687099872\" freeform-z=\"6\" hash=\"I3030073738414261945479815806069\" href=\"project-san-francisco-eichler\" rel=\"history\" scale=\"88\">\u003cfigcaption class=\"caption\" slot=\"caption\">\u003ca href=\"project-san-francisco-eichler\" rel=\"history\">San Francisco Eichler\u003c/a>\u003c/figcaption>\u003c/media-item>\u003cmedia-item class=\"linked\" disable-zoom=\"true\" freeform-scale=\"79.90\" freeform-x=\"8.727272727272732\" freeform-y=\"572.5000000000002\" freeform-z=\"4\" hash=\"L3030107751148174349657210141813\" href=\"project-los-altos-hills-tudor\" limit-by=\"width\" rel=\"history\" scale=\"79.90\">\u003cfigcaption class=\"caption\" slot=\"caption\">\u003ca href=\"project-los-altos-hills-tudor\" rel=\"history\">Los Altos Hills Tudor\u003c/a>\u003c/figcaption>\u003c/media-item>\u003c/gallery-freeform>\n\n    \u003cdiv class=\"projects-mobile-callout projects-mobile-callout-balance\" style=\"text-align: left\">\nBalance Through Juxtaposition.\u003c/div>\n\n    \u003cgallery-freeform class=\"projects-mobile-gallery projects-mobile-gallery-e\" gutter=\"1rem\" mobile-columns=\"1\" mobile-grid=\"false\" mobile-gutter=\"4rem\" mobile-horizontal-align=\"center\">\u003cmedia-item class=\"linked\" disable-zoom=\"true\" freeform-scale=\"88\" freeform-x=\"12.002840909090914\" freeform-y=\"0\" freeform-z=\"1\" hash=\"I3030016999642138868535312039029\" href=\"project-sweet-july\" rel=\"history\" scale=\"88\">\u003cfigcaption class=\"caption\" slot=\"caption\">\u003ca href=\"project-sweet-july\" rel=\"history\">Sweet July\u003c/a>\u003c/figcaption>\u003c/media-item>\u003cmedia-item class=\"linked\" disable-zoom=\"true\" freeform-scale=\"88\" freeform-x=\"6.909090909090911\" freeform-y=\"78.45454545454545\" freeform-z=\"2\" hash=\"E3026770704523645129412020059253\" href=\"project-saverglass\" rel=\"history\" scale=\"88\">\u003cfigcaption class=\"caption\" slot=\"caption\">\u003ca href=\"project-saverglass\" rel=\"history\">Saverglass\u003c/a>\u003c/figcaption>\u003c/media-item>\u003c/gallery-freeform>\n\u003c/div>\n\n\u003c/div>","local_css":"/* BACKGROUND-ONLY FILM GRAIN */\n:root {\n    --ff-paper: #FAF8F8;\n}\n\n.site-noise-overlay {\n    display: none !important;\n}
15\n\n\n[id=\"B3004925598\"] .page-content {\n    align-items: flex-start;\n    padding: 0 !important;\n    overflow-x: hidden !important;\n}\n\n.home-hero-viewport {\n    left: 50% !important;\n    right: auto !important;\n    margin-left: 0 !important;\n    margin-right: 0 !important;\n    margin-top: 0 !important;\n    transform: translateX(-50%) !important;\n    background-color: #000000 !important;\n    isolation: isolate;\n}\n\n.hero-bg-frame {\n    position: absolute !important;\n    inset: 0 !important;\n    z-index: 0 !important;\n    overflow: hidden !important;\n}\n\n.hero-bg-frame img {\n    display: block !important;\n}\n\n.hero-bg-frame::after {\n    display: none !important;\n}\n\n.hero-graphic-overlay {\n    z-index: 2 !important;\n}\n\n.main-content-canvas {\n    background-image: none !important;\n    position: relative;\n    overflow: hidden;\n    isolation: isolate;\n}\n\n@keyframes localNoiseJitter {\n\n    0%,\n    100% {\n        background-position: 0 0;\n    }\n\n    10% {\n        background-position: -2% -3%;\n    }\n\n    20% {\n        background-position: -6% 2%;\n    }\n\n    30% {\n        background-position: 3% -8%;\n    }\n\n    40% {\n        background-position: 8% 8%;\n    }\n\n    50% {\n        background-position: -8% 3%;\n    }\n\n    60% {\n        background-position: 6% 2%;\n    }\n\n    70% {\n        background-position: 0 5%;\n    }\n\n    80% {\n        background-position: 8% 12%;\n    }\n\n    90% {\n        background-position: -4% 4%;\n    }\n}\n\n/* PHOTOSHOP-STYLE PAPER MULTIPLY IMAGE HOVER - CAPTION SAFE */\n\n/* Keep the outer media component and figure transparent */\n.main-content-canvas gallery-freeform media-item:not([hash=\"placeholder\"]),\n.main-content-canvas gallery-freeform media-item:not([hash=\"placeholder\"])::part(figure),\n.main-content-canvas gallery-freeform media-item:not([hash=\"placeholder\"])::part(frame) {\n    background: transparent !important;\n    background-color: transparent !important;\n}\n\n/* Put the paper tone only behind the actual image area */\n.main-content-canvas gallery-freeform media-item:not([hash=\"placeholder\"])::part(sizing-frame) {\n    background-color: var(--ff-paper) !important;\n    overflow: hidden !important;\n}\n\n/* The image multiplies against that paper image-area background */\n.main-content-canvas gallery-freeform media-item:not([hash=\"placeholder\"])::part(media) {\n    filter: grayscale(1) contrast(0.98) brightness(1.04) !important;\n    mix-blend-mode: multiply !important;\n    opacity: 1 !important;\n    transition:\n        filter 420ms ease,\n        mix-blend-mode 420ms ease !important;\n}\n\n/* Hover returns to full color */\n.main-content-canvas gallery-freeform media-item:not([hash=\"placeholder\"]):hover::part(sizing-frame) {\n    background-color: transparent !important;\n}\n\n.main-content-canvas gallery-freeform media-item:not([hash=\"placeholder\"]):hover::part(media) {\n    filter: grayscale(0) contrast(1) brightness(1) !important;\n    mix-blend-mode: normal !important;\n}\n\n/* HERO IMAGE PAPER MULTIPLY HOVER */\n.home-hero-viewport .hero-bg-frame {\n    background-color: var(--ff-paper) !important;\n}\n\n.home-hero-viewport .hero-bg-frame img {\n    filter: grayscale(1) contrast(0.98) brightness(1.04) !important;\n    mix-blend-mode: multiply !important;\n    opacity: 1 !important;\n    transition:\n        filter 420ms ease,\n        mix-blend-mode 420ms ease !important;\n}\n\n.home-hero-viewport:hover .hero-bg-frame {\n    background-color: transparent !important;\n}\n\n.home-hero-viewport:hover .hero-bg-frame img {\n    filter: grayscale(0) contrast(1) brightness(1) !important;\n    mix-blend-mode: normal !important;\n}\n\n/* FREEFORM GALLERY SECTION HEIGHT */\n.main-content-canvas {\n    min-height: 720vh !important;\n}\n\n/* KEEP CARGO CAPTIONS, REMOVE PINK CAPTION BAR */\n.main-content-canvas gallery-freeform media-item::part(caption),\n.main-content-canvas gallery-freeform media-item::part(caption-background),\n.main-content-canvas gallery-freeform media-item::part(figure) {\n    background: transparent !important;\n    background-color: transparent !important;\n}\n\n.section-callout {\n    position: absolute;\n    z-index: 3;\n    font-family: var(--ff-font);\n    font-size: 96px;\n    line-height: 1.1em;\n    font-weight: 420;\n    font-style: normal;\n    font-variation-settings: 'MONO' 0, 'slnt' 0;\n    text-align: left;\n    color: #000000;\n    letter-spacing: 0;\n    pointer-events: none;\n}\n\n.callout-a {\n    left: 6vw;\n    top: 28vh;\n}\n\n.callout-b {\n    left: 50vw;\n    top: 300vh;\n}\n\n.callout-c {\n    left: 55vw;\n    top: 450vh;\n}\n\n.callout-d {\n    left: 60vw;\n    top: 885vh;\n}\n\n/* BLUE HERO LOGOMARK */\n.hero-graphic-overlay {\n    display: flex !important;\n    opacity: 1;\n    visibility: visible !important;\n    z-index: 5 !important;\n    pointer-events: auto !important;\n    transition:\n        opacity 520ms ease,\n        filter 520ms ease !important;\n}\n\n.hero-graphic-overlay:hover {\n    opacity: 0;\n    filter: blur(6px);\n}\n\n.breathing-logo,\n.breathing-logo svg {\n    display: block !important;\n    width: 100% !important;\n    height: 100% !important;\n}\n\n.breathing-logo svg path {\n    fill: #2F52D9;\n    animation: ffBlueBreathe 9s ease-in-out infinite !important;\n}\n\n@keyframes ffBlueBreathe {\n    0% {\n        fill: #2F52D9;\n    }\n\n    50% {\n        fill: #5D7EFF;\n    }\n\n    100% {\n        fill: #2F52D9;\n    }\n}\n\n/* EXTRA ROOM BEFORE FOOTER */\n.main-content-canvas {\n    min-height: 720vh !important;\n    padding-bottom: 45vh !important;\n}\n\n.main-content-canvas gallery-freeform {\n    min-height: 680vh !important;\n}\n\n/* PROJECTS LANDING HERO TITLE ONLY */\n.projects-hero-title {\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    z-index: 3;\n    width: 100%;\n    transform: translate(-50%, -36%);\n    color: #000000;\n    text-align: center;\n    font-family: var(--ff-font);\n    font-style: normal;\n    font-variation-settings:\n        \"MONO\" 0,\n        \"slnt\" 0;\n    pointer-events: none;\n}\n\n.projects-hero-headline {\n    font-size: 150px;\n    line-height: 0.9;\n    font-weight: 420;\n    letter-spacing: 0;\n}\n\n.projects-hero-subhead {\n    margin-top: 34px;\n    font-size: 36px;\n    line-height: 1;\n    font-weight: 420;\n    letter-spacing: 0;\n}\n\n.mobile .projects-hero-title {\n    transform: translate(-50%, -32%);\n}\n\n.mobile .projects-hero-headline {\n    font-size: clamp(58px, 19vw, 150px);\n}\n\n.mobile .projects-hero-subhead {\n    margin-top: 18px;\n    font-size: clamp(24px, 7vw, 36px);\n}\n\n\n/* PROJECTS LANDING: REDUCE EXTRA SPACE BEFORE FOOTER */\n.main-content-canvas {\n    min-height: auto !important;\n    padding-bottom: 12vh !important;\n}\n\n.main-content-canvas gallery-freeform {\n    min-height: auto !important;\n}\n\n/* Hide the controlled break on desktop */\n.mobile-title-break {\n    display: none;\n}\n\n/* Show the controlled break on mobile */\nbody.mobile .mobile-title-break {\n    display: block;\n}\n\n/* PROJECTS LANDING SVG CALLOUTS — NO IMAGE/HOVER TREATMENT */\n.main-content-canvas gallery-freeform media-item:is([hash=\"P3033967826073504711851089147193\"],\n    [hash=\"E3033967826036611223703670043961\"],\n    [hash=\"T3033967826055057967777379595577\"],\n    [hash=\"Y3033967826091951455924798698809\"]),\n.main-content-canvas gallery-freeform media-item:is([hash=\"P3033967826073504711851089147193\"],\n    [hash=\"E3033967826036611223703670043961\"],\n    [hash=\"T3033967826055057967777379595577\"],\n    [hash=\"Y3033967826091951455924798698809\"])::part(figure),\n.main-content-canvas gallery-freeform media-item:is([hash=\"P3033967826073504711851089147193\"],\n    [hash=\"E3033967826036611223703670043961\"],\n    [hash=\"T3033967826055057967777379595577\"],\n    [hash=\"Y3033967826091951455924798698809\"])::part(frame),\n.main-content-canvas gallery-freeform media-item:is([hash=\"P3033967826073504711851089147193\"],\n    [hash=\"E3033967826036611223703670043961\"],\n    [hash=\"T3033967826055057967777379595577\"],\n    [hash=\"Y3033967826091951455924798698809\"])::part(sizing-frame) {\n    background: transparent !important;\n    background-color: transparent !important;\n    filter: none !important;\n    mix-blend-mode: normal !important;\n    opacity: 1 !important;\n}\n\n.main-content-canvas gallery-freeform media-item:is([hash=\"P3033967826073504711851089147193\"],\n    [hash=\"E3033967826036611223703670043961\"],\n    [hash=\"T3033967826055057967777379595577\"],\n    [hash=\"Y3033967826091951455924798698809\"])::part(media),\n.main-content-canvas gallery-freeform media-item:is([hash=\"P3033967826073504711851089147193\"],\n    [hash=\"E3033967826036611223703670043961\"],\n    [hash=\"T3033967826055057967777379595577\"],\n    [hash=\"Y3033967826091951455924798698809\"]):hover::part(media) {\n    background: transparent !important;\n    filter: none !important;\n    mix-blend-mode: normal !important;\n    opacity: 1 !important;\n}\n\n/* ========================================================\n   PROJECTS LANDING — STRUCTURED DESKTOP + MOBILE COMPOSITIONS\n   Append once at the bottom of the current page CSS.\n   ======================================================== */\n\n.projects-mobile-layout {\n    display: none !important;\n}\n\n.projects-desktop-layout,\n.projects-gallery,\n.projects-breaker,\n.projects-breaker-gallery {\n    position: relative !important;\n    width: 100% !important;\n}
15\n\n.projects-gallery-a,\n.projects-gallery-d {\n    min-height: 58vw !important;\n}\n\n.projects-gallery-b {\n    min-height: 175vw !important;\n}\n\n.projects-gallery-c {\n    min-height: 220vw !important;\n}\n\n.projects-breaker {\n    align-items: center !important;\n    margin: clamp(70px, 8vw, 130px) 0 !important;\n}\n\n.projects-breaker column-unit {\n    min-width: 0 !important;\n}\n\n.projects-live-callout {\n    box-sizing: border-box !important;\n    font-family: var(--ff-font);\n    font-size: clamp(5.25rem, 6.3vw, 8rem) !important;\n    line-height: 1.15 !important;\n    font-weight: 400 !important;\n    font-style: normal !important;\n    font-variation-settings: \"slnt\" 0 !important;\n    letter-spacing: 0em !important;\n    color: #000000 !important;\n}\n\n.projects-breaker-gallery {\n    display: block !important;\n    min-height: 48vw !important;\n    margin: 0 !important;\n}\n\n/* Cargo mobile editor mode. */\nbody.mobile .projects-desktop-layout {\n    display: none !important;\n}\n\nbody.mobile .projects-mobile-layout {\n    display: block !important;\n    width: 100% !important;\n}\n\nbody.mobile .projects-mobile-gallery {\n    display: block !important;\n    width: 100% !important;\n    min-height: 1320vw !important;\n    margin: 0 !important;\n}\n\n/* Published narrow screens. */\n@media (max-width: 767px) {\n    .projects-desktop-layout {\n        display: none !important;\n    }\n\n    .projects-mobile-layout {\n        display: block !important;\n        width: 100% !important;\n    }\n\n    .projects-mobile-gallery {\n        display: block !important;\n        width: 100% !important;\n        min-height: 1320vw !important;\n        margin: 0 !important;\n    }\n}\n\n/* ========================================================\n   PROJECTS LANDING — DIVIDED MOBILE GALLERIES + LIVE TYPE\n   Append once at the very bottom of the current page CSS.\n   ======================================================== */\n\nbody.mobile .projects-mobile-callout {\n    box-sizing: border-box !important;\n    width: 100% !important;\n    padding: 14vw 7vw 16vw !important;\n    font-family: var(--ff-font);\n    font-size: clamp(52px, 15vw, 92px) !important;\n    line-height: 1.15 !important;\n    font-weight: 400 !important;\n    letter-spacing: 0 !important;\n    color: #000000 !important;\n}\n\nbody.mobile .projects-mobile-gallery-a,\nbody.mobile .projects-mobile-gallery-c {\n    min-height: 105vw !important;\n}\n\nbody.mobile .projects-mobile-gallery-b,\nbody.mobile .projects-mobile-gallery-d {\n    min-height: 485vw !important;\n}\n\nbody.mobile .projects-mobile-gallery-e {\n    min-height: 180vw !important;\n}\n\n@media (max-width: 767px) {\n    .projects-mobile-callout {\n        box-sizing: border-box !important;\n        width: 100% !important;\n        padding: 14vw 7vw 16vw !important;\n        font-family: var(--ff-font);\n        font-size: clamp(52px, 15vw, 92px) !important;\n        line-height: 1.15 !important;\n        font-weight: 400 !important;\n        letter-spacing: 0 !important;\n        color: #000000 !important;\n    }\n\n    .projects-mobile-gallery-a,\n    .projects-mobile-gallery-c {\n        min-height: 105vw !important;\n    }\n\n    .projects-mobile-gallery-b,\n    .projects-mobile-gallery-d {\n        min-height: 485vw !important;\n    }\n\n    .projects-mobile-gallery-e {\n        min-height: 180vw !important;\n    }\n}\n\n/* ========================================================\n   FORMANDFIELD — CANONICAL NEWSLETTER FOOTER\n   Append once at the absolute bottom of each page's CSS.\n   Mailchimp connection intentionally pending.\n   ======================================================== */\n\n.footer-newsletter {\n    position: relative !important;\n    z-index: 1 !important;\n    box-sizing: border-box !important;\n    width: clamp(320px, 44vw, 760px) !important;\n    margin:\n        clamp(70px, 7vw, 120px) 1vw 12px auto !important;\n    padding: 0 !important;\n    text-align: left !important;\n    font-family: var(--ff-font);\n    color: #000000 !important;\n}\n\n.footer-newsletter-label {\n    margin: 0 0 9px !important;\n    padding: 0 !important;\n    font: inherit !important;\n    font-size: clamp(14px, 1.05vw, 18px) !important;\n    line-height: 1.15 !important;\n    font-weight: 400 !important;\n    letter-spacing: 0 !important;\n}\n\n.footer-newsletter-row {\n    display: grid !important;\n    grid-template-columns: minmax(0, 1fr) auto !important;\n    width: 100% !important;\n    margin: 0 !important;\n    padding: 0 !important;\n}\n\n.footer-newsletter-email,\n.footer-newsletter-submit {\n    appearance: none !important;\n    -webkit-appearance: none !important;\n    box-sizing: border-box !important;\n    height: 42px !important;\n    margin: 0 !important;\n    border: 1px solid #111111 !important;\n    border-radius: 0 !important;\n    background: transparent !important;\n    color: #3d3d3d !important;\n    font-family: var(--ff-font);\n    font-size: 15px !important;\n    line-height: 1 !important;\n    font-weight: 400 !important;\n    letter-spacing: 0 !important;\n}\n\n.footer-newsletter-email {\n    min-width: 0 !important;\n    width: 100% !important;\n    padding: 0 10px !important;\n    border-right: 0 !important;\n    outline: none !important;\n}\n\n.footer-newsletter-email::placeholder {\n    color: #5a5a5a !important;\n    opacity: 1 !important;\n}\n\n.footer-newsletter-email:focus {\n    outline: 1px solid #111111 !important;\n    outline-offset: -2px !important;\n}\n\n.footer-newsletter-submit {\n    min-width: 96px !important;\n    padding: 2px 15px 0 !important;\n    cursor: default !important;\n}\n\n.footer-newsletter-message {\n    min-height: 1em !important;\n    margin-top: 6px !important;\n    font-size: 12px !important;\n    line-height: 1.15 !important;\n}
15\n\n.footer-newsletter-message:empty {\n    display: none !important;\n}","display":true,"stack":false,"pin":false,"overlay":false,"password_enabled":false,"page_count":0,"page_design_options":null,"backdrops":{"activeBackdrop":"none","backdropSettings":{"legacy/pixelation":{"image":"Q3014877184710418225643445368121"},"legacy/video":{"image":"Q3014877184710418225643445368121"}}},"pin_options":{},"overlay_options":{},"thumb_media_id":83119068,"thumbnail":{"id":83119068,"master_muid":14497081,"name":"00-HERO-Marin-Foyer-Overall-Horizontal.jpg","display_name":null,"hash":"Q3014877184710418225643445368121","width":1500,"height":1000,"file_size":172466,"file_type":"jpg","mime_type":"image/jpeg","is_image":true,"is_video":false,"is_url":false,"is_placeholder":false,"has_audio_track":null,"duration":null,"url":null,"url_id":null,"url_thumb":null,"url_type":null,"created_at":"2026-07-02 15:07:00.869249","updated_at":"2026-07-02 15:07:00.869249","options":null},"thumb_meta":[],"media":[{"id":83119068,"display_name":"00-HERO-Marin-Foyer-Overall-Horizontal.jpg","name":"00-HERO-Marin-Foyer-Overall-Horizontal.jpg","hash":"Q3014877184710418225643445368121","width":1500,"height":1000,"file_size":172466,"file_size_human":"168.4KB","file_type":"jpg","mime_type":"image/jpeg","is_image":true,"is_video":false,"is_url":false,"in_use":true,"created_at":"2026-07-02T15:07:00.869249Z","updated_at":"2026-07-02T15:07:00.869249Z"},{"id":83130967,"display_name":"15-Donner-Lake-Cabin-Bunk-Room.jpg","name":"15-Donner-Lake-Cabin-Bunk-Room.jpg","hash":"P3015095342454428060967747007801","width":2246,"height":1500,"file_size":421962,"file_size_human":"412.1KB","file_type":"jpg","mime_type":"image/jpeg","is_image":true,"is_video":false,"is_url":false,"in_use":true,"created_at":"2026-07-02T18:24:06.416504Z","updated_at":"2026-07-02T18:24:06.416504Z"},{"id":83307230,"display_name":"03-Berkeley-Craftsman-Living-Room.jpg","name":"03-Berkeley-Craftsman-Living-Room.jpg","hash":"U3021283126956482907605307307321","width":2500,"height":1667,"file_size":409348,"file_size_human":"399.8KB","file_type":"jpg","mime_type":"image/jpeg","is_image":true,"is_video":false,"is_url":false,"in_use":true,"created_at":"2026-07-06T15:34:47.224342Z","updated_at":"2026-07-06T15:34:47.224342Z"},{"id":83320454,"display_name":"00-HERO-Noe-Valley-Mediterranean-Primary-Bedroom.jpg","name":"00-HERO-Noe-Valley-Mediterranean-Primary-Bedroom.jpg","hash":"E3021575898865685334419786511673","width":2500,"height":1667,"file_size":700968,"file_size_human":"684.5KB","file_type":"jpg","mime_type":"image/jpeg","is_image":true,"is_video":false,"is_url":false,"in_use":true,"created_at":"2026-07-06T19:59:20.219288Z","updated_at":"2026-07-06T19:59:20.219288Z"},{"id":83320708,"display_name":"03-Potrero-Hill-Duplex-Entry-Hall.jpg","name":"03-Potrero-Hill-Duplex-Entry-Hall.jpg","hash":"Y3021580890573078424298163352889","width":1536,"height":1920,"file_size":101494,"file_size_human":"99.1KB","file_type":"jpg","mime_type":"image/jpeg","is_image":true,"is_video":false,"is_url":false,"in_use":true,"created_at":"2026-07-06T20:03:48.971340Z","updated_at":"2026-07-06T20:03:48.971340Z"},{"id":83320809,"display_name":"02-Marin-Foyer-Overall-from-Living-Room.jpg","name":"02-Marin-Foyer-Overall-from-Living-Room.jpg","hash":"B3021582999921369764837971539257","width":1200,"height":1500,"file_size":194440,"file_size_human":"189.9KB","file_type":"jpg","mime_type":"image/jpeg","is_image":true,"is_video":false,"is_url":false,"in_use":true,"created_at":"2026-07-06T20:05:43.221575Z","updated_at":"2026-07-06T20:05:43.221575Z"},{"id":83320854,"display_name":"9-Dolores-Heights-Modern-Kitchen.jpg","name":"9-Dolores-Heights-Modern-Kitchen.jpg","hash":"R3021584690233422726991605216569","width":2240,"height":1500,"file_size":266084,"file_size_human":"259.8KB","file_type":"jpg","mime_type":"image/jpeg","is_image":true,"is_video":false,"is_url":false,"in_use":true,"created_at":"2026-07-06T20:07:15.528493Z","updated_at":"2026-07-06T20:07:15.528493Z"},{"id":83320926,"display_name":"Form---Field-Atherton-Estate-Family-Room.jpeg","name":"Form---Field-Atherton-Estate-Family-Room.jpeg","hash":"A3021585897997097464977078170937","width":1600,"height":1147,"file_size":264244,"file_size_human":"258.1KB","file_type":"jpeg","mime_type":"image/jpeg","is_image":true,"is_video":false,"is_url":false,"in_use":true,"created_at":"2026-07-06T20:08:20.465977Z","updated_at":"2026-07-06T20:08:20.465977Z"},{"id":83322115,"display_name":"1_Cow-Hollow-Eclectic-Kitchen.jpg","name":"1_Cow-Hollow-Eclectic-Kitchen.jpg","hash":"G3021611842235832493038852977977","width":2247,"height":1500,"file_size":366112,"file_size_human":"357.5KB","file_type":"jpg","mime_type":"image/jpeg","is_image":true,"is_video":false,"is_url":false,"in_use":true,"created_at":"2026-07-06T20:31:46.807775Z","updated_at":"2026-07-06T20:31:46.807775Z"}
15,{"id":83498406,"display_name":"4_Noe_Valley_Edwardian_Library.jpg","name":"4_Noe_Valley_Edwardian_Library.jpg","hash":"Q3026327369237848673035805865273","width":1500,"height":1875,"file_size":392498,"file_size_human":"383.3KB","file_type":"jpg","mime_type":"image/jpeg","is_image":true,"is_video":false,"is_url":false,"in_use":true,"created_at":"2026-07-09T19:32:15.932323Z","updated_at":"2026-07-09T19:32:15.932323Z"},{"id":83504493,"display_name":"2_Los_Altos_Modern_Great_Room.jpg","name":"2_Los_Altos_Modern_Great_Room.jpg","hash":"Y3026467443150126348766656935225","width":1500,"height":1004,"file_size":246640,"file_size_human":"240.9KB","file_type":"jpg","mime_type":"image/jpeg","is_image":true,"is_video":false,"is_url":false,"in_use":true,"created_at":"2026-07-09T21:38:49.731829Z","updated_at":"2026-07-09T21:38:49.731829Z"},{"id":83513155,"display_name":"Form_Field-Saverglass-Napa_Headquarters-Waiting_Area_Detail.jpg","name":"Form_Field-Saverglass-Napa_Headquarters-Waiting_Area_Detail.jpg","hash":"E3026770704523645129412020059253","width":1106,"height":1760,"file_size":236014,"file_size_human":"230.5KB","file_type":"jpg","mime_type":"image/jpeg","is_image":true,"is_video":false,"is_url":false,"in_use":true,"created_at":"2026-07-10T02:12:48.775001Z","updated_at":"2026-07-10T02:12:48.775001Z"},{"id":83604191,"display_name":"Form_Field-Oakland-Sweet_July-Ayesha_Curry-Kitchen.jpg","name":"Form_Field-Oakland-Sweet_July-Ayesha_Curry-Kitchen.jpg","hash":"I3030016999642138868535312039029","width":1600,"height":963,"file_size":181654,"file_size_human":"177.4KB","file_type":"jpg","mime_type":"image/jpeg","is_image":true,"is_video":false,"is_url":false,"in_use":true,"created_at":"2026-07-12T03:05:50.986244Z","updated_at":"2026-07-12T03:05:50.986244Z"},{"id":83605371,"display_name":"Form_Field-San_Francisco_Eichler-Breakfast_Nook.jpg","name":"Form_Field-San_Francisco_Eichler-Breakfast_Nook.jpg","hash":"I3030073738414261945479815806069","width":1106,"height":1760,"file_size":261884,"file_size_human":"255.7KB","file_type":"jpg","mime_type":"image/jpeg","is_image":true,"is_video":false,"is_url":false,"in_use":true,"created_at":"2026-07-12T03:57:06.760218Z","updated_at":"2026-07-12T03:57:06.760218Z"},{"id":83605871,"display_name":"Form_Field-Los_Altos_Hills_Tudor-Living_Room.jpeg","name":"Form_Field-Los_Altos_Hills_Tudor-Living_Room.jpeg","hash":"L3030107751148174349657210141813","width":1500,"height":1289,"file_size":259944,"file_size_human":"253.9KB","file_type":"jpeg","mime_type":"image/jpeg","is_image":true,"is_video":false,"is_url":false,"in_use":true,"created_at":"2026-07-12T04:27:50.531972Z","updated_at":"2026-07-12T04:27:50.531972Z"},{"id":83640820,"display_name":"9_Clarendon_Heights_Contemporary_Living_Room_Lamp.jpg","name":"9_Clarendon_Heights_Contemporary_Living_Room_Lamp.jpg","hash":"L3031560285112748244939586452597","width":1500,"height":1875,"file_size":274962,"file_size_human":"268.5KB","file_type":"jpg","mime_type":"image/jpeg","is_image":true,"is_video":false,"is_url":false,"in_use":true,"created_at":"2026-07-13T02:20:12.519024Z","updated_at":"2026-07-13T02:20:12.519024Z"},{"id":83731812,"display_name":"ff-callout-where-form-begins.svg","name":"ff-callout-where-form-begins.svg","hash":"Y3033967826091951455924798698809","width":171,"height":150,"file_size":5211,"file_size_human":"5.1KB","file_type":"svg","mime_type":"image/svg+xml","is_image":true,"is_video":false,"is_url":false,"in_use":false,"created_at":"2026-07-14T14:35:25.996102Z","updated_at":"2026-07-14T14:35:25.996102Z"},{"id":83731813,"display_name":"ff-callout-paying-attention.svg","name":"ff-callout-paying-attention.svg","hash":"P3033967826073504711851089147193","width":224,"height":150,"file_size":4290,"file_size_human":"4.2KB","file_type":"svg","mime_type":"image/svg+xml","is_image":true,"is_video":false,"is_url":false,"in_use":false,"created_at":"2026-07-14T14:35:25.998022Z","updated_at":"2026-07-14T14:35:25.998022Z"},{"id":83731814,"display_name":"ff-callout-form-find-feeling.svg","name":"ff-callout-form-find-feeling.svg","hash":"E3033967826036611223703670043961","width":224,"height":150,"file_size":3394,"file_size_human":"3.3KB","file_type":"svg","mime_type":"image/svg+xml","
15is_image":true,"is_video":false,"is_url":false,"in_use":false,"created_at":"2026-07-14T14:35:26.006493Z","updated_at":"2026-07-14T14:35:26.006493Z"},{"id":83731816,"display_name":"ff-callout-material-memory.svg","name":"ff-callout-material-memory.svg","hash":"T3033967826055057967777379595577","width":171,"height":150,"file_size":6041,"file_size_human":"5.9KB","file_type":"svg","mime_type":"image/svg+xml","is_image":true,"is_video":false,"is_url":false,"in_use":false,"created_at":"2026-07-14T14:35:26.010805Z","updated_at":"2026-07-14T14:35:26.010805Z"},{"id":84007848,"display_name":"00-HERO-SOMA-Space-Opera-Guest-Room-Hero.jpg","name":"00-HERO-SOMA-Space-Opera-Guest-Room-Hero.jpg","hash":"Y3042855385520014518770398182517","width":2880,"height":1921,"file_size":431286,"file_size_human":"421.2KB","file_type":"jpg","mime_type":"image/jpeg","is_image":true,"is_video":false,"is_url":false,"in_use":true,"created_at":"2026-07-20T04:25:21.175857Z","updated_at":"2026-07-20T04:25:21.175857Z"}],"tags":[],"access_level":"public"}}},"sets":{"byId":{"root":{"id":"root","title":"Root","purl":null,"page_type":"set","content":"","local_css":null,"display":false,"stack":false,"pin":false,"overlay":false,"password_enabled":false,"page_count":13,"page_design_options":null,"backdrops":null,"pin_options":{},"overlay_options":{},"thumb_media_id":null,"thumbnail":null,"thumb_meta":{},"media":[],"tags":[],"access_level":"public"},"M0232165722":{"id":"M0232165722","title":"Project","purl":"project","page_type":"set","content":"","local_css":null,"display":true,"stack":false,"pin":false,"overlay":false,"password_enabled":false,"page_count":16,"page_design_options":null,"backdrops":null,"pin_options":{},"overlay_options":{},"thumb_media_id":null,"thumbnail":null,"thumb_meta":[],"media":[],"tags":[],"access_level":"public"},"D1176231124":{"id":"D1176231124","title":"FieldNote","purl":"fieldnote","page_type":"set","content":"","local_css":null,"display":true,"stack":false,"pin":false,"overlay":false,"password_enabled":false,"page_count":70,"page_design_options":null,"backdrops":null,"pin_options":{},"overlay_options":{},"thumb_media_id":null,"thumbnail":null,"thumb_meta":[],"media":[],"tags":[],"access_level":"public"}}},"media":{"data":[]},"css":{"id":1449862,"stylesheet":"/* Site tokens */\n:root {\n    --ff-sand: #E6CAB8;\n    --ff-paper: #faf8f8;\n    --ff-blue: #3D5AFE;\n    --ff-ink: #000000;\n    --ff-highlight: rgba(255, 255, 0, 0.30);\n    --ff-highlight-hover: rgba(255, 255, 0, 0.45);\n    --ff-form-ink: #3d3d3d;\n    --ff-form-line: #111111;\n    --ff-font: \"Favorit Variable\", \"Favorit\", Arial, sans-serif;\n--ff-font-mono: \"Favorit Variable\", \"Favorit\", monospace;    --ff-font-diatype: \"Diatype Variable\";\n    --ff-grain-image: url(\"https://freight.cargo.site/t/original/i/D3015126079544655064318932235577/GRAIN-11.png\");\n}\n\n/* Variables that are overridable on a page-by-page basis */\n:root {\n    --ff-body-background: var(--ff-paper);\n    --ff-body-grain-opacity: 0.18;\n    --ff-newsletter-display: block;\n}\n\n/* Animation for noise jitter */\n@keyframes localNoiseJitter {\n\n    0%,\n    100% {\n        background-position: 0 0;\n    }\n\n    10% {\n        background-position: -2% -3%;\n    }\n\n    20% {\n        background-position: -6% 2%;\n    }\n\n    30% {\n        background-position: 3% -8%;\n    }\n\n    40% {\n        background-position: 8% 8%;\n    }\n\n    50% {\n        background-position: -8% 3%;\n    }\n\n    60% {\n        background-position: 6% 2%;\n    }\n\n    70% {\n        background-position: 0 5%;\n    }\n\n    80% {\n        background-position: 8% 12%;\n    }\n\n    90% {\n        background-position: -4% 4%;\n    }\n}\n\nbody {\n    position: relative;\n    background-color: var(--ff-body-background) !important;\n}\n\n/* \nThis is the one implementation of the noise that should be used. \nIf overrides are needed, use variables that can be added on a \npage-by-page basis.\n*/\n\nbody::before {\n    content: \"\" !important;\n    position: absolute !important;\n    inset: 0 !important;\n    z-index: 1 !important;\n    pointer-events: none !important;\n    opacity: var(--ff-body-grain-opacity) !important;\n    background-image: var(--ff-grain-image) !important;\n    background-repeat: repeat !important;\n    background-size: 140px 140px !important;\n    mix-blend-mode: multiply !important;\n    animation: localNoiseJitter 0.2s steps(4) infinite !important;\n}\n\n/* This allows the content to sit above the noise */\n.content {\n    position: relative;\n    z-index: 1;\n}\n\n\n/* Set min-height for page */\n.pages {\n    .page {\n        min-height: var(--viewport-height);\n    }\n}\n\n\n/* \nField Notes specific styles. \nEverything is scoped to the HTML in the content having a \n.field-notes-entry container\n*/\n\n.field-notes-entry {\n\n    /* COLOR */\n    *,\n    a,\n    bodycopy,\n    h1,\n    h2,\n    .caption,\n    media-item::part(caption),\n    media-item::part(caption-background) {\n        color: var(--ff-blue) !important;\n    }\n\n    h2 {\n        text-transform: uppercase !important;\n    }\n\n    /* HERO */\n    .project-hero {\n        width: 100% !important;\n        aspect-ratio: 2 / 1 !important;\n        overflow: hidden !important;\n        margin: 0 !important;\n\n        media-item {\n            display: block !important;\n            width: 100% !important;\n            height: 100% !important;\n        }\n    }\n\n    .project-hero media-item::part(figure),\n    .project-hero media-item::part(frame),\n    .project-hero media-item::part(sizing-frame),\n    .project-hero media-item::part(media),\n    .project-hero media-item::part(image) {\n        width: 100% !important;\n        height: 100% !important;\n    }\n\n    .project-hero media-item::part(figure),\n    .project-hero media-item::part(frame),\n    .project-hero media-item::part(sizing-frame) {\n        display: flex !important;\n        align-items: center !important;\n        justify-content: center !important;\n        overflow: hidden !important;\n    }\n\n    .project-hero media-item::part(media),\n    .project-hero media-item::part(image),\n    .project-hero media-item img,\n    .project-hero media-item video {\n        width: 100% !important;\n        height: 100% !important;\n        max-width: none !important;\n        max-height: none !important;\n        object-fit: cover !important;\n        object-position: 50% 50% !important;\n    }\n\n    .project-hero-single {\n        display: block !important;\n    }\n\n    .project-hero-diptych {\n        display: grid !important;\n        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n        gap: 2rem !important;\n    }\n\n    .mobile & .project-hero {\n        aspect-ratio: 4 / 3 !important;\n    }\n\n    .mobile & .project-hero-diptych {\n        grid-template-columns: 1fr !important;\n        aspect-ratio: auto !important;\n    }\n\n    .mobile & .project-hero-diptych media-item {\n        aspect-ratio: 4 / 3 !important;\n    }\n\n    /* LINKS */\n    a,\n    a:link,\n    a:visited,\n    .linked,\n    [href] {\n        color: inherit !important;\n        text-decoration: none !important;\n        background: var(--ff-highlight) !important;\n        padding: 0 0.10em !important;\n        box-decoration-break: clone !important;\n        -webkit-box-decoration-break: clone !important;\n\n        &:hover,\n        &:focus {\n            background: var(--ff-highlight-hover) !important;\n            text-decoration-color: rgba(255, 255, 0, 0.65) !important;\n        }\n    }
15\n\n    /* DELETE when simple-nav is gone */\n    a.simple-nav,\n    a.simple-nav:link,\n    a.simple-nav:visited,\n    a.simple-nav:hover,\n    a.simple-nav:active,\n    .simple-nav a,\n    .simple-nav a:link,\n    .simple-nav a:visited,\n    .simple-nav a:hover,\n    .simple-nav a:active {\n        background: transparent !important;\n        background-image: none !important;\n        box-shadow: none !important;\n        text-decoration: none !important;\n        padding: 0 !important;\n    }\n}\n\n\n/* ========================================================\n   CARGO BASE\n   ======================================================== */\n\nhtml {\n    --mobile-scale: 1;\n    --mobile-padding-offset: 0.74;\n}\n\nbody {\n    --swatch-1: rgba(0, 0, 0, 0.85);\n    --swatch-2: rgba(0, 0, 0, 0.75);\n    --swatch-3: rgba(0, 0, 0, 0.6);\n    --swatch-4: rgba(0, 0, 0, 0.4);\n    --swatch-5: rgba(0, 0, 0, 0.25);\n}\n\na:active,\n.linked:active,\n.zoomable::part(media):active {\n    opacity: 0.7;\n}\n\nsub {\n    position: relative;\n    vertical-align: baseline;\n    top: 0.3em;\n}\n\nsup {\n    position: relative;\n    vertical-align: baseline;\n    top: -0.4em;\n}\n\n.small-caps {\n    font-variant: small-caps;\n    text-transform: lowercase;\n}\n\nol {\n    margin: 0;\n    padding: 0 0 0 2.5em;\n}\n\nul {\n    margin: 0;\n    padding: 0 0 0 2.0em;\n}\n\nul.lineated {\n    padding: 0;\n    list-style-type: none;\n    margin: 0 0 0 3em;\n    text-indent: -3em;\n}\n\nblockquote {\n    margin: 0;\n    padding: 0 0 0 2em;\n}\n\nhr {\n    background: rgba(0, 0, 0, 0.6);\n    border: 0;\n    height: 1px;\n    display: block;\n    margin-top: 1rem;\n    margin-bottom: 1rem;\n}
15\n\n.page-layout {\n    align-items: flex-start;\n    max-width: 100%;\n}\n\n.page-content {\n    padding: 2rem;\n    text-align: center;\n}\n\n\n/* ========================================================\n   TYPE\n   ======================================================== */\n\nbodycopy,\nh1,\nh2,\n.caption,\n.callout-a,\n.simple-nav,\n.fieldnotes-intro,\n.fieldnotes-body,\n.indented,\n.project-info-body {\n    font-family: var(--ff-font);\n    font-style: normal;\n    letter-spacing: 0;\n    display: block;\n    font-variation-settings: 'slnt' 0;\n}\n\n.captions-fieldnotes,\n.heading-2-sentence-case {\n    font-family: var(--ff-font-mono);\n    font-style: normal;\n    letter-spacing: 0em;\n    display: block;\n}\n\n.filednotes-entry-callout,\n.caption-fieldnotes {\n    font-family: var(--ff-font-mono);\n    font-style: normal;\n    letter-spacing: 0;\n    display: block;\n}\n\nbodycopy a,\nh1 a,\nh2 a,\n.caption a,\n.simple-nav a,\n.captions-fieldnotes a,\n.fieldnotes-intro a,\n.fieldnotes-body a,\n.filednotes-entry-callout a,\n.heading-2-sentence-case a,\n.caption-fieldnotes a,\n.project-info-body a {\n    color: var(--ff-ink);\n    text-decoration: none;\n}\n\nbodycopy {\n    font-size: 1.5rem;\n    font-weight: 350;\n    color: var(--ff-ink);\n    line-height: 1.3;\n    font-family: \"Favorit Variable\";\n    font-style: normal;\n    font-variation-settings: 'slnt' 0;\n}\n\n.mobile bodycopy {\n    font-size: 1.95rem;\n}\n\nh1 {\n    font-weight: 350;\n    margin: 0;\n    font-size: 4.5rem;\n    line-height: 1;\n    color: var(--ff-ink);\n}\n\n.mobile h1 {\n    font-size: 4rem;\n}\n\nh2 {\n    font-weight: 400;\n    margin: 0;\n    color: var(--ff-ink);\n    font-size: 2.25rem;\n    line-height: 1.1;\n}\n\n.mobile h2 {\n    font-size: 2.5rem;\n}\n\n.caption {\n    font-size: 1.5rem;\n    font-weight: 350;\n    color: var(--ff-ink);\n    line-height: 1.2;\n}\n\n.mobile .caption {\n    font-size: 1.7rem;\n}\n\n.caption a {\n    text-decoration: none !important;\n}\n\nmedia-item .caption {\n    margin-top: 1em;\n}\n\ngallery-grid .caption,\ngallery-columnized .caption,\ngallery-justify .caption {\n    margin-bottom: 2em;\n}\n\n[thumbnail-index] .caption {\n    text-align: center;\n}\n\n[thumbnail-index] .caption .tags {\n    margin-top: 0.25em;\n}\n\n.callout-a {\n    --text-style: \"Callout A\";\n    font-size: 8.00rem;\n    font-weight: 350;\n    color: rgba(0, 0, 0, 0.75);\n    line-height: 1.1em;\n}\n\n.mobile .callout-a {\n    font-size: 5.95rem;\n}\n\n.callout-a a {\n    color: rgba(0, 0, 0, 0.75);\n    text-decoration: none;\n}\n\n.simple-nav {\n    --text-style: \"Simple Nav\";\n    font-size: 1.25rem;\n    font-weight: 400;\n    color: var(--ff-ink);\n    line-height: 1.3;\n}\n\n.mobile .simple-nav {\n    font-size: 1.5rem;\n}\n\n.captions-fieldnotes {\n    --text-style: \"Captions FieldNotes\";\n    font-size: 1.4rem;\n    font-weight: 420;\n    color: var(--ff-ink);\n    line-height: 1.3;\n}\n\n.fieldnotes-intro {\n    --text-style: \"FieldNotes Intro\";\n    font-size: 3.25rem;\n    font-weight: 350;\n    color: var(--ff-ink);\n    line-height: 1.3;\n}\n\n.fieldnotes-body {\n    --text-style: \"FieldNotes Body\";\n    font-size: 1.5rem;\n    font-weight: 350;\n    color: var(--ff-ink);\n    line-height: 1.4;\n}\n\n.mobile .fieldnotes-body {\n    font-size: 1.95rem;\n}\n\n.filednotes-entry-callout {\n    --text-style: \"FiledNotes Entry Callout\";\n    font-size: 4.75rem;\n    font-weight: 300;\n    color: var(--ff-ink);\n    line-height: 1.3;\n}\n\n.mobile .filednotes-entry-callout {\n    font-size: 4.55rem;\n}\n\n.heading-2-sentence-case {\n    --text-style: \"Heading 2 Sentence Case\";\n    font-size: 1.4rem;\n    font-weight: 420;\n    color: var(--ff-ink);\n    line-height: 1.3;\n}\n\n.caption-fieldnotes {\n    --text-style: \"Caption - FieldNotes\";\n    font-size: 1.1rem;\n    font-weight: 400;\n    color: var(--ff-ink);\n    line-height: 1.3;\n}\n\n.mobile .caption-fieldnotes {\n    font-size: 1.54rem;\n}\n\n.indented {\n    padding-left: 30px;\n    --text-style: \"Intented\";\n    font-size: 1.5rem;\n    font-weight: 350;\n    color: rgba(0, 0, 0, 0.4);\n    line-height: 1.3;\n}\n\n.mobile .indented {\n    font-size: 1.6rem;\n}\n\n.indented a {\n    color: rgba(0, 0, 0, 0.4);\n    text-decoration: none;\n}\n\n.project-info-body {\n    --text-style: \"Project Info Body\";\n    font-size: 1.25rem;\n    font-weight: 350;\n    color: var(--ff-ink);\n    line-height: 1.3;\n}\n\n.mobile .project-info-body {\n    font-size: 1.6rem;\n}\n\n\n/* ========================================================\n   MEDIA, QUICK VIEW, SHOP, AUDIO\n   ======================================================== */\n\nmedia-item {\n    --scroll-animation: scrollAnimationFlyIn-3;\n    --scroll-animation-timing: cubic-bezier(0.39, 0.575, 0.565, 1);\n    --scroll-animation-mode: animation;\n}\n\nmedia-item::part(media) {\n    border: 0;\n    padding: 0;\n}\n\n@keyframes scrollAnimationFlyIn-3 {\n    0% {\n        transform: translateY(20vh);\n    }\n\n    35%,\n    65%,\n    100% {\n        transform: scale(1);\n    }\n}\n\n.quick-view {\n    height: 100%;\n    width: 100%;\n    padding: 5rem;\n    margin: auto;\n}\n\n.quick-view-background {\n    background-color: #ffffff;\n}\n\n.quick-view .caption {\n    color: rgba(255, 255, 255, 1.0);\n    padding: 20px 0;\n    text-align: center;\n    transition: 100ms opacity ease-in-out;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n}\n\n.quick-view .caption-background {\n    padding: 0.5rem 1rem;\n    display: inline-block;\n    background: rgba(0, 0, 0, 0.5);\n    border-radius: .5rem;\n    text-align: left;\n    max-width: 50rem;\n}\n\n.mobile .quick-view {\n    width: 100%;\n    height: 100%;\n    margin: 0;\n    padding: 10px;\n}\n\n.mobile .quick-view .caption {\n    padding: 10px 0;\n}\n\n.favorit-mono {\n\t--text-style: \"favorit-mono\";\n\tfont-family: var(--ff-font);\n\tfont-style: normal;\n\tletter-spacing: 0;\n\tdisplay: block;\n\tfont-variation-settings: 'slnt' 0;\n}\n\n.favorit-mono a {\n\tcolor: var(--ff-ink);\n\ttext-decoration: none;\n}\n\n.favorit-mono {\n\t--text-style: \"favorit-mono\";\n\tfont-size: 1.5rem;\n\tfont-weight: 350;\n\tcolor: var(--ff-ink);\n\tline-height: 1.3;\n\tfont-family: \"Favorit Variable\";\n\tfont-style: normal;\n\tfont-variation-settings: 'slnt' 0;\n}\n\n.mobile .favorit-mono {\n\tfont-size: 1.95rem;\n}\n\n\n\n.mobile .quick-view .caption-background {\n    max-width: 100vw;\n}
15\n\n::part(slideshow-nav) {\n    --button-size: 30px;\n    --button-inset: 20px;\n    --button-icon-color: rgba(255, 255, 255, 0.9);\n    --button-icon-stroke-width: 1.5px;\n    --button-icon-stroke-linecap: none;\n    --button-background-color: rgba(87, 87, 87, 0.35);\n    --button-background-radius: 50%;\n    --button-active-opacity: 0.7;\n}\n\ngallery-slideshow::part(slideshow-nav) {\n    --button-inset: 15px;\n}\n\n.mobile ::part(slideshow-nav) {\n    --button-inset: 10px;\n}\n\n.mobile .quick-view::part(slideshow-nav) {\n    --button-inset: 25px;\n}\n\nshop-product {\n    font-size: 1.2rem;\n    max-width: 22rem;\n    font-family: var(--ff-font-mono);\n    font-style: normal;\n    font-weight: 400;\n    letter-spacing: 0em;\n    margin-bottom: 1em;\n}\n\nshop-product::part(price) {\n    color: rgba(0, 0, 0, 0.75);\n    line-height: 1.1;\n    margin-bottom: 0.5em;\n}\n\nshop-product::part(dropdown) {\n    width: 100%;\n    color: rgba(0, 0, 0, 0.85);\n    border: 1px solid rgba(0, 0, 0, 0.2);\n    background-color: rgba(255, 255, 255, 0.0);\n    background-image: url(https://static.cargo.site/assets/images/select-line-arrows.svg);\n    background-repeat: no-repeat;\n    background-position: top 0em right .1em;\n    line-height: 1.2;\n    padding: 0.58em 2em 0.55em 0.9em;\n    border-radius: 10em;\n    margin-bottom: 0.5em;\n}\n\nshop-product::part(button) {\n    background: rgba(0, 0, 0, 0.15);\n    color: rgba(0, 0, 0, 0.75);\n    text-align: left;\n    line-height: normal;\n    padding: 0.5em 1em;\n    cursor: pointer;\n    border-radius: 10em;\n}\n\nshop-product::part(button):active {\n    opacity: .7;\n}\n\naudio-player {\n    --text-color: rgba(0, 0, 0, 0.85);\n    --text-padding: 0 1.2em 0 1.0em;\n    --background-color: rgba(255, 255, 255, 0);\n    --buffer-background-color: rgba(0, 0, 0, 0.03);\n    --progress-background-color: rgba(0, 0, 0, 0.075);\n    --border-lines: 1px solid rgba(0, 0, 0, 0.2);\n    font-size: 1.2rem;\n    width: 32rem;\n    height: 2.75em;\n    font-family: var(--ff-font-mono);\n    font-style: normal;\n    font-weight: 400;\n    line-height: normal;\n    letter-spacing: 0em;\n    margin-bottom: 0.5em;\n    border-radius: 10em;\n}\n\naudio-player::part(button) {\n    --icon-color: rgba(0, 0, 0, 0.85);\n    --icon-size: 32%;\n    --play-text: '';\n    --pause-text: '';\n    width: 3.15em;\n    display: inline-flex;\n    justify-content: center;\n    cursor: pointer;\n}\n\naudio-player::part(play-icon) {\n    padding-left: 0.6em;\n}\n\naudio-player::part(pause-icon) {\n    padding-left: 0.4em;\n}\n\naudio-player::part(progress-indicator) {\n    border-right: 1px solid rgba(0, 0, 0, 0);\n    height: 100%;\n    cursor: ew-resize;\n}\n\naudio-player::part(separator) {\n    border-right: var(--border-lines);\n}\n\nbody.mobile audio-player {\n    max-width: 100%;\n}\n\n\n/* ========================================================\n   HOME, NAV, LAYOUT\n   ======================================================== */\n\nhtml,\nbody,\n.cargo-site,\n.site-container,\n.page-container,\n.content-container,\n.page {\n    margin: 0 !important;\n    padding: 0 !important;\n    max-width: 100% !important;\n    width: 100% !important;\n}\n\n.page:has(.home-hero-viewport) {\n    min-height: var(--viewport-height);\n}\n\n.page-layout:has(.home-hero-viewport),\n.page-content:has(.home-hero-viewport) {\n    padding: 0 !important;\n}\n\n.page-content:has(.home-hero-viewport) {\n    align-items: flex-start;\n    overflow-x: hidden !important;\n}\n\n.home-hero-viewport {\n    position: relative;\n    width: 100vw !important;\n    max-width: none !important;\n    height: 101vh !important;\n    left: auto;\n    right: auto;\n    margin-top: 0 !important;\n    margin-right: calc(50% - 50vw) !important;\n    margin-left: calc(50% - 50vw) !important;\n    overflow: hidden;\n}\n\n.hero-bg-frame,\n.hero-bg-frame img {\n    width: 100% !important;\n    height: 100% !important;\n    object-fit: cover !important;\n}\n\n.hero-graphic-overlay {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    z-index: 10;\n    width: 35vw;\n    max-width: 400px;\n    display: flex;\n    justify-content: center;
15\n    align-items: center;\n}\n\n.breathing-logo,\n.breathing-logo svg {\n    width: 100%;\n    height: 100%;\n    display: block;\n}\n\n.breathing-logo svg path {\n    fill: #2f52d9;\n    animation: ffBlueBreathe 9s ease-in-out infinite;\n}\n\n@keyframes ffBlueBreathe {\n\n    0%,\n    100% {\n        fill: #2F52D9;\n    }\n\n    50% {\n        fill: #5D7EFF;\n    }\n}\n\n.main-content-canvas {\n    width: 100vw;\n    position: relative;\n    left: 50%;\n    margin-left: -50vw;\n    padding: 100px 0;\n    box-sizing: border-box;\n}\n\n.fixed-nav-bar {\n    position: fixed !important;\n    top: 0.75rem !important;\n    left: 50% !important;\n    transform: translateX(-50%) !important;\n    width: auto !important;\n    max-width: 95vw !important;\n    background-color: var(--ff-highlight) !important;\n    backdrop-filter: blur(4px) !important;\n    z-index: 9999 !important;\n    box-sizing: border-box !important;\n    margin: 0 !important;\n    text-align: center !important;\n    padding: 3px 8px 2px !important;\n}\n\n.nav-links {\n    display: flex !important;\n    justify-content: center !important;\n    align-items: center !important;\n    gap: 28px !important;\n    width: auto !important;\n    margin: 0 !important;\n    padding: 0 !important;\n}\n\n.nav-row {\n    display: contents !important;\n}\n\n.nav-item {\n    text-decoration: none !important;\n    color: var(--ff-ink) !important;\n    font-family: var(--ff-font) !important;\n    font-size: 1.125rem !important;\n    letter-spacing: 0.02em !important;\n    font-weight: 350 !important;\n    white-space: nowrap !important;\n    transition: opacity 0.2s ease !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    line-height: 1 !important;\n}\n\n.nav-item:hover {\n    opacity: 0.6 !important;\n}\n\n@media (max-width: 767px) {\n    .fixed-nav-bar {\n        width: auto !important;\n        max-width: 95vw !important;\n        background-color: transparent !important;\n        backdrop-filter: none !important;\n        padding: 0 !important;\n    }\n\n    .nav-links {\n        display: flex !important;\n        flex-direction: column !important;\n        align-items: center !important;\n        gap: 1rem !important;\n    }\n\n    .nav-item {\n        font-size: 2.0rem !important;\n    }\n\n    .nav-row {\n        display: flex !important;\n        justify-content: center !important;\n        align-items: center !important;\n        gap: 28px !important;\n        width: max-content !important;\n        max-width: 95vw !important;\n        padding: 3px 8px 2px !important;\n        background-color: var(--ff-highlight) !important;\n        backdrop-filter: blur(4px) !important;\n        box-sizing: border-box !important;\n    }\n}\n\n.header-spacer {\n    height: 80px;\n}\n\n\n/* Project hero — square crop on mobile (non-Field Notes pages) */\nbody.mobile .project-hero {\n    aspect-ratio: auto !important;\n    height: auto !important;\n    overflow: visible !important;\n}\n\nbody.mobile .project-hero media-item {\n    height: auto !important;\n}\n\nbody.mobile .project-hero media-item::part(figure) {\n    height: auto !important;\n}\n\nbody.mobile .project-hero media-item::part(sizing-frame) {\n    width: 100% !important;\n    height: auto !important;\n    aspect-ratio: 1 / 1 !important;\n    overflow: hidden !important;\n}\n\nbody.mobile .project-hero media-item::part(media),\nbody.mobile .project-hero media-item::part(image),\nbody.mobile .project-hero media-item img,\nbody.mobile .project-hero media-item video {\n    width: 100% !important;\n    height: 100% !important;\n    object-fit: cover !important;\n    object-position: center top !important;\n}\n\n\n/* ========================================================\n   NEWSLETTER POPUP\n   Winning styles from the stacked patches, collapsed to one set.\n   ======================================================== */\n\n.ff-newsletter[hidden],\n.ff-newsletter__response-frame {\n    display: none !important;\n}\n\n.ff-newsletter {\n    --ff-popup-paper: #f3efec;\n    --ff-popup-ink: #000000;\n    --ff-popup-border: #000000;\n    --ff-popup-overlay: rgba(20, 17, 15, 0.48);\n    position: fixed;\n    inset: 0;\n    z-index: 2147483000;\n    pointer-events: none;\n    visibility: hidden;\n    font-family: var(--ff-font-mono);\n}\n\n.ff-newsletter.is-visible {\n    pointer-events: auto;\n    visibility: visible;\n}\n\nhtml.ff-newsletter-is-open,\nhtml.ff-newsletter-is-open body {\n    overflow: hidden !important;\n}\n\n.ff-newsletter__backdrop {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    padding: 0;\n    border: 0;\n    border-radius: 0;\n    background: var(--ff-popup-overlay);\n    cursor: default;\n    opacity: 0;\n    transition: opacity 360ms ease;\n}\n\n.ff-newsletter__panel {\n    position: absolute;\n    right: 32px;\n    bottom: 32px;\n    box-sizing: border-box;\n    width: 664px;\n    min-height: 888px;\n    margin: 0;\n    color: var(--ff-popup-ink);\n    background: var(--ff-popup-paper);\n    border: 1px solid var(--ff-popup-border);\n    opacity: 0;\n    transform-origin: right bottom;\n    transform: translateY(22px) scale(0.63);\n    transition: opacity 360ms ease, transform 360ms cubic-bezier(.22, .61, .36, 1);\n}\n\n.ff-newsletter.is-visible .ff-newsletter__backdrop,\n.ff-newsletter.is-visible .ff-newsletter__panel {\n    opacity: 1;\n}\n\n.ff-newsletter.is-visible .ff-newsletter__panel {\n    transform: translateY(0) scale(0.63);\n}\n\n.ff-newsletter .ff-newsletter__content {\n    box-sizing: border-box !important;\n    min-height: 886px !important;\n    padding: 109px 39px 38px !important;\n}\n\n.ff-newsletter .ff-newsletter__close {\n    position: absolute;\n    top: -1px;\n    right: -1px;\n    width: 90px !important;\n    height: 90px !important;\n    padding: 0;\n    border: 1px solid var(--ff-popup-border) !important;\n    border-radius: 0;\n    color: var(--ff-popup-ink) !important;\n    background: var(--ff-popup-paper);\n    cursor: pointer;\n}\n\n.ff-newsletter__close span::before,\n.ff-newsletter__close span::after {\n    content: \"\";\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 37px !important;\n    height: 1px !important;\n    background: currentColor;\n}\n\n.ff-newsletter__close span::before {\n    transform: translate(-50%, -50%) rotate(45deg);\n}\n\n.ff-newsletter__close span::after {\n    transform: translate(-50%, -50%) rotate(-45deg);\n}\n\n.ff-newsletter .ff-newsletter__title {\n    margin: 0 !important;\n    color: var(--ff-ink) !important;\n    font-family: var(--ff-font) !important;\n    font-size: 64px !important;\n    font-weight: 400 !important;\n    line-height: 64px !important;\n    letter-spacing: 0 !important;\n    text-transform: uppercase !important;\n}\n\n.ff-newsletter .ff-newsletter__description {\n    max-width: none !important;\n    margin: 49px 0 0 !important;\n    color: var(--ff-ink) !important;\n    font-family: var(--ff-font) !important;\n    font-size: 36px !important;\n    font-weight: 400 !important;\n    line-height: 42px !important;\n    letter-spacing: 0 !important;\n}\n\n.ff-newsletter .ff-newsletter__form {\n    margin-top: 49px !important;\n}\n\n.ff-newsletter__honeypot {\n    position: absolute !important;\n    width: 1px !important;\n    height: 1px !important;\n    padding: 0 !important;\n    margin: -1px !important;\n    overflow: hidden !important;\n    clip: rect(0, 0, 0, 0) !important;\n    white-space: nowrap !important;\n    border: 0 !important;\n}\n\n.ff-newsletter .ff-newsletter__label {\n    position: static !important;\n    display: block !important;\n    width: auto !important;\n    height: auto !important;\n    margin: 0 0 12px !important;\n    padding: 0 !important;\n    overflow: visible !important;\n    clip: auto !important;\n    white-space: normal !important;\n    border: 0 !important;\n    color: var(--ff-form-ink) !important;\n    font-family: var(--ff-font) !important;\n    font-size: 30px !important;\n    font-weight: 400 !important;\n    line-height: 1 !important;\n    letter-spacing: 0 !important;\n}\n\n.ff-newsletter .ff-newsletter__email,\n.ff-newsletter .ff-newsletter__submit {\n    box-sizing: border-box !important;\n    height: 51px !important;\n    color: var(--ff-form-ink) !important;\n    background: transparent !important;\n    border: 1.5px solid #000000 !important;\n    border-radius: 0 !important;\n    box-shadow: none !important;\n    font-family: var(--ff-font) !important;\n    font-size: 30px !important;\n    font-weight: 400 !important;\n    line-height: 1 !important;\n    letter-spacing: 0 !important;\n    appearance: none !important;\n    -webkit-appearance: none !important;\n}\n\n.ff-newsletter .ff-newsletter__email,\n.ff-newsletter .ff-newsletter__email:focus {\n    height: 68px !important;\n    border: 2px solid #000000 !important;\n}\n\n.ff-newsletter .ff-newsletter__email,\n.ff-newsletter .ff-newsletter__email:focus {\n    width: 100% !important;\n    padding: 0 14px !important;\n    border: 1.5px solid #000000 !important;\n    outline: 0 !important;\n    outline-offset: 0 !important;\n    box-shadow: none !important;\n}\n\n.ff-newsletter .ff-newsletter__email::placeholder {\n    color: #8b8b8b !important;\n    opacity: 1 !important;\n}\n\n.ff-newsletter .ff-newsletter__email[aria-invalid=\"true\"] {\n    border-color: #9a2f24;\n}\n\n.ff-newsletter__close:focus-visible,\n.ff-newsletter__submit:focus-visible {\n    outline: 2px solid var(--ff-popup-ink);\n    outline-offset: 2px;\n}\n\n.ff-newsletter .ff-newsletter__submit {\n    display: block;\n    width: 220px !important;\n    margin-top: 54px !important;\n    padding: 1px 16px 0 !important;\n    text-transform: uppercase !important;\n    cursor: pointer !important;\n    transition: color 160ms ease, background-color 160ms ease;\n}\n\n.ff-newsletter .ff-newsletter__submit:hover {\n    color: var(--ff-popup-paper) !important;\n    background: #000000 !important;\n}\n\n.ff-newsletter .ff-newsletter__submit:disabled {\n    cursor: default !important;\n    opacity: 1 !important;\n}\n\n.ff-newsletter .ff-newsletter__message {\n    min-height: 1em !important;\n    margin: 10px 0 0 !important;\n    color: var(--ff-ink) !important;\n    font-family: var(--ff-font) !important;\n    font-size: 19px !important;\n    font-weight: 400 !important;\n    line-height: 1.15 !important;\n    text-transform: uppercase !important;\n}
15\n\n.ff-newsletter__message:empty {\n    display: none;\n}\n\n.ff-newsletter .ff-newsletter__privacy {\n    margin-top: 71px !important;\n    color: var(--ff-ink) !important;\n    font-family: var(--ff-font) !important;\n    font-size: 20px !important;\n    font-weight: 400 !important;\n    line-height: 1.2 !important;\n    letter-spacing: 0.01em;\n    text-align: center;\n}\n\n@media (max-width: 700px) {\n    .ff-newsletter .ff-newsletter__panel {\n        top: 50% !important;\n        right: auto !important;\n        bottom: auto !important;\n        left: 50% !important;\n        width: 664px !important;\n        min-height: 888px !important;\n        max-width: none !important;\n        max-height: none !important;\n        overflow: visible !important;\n        transform-origin: center center !important;\n        transform: translate(-50%, calc(-50% + 14px)) scale(0.54) !important;\n    }\n\n    .ff-newsletter.is-visible .ff-newsletter__panel {\n        transform: translate(-50%, -50%) scale(0.54) !important;\n    }\n\n    .ff-newsletter .ff-newsletter__form {\n        margin-top: 36px !important;\n    }\n\n    .ff-newsletter .ff-newsletter__label {\n        margin-bottom: 14px !important;\n        color: var(--ff-ink) !important;\n        font-size: 32px !important;\n        line-height: 1.15 !important;\n    }\n\n    .ff-newsletter .ff-newsletter__email,\n    .ff-newsletter .ff-newsletter__submit {\n        height: 64px !important;\n        font-size: 32px !important;\n    }\n\n    .ff-newsletter .ff-newsletter__email {\n        padding: 0 16px !important;\n    }\n\n    .ff-newsletter .ff-newsletter__email::placeholder {\n        color: #5a5a5a !important;\n    }\n\n    .ff-newsletter .ff-newsletter__submit {\n        width: 220px !important;\n        margin-top: 38px !important;\n        padding: 2px 16px 0 !important;\n    }\n\n    .ff-newsletter .ff-newsletter__privacy {\n        font-size: 32px !important;\n    }\n}\n\n@media (max-width: 374px) {\n    .ff-newsletter .ff-newsletter__panel {\n        transform: translate(-50%, calc(-50% + 14px)) scale(0.49) !important;\n    }\n\n    .ff-newsletter.is-visible .ff-newsletter__panel {\n        transform: translate(-50%, -50%) scale(0.49) !important;\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n\n    .ff-newsletter__backdrop,\n    .ff-newsletter__panel {\n        transition-duration: 1ms;\n    }\n}\n\n\n/* ========================================================\n   BASIN FORM\n   ======================================================== */\n\n.ff-form-embed {\n    width: 100%;\n    max-width: 42rem;\n    margin: 0;\n    padding-top: 1.5rem;\n    color: var(--ff-form-ink);\n    font: inherit;\n    letter-spacing: 0;\n}\n\n.ff-form-embed label,\n.ff-form-embed legend {\n    display: block;\n    margin: 0 0 1.8rem;\n    padding: 0 0 0 0.7em;\n    border: 0;\n    line-height: 1.18;\n    font-weight: 400;\n}\n\n.ff-form-embed fieldset {\n    display: block;\n    margin: 2.6rem 0 1.8rem;\n    padding: 0;\n    border: 0;\n}\n\n.ff-form-embed legend {\n    margin-bottom: 1.55rem;\n}\n\n.ff-form-embed span,\n.ff-field-note {\n    color: var(--ff-form-ink);\n    font: inherit;\n}\n\n.ff-form-embed .ff-field-note {\n    display: block !important;\n    box-sizing: border-box !important;\n    max-width: 34rem;\n    margin-top: .5rem;\n}\n\n.ff-form-embed input[type=\"text\"],\n.ff-form-embed input[type=\"email\"],\n.ff-form-embed select,\n.ff-form-embed textarea {\n    display: block;\n    width: 100%;\n    margin-top: 0.7rem;\n    margin-left: -0.7em;\n    padding: 0.9rem;\n    border: 1px solid var(--ff-form-line);\n    border-radius: 0;\n    background-color: transparent;\n    color: var(--ff-form-ink);\n    font: inherit;\n    line-height: 1;\n    box-sizing: border-box;\n}\n\n.ff-form-embed textarea {\n    height: 10rem;\n}\n\n.ff-form-embed input::placeholder {\n    color: var(--ff-form-ink);\n    opacity: 1;\n}\n\n.ff-form-embed select {\n    appearance: none;\n    background-image:\n        linear-gradient(45deg, transparent 50%, #111 50%),\n        linear-gradient(135deg, #111 50%, transparent 50%);\n    background-position:\n        calc(100% - 1.85rem) 50%,\n        calc(100% - 1.35rem) 50%;\n    background-size: 0.55rem 0.55rem, 0.55rem 0.55rem;\n    background-repeat: no-repeat;\n    cursor: pointer;\n}\n\n.ff-form-embed input:focus,\n.ff-form-embed select:focus,\n.ff-form-embed button:focus-visible {\n    outline: 1px solid var(--ff-form-line);\n    outline-offset: 3px;\n}\n\n.ff-form-embed fieldset label {\n    padding-left: 0 !important;\n    display: flex;
15\n    align-items: flex-start;\n    gap: 0.5rem;\n    margin-bottom: 1rem;\n\n    input[type=\"radio\"],\n    input[type=\"checkbox\"] {\n        flex: 0 0 auto;\n        margin-top: 0.1em;\n        margin-left: 0;\n        margin-right: .3em;\n    }\n}\n\n.ff-form-embed input[type=\"checkbox\"] {\n    appearance: none;\n    -webkit-appearance: none;\n    width: 0.72em;\n    height: 0.72em;\n    margin: 0 0.45rem 0 0.05rem;\n    border: 1px solid var(--ff-form-line);\n    border-radius: 2px;\n    background: transparent;\n    vertical-align: -0.05em;\n}\n\n.ff-form-embed input[type=\"checkbox\"]:checked {\n    background: var(--ff-form-line);\n}\n\n.ff-form-embed input[type=\"radio\"] {\n    appearance: none;\n    -webkit-appearance: none;\n    background-color: transparent;\n    width: 0.72em;\n    height: 0.72em;\n    border: 1px solid var(--ff-form-line);\n    border-radius: 50%;\n    margin-right: 0.45rem;\n    transform: translateY(1px);\n}\n\n.ff-form-embed input[type=\"radio\"]:checked {\n    background: var(--ff-form-line);\n}\n\n.ff-form-embed input[type=\"radio\"]:focus-visible {\n    outline: 1px solid var(--ff-form-line);\n    outline-offset: 2px;\n}\n\n.ff-form-embed button {\n    min-width: 10.4rem;\n    margin-top: 0.45rem;\n    padding: 0 1.5rem;\n    border: 1px solid var(--ff-form-line);\n    border-radius: 0;\n    background: transparent;\n    color: var(--ff-form-ink);\n    font: inherit;\n    font-family: inherit;\n    font-weight: inherit;\n    text-align: center;\n    cursor: pointer;\n}\n\n.ff-form-embed button[type=\"submit\"] {\n    box-sizing: border-box !important;\n    padding-top: 2px !important;\n}\n\n.ff-form-embed button:hover {\n    background: var(--ff-form-line);\n    color: var(--ff-paper);\n}\n\n.ff-form-embed input,\n.ff-form-embed select {\n    font-family: inherit;\n    font-weight: inherit;\n}\n\nbody.mobile .ff-form-embed input[type=\"checkbox\"] {\n    width: 0.9em !important;\n    height: 0.9em !important;\n}\n\n@media (max-width: 767px) {\n\n    .ff-form-embed,\n    .ff-form-embed label,\n    .ff-form-embed legend,\n    .ff-form-embed .ff-field-note,\n    .ff-form-embed input[type=\"text\"],\n    .ff-form-embed input[type=\"email\"],\n    .ff-form-embed select,\n    .ff-form-embed button,\n    .ff-form-embed textarea {\n        font-family: var(--ff-font) !important;\n        font-size: 17px !important;\n        line-height: 1.3 !important;\n    }\n\n    .ff-form-embed input[type=\"checkbox\"] {\n        width: 0.9em !important;\n        height: 0.9em !important;\n    }\n}\n\n\n/* ========================================================\n   PROJECT DRAWERS\n   Remove the hide block to restore drawer galleries.\n   ======================================================== */\n\n/* CORE PROJECT DRAWER */\n\n.project-info-drawer-anchor {\n    position: relative !important;\n    top: auto !important;\n    width: 100% !important;\n    height: 0 !important;\n    margin-bottom: clamp(4rem, 6vw, 8rem) !important;\n    z-index: 9999 !important;\n    pointer-events: none !important;\n}\n\nbody.mobile .project-info-drawer-anchor {\n    margin-bottom: 3rem !important;\n}\n\n@media (max-width: 767px) {\n    .project-info-drawer-anchor {\n        margin-bottom: 3rem !important;\n    }\n}\n\n.project-info-drawer {\n    --drawer-tab: 30px;\n    --drawer-width: clamp(420px, 33.333vw, 640px);\n    position: absolute !important;\n    top: 0 !important;\n    right: calc(50% - 50vw) !important;\n    bottom: auto !important;\n    width: var(--drawer-width) !important;\n    height: auto !important;\n    min-height: 100vh !important;\n    max-height: none !important;\n    overflow: visible !important;\n    box-sizing: border-box !important;\n    transform: translateX(calc(100% - var(--drawer-tab))) !important;\n    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1) !important;\n    background: #d8ff21 !important;\n    color: #000000 !important;\n    box-shadow: -1px 0 0 rgba(0, 0, 0, 0.18) !important;\n    z-index: 9999 !important;\n    pointer-events: auto !important;\n}\n\n.project-info-drawer:not([open]) {\n    width: var(--drawer-width) !important;\n    height: auto !important;\n    min-height: 100vh !important;\n    overflow: visible !important;\n    transform: translateX(calc(100% - var(--drawer-tab))) !important;\n}\n\n.project-info-drawer[open] {\n    height: auto !important;\n    min-height: 100vh !important;\n    overflow: visible !important;\n    transform: translateX(0) !important;\n}\n\n.project-info-drawer summary {\n    position: absolute !important;\n    inset: 0 auto auto 0 !important;\n    display: block !important;\n    width: var(--drawer-tab) !important;\n    height: 100vh !important;\n    min-height: 100vh !important;\n    margin: 0 !important;\n    padding: 16px 6px !important;\n    box-sizing: border-box !important;\n    cursor: pointer !important;\n    list-style: none !important;\n    background: #d8ff21 !important;\n    writing-mode: vertical-rl !important;\n    text-orientation: mixed !important;\n    text-transform: uppercase !important;\n    font-family: \"Favorit Variable\", \"Favorit\", Arial, sans-serif !important;\n    font-size: 14px !important;\n    line-height: 1 !important;\n    font-weight: 350 !important;\n    z-index: 2 !important;\n}\n\n.project-info-drawer summary::-webkit-details-marker {\n    display: none !important;\n}\n\n.project-info-drawer-panel {\n    width: calc(100% - var(--drawer-tab)) !important;\n    height: auto !important;\n    min-height: 100vh !important;\n    max-height: none !important;\n    margin-left: var(--drawer-tab) !important;\n    padding: clamp(24px, 2vw, 32px) !important;\n    box-sizing: border-box !important;\n    overflow: visible !important;\n    font-family: \"Favorit Variable\", \"Favorit\", Arial, sans-serif !important;\n    font-size: 16px !important;\n    line-height: 1.25 !important;\n    font-weight: 350 !important;\n}\n\n.project-info-section {\n    padding-top: 1em !important;\n    border-top: 1px solid rgba(0, 0, 0, 0.55) !important;\n}\n\n.project-info-press,\n.project-info-description {\n    margin-top: 1.25em !important;\n}\n\n.project-info-drawer a,\n.project-info-drawer a:link,\n.project-info-drawer a:visited {\n    color: #000000 !important;\n    text-decoration: none !important;\n}\n\n.project-info-slideshow {\n    display: block !important;\n    width: 100% !important;\n    max-width: 100% !important;\n    min-width: 0 !important;\n    margin-top: 1.25em !important;\n    padding-top: 1em !important;\n    border-top: 1px solid rgba(0, 0, 0, 0.55) !important;\n    overflow: hidden !important;\n}\n\nbody.mobile .project-info-drawer {\n    --drawer-width: calc(100vw - 1rem);\n    right: calc(50% - 50vw) !important;\n}\n\nbody.mobile .project-info-drawer-panel {\n    padding: 24px 18px 32px !important;\n    font-size: 1.2rem !important;\n    line-height: 1.3 !important;\n}\n\n\n/* PROJECT DRAWER — CSS-ONLY THIN CLOSE ICON */\n\n.project-info-drawer>summary::after {\n    content: \"\" !important;\n    display: none !important;\n}\n\n.project-info-drawer[open]>summary::after {\n    content: \"\" !important;\n    display: block !important;\n    position: absolute !important;\n    top: 8px !important;\n    left: 8px !important;\n    right: auto !important;\n    z-index: 20 !important;\n    box-sizing: border-box !important;\n    width: 34px !important;\n    height: 34px !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    background:\n        linear-gradient(45deg,\n            transparent calc(50% - 0.75px),\n            #000 calc(50% - 0.5px),\
15n            #000 calc(50% + 0.5px),\n            transparent calc(50% + 0.75px)),\n        linear-gradient(-45deg,\n            transparent calc(50% - 0.75px),\n            #000 calc(50% - 0.5px),\n            #000 calc(50% + 0.5px),\n            transparent calc(50% + 0.75px)) !important;\n    background-size: 12px 12px !important;\n    background-position: center !important;\n    background-repeat: no-repeat !important;\n    cursor: pointer !important;\n}\n\nbody.mobile .project-info-drawer[open]>summary::after {\n    top: 3px !important;\n    left: 3px !important;\n    width: 40px !important;\n    height: 40px !important;\n    background-size: 10px 10px !important;\n}\n\n@media (max-width: 767px) {\n    .project-info-drawer[open]>summary::after {\n        top: 14px !important;\n        left: 14px !important;\n        width: 40px !important;\n        height: 40px !important;\n        background-size: 24px 24px !important;\n    }\n}\n\n.project-info-drawer .project-info-description:has(> gallery-slideshow.project-info-slideshow) {\
15n    display: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n}\n\n.project-info-drawer gallery-slideshow.project-info-slideshow {\n    display: none !important;\n}\n\n.project-info-drawer.drawer-sm {\n    --drawer-desktop-height: 41rem;\n    --drawer-mobile-height: 51rem;\n}\n\n.project-info-drawer.drawer-md {\n    --drawer-desktop-height: 49rem;\n    --drawer-mobile-height: 57rem;\n}\n\n.project-info-drawer.drawer-lg {\n    --drawer-desktop-height: 57rem;\n    --drawer-mobile-height: 63rem;\n}\n\n@media (min-width: 768px) {\n\n    body:not(.mobile) .project-info-drawer:is(.drawer-sm, .drawer-md, .drawer-lg),\n    body:not(.mobile) .project-info-drawer:is(.drawer-sm, .drawer-md, .drawer-lg)>.project-info-drawer-panel {\n        height: auto !important;\n        min-height: var(--drawer-desktop-height) !important;\n        max-height: none !important;\n    }\n\n    body:not(.mobile) .project-info-drawer:is(.drawer-sm, .drawer-md, .drawer-lg)>summary {\n        top: 0 !important;\n        bottom: 0 !important;\n        height: auto !important;\n        min-height: 0 !important;\n    }\n}\n\nbody.mobile .project-info-drawer:is(.drawer-sm, .drawer-md, .drawer-lg),\nbody.mobile .project-info-drawer:is(.drawer-sm, .drawer-md, .drawer-lg)>.project-info-drawer-panel {\n    height: auto !important;\n    min-height: var(--drawer-mobile-height) !important;\n    max-height: none !important;\n}\n\nbody.mobile .project-info-drawer:is(.drawer-sm, .drawer-md, .drawer-lg)>summary {\n    top: 0 !important;\n    bottom: 0 !important;\n    height: auto !important;\n    min-height: 0 !important;\n}\n\n@media (max-width: 767px) {\n\n    .project-info-drawer:is(.drawer-sm, .drawer-md, .drawer-lg),\n    .project-info-drawer:is(.drawer-sm, .drawer-md, .drawer-lg)>.project-info-drawer-panel {\n        height: auto !important;\n        min-height: var(--drawer-mobile-height) !important;\n        max-height: none !important;\n    }\n\n    .project-info-drawer:is(.drawer-sm, .drawer-md, .drawer-lg)>summary {\n        top: 0 !important;\n        bottom: 0 !important;\n        height: auto !important;\n        min-height: 0 !important;\n    }\n}\n\n/* ========================================================\n   PROJECT PAGE COMPOSITION\n   ======================================================== */\n\n/* DESKTOP / MOBILE COMPOSITION SWITCH */\n\n.mobile-project-gallery,\n.mobile-editorial-bridge {\n    display: none !important;\n}\n\nbody.mobile .desktop-project-gallery,\nbody.mobile .project-gallery-section,\nbody.mobile .editorial-bridge {\n    display: none !important;\n}\n\nbody.mobile .mobile-project-gallery {\n    display: block !important;\n}\n\nbody.mobile .mobile-editorial-bridge {\n    display: grid !important;\n}\n\n@media (max-width: 767px) {\n\n    .desktop-project-gallery,\n    .project-gallery-section,\n    .editorial-bridge {\n        display: none !important;\n    }\n\n    .mobile-project-gallery {\n        display: block !important;\n    }\n\n    .mobile-editorial-bridge {\n        display: grid !important;\n    }\n}\n\n@media (min-width: 768px) {\n\n    .mobile-project-gallery,\n    .mobile-editorial-bridge {\n        display: none !important;\n    }\n}\n\n\n/* FREEFORM GALLERY + EDITORIAL BRIDGES */\n\n.project-gallery-section,\n.editorial-bridge {\n    width: 100% !important;\n    margin: 0 !important;\n}\n\n.editorial-bridge {\n    align-items: center !important;\n    margin-top: 6rem !important;\n    margin-bottom: 8rem !important;\n}\n\n.editorial-bridge column-unit {\n    min-width: 0 !important;\n}\n\n.editorial-callout {\n    width: 100% !important;\n    box-sizing: border-box !important;\n    text-align: left !important;\n}\n\n.editorial-bridge-gallery {\n    width: 100% !important;\n    min-height: 28vw !important;\n    margin: 0 !important;\n}\n\n.project-footer-nav {\n    position: relative !important;\n    z-index: 10000 !important;\n}\n\n\n/* ========================================================\n   NEWSLETTER DRAWER\n   ======================================================== */\n\n.newsletter-drawer-anchor {\n    display: var(--ff-newsletter-display);\n    position: relative !important;\n    width: 100% !important;\n    height: 11rem !important;\n    margin: 0 0 12px !important;\n    z-index: 9999 !important;\n    pointer-events: none !important;\n}\n\n.newsletter-drawer {\n    --newsletter-tab: 30px;\n    --newsletter-width: clamp(420px, 44vw, 800px);\n    position: absolute !important;\n    top: 0 !important;\n    right: calc(50% - 50vw) !important;\n    width: var(--newsletter-width) !important;\n    height: 11rem !important;\n    margin: 0 !important;\n    box-sizing: border-box !important;\n    overflow: visible !important;\n    transform: translateX(calc(100% - var(--newsletter-tab))) !important;\n    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1) !important;\n    background: #d8ff21 !important;\n    color: var(--ff-ink) !important;\n    box-shadow: -1px 0 0 rgba(0, 0, 0, 0.18) !important;\n    z-index: 9999 !important;\n    pointer-events: auto !important;\n}\n\n.newsletter-drawer:not([open]) {\n    transform: translateX(calc(100% - var(--newsletter-tab))) !important;\n}\n\n.newsletter-drawer[open] {\n    transform: translateX(0) !important;\n}\n\n.newsletter-drawer>summary {\n    position: absolute !important;\n    inset: 0 auto auto 0 !important;\n    display: flex !important;
15\n    align-items: center !important;\n    justify-content: center !important;\n    width: var(--newsletter-tab) !important;\n    height: 100% !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    box-sizing: border-box !important;\n    overflow: hidden !important;\n    list-style: none !important;\n    cursor: pointer !important;\n    caret-color: transparent !important;\n    background: #d8ff21 !important;\n    color: var(--ff-ink) !important;\n    writing-mode: vertical-rl !important;\n    text-orientation: mixed !important;\n    text-transform: uppercase !important;\n    white-space: nowrap !important;\n    font-family: var(--ff-font) !important;\n    font-size: 14px !important;\n    line-height: 1 !important;\n    font-weight: 350 !important;\n    z-index: 2 !important;\n}\n\n.newsletter-drawer>summary::-webkit-details-marker {\n    display: none !important;\n}\n\n.newsletter-drawer>summary::marker {\n    content: \"\" !important;\n    display: none !important;\n}\n\n.newsletter-drawer-panel {\n    display: flex !important;\n    align-items: center !important;\n    width: calc(100% - var(--newsletter-tab)) !important;\n    height: 100% !important;\n    margin-left: var(--newsletter-tab) !important;\n    padding: 24px 32px !important;\n    box-sizing: border-box !important;\n}\n\n.newsletter-drawer .footer-newsletter {\n    position: relative !important;\n    z-index: 1 !important;\n    width: 100% !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    box-sizing: border-box !important;\n    color: var(--ff-ink) !important;\n    text-align: left !important;\n    font-family: var(--ff-font) !important;\n}\n\n.newsletter-drawer .footer-newsletter-label {\n    display: block !important;\n    width: 100% !important;\n    margin: 0 0 9px !important;\n    padding: 0 !important;\n    color: var(--ff-ink) !important;\n    text-align: left !important;\n    font: inherit !important;\n    font-size: clamp(14px, 1.05vw, 18px) !important;\n    line-height: 1.15 !important;\n    font-weight: 400 !important;\n    letter-spacing: 0 !important;\n}\n\n.newsletter-drawer .footer-newsletter-row {\n    display: grid !important;\n    grid-template-columns: minmax(0, 1fr) auto !important;\n    width: 100% !important;\n    margin: 0 !important;\n    padding: 0 !important;\n}\n\n.newsletter-drawer .footer-newsletter-email,\n.newsletter-drawer .footer-newsletter-submit {\n    appearance: none !important;\n    -webkit-appearance: none !important;\n    box-sizing: border-box !important;\n    height: 42px !important;\n    margin: 0 !important;\n    border: 1px solid var(--ff-form-line) !important;\n    border-radius: 0 !important;\n    background: transparent !important;\n    color: var(--ff-form-ink) !important;\n    font-family: var(--ff-font) !important;\n    font-size: 15px !important;\n    line-height: 1 !important;\n    font-weight: 400 !important;\n    letter-spacing: 0 !important;\n}\n\n.newsletter-drawer .footer-newsletter-email {\n    width: 100% !important;\n    min-width: 0 !important;\n    padding: 0 10px !important;\n    border-right: 0 !important;\n    outline: none !important;\n}\n\n.newsletter-drawer .footer-newsletter-email::placeholder {\n    color: #5a5a5a !important;\n    opacity: 1 !important;\n}\n\n.newsletter-drawer .footer-newsletter-email:focus {\n    outline: 1px solid var(--ff-form-line) !important;\n    outline-offset: -2px !important;\n}\n\n.newsletter-drawer .footer-newsletter-submit {\n    width: auto !important;\n    min-width: 96px !important;\n    padding: 2px 15px 0 !important;\n    flex: none !important;\n    cursor: pointer !important;\n}\n\n.newsletter-drawer .footer-newsletter-message {\n    min-height: 1em !important;\n    margin-top: 6px !important;\n    font-size: 12px !important;\n    line-height: 1.15 !important;\n}\n\n.newsletter-drawer .footer-newsletter-message:empty {\n    display: none !important;\n}\n\n.newsletter-drawer[open]>summary {\n    overflow: visible !important;\n    color: transparent !important;\n    font-size: 0 !important;\n}\n\n.newsletter-drawer>summary::after {\n    content: \"\" !important;\n    display: none !important;\n}\n\n.newsletter-drawer[open]>summary::after {\n    content: \"\" !important;\n    display: block !important;\n    position: absolute !important;\n    top: 8px !important;\n    left: 8px !important;\n    right: auto !important;\n    width: 34px !important;\n    height: 34px !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    background:\n        linear-gradient(45deg,\n            transparent calc(50% - 0.75px),\n            #000 calc(50% - 0.5px),\
15n            #000 calc(50% + 0.5px),\n            transparent calc(50% + 0.75px)),\n        linear-gradient(-45deg,\n            transparent calc(50% - 0.75px),\n            #000 calc(50% - 0.5px),\n            #000 calc(50% + 0.5px),\n            transparent calc(50% + 0.75px)) !important;\n    background-size: 12px 12px !important;\n    background-position: center !important;\n    background-repeat: no-repeat !important;\n    cursor: pointer !important;\n    z-index: 20 !important;\n}\n\nbody.mobile .newsletter-drawer-anchor {\n    margin: 0 0 12px !important;\n}\n\nbody.mobile .newsletter-drawer {\n    --newsletter-tab: 22px;\n    top: 0 !important;\n    right: calc(50% - 50vw) !important;\n    width: calc(100vw - 1rem) !important;\n    height: 14rem !important;\n}\n\nbody.mobile .newsletter-drawer>summary {\n    font-size: 12px !important;\n}\n\nbody.mobile .newsletter-drawer-panel {\n    padding: 24px 18px 20px !important;\n}\n\nbody.mobile .newsletter-drawer .footer-newsletter-label {\n    font-size: 15px !important;\n}\n\nbody.mobile .newsletter-drawer .footer-newsletter-submit {\n    min-width: 88px !important;\n    padding-left: 10px !important;\n    padding-right: 10px !important;\n}\n\nbody.mobile .newsletter-drawer[open]>summary {\n    overflow: visible !important;\n    color: transparent !important;\n    font-size: 0 !important;\n}\n\nbody.mobile .newsletter-drawer[open]>summary::after {\n    left: 0 !important;\n}\n\nbody.mobile .newsletter-drawer .footer-newsletter {\n    transform: translateY(-0.75rem) !important;\n}\n\n@media (max-width: 767px) {\n    .newsletter-drawer-anchor {\n        height: 14rem !important;\n        margin: 4rem 0 12px !important;\n    }\n\n    .newsletter-drawer {\n        --newsletter-tab: 22px;\n        top: 0 !important;\n        right: calc(50% - 50vw) !important;\n        width: calc(100vw - 1rem) !important;\n        height: 14rem !important;\n    }\n\n    .newsletter-drawer>summary {\n        font-size: 12px !important;\n    }\n\n    .newsletter-drawer-panel {\n        padding: 24px 18px 20px !important;\n    }\n\n    .newsletter-drawer .footer-newsletter-label {\n        font-size: 15px !important;\n    }\n\n    .newsletter-drawer .footer-newsletter-submit {\n        min-width: 88px !important;\n        padding-left: 10px !important;\n        padding-right: 10px !important;\n    }\n\n    .newsletter-drawer[open]>summary {\n        overflow: visible !important;\n        color: transparent !important;\n        font-size: 0 !important;\n    }\n\n    .newsletter-drawer[open]>summary::after {\n        left: 0 !important;\n    }\n\n    .newsletter-drawer .footer-newsletter {\n        transform: translateY(-0.75rem) !important;\n    }\n}\n\n\n\n\n.contact-page-content {\n\tpadding:0 30px;\n}\n\nbutton[disabled] {\n    opacity: .5 !important;\n    cursor: pointer;\n    \n    &:hover,\n    &:focus {\n\t\tbackground: none;\n        color: var(--ff-form-ink) !important;\n\t}\n}","created_at":"2022-09-15T23:40:11.000000Z","updated_at":"2026-09-29T03:27:07.000000Z"},"siteDesign":{"images":{"scale":"100%","limit_by":"width","image_zoom":true,"image_full_zoom":false,"scroll_animation":"css","scroll_transition":false,"limit_vertical_images":false,"mobile_image_width_maximize":false},"quick_view":{"show_ui":true,"captions":false,"close_on_scroll":false,"contentAlignVertical":"middle","contentAlignHorizontal":"center"},"site":{"enableColorFilter":false,"enableHomeLinkActiveStates":false,"enablePageTransition":false,"pageTransitionIntensity":2,"is_feed":false},"cart":{"theme":"light"},"contact_form":{"theme":"light"},"mobile_adjustments":{"view":"desktop","zoom":"21","padding":"-6","formatting":false,"pages_full_width":true,"images_full_width":true,"responsive_columns":"1","responsive_thumbnails_padding":"0.7"}},"frontendState":{"hasSiteModel":true,"hasScaffolding":true,"hasSiteDesign":true,"hasSiteCSS":true,"hasShopModel":false,"hasSitePackage":true,"pointerType":"mouse","quickView":{"mode":"default","inited":false,"autoScrolling":false,"elementArray":false,"activeIndex":0,"startingIndex":0},"contactForm":{"transition":false,"inited":false},"adminMode":false,"inAdminFrame":false,"renderedPages":[],"pwProtectedOverlays":[],"networkErrors":[],"pageNotFound":false,"fontsLoaded":["Favorit Variable"],"lastVisiblePid":null,"hostname":"formandfield.com","activePID":"B3004925598"},"commerce":{"products":{},"cart":{},"shop":{}}}</script>
15
16			
17
18		<style id="static-css">@keyframes page-transition-out{from{opacity:1}to{opacity:0}}@keyframes page-transition-in{from{opacity:0}to{opacity:1}}html:where([page-transition-intensity]){background-color:var(--site-background-color)}::view-transition{pointer-events:none;background-color:var(--site-background-color)}html[page-transition-intensity="1"]{--page-transition-out-duration: 120ms;--page-transition-in-duration: 160ms;--page-transition-join: -0.75;--page-transition-out-ease: ease-in-out;--page-transition-in-ease: ease-in}html[page-transition-intensity="2"]{--page-transition-out-duration: 175ms;--page-transition-in-duration: 220ms;--page-transition-join: -0.25;--page-transition-out-ease: ease-in-out;--page-transition-in-ease: ease-in}html[page-transition-intensity="3"]{--page-transition-out-duration: 230ms;--page-transition-in-duration: 280ms;--page-transition-join: 0.25;--page-transition-out-ease: ease-in-out;--page-transition-in-ease: ease-in}::view-transition-old(root){animation-name:page-transition-out;animation-duration:var(--page-transition-out-duration);animation-timing-function:var(--page-transition-out-ease);animation-fill-mode:both}::view-transition-new(root){animation-name:page-transition-in;animation-duration:var(--page-transition-in-duration);animation-timing-function:var(--page-transition-in-ease);animation-delay:max(0ms,var(--page-transition-out-duration)*(1 + var(--page-transition-join)));animation-fill-mode:both}.page{--pin-view-transition-name: none}html.page-transition-active .page.pinned.fixed,html.page-transition-active .page.pinned.overlay{view-transition-name:var
18(--pin-view-transition-name, none)}html.page-transition-hold::view-transition-old(root),html.page-transition-hold::view-transition-new(root){animation-play-state:paused}html.page-transition-hold::view-transition-group(*){animation-play-state:paused}html.page-transition-hold::view-transition-image-pair(*){animation-play-state:paused}html.page-transition-hold::view-transition-old(*){animation-play-state:paused}html.page-transition-hold::view-transition-new(*){animation-play-state:paused}@keyframes page-transition-overlay-exit{from{opacity:1;transform:translate3d(0, 0, 0);clip-path:var(--overlay-close-content-from-clip-mask, none)}to{opacity:var(--overlay-close-to-opacity, 1);transform:var(--overlay-close-content-to-transform, translate3d(0, 0, 0));clip-path:var(--overlay-close-content-to-clip-mask, none)}}html:has(body.editing)::-webkit-scrollbar{display:none !important}body.editing::-webkit-scrollbar{display:none !important}html:has(body.editing){-ms-overflow-style:none;scrollbar-width:none}body.editing{-ms-overflow-style:none;scrollbar-width:none}body.wf-initial-load *,html.wf-initial-load *{color:transparent !important;-webkit-text-stroke:0px transparent;text-stroke:0 transparent;text-shadow:0 0 transparent}html.wf-initial-load hr{background:none !important}body{--baseColor-accent: #FF0000;--baseColor-accent-rgb: 255, 0, 0;--baseColor-accent-reverse-rgb: 255, 255, 255}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:focus{outline:0}select,select *{text-rendering:auto !important}html,body{min-height:var(--viewport-height, 100vh);margin:0;padding:0}html{--mobile-scale: 1;font-size:var(--base-size);touch-action:manipulation;position:relative}html.mobile{font-size:calc(var(--base-size)*var(--mobile-scale))}body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:none;display:flex;flex-direction:column;width:100%;min-height:var(--viewport-height, 100vh);justify-content:flex-start;margin:0;padding:0;background-color:#fff;--noise-image: url("https://static.cargo.site/assets/C3/images/noise.png");--noise-bg-amount: 0;--noise-images-amount: 0;--noise-density-size: 256px;position:relative}body.no-scroll{overflow:hidden}customhtml>*{position:relative;z-index:10}.page a.active,bodycopy * a{text-decoration-color:unset;-webkit-text-decoration-color:unset}.content{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;min-height:100%;position:relative;flex-grow:1;border-color:transparent;border-width:0}.pages{width:100%;flex:1 0 auto}@supports(height: 100svh){.page.stacked-page:not(.fixed){--viewport-height: 100svh}.page.stacked-page+.page.stacked-page:not(.fixed){--viewport-height: 100vh}body.mobile .content:has(.stacked-page) .page.pinned.overlay:not(.fixed){--viewport-height: 100svh}}.overlay-content{mix-blend-mode:var(--overlay-mix, normal)}.page{--split-backdrop-height: calc(var(--min-viewport-height) / 2);--split-content-height: calc(var(--viewport-height) - var(--split-backdrop-height));--noise-bg-amount: 0;--noise-images-amount: 0;--noise-density-size: 256px;position:relative;isolation:isolate;display:flex;justify-content:center;flex-wrap:nowrap;flex-direction:row;max-width:100%;width:100%;flex:0;mix-blend-mode:var(--page-mix, normal)}.page.has-backdrop-filter{background-color:rgba(0, 0, 0, 0.01);backdrop-filter:var(--page-backdrop-filter, none);-webkit-backdrop-filter:var(--page-backdrop-filter, none)}.overlay-content .page{mix-blend-mode:unset}.overlay-content .page::after{content:" ";display:block;position:fixed;width:100dvw;height:100dvh;top:0;left:0;z-index:-1}.overlay-content.is-passthrough-overlay .page::after{display:none}.mobile .page{flex-wrap:wrap}.mobile .page.fixed{--viewport-height: 100dvh}.page.overlay{position:absolute}.page.pinned-top,.page.pinned-bottom{flex:0;z-index:2;left:0;right:0}.page.pinned-bottom{transform:unset}.page.pinned-bottom.loading{will-change:transform;transform:translate(0, 0, 0)}.page.pinned-top{top:0}.page.pinned-bottom{bottom:0}.page.fixed{position:fixed;max-height:var(--viewport-height, 100vh)}.page.fixed .page-layout{max-height:var(--viewport-height, 100vh)}.page.fixed.allow-scroll .page-content{max-height:var(--viewport-height, 100vh);scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;overflow-y:auto;overflow-x:hidden;align-items:flex-start !important}.page.fixed.allow-scroll .page-content{pointer-events:auto}.page.fixed.allow-scroll .page-content::-webkit-scrollbar{width:0;background:0 0;display:none}.page.overlay{position:absolute}.page.overlay,.page.overlay .page-layout,.page.fixed,.page.fixed .page-layout{pointer-events:none}body.editing .page.overlay .page-content,body.editing .page.overlay .page-content *,body.editing .page.fixed .page-content,body.editing .page.fixed .page-content *,body.editing .page.fixed.allow-scroll .page-content,body.editing .page.fixed.allow-scroll .page-content *,body.editing .page:not([editing=true]){-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}body.editing .page.overlay[editing=true] .page-content,body.editing .page.overlay[editing=true] .page-content *,body.editing .page.fixed[editing=true] .page-content,body.editing .page.fixed[editing=true] .page-content *,body.editing .page.fixed.allow-scroll[editing=true] .page-content,body.editing .page.fixed.allow-scroll[editing=true] .page-content *{pointer-events:auto;-moz-user-select:auto;-webkit-user-select:auto;-ms-user-select:auto;user-select:auto}.page.fixed .page-content bodycopy a,.page.overlay .page-content bodycopy a,.page.fixed .page-content bodycopy img,.page.overlay .page-content bodycopy img,.page.fixed .page-content bodycopy iframe,.page.overlay .page-content bodycopy iframe,.page.fixed .page-content bodycopy video,.page.overlay .page-content bodycopy video,.page.fixed .page-content bodycopy audio,.page.overlay .page-content bodycopy audio,.page.fixed .page-content bodycopy input,.page.overlay .page-content bodycopy input,.page.fixed .page-content bodycopy button,.page.overlay .page-content bodycopy button,.page.fixed .page-content bodycopy audio-player,.page.overlay .page-content bodycopy audio-player,.page.fixed .page-content bodycopy shop-product,.page.overlay .page-content bodycopy shop-product,.page.fixed .page-content bodycopy details,.page.overlay .page-content bodycopy details,.page.overlay .page-content bodycopy .linked,.page.overlay .page-content bodycopy .zoomable,.page.fixed .page-content bodycopy .linked,.page.fixed .page-content bodycopy .zoomable,.page.fixed .page-content bodycopy gallery-slideshow,.page.overlay .page-content bodycopy gallery-slideshow{pointer-events:auto}.page-layout{flex-grow:1;position:relative;display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;width:0%;mix-blend-mode:var(--page-layout-mix, normal)}.page-content{display:flex;flex-direction:row;height:100%;align-items:flex-start;border-color:transparent;border-width:0;width:100%;filter:var(--page-content-filter, none);-webkit-filter:var(--page-content-filter, none)}.page-content{position:relative;isolation:isolate;--noise-bg-amount: 0;--noise-scale: 1}.page-content.has-content-backdrop-filter{backdrop-filter:var(--page-content-backdrop-filter, none);-webkit-backdrop-filter:var(--page-content-backdrop-filter, none)}.page,.page-content,.content{--noise-bg-alpha: var(--noise-bg-color-alpha, 1)}.page::before,.page-content::before{content:"";display:block;position:absolute;inset:0;pointer-events:none;z-index:-1;border-radius:inherit;background-image:var(--noise-image),var(--noise-image),var(--noise-image);background-repeat:repeat;background-size:calc(var(--noise-density-size, 256px)*var(--noise-scale, 1));background-position:0 0;opacity:calc(var(--noise-bg-amount, 0)*var(--noise-bg-alpha, 1)*1)}.content::before{content:"";display:block;position:absolute;inset:0;pointer-events:none;background-image:var(--noise-image),var(--noise-image),var(--noise-image);background-repeat:repeat;background-size:calc(var(--noise-density-size, 256px)*var(--noise-scale, 1));background-position:0 0;opacity:calc(var(--noise-bg-amount, 0)*var(--noise-bg-alpha, 1)*1)}.page.has-backdrop-filter::before,.page-content.has-content-backdrop-filter::before{background-blend-mode:normal;opacity:min(var(--noise-bg-amount, 0),var(--noise-bg-alpha, 1))}.page.fixed.allow-scroll .page-content bodycopy{anchor-name:--noise-content}.page.fixed.allow-scroll .page-content::before{position-anchor:--noise-content;top:calc(-1*var(--page-content-pad-top, 0px));height:calc(anchor-size(--noise-content height) + var(--page-content-pad-top, 0px)*2 + var(--page-content-pad-bottom, 0px)*2)}.page-content.has-content-backdrop-filter:has(.empty-editor)::after{content:" ";display:block;height:1px;width:1px;overflow:hidden;position:absolute;top:0;left:0;background:rgba(0, 0, 0, 0.01)}.page.accepts-pointer-events *,.page-content.accepts-pointer-events,.page-content.accepts-pointer-events *{pointer-events:auto}[position=fixed]{position:fixed;overflow-y:auto;overflow-x:hidden;max-height:100vh;pointer-events:none}[position=fixed] bodycopy{pointer-events:auto}[position=absolute]{position:absolute}[position=relative]{position:relative}.top-pins [position=fixed],.top-pins [position=absolute]{top:0;left:0;right:0;z-index:999}.bottom-pins [position=fixed],.bottom-pins [position=absolute]{bottom:0;left:0;right:0;z-index:999}h1,h2,h3,h4,h5,h6,h7,h8,h9{contain:layout}.caption-background h1,.caption-background h2,.caption-background h3,.caption-background h4,.caption-background h5,.caption-background h6,.caption-background h7,.caption-background h8,.caption-background h9{contain:none}.overlay-content{position:fixed;inset:0;max-height:100dvh;--viewport-height: 100dvh;overflow:auto;overscroll-behavior:none;--elastic-scroll: true;pointer-events:none}.overlay-content .backdrop{pointer-events:auto}.overlay-content .wallpaper-navigation .backdrop{pointer-events:none}.overlay-content::-webkit-scrollbar{display:none}.overlay-content .page-layout{min-height:fit-content}.overlay-content .page,.overlay-content .page-content,.overlay-content .page-layout{pointer-events:auto}.overlay-content.is-passthrough-overlay .page,.overlay-content.is-passthrough-overlay .page-layout{pointer-events:none}.overlay-content.is-passthrough-overlay .page-content{pointer-events:auto}.overlay-content.is-content-passthrough-overlay .page,.overlay-content.is-content-passthrough-overlay .page-layout,.overlay-content.is-content-passthrough-overlay .page-content,.overlay-content.is-content-passthrough-overlay .page-content bodycopy,.overlay-content.is-content-passthrough-overlay .page-content bodycopy gallery-freeform,.overlay-content.is-content-passthrough-overlay .page-content bodycopy gallery-grid,.overlay-content.is-content-passthrough-overlay .page-content bodycopy gallery-columnized,.overlay-content.is-content-passthrough-overlay .page-content bodycopy gallery-justify,.overlay-content.is-content-passthrough-overlay .page-content bodycopy gallery-slideshow{pointer-events:none}.overlay-content.is-content-passthrough-overlay .page-content bodycopy gallery-freeform>*,.overlay-content.is-content-passthrough-overlay .page-content bodycopy gallery-grid>*,.overlay-content.is-content-passthrough-overlay .page-content bodycopy gallery-columnized>*,.overlay-content.is-content-passthrough-overlay .page-content bodycopy gallery-justify>*,.overlay-content.is-content-passthrough-overlay .page-content bodycopy gallery-slideshow>*{pointer-events:auto}.overlay-content.is-content-passthrough-overlay .page-content bodycopy>*:not(column-set,gallery-freeform,gallery-grid,gallery-columnized,gallery-justify),.overlay-content.is-content-passthrough-overlay .page-content bodycopy column-unit *{pointer-events:auto}body.editing .overlay-content .page[editing=true] bodycopy,body.editing .overlay-content .page[editing=true] bodycopy>*,body.editing .overlay-content .page[editing=true] gallery-freeform,body.editing .overlay-content .page[editing=true] gallery-columnized,body.editing .overlay-content .page[editing=true] gallery-justify,body.editing .overlay-content .page[editing=true] gallery-grid body.editing .overlay-content .page[editing=true] gallery-slideshow{pointer-events:auto}.overlay-content.overlay-open.overlay-animating .page{will-change:opacity,background-color;animation:overlayOpen var(--overlay-open-duration) var(--overlay-open-easing, "ease-in-out")}.overlay-content.overlay-open .page:has(.has-content-backdrop-filter):not(:has(.backdrop)){will-change:background-color;animation:overlayOpenWithoutOpacity var(--overlay-open-duration) var(--overlay-open-easing, "ease-in-out")}.overlay-content.overlay-close.overlay-animating .page{will-change:opacity,background-color;animation:overlayClose var(--overlay-close-duration) var(--overlay-close-easing, "ease-in-out")}.overlay-content.overlay-close .page:has(.has-content-backdrop-filter):not(:has(.backdrop)){will-change:background-color;animation:overlayCloseWithoutOpacity var(--overlay-close-duration) var(--overlay-close-easing, "ease-in-out")}.overlay-content.overlay-open.overlay-animating .page-content{will-change:transform,clip-path;animation:overlayOpenContent var(--overlay-open-duration) var(--overlay-open-easing, "ease-in-out")}.overlay-content.overlay-open.overlay-animating .page-content.has-content-backdrop-filter{will-change:transform,clip-path,op
18acity;animation:overlayOpenContent var(--overlay-open-duration) var(--overlay-open-easing, "ease-in-out"),overlayOpenOpacity var(--overlay-open-duration) var(--overlay-open-easing, "ease-in-out")}.overlay-content.overlay-close.overlay-animating .page-content{will-change:transform,clip-path;animation:overlayCloseContent var(--overlay-close-duration) var(--overlay-close-easing, "ease-in-out")}.overlay-content.overlay-close.overlay-animating .page-content.has-content-backdrop-filter{will-change:transform,clip-path,opacity;animation:overlayCloseContent var(--overlay-close-duration) var(--overlay-close-easing, "ease-in-out"),overlayCloseOpacity var(--overlay-close-duration) var(--overlay-close-easing, "ease-in-out")}.overlay-content.overlay-open.overlay-animating .page::before,.overlay-content.overlay-open.overlay-animating .page::after,.overlay-content.overlay-open.overlay-animating .page-content::before,.overlay-content.overlay-open.overlay-animating .page-content::after{will-change:opacity;animation:overlayOpenNoise var(--overlay-open-duration) var(--overlay-open-easing, "ease-in-out")}.overlay-content.overlay-close.overlay-animating .page::before,.overlay-content.overlay-close.overlay-animating .page::after,.overlay-content.overlay-close.overlay-animating .page-content::before,.overlay-content.overlay-close.overlay-animating .page-content::after{will-change:opacity;animation:overlayCloseNoise var(--overlay-close-duration) var(--overlay-close-easing, "ease-in-out")}.overlay-content.touch-overscroll-transform .page-content{transform:var(--touch-overscroll-transform, translate(0px, 0px)) !important}.overlay-content.overlay-animating .page-layout{contain:layout}.overlay-content.overlay-animating.disallow-interaction,.overlay-content.overlay-animating.disallow-interaction .page,.overlay-content.overlay-animating.disallow-interaction .page-content,.overlay-content.overlay-animating.disallow-interaction .page-layout,.overlay-content.overlay-animating.disallow-interaction .backdrop,.overlay-content.overlay-animating.disallow-interaction bodycopy,.overlay-content.overlay-animating.disallow-interaction bodycopy *{pointer-events:none !important}.overlay-content.overlay-animating.disallow-interaction{overflow:hidden}@keyframes scrollAnimationFadeIn-1{0%{opacity:0}15%{opacity:1}}@keyframes scrollAnimationFadeIn-2{0%{opacity:0}22.5%{opacity:1}100%{opacity:1}}@keyframes scrollAnimationFadeIn-3{0%{opacity:0}38%{opacity:1}100%{opacity:1}}@keyframes scrollAnimationFadeOut-1{85%{opacity:1}100%{opacity:0}}@keyframes scrollAnimationFadeOut-2{0%{opacity:1}77.5%{opacity:1}100%{opacity:0}}@keyframes scrollAnimationFadeOut-3{0%{opacity:1}65%{opacity:1}100%{opacity:0}}@keyframes scrollAnimationFadeInOut-1{0%{opacity:0}15%{opacity:1}85%{opacity:1}100%{opacity:0}}@keyframes scrollAnimationFadeInOut-2{0%{opacity:0}20%{opacity:1}82.5%{opacity:1}100%{opacity:0}}@keyframes scrollAnimationFadeInOut-3{0%{opacity:0}30%{opacity:1}75%{opacity:1}100%{opacity:0}}@keyframes scrollAnimationFlyIn-1{0%{transform:translateY(5vh)}15%{transform:scale(1)}85%{transform:scale(1)}100%{transform:scale(1)}}@keyframes scrollAnimationFlyIn-2{0%{transform:translateY(10vh)}30%{transform:scale(1)}70%{transform:scale(1)}100%{transform:scale(1)}}@keyframes scrollAnimationFlyIn-3{0%{transform:translateY(20vh)}35%{transform:scale(1)}65%{transform:scale(1)}100%{transform:scale(1)}}@keyframes scrollAnimationFlyInFadeIn-1{0%{opacity:.4;transform:translateY(25px)}50%{opacity:1;transform:translateY(0px)}}@keyframes scrollAnimationFlyInFadeIn-2{0%{opacity:0;transform:translateY(50px)}50%{opacity:1;transform:translateY(0vh)}}@keyframes scrollAnimationFlyInFadeIn-3{0%{opacity:0;transform:translateY(100px)}50%{opacity:1;transform:translateY(0vh)}}@keyframes scrollAnimationFlyOut-1{35%{transform:scale(1)}85%{transform:scale(1)}100%{transform:translateY(-5vh)}}@keyframes scrollAnimationFlyOut-2{35%{transform:scale(1)}70%{transform:scale(1)}100%{transform:translateY(-10vh)}}@keyframes scrollAnimationFlyOut-3{35%{transform:scale(1)}65%{transform:scale(1)}100%{transform:translateY(-20vh)}}@keyframes scrollAnimationFlyInOut-1{0%{transform:translateY(5vh)}35%{transform:scale(1)}85%{transform:scale(1)}100%{transform:translateY(-5vh)}}@keyframes scrollAnimationFlyInOut-2{0%{transform:translateY(10vh)}35%{transform:scale(1)}70%{transform:scale(1)}100%{transform:translateY(-10vh)}}@keyframes scrollAnimationFlyInOut-3{0%{transform:translateY(20vh)}35%{transform:scale(1)}65%{transform:scale(1)}100%{transform:translateY(-20vh)}}@keyframes scrollAnimationBlurIn-1{0%{filter:blur(5px)}10%{filter:blur(5px)}30%{filter:blur(0px)}}
18@keyframes scrollAnimationBlurIn-2{0%{filter:blur(8px)}12.5%{filter:blur(8px)}35%{filter:blur(0px)}}@keyframes scrollAnimationBlurIn-3{0%{filter:blur(13px)}15%{filter:blur(13px)}40%{filter:blur(0px)}}@keyframes scrollAnimationScaleInOut-1{0%{transform:scale(0.875);transform-origin:50% 0%}50%{transform:scale(1);transform-origin:50% 50%}100%{transform:scale(0.875);transform-origin:50% 100%}}@keyframes scrollAnimationScaleInOut-2{0%{transform:scale(0.6);transform-origin:50% 0%}50%{transform:scale(1);transform-origin:50% 50%}100%{transform:scale(0.6);transform-origin:50% 100%}}@keyframes scrollAnimationScaleInOut-3{0%{transform:scale(0.4);transform-origin:50% 0%}50%{transform:scale(1);transform-origin:50% 50%}100%{transform:scale(0.4);transform-origin:50% 100%}}@keyframes scrollAnimationScaleIn-1{0%{transform:scale(0.875);transform-origin:50% 0%}50%{transform:scale(1);transform-origin:50% 0%}100%{transform:scale(1);transform-origin:50% 0%}}@keyframes scrollAnimationScaleIn-2{0%{transform:scale(0.6);transform-origin:50% 0%}50%{transform:scale(1);transform-origin:50% 0%}100%{transform:scale(1);transform-origin:50% 0%}}@keyframes scrollAnimationScaleIn-3{0%{transform:scale(0.4);transform-origin:50% 0%}50%{transform:scale(1);transform-origin:50% 0%}100%{transform:scale(1);transform-origin:50% 0%}}@keyframes scrollAnimationScaleOut-1{0%{transform:scale(1);transform-origin:50% 100%}50%{transform:scale(1);transform-origin:50% 100%}100%{transform:scale(0.875);transform-origin:50% 100%}}@keyframes scrollAnimationScaleOut-2{0%{transform:scale(1);transform-origin:50% 100%}50%{transform:scale(1);transform-origin:50% 100%}100%{transform:scale(0.6);transform-origin:50% 100%}}@keyframes scrollAnimationScaleOut-3{0%{transform:scale(1);transform-origin:50% 100%}50%{transform:scale(1);transform-origin:50% 100%}100%{transform:scale(0.4);transform-origin:50% 100%}}@keyframes scrollAnimationHelix-1{0%{transform:perspective(4000px) rotatey(35deg) rotatez(1.5deg)}100%{transform:perspective(4000px) rotatey(-35deg) rotatez(-1.5deg)}}@keyframes scrollAnimationHelix-2{0%{transform:perspective(3000px) rotatey(60deg) rotatez(2deg)}100%{transform:perspective(3000px) rotatey(-60deg) rotatez(-2deg)}}@keyframes scrollAnimationHelix-3{0%{transform:perspective(2000px) rotatey(90deg) rotatez(3deg)}100%{transform:perspective(2000px) rotatey(-90deg) rotatez(-3deg)}}@keyframes scrollAnimationConveyor-1{0%{transform:perspective(2500px) translateZ(25em) rotateX(45deg)}40%{transform:perspective(2500px) rotateX(0deg)}100%{transform:perspective(2500px) rotateX(0deg)}}@keyframes scrollAnimationConveyor-2{0%{transform:perspective(2400px) translateZ(30em) rotateX(60deg)}50%{transform:perspective(2400px) rotateX(0deg)}100%{transform:perspective(2400px) rotateX(0deg)}}@keyframes scrollAnimationConveyor-3{0%{transform:perspective(2300px) translateZ(45em) rotateX(85deg)}60%{transform:perspective(2300px) rotateX(0deg)}100%{transform:perspective(2300px) rotateX(0deg)}}@keyframes scrollAnimationRebound-1{0%{transform:perspective(2100px) translateZ(-30em) rotateX(50deg);transform-origin:50% 100%}47%{transform:perspective(2100px) translateZ(0em) rotateX(0deg);transform-origin:50% 50%}53%{transform:perspective(2100px) translateZ(0em) rotateX(0deg);transform-origin:50% 50%}100%{transform:perspective(2100px) translateZ(-30em) rotateX(-50deg);transform-origin:50% 0%}}@keyframes scrollAnimationRebound-2{0%{transform:perspective(1800px) translateZ(-50em) rotateX(70deg);transform-origin:50% 100%}47%{transform:perspective(1800px) translateZ(0em) rotateX(0deg);transform-origin:50% 50%}53%{transform:perspective(1800px) translateZ(0em) rotateX(0deg);transform-origin:50% 50%}100%{transform:perspective(1800px) translateZ(-50em) rotateX(-70deg);transform-origin:50% 0%}}@keyframes scrollAnimationRebound-3{0%{transform:perspective(1300px) translateZ(-70em) rotateX(90deg);transform-origin:50% 100%}47%{transform:perspective(1300px) translateZ(0em) rotateX(0deg);transform-origin:50% 50%}53%{transform:perspective(1300px) translateZ(0em) rotateX(0deg);transform-origin:50% 50%}100%{transform:perspective(1300px) translateZ(-70em) rotateX(-90deg);transform-origin:50% 0%}}@keyframes scrollTransitionFadeUp-1{0%{opacity:0;transform:translateY(25px)}25%{opacity:1;transform:translateY(0vh)}}@keyframes scrollTransitionFadeUp-2{0%{opacity:0;transform:translateY(40px)}25%{opacity:1;transform:translateY(0vh)}}@keyframes scrollTransitionFadeUp-3{0%{opacity:0;transform:translateY(50px)}25%{opacity:1;transform:translateY(0vh)}}@keyframes scrollTransitionScaleUp-1{0%{opacity:0;transform:scale(0.95)}25%{opacity:1;transform:scale(1)}}@keyframes scrollTransitionScaleUp-2{0%{opacity:0;transform:scale(0.875)}25%{opacity:1;transform:scale(1)}}@keyframes scrollTransitionScaleUp-3{0%{opacity:0;transform:scale(0.75)}25%{opacity:1;transform:scale(1)}}@keyframes scrollAnimationTwistUp-1{0%{opacity:0;transform:translateY(25px) rotateY(27deg) rotateZ(1.5deg) perspective(4000px)}25%{opacity:1;transform:translateY(0vh)}}
18@keyframes scrollAnimationTwistUp-2{0%{opacity:0;transform:translateY(40px) rotateY(35deg) rotateZ(2deg) perspective(3000px)}25%{opacity:1;transform:translateY(0vh)}}@keyframes scrollAnimationTwistUp-3{0%{opacity:0;transform:translateY(65px) rotateY(40deg) rotateZ(3deg) perspective(2000px)}25%{opacity:1;transform:translateY(0vh)}}@keyframes scrollTransitionBlurIn-1{0%{filter:blur(5px);transform:scale(0.992)}25%{filter:blur(0px);transform:scale(1)}}@keyframes scrollTransitionBlurIn-2{0%{filter:blur(8px);transform:scale(0.992)}25%{filter:blur(0px);transform:scale(1)}}@keyframes scrollTransitionBlurIn-3{0%{filter:blur(13px);transform:scale(0.992)}25%{filter:blur(0px);transform:scale(1)}}@keyframes scrollTransitionColorIn-1{0%{filter:saturate(50%)}32%{filter:saturate(100%)}}@keyframes scrollTransitionColorIn-2{0%{filter:saturate(25%)}32%{filter:saturate(100%)}}@keyframes scrollTransitionColorIn-3{0%{filter:saturate(0%)}32%{filter:saturate(100%)}}@keyframes scrollTransitionRebound-1{0%{transform:perspective(1500px) translateZ(0em) rotateX(30deg);transform-origin:50% 100%;opacity:0}25%{transform:perspective(1500px) translateZ(0em) rotateX(0deg);transform-origin:50% 50%;opacity:1}}@keyframes scrollTransitionRebound-2{0%{transform:perspective(1800px) translateZ(-50em) rotateX(70deg);transform-origin:50% 100%}47%{transform:perspective(1800px) translateZ(0em) rotateX(0deg);transform-origin:50% 50%}53%{transform:perspective(1800px) translateZ(0em) rotateX(0deg);transform-origin:50% 50%}100%{transform:perspective(1800px) translateZ(-50em) rotateX(-70deg);transform-origin:50% 0%}}@keyframes scrollTransitionRebound-3{0%{transform:perspective(1300px) translateZ(-70em) rotateX(90deg);transform-origin:50% 100%}47%{transform:perspective(1300px) translateZ(0em) rotateX(0deg);transform-origin:50% 50%}53%{transform:perspective(1300px) translateZ(0em) rotateX(0deg);transform-origin:50% 50%}100%{transform:perspective(1300px) translateZ(-70em) rotateX(-90deg);transform-origin:50% 0%}}@keyframes LooseHinge-1{0%{transform:rotate(5deg);transform-origin:0% 0%}50%{transform:rotate(0deg);transform-origin:50% 50%}100%{transform:rotate(5deg);transform-origin:100% 100%}}@keyframes LooseHinge-2{0%{transform:rotate(10deg);transform-origin:0% 0%}50%{transform:rotate(0deg);transform-origin:50% 50%}100%{transform:rotate(10deg);transform-origin:100% 100%}}@keyframes LooseHinge-3{0%{transform:rotate(30deg);transform-origin:0% 0%}50%{transform:rotate(0deg);transform-origin:50% 50%}100%{transform:rotate(30deg);transform-origin:100% 100%}}@keyframes overlayOpen{from{opacity:var(--overlay-open-from-opacity, 1);background-color:var(--overlay-open-from-background-color, transparent)}to{opacity:1}}@keyframes overlayOpenWithoutOpacity{from{background-color:var(--overlay-open-from-background-color, transparent)}}@keyframes overlayOpenOpacity{from{opacity:var(--overlay-open-from-opacity, 1)}to{opacity:1}}@keyframes overlayOpenContent{from{transform:var(--overlay-open-content-from-transform, translate3d(0, 0, 0));clip-path:var(--overlay-open-content-from-clip-mask, inset(0% 0% 0% 0%))}to{transform:translate3d(0, 0, 0);clip-path:var(--overlay-open-content-to-clip-mask, inset(0% 0% 0% 0%))}}@keyframes overlayClose{to{opacity:var(--overlay-close-to-opacity, 1);background-color:var(--overlay-close-to-background-color, transparent)}}@keyframes overlayCloseWithoutOpacity{to{background-color:var(--overlay-close-to-background-color, transparent)}}@keyframes overlayCloseOpacity{to{opacity:var(--overlay-close-to-opacity, 1)}}@keyframes overlayCloseContent{from{transform:translate3d(0, 0, 0);clip-path:var(--overlay-close-content-from-clip-mask, inset(0% 0% 0% 0%))}to{transform:var(--overlay-close-content-to-transform, translate3d(0, 0, 0));clip-path:var(--overlay-close-content-to-clip-mask, inset(0% 0% 0% 0%))}}@keyframes overlayOpenNoise{from{opacity:0}}@keyframes overlayCloseNoise{to{opacity:0}}.backdrop{contain:layout}.has-backdrop-filter .backdrop-contents::after{backdrop-filter:var(--page-backdrop-filter, none);-webkit-backdrop-filter:var(--page-backdrop-filter, none);position:absolute;width:100%;height:100%;content:"";inset:0;z-index:1;pointer-events:none}.backdrop:not(.clip){-webkit-transform:translate(0px, 0px)}.backdrop>.backdrop-contents{transition:opacity .5s ease-in-out;opacity:0;top:0;bottom:0;width:100%;position:sticky;height:100%;max-height:100vh;overflow:hidden}.backdrop-contents.loaded{opacity:1}.backdrop-contents.no-fade{transition:none}.backdrop.clip .backdrop-contents.above,.backdrop.clip .backdrop-contents.below{display:none}.backdrop.clip .backdrop-contents{will-change:display,opacity,transform,clip-path}.backdrop>.backdrop-contents [data-backdrop]{height:100%}.backdrop.clip{contain:none;overflow:hidden;clip-path:inset(0% 0% 0% 0%)}.clip>.backdrop-contents{height:calc(100vh + .5px);width:var(--backdrop-width, 100%);position:fixed}.backdrop{flex-shrink:0;width:100%;order:1;position:absolute;top:0;left:0;right:0;bottom:0}.wallpaper-navigation{position:absolute;inset:var(--pin-padding-top, 0) 0 var(--pin-padding-bottom, 0) 0;z-index:10;pointer-events:none !important;display:flex;justify-content:center;flex-wrap:wrap;flex-direction:row;max-width:100%;width:100%;flex:0}.wallpaper-navigation .page-content,.wallpaper-navigation .page-layout{background:none;background-color:transparent;visibility:hidden}.wallpaper-navigation .backdrop.clip{contain:none;overflow:hidden;clip-path:inset(0% 0% 0% 0%)}.wallpaper-navigation .backdrop.clip>.wallpaper-slideshow{position:fixed}
18.wallpaper-navigation .wallpaper-slideshow{top:0;bottom:0;position:sticky;transform:translate3d(0, 0, 0);height:calc(100% + .5px);max-height:calc(var(--viewport-height, 100vh) + .5px)}::part(slideshow-nav){transition:opacity 222ms ease-in-out;pointer-events:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;--button-size: 30px;--button-inset: 20px;--button-icon-color: rgba(255, 255, 255, 0.9);--button-icon-scale: 1;--button-icon-stroke-width: 1.5px;--button-icon-stroke-linecap: butt;--button-background-color: rgba(87, 87, 87, 0.35);--button-background-radius: 50%;--button-active-opacity: 0.7}::part(slideshow-nav-previous-button){pointer-events:auto;cursor:pointer;position:absolute;top:0;left:0;bottom:0}::part(slideshow-nav-next-button){pointer-events:auto;cursor:pointer;position:absolute;top:0;right:0;bottom:0}::part(slideshow-nav-close-button){pointer-events:auto;cursor:pointer;position:absolute;top:0;right:0}::part(slideshow-nav-prev){position:absolute;top:0;bottom:0;left:var(--button-inset, 0px);margin:auto;width:36px;height:36px}::part(slideshow-nav-next){position:absolute;top:0;bottom:0;right:var(--button-inset, 0px);margin:auto;width:36px;height:36px;transform:scaleX(-1)}::part(slideshow-nav-close){position:absolute;top:var(--button-inset, 0px);right:var(--button-inset, 0px);margin:auto;width:36px;height:36px}::part(slideshow-nav-prev),::part(slideshow-nav-next),::part(slideshow-nav-close){height:var(--button-size);width:var(--button-size)}
18::part(slideshow-nav-previous-button):active,::part(slideshow-nav-next-button):active,::part(slideshow-nav-close-button):active{opacity:var(--button-active-opacity, 0.7)}::part(slideshow-nav-background){stroke:none !important;fill:var(--button-background-color);rx:var(--button-background-radius)}::part(slideshow-nav-arrow),::part(slideshow-nav-x){fill:none !important;stroke:var(--button-icon-color);stroke-width:var(--button-icon-stroke-width);stroke-linecap:var(--button-icon-stroke-linecap);transform:scale(var(--button-icon-scale));transform-origin:center}bodycopy{display:block;contain:layout;word-wrap:break-word;position:relative;max-width:100%;width:100%;-webkit-nbsp-mode:normal;--font-scale: 1}bodycopy *{border-width:0}a{color:inherit}a.image-link,a.image-link:hover,a.image-link:active,a.icon-link,a.icon-link:hover,a.icon-link:active{border-bottom:none;text-decoration:none}[contenteditable=true] a:active,[contenteditable=true] .linked:active,[contenteditable=true] .zoomable:active{opacity:1}s *{text-transform:inherit}small{max-width:100%;text-decoration:inherit}b,strong{font-weight:bolder}.small-caps{font-variant:small-caps;text-transform:lowercase}.no-wrap{white-space:nowrap}.page_background{position:absolute;top:0;left:0;width:100%;height:100%}media-item .caption.empty{display:none}.tag-separator:before{content:", "}media-item[drag=true]::part(media),[contenteditable=true] iframe{pointer-events:none}column-set+*{--gutter-expand: 1}gallery-grid+*{--gutter-expand: 1}gallery-columnized+*{--gutter-expand: 1}gallery-justify+*{--gutter-expand: 1}gallery-slideshow+*{--gutter-expand: 1}gallery-freeform+*{--gutter-expand: 1}media-item+*{--gutter-expand: 1}column-unit>*:first-child{--gutter-expand: 0}marquee-set h1,marquee-set h2,marquee-set h3,marquee-set h4,marquee-set h5,marquee-set h6,marquee-set h7,marquee-set h8,marquee-set h9{vertical-align:text-bottom;display:inline-block}marquee-set{pointer-events:auto}marquee-set media-item .caption{white-space:normal}gallery-slideshow media-item figcaption.caption{display:var(--display-slideshow-captions, none);transform:var(--slideshow-caption-transform, translateX(0px));opacity:var(--slideshow-caption-opacity, 0);text-align:var(--slideshow-caption-align);pointer-events:var(--slideshow-caption-pointer-events, initial);will-change:opacity,transform;position:relative}gallery-slideshow media-item::part(sizing-frame){margin:auto 0;flex-grow:0}gallery-slideshow media-item::part(frame){display:flex;flex-wrap:wrap;width:var(--item-width);height:var(--slide-height);align-content:var(--slideshow-vertical-align);align-self:var(--slideshow-horizontal-align)}body.slideshow-nav-arrow-display,body.slideshow-nav-arrow-display *:not(a,media-item[href],media-item.zoomable){cursor:var(--slideshow-cursor)}body.slideshow-dragging *{cursor:var(--slideshow-cursor) !important}body>media-item[no-component]{all:unset !important;border:none !important;padding:0 !important;position:fixed !important;z-index:5000 !important;pointer-events:none !important;background:none !important;inset:0 !important;overflow:hidden !important}button#edit.edit{appearance:none;-webkit-appearance:none;border:none;cursor:pointer;font-size:var(--fontSize-default);font-family:var(--fontFamily-default);padding:0;text-align:left;white-space:nowrap;background:transparent;display:flex;margin:0;border-radius:3px 0 0 3px;pointer-events:auto;position:fixed;top:50%;transform:translate(0, -50%);right:400px;height:36px;width:12px;z-index:999;cursor:pointer;background-color:rgba(140, 140, 140, 0.4);padding-left:2px;margin-right:5px;width:20px;cursor:pointer;margin:0;right:0}button#edit.edit:active{opacity:.7;user-select:none}button#edit.edit svg{padding:0;width:16px;height:36px;margin-left:2px;opacity:1}button#edit.edit svg path{fill:#fff}.quick-view{--font-scale: 1;--resize-parent-width: unset;width:80%;height:80%;margin-top:auto;margin-right:auto;margin-bottom:auto;margin-left:auto;padding:5rem;padding-top:5rem;padding-right:5rem;padding-bottom:5rem;padding-left:5rem;display:flex;z-index:5001;transform:translateZ(999px);position:fixed;top:0;left:0;right:0;bottom:0;-webkit-text-size-adjust:100%;-ms-touch-action:none;touch-action:none;line-height:initial;letter-spacing:initial}.quick-view .caption{font-size:clamp(14.5px,var(--font-scale, 1)*var(--font-size, 14.5px),2.4rem)}.quick-view-frame{position:relative;display:flex;height:100%;width:100%}.quick-view-content{height:100%;width:auto}.quick-view-background{backdrop-filter:var(--quick-view-backdrop-filter, none);-webkit-backdrop-filter:var(--quick-view-backdrop-filter, none);transition:backdrop-filter .2s ease}
18.quick-view.quick-view-navigation{display:block;z-index:5002;position:fixed;inset:0;pointer-events:none;transform:translateZ(999px)}.quick-view::part(slideshow-nav){transition:opacity 222ms ease-in-out;position:absolute;z-index:99;inset:0;pointer-events:none}.pagination-watcher{pointer-events:none;height:1px;margin-top:-1px;width:100%}html,body{overflow-anchor:none}.colorfilter-color,.colorfilter-base{position:absolute;inset:0;pointer-events:none}.colorfilter-color{z-index:9995;display:block;background-color:var(--colorfilter-color, #FF0000);mix-blend-mode:var(--colorfilter-mix, lighten);opacity:var(--colorfilter-color-opacity, 0)}.colorfilter-base{display:block;backdrop-filter:grayscale(clamp(0, var(--colorfilter-grayscale, 0), var(--colorfilter-color-opacity, 0))) brightness(var(--colorfilter-brightness, 1)) contrast(var(--colorfilter-contrast, 1)) invert(var(--colorfilter-invert, 0));-webkit-backdrop-filter:grayscale(clamp(0, var(--colorfilter-grayscale, 0), var(--colorfilter-color-opacity, 0))) brightness(var(--colorfilter-brightness, 1)) contrast(var(--colorfilter-contrast, 1)) invert(var(--colorfilter-invert, 0));z-index:9994}#editor-overlay.safari,.colorfilter-base.safari,.colorfilter-color.safari,#cargo-dotsite.safari{transform:translateZ(0px);animation:loopTranslate .5s steps(2, end) infinite}@keyframes loopTranslate{0%{transform:translateZ(0px)}50%{transform:translateZ(1px)}100%{transform:translateZ(0px)}}.flying-object{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999;overflow:hidden}.flying-object media-item{position:fixed;top:0;left:0}.flying-object,.flying-object *{user-select:none;pointer-events:none !important}body.audio-player-dragging,body.audio-player-dragging audio-player,body.audio-player-dragging *{cursor:ew-resize}audio-player[browser-default=true]{padding:unset;margin:unset;outline:unset;background:unset;border:unset;transform:unset;height:unset;position:relative;display:inline-block}audio-player::part(button){background:transparent;cursor:pointer;flex-shrink:0;align-items:center;justify-content:center;display:inline-flex;width:.7em;contain:layout}audio-player::part(separator){height:100%}audio-player::part(buffer){height:100%}audio-player::part(time-bar){height:100%;display:flex;justify-content:space-between;align-content:center;margin:auto 0;width:0%;flex-grow:1;height:100%}audio-player::part(progress){background:transparent;height:100%}audio-player::part(play-icon),audio-player::part(pause-icon){fill:currentColor;cursor:pointer;width:100%;height:auto}audio-player::part(label){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;user-select:none;margin:auto auto auto 0;flex:0 3 auto;min-width:0;width:100%}audio-player::part(total-time){flex:0 1 auto;margin:auto 0}audio-player::part(current-time),audio-player::part(play-text){flex:0 1 auto;margin:auto 0}audio-player::part(stream-anim):before{content:"Streaming"}audio-player::part(stream-anim){user-select:none;margin:auto auto auto 0}audio-player::part(buffer),audio-player::part(current-time),audio-player::part(note-svg),audio-player::part(play-text),audio-player::part(separator),audio-player::part(total-time){user-select:none;pointer-events:none}audio-player::part(buffer),audio-player::part(play-text),audio-player::part(progress){position:absolute}audio-player::part(time-bar),audio-player::part(button),audio-player::part(current-time),audio-player::part(note-icon),audio-player::part(pause),audio-player::part(play),audio-player::part(total-time){position:relative}audio-player::part(progress-indicator){border:1px solid currentColor;cursor:ew-resize;height:100%;right:0;position:absolute}audio-player{border:var(--border-lines);margin-bottom:.5em;overflow:hidden}audio-player::part(time-bar){background:var(--background-color)}audio-player::part(label),audio-player::part(current-time),audio-player::part(total-time){color:var(--text-color)}audio-player::part(play-icon),audio-player::part(pause-icon){fill:var(--icon-color, currentColor)}audio-player::part(separator){width:0px;background:none}audio-player::part(buffer){background:var(--buffer-background-color)}
18audio-player::part(progress){background:var(--progress-background-color)}audio-player::part(progress-indicator){border-top:0;border-bottom:0;border-left:0;border-right-width:2px}audio-player::part(button){height:100%;display:inline-flex;align-self:center;background:var(--background-color)}audio-player::part(button):after{color:var(--text-color)}audio-player[status=stopped]::part(button):after,audio-player:not([status])::part(button):after{content:var(--play-text)}audio-player[status=playing]::part(button):after{content:var(--pause-text)}audio-player::part(play-icon),audio-player::part(pause-icon){height:var(--icon-size, 1em);width:auto}audio-player::part(label),audio-player::part(stream-anim),audio-player::part(current-time),audio-player::part(total-time){padding:var(--text-padding)}shop-product{font-size:1.2rem;max-width:22rem;width:100%;position:relative;display:block}shop-product::part(price){line-height:1.1;color:inherit;font-family:inherit;font-style:inherit;font-weight:inherit;font-size:inherit;letter-spacing:inherit}shop-product::part(dropdown){width:100%;background:transparent;line-height:normal;color:inherit;font-family:inherit;font-style:inherit;font-weight:inherit;font-size:inherit;letter-spacing:inherit;white-space:nowrap;text-overflow:ellipsis;display:inline-block;-webkit-appearance:none;border:0;outline:0}shop-product::part(button),shop-product::part(error){line-height:normal;cursor:pointer;display:inline-block;color:inherit;font-family:inherit;font-style:inherit;font-weight:inherit;font-size:inherit;letter-spacing:inherit;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}shop-product::part(button):active{opacity:.7}a[rel=show-cart][show-count]:after{counter-reset:variable var(--cart-item-count);content:" (" counter(variable) ")";display:var(--cart-item-count-display, none)}.cargodotsite{position:fixed;bottom:1rem;right:1.4rem;mix-blend-mode:difference;z-index:9999;opacity:.2;cursor:pointer}.mobile .cargodotsite{bottom:.4rem;right:1rem}.cargodotsite:active{opacity:.14}.dl-duplicate{position:fixed;bottom:1rem;right:1.4rem;z-index:9999;cursor:pointer}.mobile .dl-duplicate{bottom:.4rem;right:1rem}.dl-duplicate:active{opacity:.7}</style>
19		<link rel="stylesheet" type="text/css" href="https://build.cargo.site/frontend/054f94/index.css">
20		
20<script>!function(){function e(e,o,t){!1===e.prototype.hasOwnProperty(name)&&(e.prototype[o]=t)}e(Node,"saveable",!1),e(Node,"setSaveable",function(e){return this.saveable=e,this}),e(Node,"isSaveable",function(){return this.saveable}),Node.prototype.persistCloneNode=function(){var s=function(e,o,t){for(var i=0;i<e.childNodes.length;i++)t(e.childNodes[i],o.childNodes[i]),0<e.childNodes[i].childNodes.length&&s(e.childNodes[i],o.childNodes[i],t)},e=Node.prototype.cloneNode.apply(this,arguments);return this.isSaveable&&!0===this.isSaveable()&&e.setSaveable(!0),0<this.childNodes.length&&s(this,e,function(e,o){e.isSaveable&&!0===e.isSaveable()&&o.setSaveable(!0)}),e},this.core={markAsEditable:function(e){}}}(window.CargoEditor=window.CargoEditor||{});</script>
20
21	
22			<link rel="icon" href="https://freight.cargo.site/t/original/i/N3072501889885813271918056125753/FF-FFav.ico" sizes="any">
23			
24			
25			<meta name="description" content="FormAndField promotes joy and well-being through the design of empathetic interiors. We revel in synthesizing the creative with the highest level of execution, taking you from conception to completion. Based in San Francisco, FormAndField provides full-service interior design for the Bay Area and beyond.">
26			<meta name="twitter:card" content="summary_large_image">
27			<meta name="twitter:title" content="Projects — FormAndField">
28			<meta name="twitter:description" content="FormAndField promotes joy and well-being through the design of empathetic interiors. We revel in synthesizing the creative with the highest level of execution, taking you from conception to completion. Based in San Francisco, FormAndField provides full-service interior design for the Bay Area and beyond.">
29			<meta name="twitter:image" content="https://freight.cargo.site/w/1200/i/Q3014877184710418225643445368121/00-HERO-Marin-Foyer-Overall-Horizontal.jpg">
30			<meta property="og:title" content="Projects — FormAndField">
31			<meta property="og:description" content="FormAndField promotes joy and well-being through the design of empathetic interiors. We revel in synthesizing the creative with the highest level of execution, taking you from conception to completion. Based in San Francisco, FormAndField provides full-service interior design for the Bay Area and beyond.">
32			<meta property="og:url" content="https://formandfield.com/projects">
33			<meta property="og:image" content="https://freight.cargo.site/w/1200/i/Q3014877184710418225643445368121/00-HERO-Marin-Foyer-Overall-Horizontal.jpg">
34			<meta property="og:type" content="website">
35			<style>/*
36 * This CSS file has been generated and is served by Cargo Collective Inc
37 * and is authorized to be used on Cargo Collective Inc only.
38 *
39 * This CSS resource incorporates links to font software which is
40 * the valuable copyrighted property of Dinamo Typefaces. You may not
41 * attempt to copy, install, redistribute, convert, modify or reverse
42 * engineer this font software. Please contact Dinamo with any
43 * questions: https://abcdinamo.com/
44 */
45@font-face {
46    font-display: block;
47    font-family: "Favorit Variable";
48    src: url("https://type.cargo.site/files/CargoFavoritVariable.woff2") format("woff2-variations");
49    font-style: normal;
50    font-weight: 300 700;
51}
52
53@font-face {
54    font-display: block;
55    font-family: "Favorit Variable";
56    src: url("https://type.cargo.site/files/CargoFavoritVariable.woff2") format("woff2-variations");
57    font-style: normal;
58    font-weight: 300 700;
59}
60
61@font-face {
62    font-display: block;
63    font-family: "Favorit Variable";
64    src: url("https://type.cargo.site/files/CargoFavoritVariable.woff2") format("woff2-variations");
65    font-style: normal;
66    font-weight: 300 700;
67}
68
69@font-face {
70    font-display: block;
71    font-family: "Favorit Variable";
72    src: url("https://type.cargo.site/files/CargoFavoritVariable.woff2") format("woff2-variations");
73    font-style: normal;
74    font-weight: 300 700;
75}
76
77@font-face {
78    font-display: block;
79    font-family: "Favorit Variable";
80    src: url("https://type.cargo.site/files/CargoFavoritVariable.woff2") format("woff2-variations");
81    font-style: normal;
82    font-weight: 300 700;
83}
84
85@font-face {
86    font-display: block;
87    font-family: "Favorit Variable";
88    src: url("https://type.cargo.site/files/CargoFavoritItalicVariable.woff2") format("woff2-variations");
89    font-style: italic;
90    font-weight: 300 700;
91}
92
93</style>
94			</head>
95	<body style="opacity: 0;"><customhtml><!-- Google Analytics Code -->
vendor: 64 bytes, lines 95-96
95
96<script async src="https://www.googletagmanager.com/gtag/js?id=
96G-V7ZPSSPXE8
vendor: 12 bytes, line 96
96"></script>
97<script>
98  
vendor: 134 bytes, lines 98-102
98window.dataLayer = window.dataLayer || [];
99  function gtag(){dataLayer.push(arguments);}
100  gtag('js', new Date());
101
102  gtag('config', '
102G-V7ZPSSPXE8
vendor: 4 bytes, line 102
102');
103</script>
103
104
105<!-- Cloudflare Turnstile -->
106<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
106
107
108<script>
109  function turnstileSuccess(token) {
110    document.getElementById("submit-button").disabled = false;
111  }
112
113  function turnstileExpired() {
114    document.getElementById("submit-button").disabled = true;
115  }
116</script>
116
117
118
119<!--
120  FORM + FIELD — GLOBAL NEWSLETTER POPUP
121
122  Add this once in Cargo's global footer / custom HTML area so it is available
123  on every page. Replace the MAILCHIMP_FORM_ACTION value below with the form
124  action URL from Christine's Mailchimp embedded signup form.
125-->
126
127<div class="ff-newsletter" id="ff-newsletter" hidden>
128    <button
129        class="ff-newsletter__backdrop"
130        type="button"
131        aria-label="Close newsletter signup"
132        data-ff-newsletter-close
133    ></button>
134
135    <section
136        class="ff-newsletter__panel"
137        role="dialog"
138        aria-modal="true"
139        aria-labelledby="ff-newsletter-title"
140        aria-describedby="ff-newsletter-description"
141    >
142        <button
143            class="ff-newsletter__close"
144            type="button"
145            aria-label="Close newsletter signup"
146            data-ff-newsletter-close
147        >
148            <span aria-hidden="true"></span>
149        </button>
150
151        <div class="ff-newsletter__content">
152            <h2 class="ff-newsletter__title" id="ff-newsletter-title">
153                Join Our<br>Newsletter
154            </h2>
155
156            <p class="ff-newsletter__description" id="ff-newsletter-description">
157                Featuring In-Depth Posts<br>On Design, Interviews,<br>New Projects, and News.<br>Bi-Monthly.
158            </p>
159
160            <form
161                class="ff-newsletter__form"
162                id="ff-newsletter-form"
163                action="https://formandfield.us13.list-manage.com/subscribe/post?u=d6b1cfd8e10ee8b00ef7b9bda&amp;id=5c395d1268&amp;f_id=003100e9f0"
164                method="post"
165                target="ff-newsletter-mailchimp"
166                novalidate
167            >
168                <label class="ff-newsletter__label" for="ff-newsletter-email">
169                    Email Address
170                </label>
171                <input
172                    class="ff-newsletter__email"
173                    id="ff-newsletter-email"
174                    name="EMAIL"
175                    type="email"
176                    inputmode="email"
177                    autocomplete="email"
178                    placeholder="[email protected]"
179                    required
180                >
181
182                <!-- Replace the name value with Mailchimp's b_[u]_[id] honeypot field. -->
183                <div class="ff-newsletter__honeypot" aria-hidden="true">
184                    <input name="b_d6b1cfd8e10ee8b00ef7b9bda_5c395d1268" type="text" tabindex="-1" value="">
185                </div>
186
187                <button class="ff-newsletter__submit" type="submit">
188                    Submit
189                </button>
190
191                <p class="ff-newsletter__message" aria-live="polite"></p>
192            </form>
193
194            <p class="ff-newsletter__privacy">We respect your privacy.</p>
195        </div>
196    </section>
197</div>
198
199<iframe
200    class="ff-newsletter__response-frame"
201    name="ff-newsletter-mailchimp"
202    title="Newsletter signup response"
203></iframe>
204
205<script>
206(function () {
207    "use strict";
208
209    var POPUP_ID = "ff-newsletter";
210    var STORAGE_KEY = "ff_newsletter_popup_dismissed_v1";
211    var DELAY_MS = 5000;
212    var popup = document.getElementById(POPUP_ID);
213
214    if (!popup || window.__ffNewsletterPopupReady) return;
215    window.__ffNewsletterPopupReady = true;
216
217    var form = document.getElementById("ff-newsletter-form");
218    var email = document.getElementById("ff-newsletter-email");
219    var message = popup.querySelector(".ff-newsletter__message");
220    var submitButton = popup.querySelector(".ff-newsletter__submit");
221    var closeButtons = popup.querySelectorAll("[data-ff-newsletter-close]");
222    var lastFocusedElement = null;
223    var isOpen = false;
224
225    function hasBeenDismissed() {
226        try {
227            return window.localStorage.getItem(STORAGE_KEY) === "true";
228        } catch (error) {
229            return false;
230        }
231    }
232
233    function rememberDismissal() {
234        try {
235            window.localStorage.setItem(STORAGE_KEY, "true");
236        } catch (error) {
237            /* The popup still closes when storage is unavailable. */
238        }
239    }
240
241	function hidePopup() {
242        switch (window.location.pathname) {
243            case '/client-bath-questionnaire':
244            case '/client-kitchen-questionnaire':
245            case '/client-style-+-preferences-questionnaire':
246            case '/client-phone-consultation':
247                return true;
248            default:
249              return false;
250        }
251    }
252
253    function openPopup() {
254        if (isOpen || hasBeenDismissed() || hidePopup()) return;
255
256        isOpen = true;
257        lastFocusedElement = document.activeElement;
258        popup.hidden = false;
259        document.documentElement.classList.add("ff-newsletter-is-open");
260
261        window.requestAnimationFrame(function () {
262            popup.classList.add("is-visible");
263            window.setTimeout(function () {
264                email.focus({ preventScroll: true });
265            }, 380);
266        });
267    }
268
269    function closePopup(remember) {
270        if (!isOpen) return;
271        isOpen = false;
272
273        if (remember !== false) rememberDismissal();
274
275        popup.classList.remove("is-visible");
276        document.documentElement.classList.remove("ff-newsletter-is-open");
277
278        window.setTimeout(function () {
279            popup.hidden = true;
280            if (lastFocusedElement && lastFocusedElement.focus) {
281                lastFocusedElement.focus({ preventScroll: true });
282            }
283        }, 380);
284    }
285
286    function getFocusableElements() {
287        return popup.querySelector(".ff-newsletter__panel").querySelectorAll(
288            'button:not([disabled]), input:not([disabled]), [href], [tabindex]:not([tabindex="-1"])'
289        );
290    }
291
292    function handleKeydown(event) {
293        if (!isOpen) return;
294
295        if (event.key === "Escape") {
296            event.preventDefault();
297            closePopup(true);
298            return;
299        }
300
301        if (event.key !== "Tab") return;
302
303        var focusable = getFocusableElements();
304        var first = focusable[0];
305        var last = focusable[focusable.length - 1];
306
307        if (event.shiftKey && document.activeElement === first) {
308            event.preventDefault();
309            last.focus();
310        } else if (!event.shiftKey && document.activeElement === last) {
311            event.preventDefault();
312            first.focus();
313        }
314    }
315
316    Array.prototype.forEach.call(closeButtons, function (button) {
317        button.addEventListener("click", function () {
318            closePopup(true);
319        });
320    });
321
322    document.addEventListener("keydown", handleKeydown);
323
324    form.addEventListener("submit", function (event) {
325        message.textContent = "";
326        email.removeAttribute("aria-invalid");
327
328        if (!email.validity.valid) {
329            event.preventDefault();
330            email.setAttribute("aria-invalid", "true");
331            message.textContent = "Please enter a valid email address.";
332            email.focus();
333            return;
334        }
335
336        rememberDismissal();
337        submitButton.disabled = true;
338        submitButton.textContent = "Submitting";
339
340        window.setTimeout(function () {
341            submitButton.textContent = "Submitted";
342            message.textContent = "Thank you for signing up.";
343            email.value = "";
344        }, 600);
345
346        window.setTimeout(function () {
347            closePopup(false);
348        }, 1800);
349    });
350
351    if (!hasBeenDismissed()) {
352        window.setTimeout(openPopup, DELAY_MS);
353    }
354
355    /* Console helper for testing: FFNewsletterPopup.reset() */
356    window.FFNewsletterPopup = {
357        open: openPopup,
358        close: function () { closePopup(true); },
359        reset: function () {
360            try { window.localStorage.removeItem(STORAGE_KEY); } catch (error) {}
361        }
362    };
363}());
364</script>
364
365
366<!-- BASIN FORM CODE -->
367<script defer="" src="https://js.usebasin.com/v2.11.1.min.js"></script>
367</customhtml><style>/* Site tokens */
368:root {
369    --ff-sand: #E6CAB8;
370    --ff-paper: #faf8f8;
371    --ff-blue: #3D5AFE;
372    --ff-ink: #000000;
373    --ff-highlight: rgba(255, 255, 0, 0.30);
374    --ff-highlight-hover: rgba(255, 255, 0, 0.45);
375    --ff-form-ink: #3d3d3d;
376    --ff-form-line: #111111;
377    --ff-font: "Favorit Variable", "Favorit", Arial, sans-serif;
378--ff-font-mono: "Favorit Variable", "Favorit", monospace;    --ff-font-diatype: "Diatype Variable";
379    --ff-grain-image: url("https://freight.cargo.site/t/original/i/D3015126079544655064318932235577/GRAIN-11.png");
380}
381
382/* Variables that are overridable on a page-by-page basis */
383:root {
384    --ff-body-background: var(--ff-paper);
385    --ff-body-grain-opacity: 0.18;
386    --ff-newsletter-display: block;
387}
388
389/* Animation for noise jitter */
390@keyframes localNoiseJitter {
391
392    0%,
393    100% {
394        background-position: 0 0;
395    }
396
397    10% {
398        background-position: -2% -3%;
399    }
400
401    20% {
402        background-position: -6% 2%;
403    }
404
405    30% {
406        background-position: 3% -8%;
407    }
408
409    40% {
410        background-position: 8% 8%;
411    }
412
413    50% {
414        background-position: -8% 3%;
415    }
416
417    60% {
418        background-position: 6% 2%;
419    }
420
421    70% {
422        background-position: 0 5%;
423    }
424
425    80% {
426        background-position: 8% 12%;
427    }
428
429    90% {
430        background-position: -4% 4%;
431    }
432}
433
434body {
435    position: relative;
436    background-color: var(--ff-body-background) !important;
437}
438
439/* 
440This is the one implementation of the noise that should be used. 
441If overrides are needed, use variables that can be added on a 
442page-by-page basis.
443*/
444
445body::before {
446    content: "" !important;
447    position: absolute !important;
448    inset: 0 !important;
449    z-index: 1 !important;
450    pointer-events: none !important;
451    opacity: var(--ff-body-grain-opacity) !important;
452    background-image: var(--ff-grain-image) !important;
453    background-repeat: repeat !important;
454    background-size: 140px 140px !important;
455    mix-blend-mode: multiply !important;
456    animation: localNoiseJitter 0.2s steps(4) infinite !important;
457}
458
459/* This allows the content to sit above the noise */
460.content {
461    position: relative;
462    z-index: 1;
463}
464
465
466/* Set min-height for page */
467.pages {
468    .page {
469        min-height: var(--viewport-height);
470    }
471}
472
473
474/* 
475Field Notes specific styles. 
476Everything is scoped to the HTML in the content having a 
477.field-notes-entry container
478*/
479
480.field-notes-entry {
481
482    /* COLOR */
483    *,
484    a,
485    bodycopy,
486    h1,
487    h2,
488    .caption,
489    media-item::part(caption),
490    media-item::part(caption-background) {
491        color: var(--ff-blue) !important;
492    }
493
494    h2 {
495        text-transform: uppercase !important;
496    }
497
498    /* HERO */
499    .project-hero {
500        width: 100% !important;
501        aspect-ratio: 2 / 1 !important;
502        overflow: hidden !important;
503        margin: 0 !important;
504
505        media-item {
506            display: block !important;
507            width: 100% !important;
508            height: 100% !important;
509        }
510    }
511
512    .project-hero media-item::part(figure),
513    .project-hero media-item::part(frame),
514    .project-hero media-item::part(sizing-frame),
515    .project-hero media-item::part(media),
516    .project-hero media-item::part(image) {
517        width: 100% !important;
518        height: 100% !important;
519    }
520
521    .project-hero media-item::part(figure),
522    .project-hero media-item::part(frame),
523    .project-hero media-item::part(sizing-frame) {
524        display: flex !important;
525        align-items: center !important;
526        justify-content: center !important;
527        overflow: hidden !important;
528    }
529
530    .project-hero media-item::part(media),
531    .project-hero media-item::part(image),
532    .project-hero media-item img,
533    .project-hero media-item video {
534        width: 100% !important;
535        height: 100% !important;
536        max-width: none !important;
537        max-height: none !important;
538        object-fit: cover !important;
539        object-position: 50% 50% !important;
540    }
541
542    .project-hero-single {
543        display: block !important;
544    }
545
546    .project-hero-diptych {
547        display: grid !important;
548        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
549        gap: 2rem !important;
550    }
551
552    .mobile & .project-hero {
553        aspect-ratio: 4 / 3 !important;
554    }
555
556    .mobile & .project-hero-diptych {
557        grid-template-columns: 1fr !important;
558        aspect-ratio: auto !important;
559    }
560
561    .mobile & .project-hero-diptych media-item {
562        aspect-ratio: 4 / 3 !important;
563    }
564
565    /* LINKS */
566    a,
567    a:link,
568    a:visited,
569    .linked,
570    [href] {
571        color: inherit !important;
572        text-decoration: none !important;
573        background: var(--ff-highlight) !important;
574        padding: 0 0.10em !important;
575        box-decoration-break: clone !important;
576        -webkit-box-decoration-break: clone !important;
577
578        &:hover,
579        &:focus {
580            background: var(--ff-highlight-hover) !important;
581            text-decoration-color: rgba(255, 255, 0, 0.65) !important;
582        }
583    }
584
585    /* DELETE when simple-nav is gone */
586    a.simple-nav,
587    a.simple-nav:link,
588    a.simple-nav:visited,
589    a.simple-nav:hover,
590    a.simple-nav:active,
591    .simple-nav a,
592    .simple-nav a:link,
593    .simple-nav a:visited,
594    .simple-nav a:hover,
595    .simple-nav a:active {
596        background: transparent !important;
597        background-image: none !important;
598        box-shadow: none !important;
599        text-decoration: none !important;
600        padding: 0 !important;
601    }
602}
603
604
605/* ========================================================
606   CARGO BASE
607   ======================================================== */
608
609html {
610    --mobile-scale: 1;
611    --mobile-padding-offset: 0.74;
612}
613
614body {
615    --swatch-1: rgba(0, 0, 0, 0.85);
616    --swatch-2: rgba(0, 0, 0, 0.75);
617    --swatch-3: rgba(0, 0, 0, 0.6);
618    --swatch-4: rgba(0, 0, 0, 0.4);
619    --swatch-5: rgba(0, 0, 0, 0.25);
620}
621
622a:active,
623.linked:active,
624.zoomable::part(media):active {
625    opacity: 0.7;
626}
627
628sub {
629    position: relative;
630    vertical-align: baseline;
631    top: 0.3em;
632}
633
634sup {
635    position: relative;
636    vertical-align: baseline;
637    top: -0.4em;
638}
639
640.small-caps {
641    font-variant: small-caps;
642    text-transform: lowercase;
643}
644
645ol {
646    margin: 0;
647    padding: 0 0 0 2.5em;
648}
649
650ul {
651    margin: 0;
652    padding: 0 0 0 2.0em;
653}
654
655ul.lineated {
656    padding: 0;
657    list-style-type: none;
658    margin: 0 0 0 3em;
659    text-indent: -3em;
660}
661
662blockquote {
663    margin: 0;
664    padding: 0 0 0 2em;
665}
666
667hr {
668    background: rgba(0, 0, 0, 0.6);
669    border: 0;
670    height: 1px;
671    display: block;
672    margin-top: 1rem;
673    margin-bottom: 1rem;
674}
675
676.page-layout {
677    align-items: flex-start;
678    max-width: 100%;
679}
680
681.page-content {
682    padding: 2rem;
683    text-align: center;
684}
685
686
687/* ========================================================
688   TYPE
689   ======================================================== */
690
691bodycopy,
692h1,
693h2,
694.caption,
695.callout-a,
696.simple-nav,
697.fieldnotes-intro,
698.fieldnotes-body,
699.indented,
700.project-info-body {
701    font-family: var(--ff-font);
702    font-style: normal;
703    letter-spacing: 0;
704    display: block;
705    font-variation-settings: 'slnt' 0;
706}
707
708.captions-fieldnotes,
709.heading-2-sentence-case {
710    font-family: var(--ff-font-mono);
711    font-style: normal;
712    letter-spacing: 0em;
713    display: block;
714}
715
716.filednotes-entry-callout,
717.caption-fieldnotes {
718    font-family: var(--ff-font-mono);
719    font-style: normal;
720    letter-spacing: 0;
721    display: block;
722}
723
724bodycopy a,
725h1 a,
726h2 a,
727.caption a,
728.simple-nav a,
729.captions-fieldnotes a,
730.fieldnotes-intro a,
731.fieldnotes-body a,
732.filednotes-entry-callout a,
733.heading-2-sentence-case a,
734.caption-fieldnotes a,
735.project-info-body a {
736    color: var(--ff-ink);
737    text-decoration: none;
738}
739
740bodycopy {
741    font-size: 1.5rem;
742    font-weight: 350;
743    color: var(--ff-ink);
744    line-height: 1.3;
745    font-family: "Favorit Variable";
746    font-style: normal;
747    font-variation-settings: 'slnt' 0;
748}
749
750.mobile bodycopy {
751    font-size: 1.95rem;
752}
753
754h1 {
755    font-weight: 350;
756    margin: 0;
757    font-size: 4.5rem;
758    line-height: 1;
759    color: var(--ff-ink);
760}
761
762.mobile h1 {
763    font-size: 4rem;
764}
765
766h2 {
767    font-weight: 400;
768    margin: 0;
769    color: var(--ff-ink);
770    font-size: 2.25rem;
771    line-height: 1.1;
772}
773
774.mobile h2 {
775    font-size: 2.5rem;
776}
777
778.caption {
779    font-size: 1.5rem;
780    font-weight: 350;
781    color: var(--ff-ink);
782    line-height: 1.2;
783}
784
785.mobile .caption {
786    font-size: 1.7rem;
787}
788
789.caption a {
790    text-decoration: none !important;
791}
792
793media-item .caption {
794    margin-top: 1em;
795}
796
797gallery-grid .caption,
798gallery-columnized .caption,
799gallery-justify .caption {
800    margin-bottom: 2em;
801}
802
803[thumbnail-index] .caption {
804    text-align: center;
805}
806
807[thumbnail-index] .caption .tags {
808    margin-top: 0.25em;
809}
810
811.callout-a {
812    --text-style: "Callout A";
813    font-size: 8.00rem;
814    font-weight: 350;
815    color: rgba(0, 0, 0, 0.75);
816    line-height: 1.1em;
817}
818
819.mobile .callout-a {
820    font-size: 5.95rem;
821}
822
823.callout-a a {
824    color: rgba(0, 0, 0, 0.75);
825    text-decoration: none;
826}
827
828.simple-nav {
829    --text-style: "Simple Nav";
830    font-size: 1.25rem;
831    font-weight: 400;
832    color: var(--ff-ink);
833    line-height: 1.3;
834}
835
836.mobile .simple-nav {
837    font-size: 1.5rem;
838}
839
840.captions-fieldnotes {
841    --text-style: "Captions FieldNotes";
842    font-size: 1.4rem;
843    font-weight: 420;
844    color: var(--ff-ink);
845    line-height: 1.3;
846}
847
848.fieldnotes-intro {
849    --text-style: "FieldNotes Intro";
850    font-size: 3.25rem;
851    font-weight: 350;
852    color: var(--ff-ink);
853    line-height: 1.3;
854}
855
856.fieldnotes-body {
857    --text-style: "FieldNotes Body";
858    font-size: 1.5rem;
859    font-weight: 350;
860    color: var(--ff-ink);
861    line-height: 1.4;
862}
863
864.mobile .fieldnotes-body {
865    font-size: 1.95rem;
866}
867
868.filednotes-entry-callout {
869    --text-style: "FiledNotes Entry Callout";
870    font-size: 4.75rem;
871    font-weight: 300;
872    color: var(--ff-ink);
873    line-height: 1.3;
874}
875
876.mobile .filednotes-entry-callout {
877    font-size: 4.55rem;
878}
879
880.heading-2-sentence-case {
881    --text-style: "Heading 2 Sentence Case";
882    font-size: 1.4rem;
883    font-weight: 420;
884    color: var(--ff-ink);
885    line-height: 1.3;
886}
887
888.caption-fieldnotes {
889    --text-style: "Caption - FieldNotes";
890    font-size: 1.1rem;
891    font-weight: 400;
892    color: var(--ff-ink);
893    line-height: 1.3;
894}
895
896.mobile .caption-fieldnotes {
897    font-size: 1.54rem;
898}
899
900.indented {
901    padding-left: 30px;
902    --text-style: "Intented";
903    font-size: 1.5rem;
904    font-weight: 350;
905    color: rgba(0, 0, 0, 0.4);
906    line-height: 1.3;
907}
908
909.mobile .indented {
910    font-size: 1.6rem;
911}
912
913.indented a {
914    color: rgba(0, 0, 0, 0.4);
915    text-decoration: none;
916}
917
918.project-info-body {
919    --text-style: "Project Info Body";
920    font-size: 1.25rem;
921    font-weight: 350;
922    color: var(--ff-ink);
923    line-height: 1.3;
924}
925
926.mobile .project-info-body {
927    font-size: 1.6rem;
928}
929
930
931/* ========================================================
932   MEDIA, QUICK VIEW, SHOP, AUDIO
933   ======================================================== */
934
935media-item {
936    --scroll-animation: scrollAnimationFlyIn-3;
937    --scroll-animation-timing: cubic-bezier(0.39, 0.575, 0.565, 1);
938    --scroll-animation-mode: animation;
939}
940
941media-item::part(media) {
942    border: 0;
943    padding: 0;
944}
945
946@keyframes scrollAnimationFlyIn-3 {
947    0% {
948        transform: translateY(20vh);
949    }
950
951    35%,
952    65%,
953    100% {
954        transform: scale(1);
955    }
956}
957
958.quick-view {
959    height: 100%;
960    width: 100%;
961    padding: 5rem;
962    margin: auto;
963}
964
965.quick-view-background {
966    background-color: #ffffff;
967}
968
969.quick-view .caption {
970    color: rgba(255, 255, 255, 1.0);
971    padding: 20px 0;
972    text-align: center;
973    transition: 100ms opacity ease-in-out;
974    position: absolute;
975    bottom: 0;
976    left: 0;
977    right: 0;
978}
979
980.quick-view .caption-background {
981    padding: 0.5rem 1rem;
982    display: inline-block;
983    background: rgba(0, 0, 0, 0.5);
984    border-radius: .5rem;
985    text-align: left;
986    max-width: 50rem;
987}
988
989.mobile .quick-view {
990    width: 100%;
991    height: 100%;
992    margin: 0;
993    padding: 10px;
994}
995
996.mobile .quick-view .caption {
997    padding: 10px 0;
998}
999
1000.favorit-mono {
1001	--text-style: "favorit-mono";
1002	font-family: var(--ff-font);
1003	font-style: normal;
1004	letter-spacing: 0;
1005	display: block;
1006	font-variation-settings: 'slnt' 0;
1007}
1008
1009.favorit-mono a {
1010	color: var(--ff-ink);
1011	text-decoration: none;
1012}
1013
1014.favorit-mono {
1015	--text-style: "favorit-mono";
1016	font-size: 1.5rem;
1017	font-weight: 350;
1018	color: var(--ff-ink);
1019	line-height: 1.3;
1020	font-family: "Favorit Variable";
1021	font-style: normal;
1022	font-variation-settings: 'slnt' 0;
1023}
1024
1025.mobile .favorit-mono {
1026	font-size: 1.95rem;
1027}
1028
1029
1030
1031.mobile .quick-view .caption-background {
1032    max-width: 100vw;
1033}
1034
1035::part(slideshow-nav) {
1036    --button-size: 30px;
1037    --button-inset: 20px;
1038    --button-icon-color: rgba(255, 255, 255, 0.9);
1039    --button-icon-stroke-width: 1.5px;
1040    --button-icon-stroke-linecap: none;
1041    --button-background-color: rgba(87, 87, 87, 0.35);
1042    --button-background-radius: 50%;
1043    --button-active-opacity: 0.7;
1044}
1045
1046gallery-slideshow::part(slideshow-nav) {
1047    --button-inset: 15px;
1048}
1049
1050.mobile ::part(slideshow-nav) {
1051    --button-inset: 10px;
1052}
1053
1054.mobile .quick-view::part(slideshow-nav) {
1055    --button-inset: 25px;
1056}
1057
1058shop-product {
1059    font-size: 1.2rem;
1060    max-width: 22rem;
1061    font-family: var(--ff-font-mono);
1062    font-style: normal;
1063    font-weight: 400;
1064    letter-spacing: 0em;
1065    margin-bottom: 1em;
1066}
1067
1068shop-product::part(price) {
1069    color: rgba(0, 0, 0, 0.75);
1070    line-height: 1.1;
1071    margin-bottom: 0.5em;
1072}
1073
1074shop-product::part(dropdown) {
1075    width: 100%;
1076    color: rgba(0, 0, 0, 0.85);
1077    border: 1px solid rgba(0, 0, 0, 0.2);
1078    background-color: rgba(255, 255, 255, 0.0);
1079    background-image: url(https://static.cargo.site/assets/images/select-line-arrows.svg);
1080    background-repeat: no-repeat;
1081    background-position: top 0em right .1em;
1082    line-height: 1.2;
1083    padding: 0.58em 2em 0.55em 0.9em;
1084    border-radius: 10em;
1085    margin-bottom: 0.5em;
1086}
1087
1088shop-product::part(button) {
1089    background: rgba(0, 0, 0, 0.15);
1090    color: rgba(0, 0, 0, 0.75);
1091    text-align: left;
1092    line-height: normal;
1093    padding: 0.5em 1em;
1094    cursor: pointer;
1095    border-radius: 10em;
1096}
1097
1098shop-product::part(button):active {
1099    opacity: .7;
1100}
1101
1102audio-player {
1103    --text-color: rgba(0, 0, 0, 0.85);
1104    --text-padding: 0 1.2em 0 1.0em;
1105    --background-color: rgba(255, 255, 255, 0);
1106    --buffer-background-color: rgba(0, 0, 0, 0.03);
1107    --progress-background-color: rgba(0, 0, 0, 0.075);
1108    --border-lines: 1px solid rgba(0, 0, 0, 0.2);
1109    font-size: 1.2rem;
1110    width: 32rem;
1111    height: 2.75em;
1112    font-family: var(--ff-font-mono);
1113    font-style: normal;
1114    font-weight: 400;
1115    line-height: normal;
1116    letter-spacing: 0em;
1117    margin-bottom: 0.5em;
1118    border-radius: 10em;
1119}
1120
1121audio-player::part(button) {
1122    --icon-color: rgba(0, 0, 0, 0.85);
1123    --icon-size: 32%;
1124    --play-text: '';
1125    --pause-text: '';
1126    width: 3.15em;
1127    display: inline-flex;
1128    justify-content: center;
1129    cursor: pointer;
1130}
1131
1132audio-player::part(play-icon) {
1133    padding-left: 0.6em;
1134}
1135
1136audio-player::part(pause-icon) {
1137    padding-left: 0.4em;
1138}
1139
1140audio-player::part(progress-indicator) {
1141    border-right: 1px solid rgba(0, 0, 0, 0);
1142    height: 100%;
1143    cursor: ew-resize;
1144}
1145
1146audio-player::part(separator) {
1147    border-right: var(--border-lines);
1148}
1149
1150body.mobile audio-player {
1151    max-width: 100%;
1152}
1153
1154
1155/* ========================================================
1156   HOME, NAV, LAYOUT
1157   ======================================================== */
1158
1159html,
1160body,
1161.cargo-site,
1162.site-container,
1163.page-container,
1164.content-container,
1165.page {
1166    margin: 0 !important;
1167    padding: 0 !important;
1168    max-width: 100% !important;
1169    width: 100% !important;
1170}
1171
1172.page:has(.home-hero-viewport) {
1173    min-height: var(--viewport-height);
1174}
1175
1176.page-layout:has(.home-hero-viewport),
1177.page-content:has(.home-hero-viewport) {
1178    padding: 0 !important;
1179}
1180
1181.page-content:has(.home-hero-viewport) {
1182    align-items: flex-start;
1183    overflow-x: hidden !important;
1184}
1185
1186.home-hero-viewport {
1187    position: relative;
1188    width: 100vw !important;
1189    max-width: none !important;
1190    height: 101vh !important;
1191    left: auto;
1192    right: auto;
1193    margin-top: 0 !important;
1194    margin-right: calc(50% - 50vw) !important;
1195    margin-left: calc(50% - 50vw) !important;
1196    overflow: hidden;
1197}
1198
1199.hero-bg-frame,
1200.hero-bg-frame img {
1201    width: 100% !important;
1202    height: 100% !important;
1203    object-fit: cover !important;
1204}
1205
1206.hero-graphic-overlay {
1207    position: absolute;
1208    top: 50%;
1209    left: 50%;
1210    transform: translate(-50%, -50%);
1211    z-index: 10;
1212    width: 35vw;
1213    max-width: 400px;
1214    display: flex;
1215    justify-content: center;
1216    align-items: center;
1217}
1218
1219.breathing-logo,
1220.breathing-logo svg {
1221    width: 100%;
1222    height: 100%;
1223    display: block;
1224}
1225
1226.breathing-logo svg path {
1227    fill: #2f52d9;
1228    animation: ffBlueBreathe 9s ease-in-out infinite;
1229}
1230
1231@keyframes ffBlueBreathe {
1232
1233    0%,
1234    100% {
1235        fill: #2F52D9;
1236    }
1237
1238    50% {
1239        fill: #5D7EFF;
1240    }
1241}
1242
1243.main-content-canvas {
1244    width: 100vw;
1245    position: relative;
1246    left: 50%;
1247    margin-left: -50vw;
1248    padding: 100px 0;
1249    box-sizing: border-box;
1250}
1251
1252.fixed-nav-bar {
1253    position: fixed !important;
1254    top: 0.75rem !important;
1255    left: 50% !important;
1256    transform: translateX(-50%) !important;
1257    width: auto !important;
1258    max-width: 95vw !important;
1259    background-color: var(--ff-highlight) !important;
1260    backdrop-filter: blur(4px) !important;
1261    z-index: 9999 !important;
1262    box-sizing: border-box !important;
1263    margin: 0 !important;
1264    text-align: center !important;
1265    padding: 3px 8px 2px !important;
1266}
1267
1268.nav-links {
1269    display: flex !important;
1270    justify-content: center !important;
1271    align-items: center !important;
1272    gap: 28px !important;
1273    width: auto !important;
1274    margin: 0 !important;
1275    padding: 0 !important;
1276}
1277
1278.nav-row {
1279    display: contents !important;
1280}
1281
1282.nav-item {
1283    text-decoration: none !important;
1284    color: var(--ff-ink) !important;
1285    font-family: var(--ff-font) !important;
1286    font-size: 1.125rem !important;
1287    letter-spacing: 0.02em !important;
1288    font-weight: 350 !important;
1289    white-space: nowrap !important;
1290    transition: opacity 0.2s ease !important;
1291    margin: 0 !important;
1292    padding: 0 !important;
1293    line-height: 1 !important;
1294}
1295
1296.nav-item:hover {
1297    opacity: 0.6 !important;
1298}
1299
1300@media (max-width: 767px) {
1301    .fixed-nav-bar {
1302        width: auto !important;
1303        max-width: 95vw !important;
1304        background-color: transparent !important;
1305        backdrop-filter: none !important;
1306        padding: 0 !important;
1307    }
1308
1309    .nav-links {
1310        display: flex !important;
1311        flex-direction: column !important;
1312        align-items: center !important;
1313        gap: 1rem !important;
1314    }
1315
1316    .nav-item {
1317        font-size: 2.0rem !important;
1318    }
1319
1320    .nav-row {
1321        display: flex !important;
1322        justify-content: center !important;
1323        align-items: center !important;
1324        gap: 28px !important;
1325        width: max-content !important;
1326        max-width: 95vw !important;
1327        padding: 3px 8px 2px !important;
1328        background-color: var(--ff-highlight) !important;
1329        backdrop-filter: blur(4px) !important;
1330        box-sizing: border-box !important;
1331    }
1332}
1333
1334.header-spacer {
1335    height: 80px;
1336}
1337
1338
1339/* Project hero — square crop on mobile (non-Field Notes pages) */
1340body.mobile .project-hero {
1341    aspect-ratio: auto !important;
1342    height: auto !important;
1343    overflow: visible !important;
1344}
1345
1346body.mobile .project-hero media-item {
1347    height: auto !important;
1348}
1349
1350body.mobile .project-hero media-item::part(figure) {
1351    height: auto !important;
1352}
1353
1354body.mobile .project-hero media-item::part(sizing-frame) {
1355    width: 100% !important;
1356    height: auto !important;
1357    aspect-ratio: 1 / 1 !important;
1358    overflow: hidden !important;
1359}
1360
1361body.mobile .project-hero media-item::part(media),
1362body.mobile .project-hero media-item::part(image),
1363body.mobile .project-hero media-item img,
1364body.mobile .project-hero media-item video {
1365    width: 100% !important;
1366    height: 100% !important;
1367    object-fit: cover !important;
1368    object-position: center top !important;
1369}
1370
1371
1372/* ========================================================
1373   NEWSLETTER POPUP
1374   Winning styles from the stacked patches, collapsed to one set.
1375   ======================================================== */
1376
1377.ff-newsletter[hidden],
1378.ff-newsletter__response-frame {
1379    display: none !important;
1380}
1381
1382.ff-newsletter {
1383    --ff-popup-paper: #f3efec;
1384    --ff-popup-ink: #000000;
1385    --ff-popup-border: #000000;
1386    --ff-popup-overlay: rgba(20, 17, 15, 0.48);
1387    position: fixed;
1388    inset: 0;
1389    z-index: 2147483000;
1390    pointer-events: none;
1391    visibility: hidden;
1392    font-family: var(--ff-font-mono);
1393}
1394
1395.ff-newsletter.is-visible {
1396    pointer-events: auto;
1397    visibility: visible;
1398}
1399
1400html.ff-newsletter-is-open,
1401html.ff-newsletter-is-open body {
1402    overflow: hidden !important;
1403}
1404
1405.ff-newsletter__backdrop {
1406    position: absolute;
1407    inset: 0;
1408    width: 100%;
1409    height: 100%;
1410    padding: 0;
1411    border: 0;
1412    border-radius: 0;
1413    background: var(--ff-popup-overlay);
1414    cursor: default;
1415    opacity: 0;
1416    transition: opacity 360ms ease;
1417}
1418
1419.ff-newsletter__panel {
1420    position: absolute;
1421    right: 32px;
1422    bottom: 32px;
1423    box-sizing: border-box;
1424    width: 664px;
1425    min-height: 888px;
1426    margin: 0;
1427    color: var(--ff-popup-ink);
1428    background: var(--ff-popup-paper);
1429    border: 1px solid var(--ff-popup-border);
1430    opacity: 0;
1431    transform-origin: right bottom;
1432    transform: translateY(22px) scale(0.63);
1433    transition: opacity 360ms ease, transform 360ms cubic-bezier(.22, .61, .36, 1);
1434}
1435
1436.ff-newsletter.is-visible .ff-newsletter__backdrop,
1437.ff-newsletter.is-visible .ff-newsletter__panel {
1438    opacity: 1;
1439}
1440
1441.ff-newsletter.is-visible .ff-newsletter__panel {
1442    transform: translateY(0) scale(0.63);
1443}
1444
1445.ff-newsletter .ff-newsletter__content {
1446    box-sizing: border-box !important;
1447    min-height: 886px !important;
1448    padding: 109px 39px 38px !important;
1449}
1450
1451.ff-newsletter .ff-newsletter__close {
1452    position: absolute;
1453    top: -1px;
1454    right: -1px;
1455    width: 90px !important;
1456    height: 90px !important;
1457    padding: 0;
1458    border: 1px solid var(--ff-popup-border) !important;
1459    border-radius: 0;
1460    color: var(--ff-popup-ink) !important;
1461    background: var(--ff-popup-paper);
1462    cursor: pointer;
1463}
1464
1465.ff-newsletter__close span::before,
1466.ff-newsletter__close span::after {
1467    content: "";
1468    position: absolute;
1469    top: 50%;
1470    left: 50%;
1471    width: 37px !important;
1472    height: 1px !important;
1473    background: currentColor;
1474}
1475
1476.ff-newsletter__close span::before {
1477    transform: translate(-50%, -50%) rotate(45deg);
1478}
1479
1480.ff-newsletter__close span::after {
1481    transform: translate(-50%, -50%) rotate(-45deg);
1482}
1483
1484.ff-newsletter .ff-newsletter__title {
1485    margin: 0 !important;
1486    color: var(--ff-ink) !important;
1487    font-family: var(--ff-font) !important;
1488    font-size: 64px !important;
1489    font-weight: 400 !important;
1490    line-height: 64px !important;
1491    letter-spacing: 0 !important;
1492    text-transform: uppercase !important;
1493}
1494
1495.ff-newsletter .ff-newsletter__description {
1496    max-width: none !important;
1497    margin: 49px 0 0 !important;
1498    color: var(--ff-ink) !important;
1499    font-family: var(--ff-font) !important;
1500    font-size: 36px !important;
1501    font-weight: 400 !important;
1502    line-height: 42px !important;
1503    letter-spacing: 0 !important;
1504}
1505
1506.ff-newsletter .ff-newsletter__form {
1507    margin-top: 49px !important;
1508}
1509
1510.ff-newsletter__honeypot {
1511    position: absolute !important;
1512    width: 1px !important;
1513    height: 1px !important;
1514    padding: 0 !important;
1515    margin: -1px !important;
1516    overflow: hidden !important;
1517    clip: rect(0, 0, 0, 0) !important;
1518    white-space: nowrap !important;
1519    border: 0 !important;
1520}
1521
1522.ff-newsletter .ff-newsletter__label {
1523    position: static !important;
1524    display: block !important;
1525    width: auto !important;
1526    height: auto !important;
1527    margin: 0 0 12px !important;
1528    padding: 0 !important;
1529    overflow: visible !important;
1530    clip: auto !important;
1531    white-space: normal !important;
1532    border: 0 !important;
1533    color: var(--ff-form-ink) !important;
1534    font-family: var(--ff-font) !important;
1535    font-size: 30px !important;
1536    font-weight: 400 !important;
1537    line-height: 1 !important;
1538    letter-spacing: 0 !important;
1539}
1540
1541.ff-newsletter .ff-newsletter__email,
1542.ff-newsletter .ff-newsletter__submit {
1543    box-sizing: border-box !important;
1544    height: 51px !important;
1545    color: var(--ff-form-ink) !important;
1546    background: transparent !important;
1547    border: 1.5px solid #000000 !important;
1548    border-radius: 0 !important;
1549    box-shadow: none !important;
1550    font-family: var(--ff-font) !important;
1551    font-size: 30px !important;
1552    font-weight: 400 !important;
1553    line-height: 1 !important;
1554    letter-spacing: 0 !important;
1555    appearance: none !important;
1556    -webkit-appearance: none !important;
1557}
1558
1559.ff-newsletter .ff-newsletter__email,
1560.ff-newsletter .ff-newsletter__email:focus {
1561    height: 68px !important;
1562    border: 2px solid #000000 !important;
1563}
1564
1565.ff-newsletter .ff-newsletter__email,
1566.ff-newsletter .ff-newsletter__email:focus {
1567    width: 100% !important;
1568    padding: 0 14px !important;
1569    border: 1.5px solid #000000 !important;
1570    outline: 0 !important;
1571    outline-offset: 0 !important;
1572    box-shadow: none !important;
1573}
1574
1575.ff-newsletter .ff-newsletter__email::placeholder {
1576    color: #8b8b8b !important;
1577    opacity: 1 !important;
1578}
1579
1580.ff-newsletter .ff-newsletter__email[aria-invalid="true"] {
1581    border-color: #9a2f24;
1582}
1583
1584.ff-newsletter__close:focus-visible,
1585.ff-newsletter__submit:focus-visible {
1586    outline: 2px solid var(--ff-popup-ink);
1587    outline-offset: 2px;
1588}
1589
1590.ff-newsletter .ff-newsletter__submit {
1591    display: block;
1592    width: 220px !important;
1593    margin-top: 54px !important;
1594    padding: 1px 16px 0 !important;
1595    text-transform: uppercase !important;
1596    cursor: pointer !important;
1597    transition: color 160ms ease, background-color 160ms ease;
1598}
1599
1600.ff-newsletter .ff-newsletter__submit:hover {
1601    color: var(--ff-popup-paper) !important;
1602    background: #000000 !important;
1603}
1604
1605.ff-newsletter .ff-newsletter__submit:disabled {
1606    cursor: default !important;
1607    opacity: 1 !important;
1608}
1609
1610.ff-newsletter .ff-newsletter__message {
1611    min-height: 1em !important;
1612    margin: 10px 0 0 !important;
1613    color: var(--ff-ink) !important;
1614    font-family: var(--ff-font) !important;
1615    font-size: 19px !important;
1616    font-weight: 400 !important;
1617    line-height: 1.15 !important;
1618    text-transform: uppercase !important;
1619}
1620
1621.ff-newsletter__message:empty {
1622    display: none;
1623}
1624
1625.ff-newsletter .ff-newsletter__privacy {
1626    margin-top: 71px !important;
1627    color: var(--ff-ink) !important;
1628    font-family: var(--ff-font) !important;
1629    font-size: 20px !important;
1630    font-weight: 400 !important;
1631    line-height: 1.2 !important;
1632    letter-spacing: 0.01em;
1633    text-align: center;
1634}
1635
1636@media (max-width: 700px) {
1637    .ff-newsletter .ff-newsletter__panel {
1638        top: 50% !important;
1639        right: auto !important;
1640        bottom: auto !important;
1641        left: 50% !important;
1642        width: 664px !important;
1643        min-height: 888px !important;
1644        max-width: none !important;
1645        max-height: none !important;
1646        overflow: visible !important;
1647        transform-origin: center center !important;
1648        transform: translate(-50%, calc(-50% + 14px)) scale(0.54) !important;
1649    }
1650
1651    .ff-newsletter.is-visible .ff-newsletter__panel {
1652        transform: translate(-50%, -50%) scale(0.54) !important;
1653    }
1654
1655    .ff-newsletter .ff-newsletter__form {
1656        margin-top: 36px !important;
1657    }
1658
1659    .ff-newsletter .ff-newsletter__label {
1660        margin-bottom: 14px !important;
1661        color: var(--ff-ink) !important;
1662        font-size: 32px !important;
1663        line-height: 1.15 !important;
1664    }
1665
1666    .ff-newsletter .ff-newsletter__email,
1667    .ff-newsletter .ff-newsletter__submit {
1668        height: 64px !important;
1669        font-size: 32px !important;
1670    }
1671
1672    .ff-newsletter .ff-newsletter__email {
1673        padding: 0 16px !important;
1674    }
1675
1676    .ff-newsletter .ff-newsletter__email::placeholder {
1677        color: #5a5a5a !important;
1678    }
1679
1680    .ff-newsletter .ff-newsletter__submit {
1681        width: 220px !important;
1682        margin-top: 38px !important;
1683        padding: 2px 16px 0 !important;
1684    }
1685
1686    .ff-newsletter .ff-newsletter__privacy {
1687        font-size: 32px !important;
1688    }
1689}
1690
1691@media (max-width: 374px) {
1692    .ff-newsletter .ff-newsletter__panel {
1693        transform: translate(-50%, calc(-50% + 14px)) scale(0.49) !important;
1694    }
1695
1696    .ff-newsletter.is-visible .ff-newsletter__panel {
1697        transform: translate(-50%, -50%) scale(0.49) !important;
1698    }
1699}
1700
1701@media (prefers-reduced-motion: reduce) {
1702
1703    .ff-newsletter__backdrop,
1704    .ff-newsletter__panel {
1705        transition-duration: 1ms;
1706    }
1707}
1708
1709
1710/* ========================================================
1711   BASIN FORM
1712   ======================================================== */
1713
1714.ff-form-embed {
1715    width: 100%;
1716    max-width: 42rem;
1717    margin: 0;
1718    padding-top: 1.5rem;
1719    color: var(--ff-form-ink);
1720    font: inherit;
1721    letter-spacing: 0;
1722}
1723
1724.ff-form-embed label,
1725.ff-form-embed legend {
1726    display: block;
1727    margin: 0 0 1.8rem;
1728    padding: 0 0 0 0.7em;
1729    border: 0;
1730    line-height: 1.18;
1731    font-weight: 400;
1732}
1733
1734.ff-form-embed fieldset {
1735    display: block;
1736    margin: 2.6rem 0 1.8rem;
1737    padding: 0;
1738    border: 0;
1739}
1740
1741.ff-form-embed legend {
1742    margin-bottom: 1.55rem;
1743}
1744
1745.ff-form-embed span,
1746.ff-field-note {
1747    color: var(--ff-form-ink);
1748    font: inherit;
1749}
1750
1751.ff-form-embed .ff-field-note {
1752    display: block !important;
1753    box-sizing: border-box !important;
1754    max-width: 34rem;
1755    margin-top: .5rem;
1756}
1757
1758.ff-form-embed input[type="text"],
1759.ff-form-embed input[type="email"],
1760.ff-form-embed select,
1761.ff-form-embed textarea {
1762    display: block;
1763    width: 100%;
1764    margin-top: 0.7rem;
1765    margin-left: -0.7em;
1766    padding: 0.9rem;
1767    border: 1px solid var(--ff-form-line);
1768    border-radius: 0;
1769    background-color: transparent;
1770    color: var(--ff-form-ink);
1771    font: inherit;
1772    line-height: 1;
1773    box-sizing: border-box;
1774}
1775
1776.ff-form-embed textarea {
1777    height: 10rem;
1778}
1779
1780.ff-form-embed input::placeholder {
1781    color: var(--ff-form-ink);
1782    opacity: 1;
1783}
1784
1785.ff-form-embed select {
1786    appearance: none;
1787    background-image:
1788        linear-gradient(45deg, transparent 50%, #111 50%),
1789        linear-gradient(135deg, #111 50%, transparent 50%);
1790    background-position:
1791        calc(100% - 1.85rem) 50%,
1792        calc(100% - 1.35rem) 50%;
1793    background-size: 0.55rem 0.55rem, 0.55rem 0.55rem;
1794    background-repeat: no-repeat;
1795    cursor: pointer;
1796}
1797
1798.ff-form-embed input:focus,
1799.ff-form-embed select:focus,
1800.ff-form-embed button:focus-visible {
1801    outline: 1px solid var(--ff-form-line);
1802    outline-offset: 3px;
1803}
1804
1805.ff-form-embed fieldset label {
1806    padding-left: 0 !important;
1807    display: flex;
1808    align-items: flex-start;
1809    gap: 0.5rem;
1810    margin-bottom: 1rem;
1811
1812    input[type="radio"],
1813    input[type="checkbox"] {
1814        flex: 0 0 auto;
1815        margin-top: 0.1em;
1816        margin-left: 0;
1817        margin-right: .3em;
1818    }
1819}
1820
1821.ff-form-embed input[type="checkbox"] {
1822    appearance: none;
1823    -webkit-appearance: none;
1824    width: 0.72em;
1825    height: 0.72em;
1826    margin: 0 0.45rem 0 0.05rem;
1827    border: 1px solid var(--ff-form-line);
1828    border-radius: 2px;
1829    background: transparent;
1830    vertical-align: -0.05em;
1831}
1832
1833.ff-form-embed input[type="checkbox"]:checked {
1834    background: var(--ff-form-line);
1835}
1836
1837.ff-form-embed input[type="radio"] {
1838    appearance: none;
1839    -webkit-appearance: none;
1840    background-color: transparent;
1841    width: 0.72em;
1842    height: 0.72em;
1843    border: 1px solid var(--ff-form-line);
1844    border-radius: 50%;
1845    margin-right: 0.45rem;
1846    transform: translateY(1px);
1847}
1848
1849.ff-form-embed input[type="radio"]:checked {
1850    background: var(--ff-form-line);
1851}
1852
1853.ff-form-embed input[type="radio"]:focus-visible {
1854    outline: 1px solid var(--ff-form-line);
1855    outline-offset: 2px;
1856}
1857
1858.ff-form-embed button {
1859    min-width: 10.4rem;
1860    margin-top: 0.45rem;
1861    padding: 0 1.5rem;
1862    border: 1px solid var(--ff-form-line);
1863    border-radius: 0;
1864    background: transparent;
1865    color: var(--ff-form-ink);
1866    font: inherit;
1867    font-family: inherit;
1868    font-weight: inherit;
1869    text-align: center;
1870    cursor: pointer;
1871}
1872
1873.ff-form-embed button[type="submit"] {
1874    box-sizing: border-box !important;
1875    padding-top: 2px !important;
1876}
1877
1878.ff-form-embed button:hover {
1879    background: var(--ff-form-line);
1880    color: var(--ff-paper);
1881}
1882
1883.ff-form-embed input,
1884.ff-form-embed select {
1885    font-family: inherit;
1886    font-weight: inherit;
1887}
1888
1889body.mobile .ff-form-embed input[type="checkbox"] {
1890    width: 0.9em !important;
1891    height: 0.9em !important;
1892}
1893
1894@media (max-width: 767px) {
1895
1896    .ff-form-embed,
1897    .ff-form-embed label,
1898    .ff-form-embed legend,
1899    .ff-form-embed .ff-field-note,
1900    .ff-form-embed input[type="text"],
1901    .ff-form-embed input[type="email"],
1902    .ff-form-embed select,
1903    .ff-form-embed button,
1904    .ff-form-embed textarea {
1905        font-family: var(--ff-font) !important;
1906        font-size: 17px !important;
1907        line-height: 1.3 !important;
1908    }
1909
1910    .ff-form-embed input[type="checkbox"] {
1911        width: 0.9em !important;
1912        height: 0.9em !important;
1913    }
1914}
1915
1916
1917/* ========================================================
1918   PROJECT DRAWERS
1919   Remove the hide block to restore drawer galleries.
1920   ======================================================== */
1921
1922/* CORE PROJECT DRAWER */
1923
1924.project-info-drawer-anchor {
1925    position: relative !important;
1926    top: auto !important;
1927    width: 100% !important;
1928    height: 0 !important;
1929    margin-bottom: clamp(4rem, 6vw, 8rem) !important;
1930    z-index: 9999 !important;
1931    pointer-events: none !important;
1932}
1933
1934body.mobile .project-info-drawer-anchor {
1935    margin-bottom: 3rem !important;
1936}
1937
1938@media (max-width: 767px) {
1939    .project-info-drawer-anchor {
1940        margin-bottom: 3rem !important;
1941    }
1942}
1943
1944.project-info-drawer {
1945    --drawer-tab: 30px;
1946    --drawer-width: clamp(420px, 33.333vw, 640px);
1947    position: absolute !important;
1948    top: 0 !important;
1949    right: calc(50% - 50vw) !important;
1950    bottom: auto !important;
1951    width: var(--drawer-width) !important;
1952    height: auto !important;
1953    min-height: 100vh !important;
1954    max-height: none !important;
1955    overflow: visible !important;
1956    box-sizing: border-box !important;
1957    transform: translateX(calc(100% - var(--drawer-tab))) !important;
1958    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1) !important;
1959    background: #d8ff21 !important;
1960    color: #000000 !important;
1961    box-shadow: -1px 0 0 rgba(0, 0, 0, 0.18) !important;
1962    z-index: 9999 !important;
1963    pointer-events: auto !important;
1964}
1965
1966.project-info-drawer:not([open]) {
1967    width: var(--drawer-width) !important;
1968    height: auto !important;
1969    min-height: 100vh !important;
1970    overflow: visible !important;
1971    transform: translateX(calc(100% - var(--drawer-tab))) !important;
1972}
1973
1974.project-info-drawer[open] {
1975    height: auto !important;
1976    min-height: 100vh !important;
1977    overflow: visible !important;
1978    transform: translateX(0) !important;
1979}
1980
1981.project-info-drawer summary {
1982    position: absolute !important;
1983    inset: 0 auto auto 0 !important;
1984    display: block !important;
1985    width: var(--drawer-tab) !important;
1986    height: 100vh !important;
1987    min-height: 100vh !important;
1988    margin: 0 !important;
1989    padding: 16px 6px !important;
1990    box-sizing: border-box !important;
1991    cursor: pointer !important;
1992    list-style: none !important;
1993    background: #d8ff21 !important;
1994    writing-mode: vertical-rl !important;
1995    text-orientation: mixed !important;
1996    text-transform: uppercase !important;
1997    font-family: "Favorit Variable", "Favorit", Arial, sans-serif !important;
1998    font-size: 14px !important;
1999    line-height: 1 !important;
2000    font-weight: 350 !important;
2001    z-index: 2 !important;
2002}
2003
2004.project-info-drawer summary::-webkit-details-marker {
2005    display: none !important;
2006}
2007
2008.project-info-drawer-panel {
2009    width: calc(100% - var(--drawer-tab)) !important;
2010    height: auto !important;
2011    min-height: 100vh !important;
2012    max-height: none !important;
2013    margin-left: var(--drawer-tab) !important;
2014    padding: clamp(24px, 2vw, 32px) !important;
2015    box-sizing: border-box !important;
2016    overflow: visible !important;
2017    font-family: "Favorit Variable", "Favorit", Arial, sans-serif !important;
2018    font-size: 16px !important;
2019    line-height: 1.25 !important;
2020    font-weight: 350 !important;
2021}
2022
2023.project-info-section {
2024    padding-top: 1em !important;
2025    border-top: 1px solid rgba(0, 0, 0, 0.55) !important;
2026}
2027
2028.project-info-press,
2029.project-info-description {
2030    margin-top: 1.25em !important;
2031}
2032
2033.project-info-drawer a,
2034.project-info-drawer a:link,
2035.project-info-drawer a:visited {
2036    color: #000000 !important;
2037    text-decoration: none !important;
2038}
2039
2040.project-info-slideshow {
2041    display: block !important;
2042    width: 100% !important;
2043    max-width: 100% !important;
2044    min-width: 0 !important;
2045    margin-top: 1.25em !important;
2046    padding-top: 1em !important;
2047    border-top: 1px solid rgba(0, 0, 0, 0.55) !important;
2048    overflow: hidden !important;
2049}
2050
2051body.mobile .project-info-drawer {
2052    --drawer-width: calc(100vw - 1rem);
2053    right: calc(50% - 50vw) !important;
2054}
2055
2056body.mobile .project-info-drawer-panel {
2057    padding: 24px 18px 32px !important;
2058    font-size: 1.2rem !important;
2059    line-height: 1.3 !important;
2060}
2061
2062
2063/* PROJECT DRAWER — CSS-ONLY THIN CLOSE ICON */
2064
2065.project-info-drawer>summary::after {
2066    content: "" !important;
2067    display: none !important;
2068}
2069
2070.project-info-drawer[open]>summary::after {
2071    content: "" !important;
2072    display: block !important;
2073    position: absolute !important;
2074    top: 8px !important;
2075    left: 8px !important;
2076    right: auto !important;
2077    z-index: 20 !important;
2078    box-sizing: border-box !important;
2079    width: 34px !important;
2080    height: 34px !important;
2081    margin: 0 !important;
2082    padding: 0 !important;
2083    background:
2084        linear-gradient(45deg,
2085            transparent calc(50% - 0.75px),
2086            #000 calc(50% - 0.5px),
2087            #000 calc(50% + 0.5px),
2088            transparent calc(50% + 0.75px)),
2089        linear-gradient(-45deg,
2090            transparent calc(50% - 0.75px),
2091            #000 calc(50% - 0.5px),
2092            #000 calc(50% + 0.5px),
2093            transparent calc(50% + 0.75px)) !important;
2094    background-size: 12px 12px !important;
2095    background-position: center !important;
2096    background-repeat: no-repeat !important;
2097    cursor: pointer !important;
2098}
2099
2100body.mobile .project-info-drawer[open]>summary::after {
2101    top: 3px !important;
2102    left: 3px !important;
2103    width: 40px !important;
2104    height: 40px !important;
2105    background-size: 10px 10px !important;
2106}
2107
2108@media (max-width: 767px) {
2109    .project-info-drawer[open]>summary::after {
2110        top: 14px !important;
2111        left: 14px !important;
2112        width: 40px !important;
2113        height: 40px !important;
2114        background-size: 24px 24px !important;
2115    }
2116}
2117
2118.project-info-drawer .project-info-description:has(> gallery-slideshow.project-info-slideshow) {
2119    display: none !important;
2120    margin: 0 !important;
2121    padding: 0 !important;
2122}
2123
2124.project-info-drawer gallery-slideshow.project-info-slideshow {
2125    display: none !important;
2126}
2127
2128.project-info-drawer.drawer-sm {
2129    --drawer-desktop-height: 41rem;
2130    --drawer-mobile-height: 51rem;
2131}
2132
2133.project-info-drawer.drawer-md {
2134    --drawer-desktop-height: 49rem;
2135    --drawer-mobile-height: 57rem;
2136}
2137
2138.project-info-drawer.drawer-lg {
2139    --drawer-desktop-height: 57rem;
2140    --drawer-mobile-height: 63rem;
2141}
2142
2143@media (min-width: 768px) {
2144
2145    body:not(.mobile) .project-info-drawer:is(.drawer-sm, .drawer-md, .drawer-lg),
2146    body:not(.mobile) .project-info-drawer:is(.drawer-sm, .drawer-md, .drawer-lg)>.project-info-drawer-panel {
2147        height: auto !important;
2148        min-height: var(--drawer-desktop-height) !important;
2149        max-height: none !important;
2150    }
2151
2152    body:not(.mobile) .project-info-drawer:is(.drawer-sm, .drawer-md, .drawer-lg)>summary {
2153        top: 0 !important;
2154        bottom: 0 !important;
2155        height: auto !important;
2156        min-height: 0 !important;
2157    }
2158}
2159
2160body.mobile .project-info-drawer:is(.drawer-sm, .drawer-md, .drawer-lg),
2161body.mobile .project-info-drawer:is(.drawer-sm, .drawer-md, .drawer-lg)>.project-info-drawer-panel {
2162    height: auto !important;
2163    min-height: var(--drawer-mobile-height) !important;
2164    max-height: none !important;
2165}
2166
2167body.mobile .project-info-drawer:is(.drawer-sm, .drawer-md, .drawer-lg)>summary {
2168    top: 0 !important;
2169    bottom: 0 !important;
2170    height: auto !important;
2171    min-height: 0 !important;
2172}
2173
2174@media (max-width: 767px) {
2175
2176    .project-info-drawer:is(.drawer-sm, .drawer-md, .drawer-lg),
2177    .project-info-drawer:is(.drawer-sm, .drawer-md, .drawer-lg)>.project-info-drawer-panel {
2178        height: auto !important;
2179        min-height: var(--drawer-mobile-height) !important;
2180        max-height: none !important;
2181    }
2182
2183    .project-info-drawer:is(.drawer-sm, .drawer-md, .drawer-lg)>summary {
2184        top: 0 !important;
2185        bottom: 0 !important;
2186        height: auto !important;
2187        min-height: 0 !important;
2188    }
2189}
2190
2191/* ========================================================
2192   PROJECT PAGE COMPOSITION
2193   ======================================================== */
2194
2195/* DESKTOP / MOBILE COMPOSITION SWITCH */
2196
2197.mobile-project-gallery,
2198.mobile-editorial-bridge {
2199    display: none !important;
2200}
2201
2202body.mobile .desktop-project-gallery,
2203body.mobile .project-gallery-section,
2204body.mobile .editorial-bridge {
2205    display: none !important;
2206}
2207
2208body.mobile .mobile-project-gallery {
2209    display: block !important;
2210}
2211
2212body.mobile .mobile-editorial-bridge {
2213    display: grid !important;
2214}
2215
2216@media (max-width: 767px) {
2217
2218    .desktop-project-gallery,
2219    .project-gallery-section,
2220    .editorial-bridge {
2221        display: none !important;
2222    }
2223
2224    .mobile-project-gallery {
2225        display: block !important;
2226    }
2227
2228    .mobile-editorial-bridge {
2229        display: grid !important;
2230    }
2231}
2232
2233@media (min-width: 768px) {
2234
2235    .mobile-project-gallery,
2236    .mobile-editorial-bridge {
2237        display: none !important;
2238    }
2239}
2240
2241
2242/* FREEFORM GALLERY + EDITORIAL BRIDGES */
2243
2244.project-gallery-section,
2245.editorial-bridge {
2246    width: 100% !important;
2247    margin: 0 !important;
2248}
2249
2250.editorial-bridge {
2251    align-items: center !important;
2252    margin-top: 6rem !important;
2253    margin-bottom: 8rem !important;
2254}
2255
2256.editorial-bridge column-unit {
2257    min-width: 0 !important;
2258}
2259
2260.editorial-callout {
2261    width: 100% !important;
2262    box-sizing: border-box !important;
2263    text-align: left !important;
2264}
2265
2266.editorial-bridge-gallery {
2267    width: 100% !important;
2268    min-height: 28vw !important;
2269    margin: 0 !important;
2270}
2271
2272.project-footer-nav {
2273    position: relative !important;
2274    z-index: 10000 !important;
2275}
2276
2277
2278/* ========================================================
2279   NEWSLETTER DRAWER
2280   ======================================================== */
2281
2282.newsletter-drawer-anchor {
2283    display: var(--ff-newsletter-display);
2284    position: relative !important;
2285    width: 100% !important;
2286    height: 11rem !important;
2287    margin: 0 0 12px !important;
2288    z-index: 9999 !important;
2289    pointer-events: none !important;
2290}
2291
2292.newsletter-drawer {
2293    --newsletter-tab: 30px;
2294    --newsletter-width: clamp(420px, 44vw, 800px);
2295    position: absolute !important;
2296    top: 0 !important;
2297    right: calc(50% - 50vw) !important;
2298    width: var(--newsletter-width) !important;
2299    height: 11rem !important;
2300    margin: 0 !important;
2301    box-sizing: border-box !important;
2302    overflow: visible !important;
2303    transform: translateX(calc(100% - var(--newsletter-tab))) !important;
2304    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1) !important;
2305    background: #d8ff21 !important;
2306    color: var(--ff-ink) !important;
2307    box-shadow: -1px 0 0 rgba(0, 0, 0, 0.18) !important;
2308    z-index: 9999 !important;
2309    pointer-events: auto !important;
2310}
2311
2312.newsletter-drawer:not([open]) {
2313    transform: translateX(calc(100% - var(--newsletter-tab))) !important;
2314}
2315
2316.newsletter-drawer[open] {
2317    transform: translateX(0) !important;
2318}
2319
2320.newsletter-drawer>summary {
2321    position: absolute !important;
2322    inset: 0 auto auto 0 !important;
2323    display: flex !important;
2324    align-items: center !important;
2325    justify-content: center !important;
2326    width: var(--newsletter-tab) !important;
2327    height: 100% !important;
2328    margin: 0 !important;
2329    padding: 0 !important;
2330    box-sizing: border-box !important;
2331    overflow: hidden !important;
2332    list-style: none !important;
2333    cursor: pointer !important;
2334    caret-color: transparent !important;
2335    background: #d8ff21 !important;
2336    color: var(--ff-ink) !important;
2337    writing-mode: vertical-rl !important;
2338    text-orientation: mixed !important;
2339    text-transform: uppercase !important;
2340    white-space: nowrap !important;
2341    font-family: var(--ff-font) !important;
2342    font-size: 14px !important;
2343    line-height: 1 !important;
2344    font-weight: 350 !important;
2345    z-index: 2 !important;
2346}
2347
2348.newsletter-drawer>summary::-webkit-details-marker {
2349    display: none !important;
2350}
2351
2352.newsletter-drawer>summary::marker {
2353    content: "" !important;
2354    display: none !important;
2355}
2356
2357.newsletter-drawer-panel {
2358    display: flex !important;
2359    align-items: center !important;
2360    width: calc(100% - var(--newsletter-tab)) !important;
2361    height: 100% !important;
2362    margin-left: var(--newsletter-tab) !important;
2363    padding: 24px 32px !important;
2364    box-sizing: border-box !important;
2365}
2366
2367.newsletter-drawer .footer-newsletter {
2368    position: relative !important;
2369    z-index: 1 !important;
2370    width: 100% !important;
2371    margin: 0 !important;
2372    padding: 0 !important;
2373    box-sizing: border-box !important;
2374    color: var(--ff-ink) !important;
2375    text-align: left !important;
2376    font-family: var(--ff-font) !important;
2377}
2378
2379.newsletter-drawer .footer-newsletter-label {
2380    display: block !important;
2381    width: 100% !important;
2382    margin: 0 0 9px !important;
2383    padding: 0 !important;
2384    color: var(--ff-ink) !important;
2385    text-align: left !important;
2386    font: inherit !important;
2387    font-size: clamp(14px, 1.05vw, 18px) !important;
2388    line-height: 1.15 !important;
2389    font-weight: 400 !important;
2390    letter-spacing: 0 !important;
2391}
2392
2393.newsletter-drawer .footer-newsletter-row {
2394    display: grid !important;
2395    grid-template-columns: minmax(0, 1fr) auto !important;
2396    width: 100% !important;
2397    margin: 0 !important;
2398    padding: 0 !important;
2399}
2400
2401.newsletter-drawer .footer-newsletter-email,
2402.newsletter-drawer .footer-newsletter-submit {
2403    appearance: none !important;
2404    -webkit-appearance: none !important;
2405    box-sizing: border-box !important;
2406    height: 42px !important;
2407    margin: 0 !important;
2408    border: 1px solid var(--ff-form-line) !important;
2409    border-radius: 0 !important;
2410    background: transparent !important;
2411    color: var(--ff-form-ink) !important;
2412    font-family: var(--ff-font) !important;
2413    font-size: 15px !important;
2414    line-height: 1 !important;
2415    font-weight: 400 !important;
2416    letter-spacing: 0 !important;
2417}
2418
2419.newsletter-drawer .footer-newsletter-email {
2420    width: 100% !important;
2421    min-width: 0 !important;
2422    padding: 0 10px !important;
2423    border-right: 0 !important;
2424    outline: none !important;
2425}
2426
2427.newsletter-drawer .footer-newsletter-email::placeholder {
2428    color: #5a5a5a !important;
2429    opacity: 1 !important;
2430}
2431
2432.newsletter-drawer .footer-newsletter-email:focus {
2433    outline: 1px solid var(--ff-form-line) !important;
2434    outline-offset: -2px !important;
2435}
2436
2437.newsletter-drawer .footer-newsletter-submit {
2438    width: auto !important;
2439    min-width: 96px !important;
2440    padding: 2px 15px 0 !important;
2441    flex: none !important;
2442    cursor: pointer !important;
2443}
2444
2445.newsletter-drawer .footer-newsletter-message {
2446    min-height: 1em !important;
2447    margin-top: 6px !important;
2448    font-size: 12px !important;
2449    line-height: 1.15 !important;
2450}
2451
2452.newsletter-drawer .footer-newsletter-message:empty {
2453    display: none !important;
2454}
2455
2456.newsletter-drawer[open]>summary {
2457    overflow: visible !important;
2458    color: transparent !important;
2459    font-size: 0 !important;
2460}
2461
2462.newsletter-drawer>summary::after {
2463    content: "" !important;
2464    display: none !important;
2465}
2466
2467.newsletter-drawer[open]>summary::after {
2468    content: "" !important;
2469    display: block !important;
2470    position: absolute !important;
2471    top: 8px !important;
2472    left: 8px !important;
2473    right: auto !important;
2474    width: 34px !important;
2475    height: 34px !important;
2476    margin: 0 !important;
2477    padding: 0 !important;
2478    background:
2479        linear-gradient(45deg,
2480            transparent calc(50% - 0.75px),
2481            #000 calc(50% - 0.5px),
2482            #000 calc(50% + 0.5px),
2483            transparent calc(50% + 0.75px)),
2484        linear-gradient(-45deg,
2485            transparent calc(50% - 0.75px),
2486            #000 calc(50% - 0.5px),
2487            #000 calc(50% + 0.5px),
2488            transparent calc(50% + 0.75px)) !important;
2489    background-size: 12px 12px !important;
2490    background-position: center !important;
2491    background-repeat: no-repeat !important;
2492    cursor: pointer !important;
2493    z-index: 20 !important;
2494}
2495
2496body.mobile .newsletter-drawer-anchor {
2497    margin: 0 0 12px !important;
2498}
2499
2500body.mobile .newsletter-drawer {
2501    --newsletter-tab: 22px;
2502    top: 0 !important;
2503    right: calc(50% - 50vw) !important;
2504    width: calc(100vw - 1rem) !important;
2505    height: 14rem !important;
2506}
2507
2508body.mobile .newsletter-drawer>summary {
2509    font-size: 12px !important;
2510}
2511
2512body.mobile .newsletter-drawer-panel {
2513    padding: 24px 18px 20px !important;
2514}
2515
2516body.mobile .newsletter-drawer .footer-newsletter-label {
2517    font-size: 15px !important;
2518}
2519
2520body.mobile .newsletter-drawer .footer-newsletter-submit {
2521    min-width: 88px !important;
2522    padding-left: 10px !important;
2523    padding-right: 10px !important;
2524}
2525
2526body.mobile .newsletter-drawer[open]>summary {
2527    overflow: visible !important;
2528    color: transparent !important;
2529    font-size: 0 !important;
2530}
2531
2532body.mobile .newsletter-drawer[open]>summary::after {
2533    left: 0 !important;
2534}
2535
2536body.mobile .newsletter-drawer .footer-newsletter {
2537    transform: translateY(-0.75rem) !important;
2538}
2539
2540@media (max-width: 767px) {
2541    .newsletter-drawer-anchor {
2542        height: 14rem !important;
2543        margin: 4rem 0 12px !important;
2544    }
2545
2546    .newsletter-drawer {
2547        --newsletter-tab: 22px;
2548        top: 0 !important;
2549        right: calc(50% - 50vw) !important;
2550        width: calc(100vw - 1rem) !important;
2551        height: 14rem !important;
2552    }
2553
2554    .newsletter-drawer>summary {
2555        font-size: 12px !important;
2556    }
2557
2558    .newsletter-drawer-panel {
2559        padding: 24px 18px 20px !important;
2560    }
2561
2562    .newsletter-drawer .footer-newsletter-label {
2563        font-size: 15px !important;
2564    }
2565
2566    .newsletter-drawer .footer-newsletter-submit {
2567        min-width: 88px !important;
2568        padding-left: 10px !important;
2569        padding-right: 10px !important;
2570    }
2571
2572    .newsletter-drawer[open]>summary {
2573        overflow: visible !important;
2574        color: transparent !important;
2575        font-size: 0 !important;
2576    }
2577
2578    .newsletter-drawer[open]>summary::after {
2579        left: 0 !important;
2580    }
2581
2582    .newsletter-drawer .footer-newsletter {
2583        transform: translateY(-0.75rem) !important;
2584    }
2585}
2586
2587
2588
2589
2590.contact-page-content {
2591	padding:0 30px;
2592}
2593
2594button[disabled] {
2595    opacity: .5 !important;
2596    cursor: pointer;
2597    
2598    &:hover,
2599    &:focus {
2600		background: none;
2601        color: var(--ff-form-ink) !important;
2602	}
2603}</style><style id="mobile-offset-styles"></style><style id="text-style-font-sizes"></style><style id="link-styles"></style><style id="font-feature-settings-styles"></style><div class="content"><div id="L3418916892" page-url="header" class="page pinned pinned-top fixed"><a id="header"></a><div class="page-layout"><div class="page-content"><bodycopy style="--fit-height: 10px; --resize-parent-width: 100%;"><div class="fixed-nav-bar">
2604    <div class="nav-links">
2605        <div class="nav-row nav-row-primary">
2606            <a class="nav-item" href="home" rel="history">FormAndField</a>
2607            <a class="nav-item" href="projects" rel="history">Projects</a>
2608        </div>
2609
2610        <div class="nav-row nav-row-secondary">
2611            <a class="nav-item" href="studio" rel="history">Studio</a>
2612            <a class="nav-item" href="contact" rel="history">Contact</a>
2613            <a class="nav-item" href="fieldnotes" rel="history">*FieldNotes</a>
2614        </div>
2615    </div>
2616</div></bodycopy></div></div><style>/* Desktop nav — between the original and Camden’s larger version */
2617.fixed-nav-bar .nav-links .nav-item {
2618    font-size: 1.25rem !important;
2619}
2620
2621/* Cargo mobile preview */
2622body.mobile .fixed-nav-bar .nav-links .nav-item {
2623    font-size: 1.8rem !important;
2624}
2625
2626/* Published mobile site */
2627@media (max-width: 767px) {
2628    .fixed-nav-bar .nav-links .nav-item {
2629        font-size: 1.8rem !important;
2630    }
2631}</style><style id="mobile-offset-styles-L3418916892"></style></div><div style="margin-top: 0px; margin-bottom: 0px;" class="pages"><div id="B3004925598" page-url="projects" class="page"><a id="projects"></a><div class="page-layout"><div class="page-content"><bodycopy style="--fit-height: 10px; --resize-parent-width: 100%;"><div id="top"></div>
2632
2633<div class="site-noise-overlay"></div>
2634
2635<div class="home-hero-viewport">
2636    <div class="hero-bg-frame">
2637        <img alt="" src="https://freight.cargo.site/t/original/i/N3042833849315243344343077534837/07-SOMA-Space-Opera-Kitchen-Artwork.jpg" />
2638    </div>
2639
2640    <div class="projects-hero-title">
2641        <div class="projects-hero-headline">Form<br class="mobile-title-break" />AndField</div>
2642        <div class="projects-hero-subhead">Projects</div>
2643    </div>
2644</div>
2645
2646<div class="main-content-canvas">
2647
2648    <!--      ===================================================
2649         DESKTOP-ONLY PROJECTS COMPOSITION
2650         ===================================================      -->
2651    <div class="projects-desktop-layout">
2652
2653        <gallery-freeform class="projects-gallery projects-gallery-a" gutter="1rem" mobile-columns="1" mobile-gutter="7rem"><media-item class="linked" disable-zoom="true" freeform-scale="40.80" freeform-x="17.546562500000004" freeform-y="0" freeform-z="1" hash="Q3026327369237848673035805865273" href="project-noe-valley-edwardian" rel="history" scale="40.80">
2654                <figcaption class="caption" slot="caption"><a href="project-noe-valley-edwardian" rel="history">Noe Valley Edwardian</a></figcaption>
2655            </media-item></gallery-freeform>
2656
2657        <column-set class="projects-breaker projects-breaker-a" gutter="1rem" mobile-stack="true"><column-unit slot="0" span="1"></column-unit><column-unit slot="1" span="5">
2658                <div class="projects-live-callout" style="text-align: left">Memory Is Not Static, But Embodied.<br /></div>
2659            </column-unit><column-unit slot="2" span="5">
2660                <gallery-freeform class="projects-breaker-gallery" gutter="1rem" mobile-columns="1" mobile-gutter="1rem"><media-item class="linked" disable-zoom="true" freeform-scale="100" freeform-x="0" freeform-y="0" freeform-z="1" hash="Y3026467443150126348766656935225" href="project-los-altos-modern" rel="history" scale="100">
2661                        <figcaption class="caption" slot="caption"><a href="project-los-altos-modern" rel="history">Los Altos Modern</a></figcaption>
2662                    </media-item></gallery-freeform>
2663            </column-unit><column-unit slot="3" span="1"></column-unit></column-set>
2664
2665        <gallery-freeform class="projects-gallery projects-gallery-b" gutter="1rem" mobile-columns="1" mobile-gutter="7rem"><media-item class="linked" disable-zoom="true" freeform-scale="65.00" freeform-x="8.81" freeform-y="0" freeform-z="1" hash="Y3042855385520014518770398182517" href="project-soma-space-opera" rel="history" scale="65.00">
2666                <figcaption class="caption" slot="caption"><a href="project-soma-space-opera" rel="history">SOMA Space Opera</a></figcaption>
2667            </media-item><media-item class="linked" disable-zoom="true" freeform-scale="50" freeform-x="31.161250000000003" freeform-y="54.32145833333334" freeform-z="2" hash="U3021283126956482907605307307321" href="project-berkeley-craftsman" rel="history" scale="50">
2668                <figcaption class="caption" slot="caption"><a href="project-berkeley-craftsman" rel="history">Berkeley Craftsman</a></figcaption>
2669            </media-item><media-item class="linked" disable-zoom="true" freeform-scale="40" freeform-x="54.13385416666667" freeform-y="104.80287109374997" freeform-z="4" hash="E3021575898865685334419786511673" href="project-noe-valley-mediterranean" rel="history" scale="43.10">
2670                <figcaption class="caption" slot="caption"><a href="project-noe-valley-mediterranean" rel="history">Noe Valley Mediterranean</a></figcaption>
2671            </media-item><media-item class="linked" disable-zoom="true" freeform-scale="40" freeform-x="5.019895833333334" freeform-y="112.50625000000001" freeform-z="3" hash="Y3021580890573078424298163352889" href="project-potrero-hill-duplex" rel="history" scale="33.40">
2672                <figcaption class="caption" slot="caption"><a href="project-potrero-hill-duplex" rel="history">Potrero Hill Duplex</a></figcaption>
2673            </media-item><media-item class="linked" disable-zoom="true" freeform-scale="39.50" freeform-x="54.211041666666674" freeform-y="145.53019205729169" freeform-z="5" hash="B3021582999921369764837971539257" href="project-san-anselmo-contemporary" rel="history" scale="39.50">
2674                <figcaption class="caption" slot="caption"><a href="project-san-anselmo-contemporary" rel="history">San Anselmo Contemporary</a></figcaption>
2675            </media-item><media-item class="linked" freeform-scale="41.20" freeform-x="5.9895833333333375" freeform-y="182.81046549479169" freeform-z="6" hash="R3021584690233422726991605216569" href="project-dolores-heights-modern" rel="history" scale="41.20"><figcaption class="caption" slot="caption"><a href="project-dolores-heights-modern" rel="history">Dolores Heights Modern</a></figcaption></media-item></gallery-freeform>
2676
2677        
2678
2679        <column-set class="projects-breaker projects-breaker-c" gutter="1rem" mobile-stack="true"><column-unit slot="0" span="1"></column-unit><column-unit slot="1" span="5">
2680                <div class="projects-live-callout" style="text-align: left">A<br />
2681Practice<br />
2682of<br />
2683Listening.
2684</div>
2685            </column-unit><column-unit slot="2" span="5">
2686                <gallery-freeform class="projects-breaker-gallery" gutter="1rem" mobile-columns="1" mobile-gutter="1rem"><media-item class="linked" disable-zoom="true" freeform-scale="100" freeform-x="0" freeform-y="0" freeform-z="1" hash="A3021585897997097464977078170937" href="project-atherton-estate" rel="history" scale="100">
2687                        <figcaption class="caption" slot="caption"><a href="project-atherton-estate" rel="history">Atherton Estate</a></figcaption>
2688                    </media-item></gallery-freeform>
2689            </column-unit><column-unit slot="3" span="1"></column-unit></column-set>
2690
2691        <gallery-freeform class="projects-gallery projects-gallery-c" gutter="1rem" mobile-columns="1" mobile-gutter="7rem"><media-item class="linked" disable-zoom="true" freeform-scale="56.10" freeform-x="7.08" freeform-y="0" freeform-z="1" hash="G3021611842235832493038852977977" href="project-cow-hollow-eclectic" rel="history" scale="56.10">
2692                <figcaption class="caption" slot="caption"><a href="project-cow-hollow-eclectic" rel="history">Cow Hollow Eclectic</a></figcaption>
2693            </media-item><media-item class="linked" disable-zoom="true" freeform-scale="46.60" freeform-x="29.605312500000004" freeform-y="55.89993164062499" freeform-z="2" hash="P3015095342454428060967747007801" href="project-donner-lake-cabin" rel="history" scale="46.60">
2694                <figcaption class="caption" slot="caption"><a href="project-donner-lake-cabin" rel="history">Donner Lake Cabin</a></figcaption>
2695            </media-item><media-item class="linked" disable-zoom="true" freeform-scale="33.20" freeform-x="13.564479166666665" freeform-y="102.58979166666666" freeform-z="4" hash="L3031560285112748244939586452597" href="project-clarendon-heights-contemporary" rel="history" scale="33.20">
2696                <figcaption class="caption" slot="caption"><a href="project-clarendon-heights-contemporary" rel="history">Clarendon Heights Contemporary</a></figcaption>
2697            </media-item><media-item class="linked" disable-zoom="true" freeform-scale="40" freeform-x="54.80489583333333" freeform-y="107.67010416666668" freeform-z="3" hash="I3030073738414261945479815806069" href="project-san-francisco-eichler" rel="history" scale="33.20">
2698                <figcaption class="caption" slot="caption"><a href="project-san-francisco-eichler" rel="history">San Francisco Eichler</a></figcaption>
2699            </media-item><media-item class="linked" disable-zoom="true" freeform-scale="42.20" freeform-x="29.77949662061794" freeform-y="183.25490734551403" freeform-z="5" hash="L3030107751148174349657210141813" href="project-los-altos-hills-tudor" rel="history" scale="42.20">
2700                <figcaption class="caption" slot="caption"><a href="project-los-altos-hills-tudor" rel="history">Los Altos Hills Tudor</a></figcaption>
2701            </media-item></gallery-freeform>
2702
2703       <column-set class="projects-breaker projects-breaker-d" gutter="1rem" mobile-stack="true"><column-unit slot="0" span="6">
2704        <gallery-freeform class="projects-breaker-gallery" gutter="1rem" mobile-columns="1" mobile-gutter="1rem"><media-item class="linked" disable-zoom="true" freeform-scale="100" freeform-x="0" freeform-y="0" freeform-z="1" hash="I3030016999642138868535312039029" href="project-sweet-july" rel="history" scale="100">
2705                <figcaption class="caption" slot="caption">
2706                    <a href="project-sweet-july" rel="history">Sweet July</a>
2707                </figcaption>
2708            </media-item></gallery-freeform>
2709    </column-unit><column-unit slot="1" span="1"></column-unit><column-unit slot="2" span="5">
2710        <div class="projects-live-callout" style="text-align: left">
2711Balance       Through<br />
2712Juxtaposition.
2713        </div>
2714    </column-unit></column-set>
2715
2716        <gallery-freeform class="projects-gallery projects-gallery-d" gutter="1rem" mobile-columns="1" mobile-gutter="7rem"><media-item class="linked" freeform-scale="35.20" freeform-x="33.61527462121212" freeform-y="0" freeform-z="1" hash="E3026770704523645129412020059253" href="project-saverglass" rel="history" scale="35.20">
2717                <figcaption class="caption" slot="caption"><a href="project-saverglass" rel="history">Saverglass</a></figcaption>
2718            </media-item></gallery-freeform>
2719    </div>
2720
2721    <!--      ===================================================
2722         MOBILE-ONLY PROJECTS COMPOSITION
2723         One independent gallery for mobile art direction.
2724         ===================================================      -->
2725<!--      =====================================================
2726     REPLACE the complete existing:
2727     <div class="projects-mobile-layout"> ... </div>
2728     with this block.
2729     =====================================================      -->
2730
2731<div class="projects-mobile-layout">
2732
2733<gallery-freeform class="projects-mobile-gallery projects-mobile-gallery-a" gutter="1rem" mobile-columns="1" mobile-grid="false" mobile-gutter="4rem" mobile-horizontal-align="center"><media-item class="" disable-zoom="true" freeform-scale="88" freeform-x="6" freeform-y="0" freeform-z="1" hash="Q3026327369237848673035805865273" scale="88">
2734        <figcaption class="caption" slot="caption">
2735            
2736                Noe Valley Edwardian
2737            
2738        </figcaption>
2739    </media-item></gallery-freeform>
2740
2741    <div class="projects-mobile-callout" style="text-align: left">Memory Is Not Static, But Embodied.</div>
2742
2743    <gallery-freeform class="projects-mobile-gallery projects-mobile-gallery-b" gutter="1rem" mobile-columns="1" mobile-grid="false" mobile-gutter="4rem" mobile-horizontal-align="center"><media-item class="linked" disable-zoom="true" freeform-scale="75" freeform-x="5.0106534090909145" freeform-y="0" freeform-z="3" hash="Y3026467443150126348766656935225" href="project-los-altos-modern" limit-by="width" rel="history" scale="77.70"><figcaption class="caption" slot="caption"><a href="project-los-altos-modern" rel="history">Los Altos Modern</a></figcaption></media-item><media-item class="linked" disable-zoom="true" freeform-scale="100" freeform-x="0" freeform-y="81.86363636363637" freeform-z="5" hash="Y3042855385520014518770398182517" href="project-soma-space-opera" rel="history" scale="88"><figcaption class="caption" slot="caption"><a href="project-soma-space-opera" rel="history">SOMA Space Opera</a></figcaption></media-item><media-item class="linked" disable-zoom="true" freeform-scale="82.41" freeform-x="12.035353535353542" freeform-y="188.68019313505422" freeform-z="6" hash="U3021283126956482907605307307321" href="project-berkeley-craftsman" limit-by="width" rel="history" scale="82.41"><figcaption class="caption" slot="caption"><a href="project-berkeley-craftsman" rel="history">Berkeley Craftsman</a></figcaption></media-item><media-item class="linked" disable-zoom="true" freeform-scale="100" freeform-x="0" freeform-y="278.31818181818176" freeform-z="1" hash="Y3021580890573078424298163352889" href="project-potrero-hill-duplex" limit-by="width" rel="history" scale="97.49"><figcaption class="caption" slot="caption"><a href="project-potrero-hill-duplex" rel="history">Potrero Hill Duplex</a></figcaption></media-item><media-item class="linked" disable-zoom="true" freeform-scale="90.80" freeform-x="0" freeform-y="429.61971567527144" freeform-z="7" hash="E3021575898865685334419786511673" href="project-noe-valley-mediterranean" limit-by="width" rel="history" scale="90.80"><figcaption class="caption" slot="caption"><a href="project-noe-valley-mediterranean" rel="history">Noe Valley Mediterranean</a></figcaption></media-item><media-item class="linked" disable-zoom="true" freeform-scale="88" freeform-x="9.863636363636365" freeform-y="512.7272727272727" freeform-z="2" hash="B3021582999921369764837971539257" href="project-san-anselmo-contemporary" rel="history" scale="88"><figcaption class="caption" slot="caption"><a href="project-san-anselmo-contemporary" rel="history">San Anselmo Contemporary</a></figcaption></media-item><media-item class="linked" disable-zoom="true" freeform-scale="100" freeform-x="0" freeform-y="652.1289062500001" freeform-z="4" hash="R3021584690233422726991605216569" href="project-dolores-heights-modern" limit-by="width" rel="history" scale="68.10"><figcaption class="caption" slot="caption"><a href="project-dolores-heights-modern" rel="history">Dolores Heights Modern</a></figcaption></media-item></gallery-freeform>
2744
2745    <div class="projects-mobile-callout" style="text-align: left">     A<br />
2746     Practice<br />
2747     of<br />
2748     Listening</div>
2749
2750    
2751
2752    
2753
2754    <gallery-freeform class="projects-mobile-gallery projects-mobile-gallery-d" gutter="1rem" mobile-columns="1" mobile-grid="false" mobile-gutter="4rem" mobile-horizontal-align="center"><media-item class="linked" disable-zoom="true" freeform-scale="75.10" freeform-x="4.40909090909091" freeform-y="0" freeform-z="2" hash="A3021585897997097464977078170937" href="project-atherton-estate" limit-by="width" rel="history" scale="75.10"><figcaption class="caption" slot="caption"><a href="project-atherton-estate" rel="history">Atherton Estate</a></figcaption></media-item><media-item class="linked" disable-zoom="true" freeform-scale="80" freeform-x="20" freeform-y="83.45454545454545" freeform-z="3" hash="G3021611842235832493038852977977" href="project-cow-hollow-eclectic" limit-by="width" rel="history" scale="79.80"><figcaption class="caption" slot="caption"><a href="project-cow-hollow-eclectic" rel="history">Cow Hollow Eclectic</a></figcaption></media-item><media-item class="linked" disable-zoom="true" freeform-scale="100" freeform-x="0" freeform-y="173.9545454545455" freeform-z="1" hash="P3015095342454428060967747007801" href="project-donner-lake-cabin" rel="history" scale="88"><figcaption class="caption" slot="caption"><a href="project-donner-lake-cabin" rel="history">Donner Lake Cabin</a></figcaption></media-item><media-item class="linked" disable-zoom="true" freeform-scale="86.20" freeform-x="3.6751601664796123" freeform-y="272.3875794986907" freeform-z="5" hash="L3031560285112748244939586452597" href="project-clarendon-heights-contemporary" limit-by="width" rel="history" scale="86.20"><figcaption class="caption" slot="caption"><a href="project-clarendon-heights-contemporary" rel="history">Clarendon Heights Contemporary</a></figcaption></media-item><media-item class="linked" disable-zoom="true" freeform-scale="90" freeform-x="9.999999999999993" freeform-y="402.709687099872" freeform-z="6" hash="I3030073738414261945479815806069" href="project-san-francisco-eichler" rel="history" scale="88"><figcaption class="caption" slot="caption"><a href="project-san-francisco-eichler" rel="history">San Francisco Eichler</a></figcaption></media-item><media-item class="linked" disable-zoom="true" freeform-scale="79.90" freeform-x="8.727272727272732" freeform-y="572.5000000000002" freeform-z="4" hash="L3030107751148174349657210141813" href="project-los-altos-hills-tudor" limit-by="width" rel="history" scale="79.90"><figcaption class="caption" slot="caption"><a href="project-los-altos-hills-tudor" rel="history">Los Altos Hills Tudor</a></figcaption></media-item></gallery-freeform>
2755
2756    <div class="projects-mobile-callout projects-mobile-callout-balance" style="text-align: left">
2757Balance Through Juxtaposition.</div>
2758
2759    <gallery-freeform class="projects-mobile-gallery projects-mobile-gallery-e" gutter="1rem" mobile-columns="1" mobile-grid="false" mobile-gutter="4rem" mobile-horizontal-align="center"><media-item class="linked" disable-zoom="true" freeform-scale="88" freeform-x="12.002840909090914" freeform-y="0" freeform-z="1" hash="I3030016999642138868535312039029" href="project-sweet-july" rel="history" scale="88"><figcaption class="caption" slot="caption"><a href="project-sweet-july" rel="history">Sweet July</a></figcaption></media-item><media-item class="linked" disable-zoom="true" freeform-scale="88" freeform-x="6.909090909090911" freeform-y="78.45454545454545" freeform-z="2" hash="E3026770704523645129412020059253" href="project-saverglass" rel="history" scale="88"><figcaption class="caption" slot="caption"><a href="project-saverglass" rel="history">Saverglass</a></figcaption></media-item></gallery-freeform>
2760</div>
2761
2762</div></bodycopy></div></div><style>/* BACKGROUND-ONLY FILM GRAIN */
2763:root {
2764    --ff-paper: #FAF8F8;
2765}
2766
2767.site-noise-overlay {
2768    display: none !important;
2769}
2770
2771
2772[id="B3004925598"] .page-content {
2773    align-items: flex-start;
2774    padding: 0 !important;
2775    overflow-x: hidden !important;
2776}
2777
2778.home-hero-viewport {
2779    left: 50% !important;
2780    right: auto !important;
2781    margin-left: 0 !important;
2782    margin-right: 0 !important;
2783    margin-top: 0 !important;
2784    transform: translateX(-50%) !important;
2785    background-color: #000000 !important;
2786    isolation: isolate;
2787}
2788
2789.hero-bg-frame {
2790    position: absolute !important;
2791    inset: 0 !important;
2792    z-index: 0 !important;
2793    overflow: hidden !important;
2794}
2795
2796.hero-bg-frame img {
2797    display: block !important;
2798}
2799
2800.hero-bg-frame::after {
2801    display: none !important;
2802}
2803
2804.hero-graphic-overlay {
2805    z-index: 2 !important;
2806}
2807
2808.main-content-canvas {
2809    background-image: none !important;
2810    position: relative;
2811    overflow: hidden;
2812    isolation: isolate;
2813}
2814
2815@keyframes localNoiseJitter {
2816
2817    0%,
2818    100% {
2819        background-position: 0 0;
2820    }
2821
2822    10% {
2823        background-position: -2% -3%;
2824    }
2825
2826    20% {
2827        background-position: -6% 2%;
2828    }
2829
2830    30% {
2831        background-position: 3% -8%;
2832    }
2833
2834    40% {
2835        background-position: 8% 8%;
2836    }
2837
2838    50% {
2839        background-position: -8% 3%;
2840    }
2841
2842    60% {
2843        background-position: 6% 2%;
2844    }
2845
2846    70% {
2847        background-position: 0 5%;
2848    }
2849
2850    80% {
2851        background-position: 8% 12%;
2852    }
2853
2854    90% {
2855        background-position: -4% 4%;
2856    }
2857}
2858
2859/* PHOTOSHOP-STYLE PAPER MULTIPLY IMAGE HOVER - CAPTION SAFE */
2860
2861/* Keep the outer media component and figure transparent */
2862.main-content-canvas gallery-freeform media-item:not([hash="placeholder"]),
2863.main-content-canvas gallery-freeform media-item:not([hash="placeholder"])::part(figure),
2864.main-content-canvas gallery-freeform media-item:not([hash="placeholder"])::part(frame) {
2865    background: transparent !important;
2866    background-color: transparent !important;
2867}
2868
2869/* Put the paper tone only behind the actual image area */
2870.main-content-canvas gallery-freeform media-item:not([hash="placeholder"])::part(sizing-frame) {
2871    background-color: var(--ff-paper) !important;
2872    overflow: hidden !important;
2873}
2874
2875/* The image multiplies against that paper image-area background */
2876.main-content-canvas gallery-freeform media-item:not([hash="placeholder"])::part(media) {
2877    filter: grayscale(1) contrast(0.98) brightness(1.04) !important;
2878    mix-blend-mode: multiply !important;
2879    opacity: 1 !important;
2880    transition:
2881        filter 420ms ease,
2882        mix-blend-mode 420ms ease !important;
2883}
2884
2885/* Hover returns to full color */
2886.main-content-canvas gallery-freeform media-item:not([hash="placeholder"]):hover::part(sizing-frame) {
2887    background-color: transparent !important;
2888}
2889
2890.main-content-canvas gallery-freeform media-item:not([hash="placeholder"]):hover::part(media) {
2891    filter: grayscale(0) contrast(1) brightness(1) !important;
2892    mix-blend-mode: normal !important;
2893}
2894
2895/* HERO IMAGE PAPER MULTIPLY HOVER */
2896.home-hero-viewport .hero-bg-frame {
2897    background-color: var(--ff-paper) !important;
2898}
2899
2900.home-hero-viewport .hero-bg-frame img {
2901    filter: grayscale(1) contrast(0.98) brightness(1.04) !important;
2902    mix-blend-mode: multiply !important;
2903    opacity: 1 !important;
2904    transition:
2905        filter 420ms ease,
2906        mix-blend-mode 420ms ease !important;
2907}
2908
2909.home-hero-viewport:hover .hero-bg-frame {
2910    background-color: transparent !important;
2911}
2912
2913.home-hero-viewport:hover .hero-bg-frame img {
2914    filter: grayscale(0) contrast(1) brightness(1) !important;
2915    mix-blend-mode: normal !important;
2916}
2917
2918/* FREEFORM GALLERY SECTION HEIGHT */
2919.main-content-canvas {
2920    min-height: 720vh !important;
2921}
2922
2923/* KEEP CARGO CAPTIONS, REMOVE PINK CAPTION BAR */
2924.main-content-canvas gallery-freeform media-item::part(caption),
2925.main-content-canvas gallery-freeform media-item::part(caption-background),
2926.main-content-canvas gallery-freeform media-item::part(figure) {
2927    background: transparent !important;
2928    background-color: transparent !important;
2929}
2930
2931.section-callout {
2932    position: absolute;
2933    z-index: 3;
2934    font-family: var(--ff-font);
2935    font-size: 96px;
2936    line-height: 1.1em;
2937    font-weight: 420;
2938    font-style: normal;
2939    font-variation-settings: 'MONO' 0, 'slnt' 0;
2940    text-align: left;
2941    color: #000000;
2942    letter-spacing: 0;
2943    pointer-events: none;
2944}
2945
2946.callout-a {
2947    left: 6vw;
2948    top: 28vh;
2949}
2950
2951.callout-b {
2952    left: 50vw;
2953    top: 300vh;
2954}
2955
2956.callout-c {
2957    left: 55vw;
2958    top: 450vh;
2959}
2960
2961.callout-d {
2962    left: 60vw;
2963    top: 885vh;
2964}
2965
2966/* BLUE HERO LOGOMARK */
2967.hero-graphic-overlay {
2968    display: flex !important;
2969    opacity: 1;
2970    visibility: visible !important;
2971    z-index: 5 !important;
2972    pointer-events: auto !important;
2973    transition:
2974        opacity 520ms ease,
2975        filter 520ms ease !important;
2976}
2977
2978.hero-graphic-overlay:hover {
2979    opacity: 0;
2980    filter: blur(6px);
2981}
2982
2983.breathing-logo,
2984.breathing-logo svg {
2985    display: block !important;
2986    width: 100% !important;
2987    height: 100% !important;
2988}
2989
2990.breathing-logo svg path {
2991    fill: #2F52D9;
2992    animation: ffBlueBreathe 9s ease-in-out infinite !important;
2993}
2994
2995@keyframes ffBlueBreathe {
2996    0% {
2997        fill: #2F52D9;
2998    }
2999
3000    50% {
3001        fill: #5D7EFF;
3002    }
3003
3004    100% {
3005        fill: #2F52D9;
3006    }
3007}
3008
3009/* EXTRA ROOM BEFORE FOOTER */
3010.main-content-canvas {
3011    min-height: 720vh !important;
3012    padding-bottom: 45vh !important;
3013}
3014
3015.main-content-canvas gallery-freeform {
3016    min-height: 680vh !important;
3017}
3018
3019/* PROJECTS LANDING HERO TITLE ONLY */
3020.projects-hero-title {
3021    position: absolute;
3022    left: 50%;
3023    top: 50%;
3024    z-index: 3;
3025    width: 100%;
3026    transform: translate(-50%, -36%);
3027    color: #000000;
3028    text-align: center;
3029    font-family: var(--ff-font);
3030    font-style: normal;
3031    font-variation-settings:
3032        "MONO" 0,
3033        "slnt" 0;
3034    pointer-events: none;
3035}
3036
3037.projects-hero-headline {
3038    font-size: 150px;
3039    line-height: 0.9;
3040    font-weight: 420;
3041    letter-spacing: 0;
3042}
3043
3044.projects-hero-subhead {
3045    margin-top: 34px;
3046    font-size: 36px;
3047    line-height: 1;
3048    font-weight: 420;
3049    letter-spacing: 0;
3050}
3051
3052.mobile .projects-hero-title {
3053    transform: translate(-50%, -32%);
3054}
3055
3056.mobile .projects-hero-headline {
3057    font-size: clamp(58px, 19vw, 150px);
3058}
3059
3060.mobile .projects-hero-subhead {
3061    margin-top: 18px;
3062    font-size: clamp(24px, 7vw, 36px);
3063}
3064
3065
3066/* PROJECTS LANDING: REDUCE EXTRA SPACE BEFORE FOOTER */
3067.main-content-canvas {
3068    min-height: auto !important;
3069    padding-bottom: 12vh !important;
3070}
3071
3072.main-content-canvas gallery-freeform {
3073    min-height: auto !important;
3074}
3075
3076/* Hide the controlled break on desktop */
3077.mobile-title-break {
3078    display: none;
3079}
3080
3081/* Show the controlled break on mobile */
3082body.mobile .mobile-title-break {
3083    display: block;
3084}
3085
3086/* PROJECTS LANDING SVG CALLOUTS — NO IMAGE/HOVER TREATMENT */
3087.main-content-canvas gallery-freeform media-item:is([hash="P3033967826073504711851089147193"],
3088    [hash="E3033967826036611223703670043961"],
3089    [hash="T3033967826055057967777379595577"],
3090    [hash="Y3033967826091951455924798698809"]),
3091.main-content-canvas gallery-freeform media-item:is([hash="P3033967826073504711851089147193"],
3092    [hash="E3033967826036611223703670043961"],
3093    [hash="T3033967826055057967777379595577"],
3094    [hash="Y3033967826091951455924798698809"])::part(figure),
3095.main-content-canvas gallery-freeform media-item:is([hash="P3033967826073504711851089147193"],
3096    [hash="E3033967826036611223703670043961"],
3097    [hash="T3033967826055057967777379595577"],
3098    [hash="Y3033967826091951455924798698809"])::part(frame),
3099.main-content-canvas gallery-freeform media-item:is([hash="P3033967826073504711851089147193"],
3100    [hash="E3033967826036611223703670043961"],
3101    [hash="T3033967826055057967777379595577"],
3102    [hash="Y3033967826091951455924798698809"])::part(sizing-frame) {
3103    background: transparent !important;
3104    background-color: transparent !important;
3105    filter: none !important;
3106    mix-blend-mode: normal !important;
3107    opacity: 1 !important;
3108}
3109
3110.main-content-canvas gallery-freeform media-item:is([hash="P3033967826073504711851089147193"],
3111    [hash="E3033967826036611223703670043961"],
3112    [hash="T3033967826055057967777379595577"],
3113    [hash="Y3033967826091951455924798698809"])::part(media),
3114.main-content-canvas gallery-freeform media-item:is([hash="P3033967826073504711851089147193"],
3115    [hash="E3033967826036611223703670043961"],
3116    [hash="T3033967826055057967777379595577"],
3117    [hash="Y3033967826091951455924798698809"]):hover::part(media) {
3118    background: transparent !important;
3119    filter: none !important;
3120    mix-blend-mode: normal !important;
3121    opacity: 1 !important;
3122}
3123
3124/* ========================================================
3125   PROJECTS LANDING — STRUCTURED DESKTOP + MOBILE COMPOSITIONS
3126   Append once at the bottom of the current page CSS.
3127   ======================================================== */
3128
3129.projects-mobile-layout {
3130    display: none !important;
3131}
3132
3133.projects-desktop-layout,
3134.projects-gallery,
3135.projects-breaker,
3136.projects-breaker-gallery {
3137    position: relative !important;
3138    width: 100% !important;
3139}
3140
3141.projects-gallery-a,
3142.projects-gallery-d {
3143    min-height: 58vw !important;
3144}
3145
3146.projects-gallery-b {
3147    min-height: 175vw !important;
3148}
3149
3150.projects-gallery-c {
3151    min-height: 220vw !important;
3152}
3153
3154.projects-breaker {
3155    align-items: center !important;
3156    margin: clamp(70px, 8vw, 130px) 0 !important;
3157}
3158
3159.projects-breaker column-unit {
3160    min-width: 0 !important;
3161}
3162
3163.projects-live-callout {
3164    box-sizing: border-box !important;
3165    font-family: var(--ff-font);
3166    font-size: clamp(5.25rem, 6.3vw, 8rem) !important;
3167    line-height: 1.15 !important;
3168    font-weight: 400 !important;
3169    font-style: normal !important;
3170    font-variation-settings: "slnt" 0 !important;
3171    letter-spacing: 0em !important;
3172    color: #000000 !important;
3173}
3174
3175.projects-breaker-gallery {
3176    display: block !important;
3177    min-height: 48vw !important;
3178    margin: 0 !important;
3179}
3180
3181/* Cargo mobile editor mode. */
3182body.mobile .projects-desktop-layout {
3183    display: none !important;
3184}
3185
3186body.mobile .projects-mobile-layout {
3187    display: block !important;
3188    width: 100% !important;
3189}
3190
3191body.mobile .projects-mobile-gallery {
3192    display: block !important;
3193    width: 100% !important;
3194    min-height: 1320vw !important;
3195    margin: 0 !important;
3196}
3197
3198/* Published narrow screens. */
3199@media (max-width: 767px) {
3200    .projects-desktop-layout {
3201        display: none !important;
3202    }
3203
3204    .projects-mobile-layout {
3205        display: block !important;
3206        width: 100% !important;
3207    }
3208
3209    .projects-mobile-gallery {
3210        display: block !important;
3211        width: 100% !important;
3212        min-height: 1320vw !important;
3213        margin: 0 !important;
3214    }
3215}
3216
3217/* ========================================================
3218   PROJECTS LANDING — DIVIDED MOBILE GALLERIES + LIVE TYPE
3219   Append once at the very bottom of the current page CSS.
3220   ======================================================== */
3221
3222body.mobile .projects-mobile-callout {
3223    box-sizing: border-box !important;
3224    width: 100% !important;
3225    padding: 14vw 7vw 16vw !important;
3226    font-family: var(--ff-font);
3227    font-size: clamp(52px, 15vw, 92px) !important;
3228    line-height: 1.15 !important;
3229    font-weight: 400 !important;
3230    letter-spacing: 0 !important;
3231    color: #000000 !important;
3232}
3233
3234body.mobile .projects-mobile-gallery-a,
3235body.mobile .projects-mobile-gallery-c {
3236    min-height: 105vw !important;
3237}
3238
3239body.mobile .projects-mobile-gallery-b,
3240body.mobile .projects-mobile-gallery-d {
3241    min-height: 485vw !important;
3242}
3243
3244body.mobile .projects-mobile-gallery-e {
3245    min-height: 180vw !important;
3246}
3247
3248@media (max-width: 767px) {
3249    .projects-mobile-callout {
3250        box-sizing: border-box !important;
3251        width: 100% !important;
3252        padding: 14vw 7vw 16vw !important;
3253        font-family: var(--ff-font);
3254        font-size: clamp(52px, 15vw, 92px) !important;
3255        line-height: 1.15 !important;
3256        font-weight: 400 !important;
3257        letter-spacing: 0 !important;
3258        color: #000000 !important;
3259    }
3260
3261    .projects-mobile-gallery-a,
3262    .projects-mobile-gallery-c {
3263        min-height: 105vw !important;
3264    }
3265
3266    .projects-mobile-gallery-b,
3267    .projects-mobile-gallery-d {
3268        min-height: 485vw !important;
3269    }
3270
3271    .projects-mobile-gallery-e {
3272        min-height: 180vw !important;
3273    }
3274}
3275
3276/* ========================================================
3277   FORMANDFIELD — CANONICAL NEWSLETTER FOOTER
3278   Append once at the absolute bottom of each page's CSS.
3279   Mailchimp connection intentionally pending.
3280   ======================================================== */
3281
3282.footer-newsletter {
3283    position: relative !important;
3284    z-index: 1 !important;
3285    box-sizing: border-box !important;
3286    width: clamp(320px, 44vw, 760px) !important;
3287    margin:
3288        clamp(70px, 7vw, 120px) 1vw 12px auto !important;
3289    padding: 0 !important;
3290    text-align: left !important;
3291    font-family: var(--ff-font);
3292    color: #000000 !important;
3293}
3294
3295.footer-newsletter-label {
3296    margin: 0 0 9px !important;
3297    padding: 0 !important;
3298    font: inherit !important;
3299    font-size: clamp(14px, 1.05vw, 18px) !important;
3300    line-height: 1.15 !important;
3301    font-weight: 400 !important;
3302    letter-spacing: 0 !important;
3303}
3304
3305.footer-newsletter-row {
3306    display: grid !important;
3307    grid-template-columns: minmax(0, 1fr) auto !important;
3308    width: 100% !important;
3309    margin: 0 !important;
3310    padding: 0 !important;
3311}
3312
3313.footer-newsletter-email,
3314.footer-newsletter-submit {
3315    appearance: none !important;
3316    -webkit-appearance: none !important;
3317    box-sizing: border-box !important;
3318    height: 42px !important;
3319    margin: 0 !important;
3320    border: 1px solid #111111 !important;
3321    border-radius: 0 !important;
3322    background: transparent !important;
3323    color: #3d3d3d !important;
3324    font-family: var(--ff-font);
3325    font-size: 15px !important;
3326    line-height: 1 !important;
3327    font-weight: 400 !important;
3328    letter-spacing: 0 !important;
3329}
3330
3331.footer-newsletter-email {
3332    min-width: 0 !important;
3333    width: 100% !important;
3334    padding: 0 10px !important;
3335    border-right: 0 !important;
3336    outline: none !important;
3337}
3338
3339.footer-newsletter-email::placeholder {
3340    color: #5a5a5a !important;
3341    opacity: 1 !important;
3342}
3343
3344.footer-newsletter-email:focus {
3345    outline: 1px solid #111111 !important;
3346    outline-offset: -2px !important;
3347}
3348
3349.footer-newsletter-submit {
3350    min-width: 96px !important;
3351    padding: 2px 15px 0 !important;
3352    cursor: default !important;
3353}
3354
3355.footer-newsletter-message {
3356    min-height: 1em !important;
3357    margin-top: 6px !important;
3358    font-size: 12px !important;
3359    line-height: 1.15 !important;
3360}
3361
3362.footer-newsletter-message:empty {
3363    display: none !important;
3364}</style><style id="mobile-offset-styles-B3004925598"></style></div></div><div id="Z3013557801" page-url="footer" class="page pinned pinned-bottom"><a id="footer"></a><div class="page-layout"><div class="page-content"><bodycopy style="--fit-height: 10px; --resize-parent-width: 100%;"><footer class="site-footer">
3365
3366<div class="newsletter-drawer-anchor">
3367    <details class="newsletter-drawer">
3368        <summary>NEWSLETTER</summary>
3369
3370        <div class="newsletter-drawer-panel">
3371            <form action="https://formandfield.us13.list-manage.com/subscribe/post?u=d6b1cfd8e10ee8b00ef7b9bda&id=5c395d1268&f_id=003100e9f0" class="footer-newsletter" method="post" target="ff-drawer-mailchimp">
3372                <div class="footer-newsletter-label">Newsletter Signup</div>
3373
3374                <div class="footer-newsletter-row">
3375                    <input aria-label="Email address for newsletter signup" autocomplete="email" class="footer-newsletter-email" name="EMAIL" placeholder="[email protected]" required="" type="email" />
3376
3377                    <button aria-label="Subscribe to the Form and Field newsletter" class="footer-newsletter-submit" name="subscribe" type="submit">SUBMIT</button>
3378                </div>
3379
3380                <div aria-hidden="true" style="position: absolute; left: -5000px;">
3381                    <input name="b_d6b1cfd8e10ee8b00ef7b9bda_5c395d1268" tabindex="-1" type="text" value="" />
3382                </div>
3383
3384                <div aria-live="polite" class="footer-newsletter-message"></div>
3385            </form>
3386
3387            <iframe name="ff-drawer-mailchimp" style="display: none;" title="Newsletter signup response"></iframe>
3388        </div>
3389    </details>
3390</div>
3391
3392<script>
3393(function () {
3394    var forms = document.querySelectorAll(
3395        ".newsletter-drawer .footer-newsletter"
3396    );
3397
3398    Array.prototype.forEach.call(forms, function (form) {
3399        if (form.__ffMailchimpReady) return;
3400        form.__ffMailchimpReady = true;
3401
3402        var email = form.querySelector(".footer-newsletter-email");
3403        var message = form.querySelector(".footer-newsletter-message");
3404        var button = form.querySelector(".footer-newsletter-submit");
3405
3406        if (!email || !message || !button) return;
3407
3408        form.addEventListener("submit", function (event) {
3409            if (!email.checkValidity()) {
3410                event.preventDefault();
3411                email.reportValidity();
3412                return;
3413            }
3414
3415            button.disabled = true;
3416            button.textContent = "SUBMITTING";
3417
3418            window.setTimeout(function () {
3419                message.textContent = "THANK YOU FOR SIGNING UP.";
3420                button.textContent = "SUBMITTED";
3421                email.value = "";
3422            }, 600);
3423        });
3424    });
3425}());
3426</script>
3426
3427
3428
3429    <a class="footer-arrow" href="#top">↑</a>
3430
3431    <div class="footer-wordmark">FormAndField</div>
3432
3433    <div class="footer-meta">
3434        <span>FormAndField ©2026</span>
3435        <span>Based In San Francisco</span>
3436    </div>
3437
3438</footer></bodycopy></div></div><style>[page-url="footer"] {
3439    .page-content {
3440        padding: 0;
3441    }
3442
3443    .site-footer {
3444        position: relative;
3445        isolation: isolate;
3446        overflow: hidden;
3447        box-sizing: border-box;
3448        padding: 28px 20px 14px;
3449        text-align: center;
3450        font-family: "Favorit Variable", "Favorit", Arial, sans-serif;
3451        font-weight: 350;
3452        font-style: normal;
3453        font-variation-settings: "slnt" 0;
3454
3455        .footer-arrow,
3456        .footer-arrow:link,
3457        .footer-arrow:visited,
3458        .footer-arrow:hover,
3459        .footer-arrow:active,
3460        .footer-wordmark,
3461        .footer-meta,
3462        .footer-meta * {
3463            color: var(--ff-footer-color, #000000) !important;
3464        }
3465
3466        .footer-arrow {
3467            display: inline-block;
3468            margin-bottom: 8px;
3469            font-size: 28px;
3470            line-height: 1;
3471            cursor: pointer;
3472
3473            &,
3474            &:link,
3475            &:visited,
3476            &:hover,
3477            &:active {
3478                text-decoration: none !important;
3479                border-bottom: 0 !important;
3480                box-shadow: none !important;
3481            }
3482        }
3483
3484        .footer-wordmark {
3485            display: block;
3486            width: 100%;
3487            margin: 0;
3488            font-size: 16.7vw;
3489            line-height: 0.78;
3490            letter-spacing: -0.75vw;
3491            white-space: nowrap;
3492            text-align: left;
3493            transform: translateX(-1.80rem);
3494            text-align: center;
3495            pointer-events: none;
3496        }
3497
3498        .footer-meta {
3499            display: grid !important;
3500            grid-template-columns: 1fr 1fr !important;
3501            gap: 16px !important;
3502            width: 100%;
3503            margin: 8px 0 0;
3504            line-height: 1.1;
3505            letter-spacing: 0.025em;
3506            text-transform: uppercase;
3507            -webkit-font-smoothing: antialiased;
3508
3509            &,
3510            *,
3511            bodycopy,
3512            bodycopy *,
3513            span,
3514            span:first-child,
3515            span:last-child {
3516                font-size: 12px !important;
3517            }
3518
3519            span,
3520            span:first-child,
3521            span:last-child {
3522                display: block;
3523                line-height: inherit;
3524                text-transform: inherit;
3525
3526                &::after {
3527                    content: none !important;
3528                    display: none !important;
3529                }
3530            }
3531
3532            span:first-child {
3533                text-align: left !important;
3534            }
3535
3536            span:last-child {
3537                text-align: right !important;
3538            }
3539        }
3540
3541        body.mobile & {
3542            padding-top: 0;
3543
3544            .footer-wordmark {
3545                font-size: 15.5vw;
3546                line-height: 0.82;
3547                text-align: center;
3548                transform: translateX(-1.2vw);
3549            }
3550
3551            .footer-meta {
3552                gap: 8px !important;
3553
3554                &,
3555                *,
3556                bodycopy,
3557                bodycopy *,
3558                span,
3559                span:first-child,
3560                span:last-child {
3561                    font-size: 8px !important;
3562                }
3563            }
3564        }
3565
3566        @media (max-width: 767px) {
3567            padding-top: 0;
3568
3569            .footer-meta {
3570                gap: 8px !important;
3571
3572                &,
3573                *,
3574                bodycopy,
3575                bodycopy *,
3576                span,
3577                span:first-child,
3578                span:last-child {
3579                    font-size: 8px !important;
3580                }
3581            }
3582        }
3583    }
3584}</style><style id="mobile-offset-styles-Z3013557801"></style></div></div>
3585		
3585<script src="https://build.cargo.site/frontend/054f94/index.js" async type="module"></script>
3585
3586	
3586<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"5fc07c1d349c4f998c42004807a5dd2e","r":1,"spa":2}' crossorigin="anonymous"></script>
3586
3587</body>
3588
3589</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.