:root { --color-antique-brass: #b0987b; --color-noel-black: #0e0e0e; --color-weathered-paper: #f4ede3; --color-noel-red: #7a0f18; --color-photography-background: #ff2d95; --color-softened-black: #292724; --color-subtle-rule: rgba(14, 14, 14, 0.24); --font-family-editorial: "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; --font-family-supporting: "Source Sans 3", "Helvetica Neue", Arial, sans-serif; --site-content-width: 92rem; --site-horizontal-padding: clamp(1.25rem, 4vw, 4rem); --website-header-height: clamp(8.5rem, 11vw, 10.5rem); --section-vertical-spacing: clamp(5.5rem, 10vw, 10rem); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 2rem; } body { margin: 0; min-width: 20rem; overflow-x: hidden; background: var(--color-weathered-paper); color: var(--color-noel-black); font-family: var(--font-family-supporting); font-size: 1rem; font-synthesis: none; line-height: 1.55; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; } a { color: inherit; } button, input, textarea { border-radius: 0; color: inherit; font: inherit; } button { cursor: pointer; } figure, h1, h2, p, ul { margin: 0; } ul { padding: 0; list-style: none; } ::selection { background: var(--color-noel-red); color: var(--color-weathered-paper); } :focus-visible { outline: 0.1875rem solid var(--color-noel-red); outline-offset: 0.3rem; } /* Compose layout, typography, surfaces, and components independently. Responsive placement belongs to descriptive layout variants; IDs are anchors only. */ .grid-twelve-columns { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); } .label-uppercase { font-weight: 600; text-transform: uppercase; } .heading-editorial { font-family: var(--font-family-editorial); font-weight: 400; text-transform: uppercase; } .card-grid { --card-border-color: var(--color-antique-brass); display: grid; border-top: 1px solid var(--card-border-color); border-bottom: 1px solid var(--card-border-color); } .card { min-width: 0; } .card + .card { border-left: 1px solid var(--card-border-color); } .card p { margin-top: 1.25rem; } .skip-link { position: fixed; z-index: 100; top: 1rem; left: 1rem; padding: 0.7rem 1rem; transform: translateY(-200%); background: var(--color-noel-black); color: var(--color-weathered-paper); font-size: 0.85rem; letter-spacing: 0.08em; text-decoration: none; } .skip-link:focus { transform: translateY(0); } .content-boundary { width: 100%; max-width: var(--site-content-width); margin-inline: auto; padding-inline: var(--site-horizontal-padding); } .border-bottom-subtle { border-bottom: 1px solid var(--color-subtle-rule); } .grid-centered-content { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; min-height: var(--website-header-height); column-gap: clamp(1.5rem, 3vw, 3rem); } .image-link { display: block; line-height: 0; text-decoration: none; } .image-fluid { display: block; width: 100%; height: auto; } .image-link-large-centered { grid-column: 2; justify-self: center; width: clamp(18rem, 31vw, 29rem); } .grid-trailing-content { grid-column: 3; justify-self: end; min-width: 0; } .link-row { display: flex; align-items: center; justify-content: flex-end; gap: clamp(1.25rem, 3vw, 3.25rem); } .underline-reveal-link { position: relative; display: inline-block; padding-block: 0.6rem; font-size: 0.71rem; letter-spacing: 0.14em; text-decoration: none; } .underline-reveal-link::after { position: absolute; right: 0; bottom: 0.32rem; left: 0; height: 1px; transform: scaleX(0); transform-origin: right; background: currentColor; content: ""; transition: transform 180ms ease; } .underline-reveal-link:hover::after, .underline-reveal-link:focus-visible::after { transform: scaleX(1); transform-origin: left; } .grid-overlapping-introduction { grid-template-rows: auto auto 1fr; column-gap: clamp(1rem, 2vw, 2rem); min-height: min(57rem, calc(100vh - var(--website-header-height))); min-height: min(57rem, calc(100svh - var(--website-header-height))); padding-top: clamp(2rem, 5vw, 5rem); padding-bottom: clamp(4.5rem, 8vw, 7.5rem); } .eyebrow-label { font-size: 0.69rem; letter-spacing: 0.18em; } .eyebrow-label span { margin-inline: 0.55rem; color: var(--color-antique-brass); } .grid-overlapping-introduction > .eyebrow-label { grid-column: 1 / 7; grid-row: 1; } .heading-display { position: relative; z-index: 2; grid-column: 1 / 11; grid-row: 2; margin-top: clamp(2.8rem, 7vw, 6rem); font-size: clamp(4.2rem, 9.8vw, 9.6rem); letter-spacing: 0.04em; line-height: 0.88; } .heading-display span { display: block; } .isolate-blending { isolation: isolate; } .text-invert-over-image { color: var(--color-noel-black); } @supports (mix-blend-mode: difference) { .text-invert-over-image { color: var(--color-weathered-paper); filter: grayscale(1); mix-blend-mode: difference; } } .grid-lower-leading-copy { align-self: end; grid-column: 1 / 5; grid-row: 3; max-width: 22rem; padding-top: clamp(3rem, 8vw, 8rem); } .decorative-mark { display: inline-block; margin-bottom: 1.5rem; color: var(--color-antique-brass); font-size: 1.6rem; } .grid-lower-leading-copy p { max-width: 19rem; font-size: 0.84rem; letter-spacing: 0.14em; line-height: 1.85; text-transform: uppercase; } .arrow-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 2.25rem; margin-top: 2rem; padding-bottom: 0.45rem; border-bottom: 1px solid currentColor; font-size: 0.7rem; letter-spacing: 0.14em; line-height: 1.2; text-decoration: none; } .arrow-link span { font-size: 1.1rem; line-height: 0.7; transition: transform 180ms ease; } .arrow-link:hover span, .arrow-link:focus-visible span { transform: translateX(0.35rem); } .grid-overlapping-trailing-image { align-self: end; grid-column: 8 / 13; grid-row: 2 / 4; min-width: 0; margin-top: clamp(7rem, 11vw, 11rem); } .image-frame { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 12rem; padding: clamp(1.5rem, 4vw, 3rem); overflow: hidden; background: var(--color-photography-background); color: var(--color-noel-black); text-align: center; } .image-frame img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; border: #FFF; border-width: 1rem; border-style: solid; } .aspect-ratio-four-to-five { aspect-ratio: 4 / 5; } .aspect-ratio-three-to-four { aspect-ratio: 3 / 4; } .aspect-ratio-sixteen-to-ten { aspect-ratio: 16 / 10; } .aspect-ratio-sixteen-to-nine { aspect-ratio: 16 / 9; } .aspect-ratio-square { aspect-ratio: 1; } .spaced-bordered-block { padding-block: var(--section-vertical-spacing); border-top: 1px solid var(--color-subtle-rule); scroll-margin-top: 1rem; } .grid-three-part-content { align-items: center; gap: clamp(2rem, 3vw, 3.5rem); } .grid-leading-image { grid-column: 1 / 5; grid-row: 1; min-width: 0; } .heading-statement { grid-column: 5 / 10; grid-row: 1; min-width: 0; font-size: clamp(2.4rem, 4vw, 4.15rem); letter-spacing: 0.035em; line-height: 1.03; } .heading-statement span { display: block; margin-top: 0.25em; color: var(--color-antique-brass); } .grid-trailing-copy { grid-column: 10 / 13; grid-row: 1; min-width: 0; max-width: 32rem; color: var(--color-softened-black); font-size: 0.95rem; } .text-emphasis { color: var(--color-noel-red); font-family: var(--font-family-editorial); font-size: 1rem; letter-spacing: 0.12em; line-height: 1.65; } .text-brass { color: var(--color-antique-brass); } .paragraph-stack p + p { margin-top: 1.5rem; } .clip-overflow { overflow: hidden; } .heading-offset-down { transform: translateY(25%); } .heading-oversized { position: relative; z-index: 2; font-size: clamp(5rem, 13.2vw, 12.5rem); letter-spacing: 0.04em; line-height: 0.78; } .grid-narrow-copy-wide-image { align-items: end; gap: clamp(2rem, 4vw, 4.5rem); margin-top: 0; } .grid-leading-copy { grid-column: 1 / 4; min-width: 0; padding-top: clamp(3rem, 7vw, 7rem); color: var(--color-softened-black); font-size: 0.94rem; } .grid-wide-inset-image { grid-column: 4 / 12; min-width: 0; margin-top: 0; } .card-grid-three-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(4.5rem, 8vw, 8rem); } .card-spacious { padding: clamp(2rem, 4vw, 3.5rem); } .card-index { display: block; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); color: var(--color-antique-brass); font-size: 0.67rem; font-weight: 600; letter-spacing: 0.12em; } .card h3 { font-family: var(--font-family-editorial); font-size: clamp(0.9rem, 1.2vw, 1.1rem); font-weight: 400; letter-spacing: 0.12em; line-height: 1.35; text-transform: uppercase; } .card-spacious p { max-width: 28rem; color: var(--color-softened-black); font-size: 0.9rem; } .surface-dark { background: var(--color-noel-black); color: var(--color-weathered-paper); } .surface-dark-bordered { border-top-color: rgba(244, 237, 227, 0.18); } .grid-heading-and-copy { align-items: end; gap: 2rem; } .grid-heading-and-copy .heading-oversized { grid-column: 1 / 9; font-size: clamp(5rem, 12.4vw, 11.15rem); } .grid-trailing-introduction { grid-column: 9 / 13; max-width: 28rem; padding-bottom: 0.6rem; color: rgba(244, 237, 227, 0.74); font-size: 0.92rem; } .grid-staggered-images { align-items: start; gap: clamp(2rem, 3vw, 3.5rem); margin-top: clamp(4rem, 8vw, 8rem); } .grid-wide-leading-image { grid-column: 1 / 9; grid-row: 1; } .grid-tall-trailing-image { grid-column: 9 / 13; grid-row: 1 / 3; margin-top: clamp(5rem, 12vw, 12rem); } .grid-small-inset-image { grid-column: 3 / 7; grid-row: 2; } .caption-grid { display: grid; grid-template-columns: minmax(8rem, auto) minmax(0, 1fr); gap: clamp(1rem, 2vw, 2.5rem); align-items: start; padding-top: 1.25rem; border-top: 1px solid rgba(244, 237, 227, 0.34); } .caption-label { color: var(--color-antique-brass); font-size: 0.67rem; letter-spacing: 0.12em; line-height: 1.45; } .caption-description { max-width: 34rem; color: rgba(244, 237, 227, 0.7); font-size: 0.82rem; line-height: 1.55; } .surface-red-borderless { border-top: 0; background: var(--color-noel-red); color: var(--color-weathered-paper); } .grid-overlapping-halves { position: relative; align-items: center; gap: clamp(3rem, 7vw, 7rem); isolation: isolate; } .grid-leading-layer { position: relative; z-index: 2; grid-column: 1 / 6; } .heading-large { margin-top: 2rem; font-size: clamp(3.2rem, 6.5vw, 7rem); letter-spacing: 0.035em; line-height: 0.94; } .heading-large-raised { position: relative; z-index: 3; } .text-light-introduction { max-width: 29rem; margin-top: 2rem; color: rgba(244, 237, 227, 0.82); } .text-paper { color: var(--color-weathered-paper); } .grid-trailing-layer { position: relative; z-index: 1; grid-column: 6 / 13; } .card-grid-four-columns { --card-border-color: rgba(244, 237, 227, 0.34); grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(4rem, 7vw, 7rem); } .card-compact { padding: clamp(1.75rem, 3vw, 3rem); } .card-compact h3 { color: var(--color-antique-brass); } .card-compact p { max-width: 24rem; color: rgba(244, 237, 227, 0.76); font-size: 0.86rem; } .surface-paper { background: var(--color-weathered-paper); } .grid-wide-gap { align-items: start; gap: clamp(3rem, 8vw, 9rem); } .grid-leading-heading { grid-column: 1 / 6; } .text-dark-introduction { max-width: 27rem; margin-top: 2rem; color: var(--color-softened-black); } .grid-trailing-form { grid-column: 7 / 13; } @media (min-width: 64.0625rem) { .grid-trailing-form { margin-inline-end: clamp(2rem, 3.5vw, 4.5rem); } } .form-disclosure { margin-bottom: 2.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-antique-brass); color: var(--color-softened-black); font-size: 0.77rem; } .field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } .field-group { margin-bottom: 2.25rem; } .field-group label { display: block; margin-bottom: 0.65rem; font-size: 0.68rem; letter-spacing: 0.14em; } .field-group input, .field-group textarea { display: block; width: 100%; padding: 0.8rem 0; border: 0; border-bottom: 1px solid rgba(14, 14, 14, 0.58); outline: 0; background: transparent; font-size: 1rem; resize: vertical; } .field-group textarea { min-height: 8rem; } .field-group input:focus, .field-group textarea:focus { border-bottom-color: var(--color-noel-red); box-shadow: 0 1px 0 var(--color-noel-red); } .button-filled { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 1.15rem 1.25rem; border: 1px solid var(--color-noel-black); background: var(--color-noel-black); color: var(--color-weathered-paper); font-size: 0.72rem; letter-spacing: 0.14em; transition: background-color 180ms ease, color 180ms ease; -webkit-appearance: none; } .button-filled:hover, .button-filled:focus-visible { background: var(--color-antique-brass); color: var(--color-noel-black); } .button-filled span { font-size: 1.2rem; } .target-notice { display: none; margin-top: 1.5rem; padding: 1rem; border-left: 0.25rem solid var(--color-noel-red); background: rgba(176, 152, 123, 0.18); } .target-notice:target { display: block; } .surface-dark-padded { padding-block: clamp(4rem, 8vw, 7rem) 2rem; } .grid-weighted-columns { display: grid; grid-template-columns: 2fr 1fr 2fr; gap: clamp(2.5rem, 7vw, 8rem); } .image-link-small { width: clamp(10rem, 15vw, 13rem); } .image-inverted { opacity: 0.92; filter: invert(1); } .text-muted-small { max-width: 19rem; margin-top: 1.75rem; color: rgba(244, 237, 227, 0.62); font-size: 0.82rem; } .column-label { margin-bottom: 1.4rem; color: var(--color-antique-brass); font-size: 0.66rem; letter-spacing: 0.16em; } .link-stack a { display: inline-block; padding-block: 0.25rem; color: rgba(244, 237, 227, 0.76); font-size: 0.72rem; letter-spacing: 0.1em; text-decoration: none; text-transform: uppercase; } .link-stack a:hover, .link-stack a:focus-visible { color: var(--color-weathered-paper); } .text-muted-divider { grid-column: 1 / -1; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(244, 237, 227, 0.16); color: rgba(244, 237, 227, 0.48); font-size: 0.67rem; letter-spacing: 0.1em; text-transform: uppercase; } @media (max-width: 64rem), (min-width: 64.0625rem) and (max-width: 80rem) { .grid-three-part-content { align-items: start; } .grid-leading-image { grid-column: 1 / 6; grid-row: 1 / span 2; } .heading-statement { grid-column: 6 / 13; grid-row: 1; } .grid-trailing-copy { grid-column: 6 / 13; grid-row: 2; max-width: 32rem; margin-top: 2rem; } } @media (min-width: 64.0625rem) and (max-width: 75rem) { .link-row { gap: 1.25rem; } } @media (max-width: 64rem) { .grid-centered-content { display: flex; flex-direction: column; align-items: center; min-height: auto; padding-block: 2rem 1.5rem; gap: 1.5rem; } .image-link-large-centered { width: min(20rem, 76vw); } .grid-trailing-content { width: 100%; } .link-row { justify-content: center; flex-wrap: wrap; gap: 0.6rem clamp(1.25rem, 3vw, 2rem); } .grid-overlapping-introduction { min-height: auto; } .heading-display { grid-column: 1 / 13; font-size: clamp(4rem, 11.5vw, 7rem); } .grid-lower-leading-copy { grid-column: 1 / 6; } .grid-overlapping-trailing-image { grid-column: 7 / 13; } .grid-leading-copy { grid-column: 1 / 5; } .grid-narrow-copy-wide-image { align-items: start; margin-top: 0; } .grid-wide-inset-image { grid-column: 5 / 13; margin-top: 0; } .grid-heading-and-copy .heading-oversized { grid-column: 1 / 8; font-size: clamp(5rem, 10.6vw, 6.85rem); } .grid-trailing-introduction { grid-column: 8 / 13; } .grid-leading-layer { grid-column: 1 / 7; } .grid-trailing-layer { grid-column: 7 / 13; } .card-grid-four-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } .card-compact:nth-child(3) { border-left: 0; } .card-compact:nth-child(n + 3) { border-top: 1px solid var(--card-border-color); } .grid-leading-heading { grid-column: 1 / 6; } .grid-trailing-form { grid-column: 6 / 13; } } @media (max-width: 48rem) { .heading-display { letter-spacing: 0.03em; } .heading-oversized { letter-spacing: 0.03em; } .grid-centered-content { padding-block: 1.75rem 1.2rem; gap: 1.35rem; } .grid-trailing-content { width: 100%; } .link-row { justify-content: center; gap: 0.4rem 1.6rem; flex-wrap: wrap; } .grid-overlapping-introduction { display: block; padding-top: 2rem; } .heading-display { margin-top: 3.25rem; font-size: clamp(3.7rem, 16vw, 7.1rem); line-height: 0.92; } .grid-lower-leading-copy { max-width: 24rem; padding-top: 3rem; } .grid-overlapping-trailing-image { max-width: 31rem; margin-top: 3.5rem; margin-left: auto; } .grid-twelve-columns { display: block; } .grid-leading-image { max-width: 28rem; } .heading-statement { max-width: 37rem; margin-top: 3.5rem; } .grid-trailing-copy { max-width: 27rem; margin-top: 2.5rem; margin-left: auto; } .heading-oversized { font-size: clamp(4rem, 15.5vw, 7.3rem); line-height: 0.88; } .grid-heading-and-copy .heading-oversized { font-size: clamp(4rem, 15.5vw, 7.3rem); } .grid-narrow-copy-wide-image { margin-top: 2.5rem; } .grid-leading-copy { max-width: 28rem; padding-top: 0; } .grid-wide-inset-image { margin-top: 3.5rem; margin-left: clamp(0rem, 8vw, 5rem); } .grid-trailing-introduction { max-width: 28rem; margin-top: 2.5rem; padding-bottom: 0; } .grid-wide-leading-image, .grid-tall-trailing-image, .grid-small-inset-image { margin-top: 3.5rem; } .grid-tall-trailing-image { max-width: 27rem; margin-left: auto; } .grid-small-inset-image { max-width: 22rem; } .grid-trailing-layer { margin-top: 3.5rem; } .grid-leading-heading { max-width: 38rem; } .grid-trailing-form { margin-top: 4rem; } .grid-weighted-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } .span-full-width-on-tablet { grid-column: 1 / -1; } } @media (min-width: 32.0625rem) and (max-width: 48rem) { .grid-narrow-copy-wide-image { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; gap: clamp(1.5rem, 4vw, 2.5rem); margin-top: 0; } .grid-leading-copy { grid-column: 1 / 6; max-width: none; padding-top: clamp(2rem, 6vw, 3rem); } .grid-wide-inset-image { grid-column: 6 / 13; margin-top: 0; margin-left: 0; } } @media (max-width: 40rem) { .card-grid { grid-template-columns: minmax(0, 1fr); margin-top: 4rem; } .card-spacious { padding: 2.25rem 0; } .card-spacious + .card-spacious { border-top: 1px solid var(--card-border-color); border-left: 0; } .card-index { margin-bottom: 2rem; } .card-compact { padding: 2rem 0; border-left: 0; } .card-compact + .card-compact, .card-compact:nth-child(3) { border-top: 1px solid var(--card-border-color); border-left: 0; } } @media (max-width: 32rem) { :root { --site-horizontal-padding: 1.25rem; } .link-row { justify-content: space-between; gap: 0.25rem 0.4rem; } .underline-reveal-link { font-size: 0.7rem; } .heading-display { font-size: clamp(3.05rem, 15.25vw, 4.8rem); letter-spacing: 0.02em; } .heading-display span:last-child { font-size: 0.83em; } .heading-statement { font-size: clamp(2.15rem, 10.5vw, 3.3rem); letter-spacing: 0.025em; } .heading-oversized { font-size: clamp(3.15rem, 15.5vw, 5rem); letter-spacing: 0.02em; } .heading-offset-down { transform: none; color: var(--color-noel-black); filter: none; mix-blend-mode: normal; } .grid-heading-and-copy .heading-oversized { font-size: clamp(3.15rem, 15.5vw, 5rem); } .heading-large { font-size: clamp(2.75rem, 13vw, 4.1rem); letter-spacing: 0.025em; } .caption-grid { display: block; } .caption-description { display: block; margin-top: 0.75rem; text-align: left; } .field-grid, .grid-weighted-columns { display: block; } .link-stack, .space-above-on-mobile { margin-top: 2.75rem; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; } }