:root {
--paper: #f3f0e9;
--ink: #181816;
--muted: #68665f;
--rule: #c8c4ba;
--terra: #8b523c;
--terra-light: #bb9179;
--dark-rule: #4a4943;
--serif: Georgia, 'Times New Roman', serif;
--sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 2rem; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 1rem; -webkit-font-smoothing: antialiased; }
::selection { color: var(--paper); background: var(--terra); }
a { color: inherit; text-decoration: none; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--terra); outline-offset: 6px; }
p { margin: 0; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
.page-width { width: min(90%, 1440px); margin-inline: auto; }
.skip-link { position: absolute; z-index: 10; inset: -100px auto auto 1rem; background: var(--ink); color: var(--paper); padding: 1rem; }
.skip-link:focus { top: 1rem; }
.edition-bar { background: var(--ink); color: var(--paper); display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 5%; font-size: .75rem; line-height: 1.5; }
.edition-divider { margin-inline: .6rem; color: var(--terra-light); }
.edition-bar a { text-decoration: underline; text-underline-offset: 3px; }
.edition-bar a span { display: inline-block; margin-left: .5rem; }
.header { display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding-block: 2rem; border-bottom: 1px solid var(--rule); }
.wordmark { display: inline-block; font-weight: 750; font-size: 2rem; letter-spacing: -.09em; line-height: 1.1; white-space: nowrap; }
.wordmark span { font-weight: 400; }
.wordmark i { font-style: normal; color: var(--terra); }
nav { display: flex; gap: 2rem; align-items: center; font-size: .875rem; }
nav a { padding-block: .5rem; }
nav a:hover { color: var(--terra); }
.nav-contact { margin-left: 1.5rem; border-bottom: 1px solid currentColor; }
.nav-contact span { margin-left: 1rem; }
.hero { padding-top: 2rem; }
.hero-topline { display: flex; justify-content: space-between; gap: 1.5rem; }
.eyebrow { text-transform: uppercase; font-size: .75rem; line-height: 1.5; letter-spacing: .1em; }
h1, h2, h3 { margin: 0; }
.hero h1 { font-size: clamp(3.1rem, 7.6vw, 8rem); letter-spacing: -.062em; line-height: 1.03; font-weight: 750; margin-block: 5.2rem 4rem; }
.hero-line { display: block; }
.hero-line em { font-family: var(--serif); font-weight: 400; letter-spacing: -.065em; }
.second-line { text-align: right; margin-top: .1em; }
.outline { -webkit-text-stroke: 1px var(--ink); color: transparent; letter-spacing: -.08em; }
.terra { color: var(--terra); }
.terra-light { color: var(--terra-light); }
.hero-bottom { display: flex; justify-content: space-between; gap: 3rem; align-items: center; margin-bottom: 4rem; }
.hero-bottom p { width: min(44%, 31rem); font-size: 1.0625rem; line-height: 1.65; }
.text-link { display: inline-flex; align-items: center; gap: 1.5rem; font-size: .875rem; }
.circle-arrow { border: 1px solid var(--rule); display: grid; place-items: center; width: 3.1rem; height: 3.1rem; border-radius: 50%; font-size: 1.25rem; transition: color .2s, background .2s; }
.text-link:hover .circle-arrow { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.hero-caption { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--rule); padding-block: 1.125rem; color: var(--muted); font-size: .75rem; }
.caption-index { text-transform: uppercase; letter-spacing: .07em; }
.section { padding-block: 6.25rem; }
.section-meta { display: flex; justify-content: space-between; gap: 2rem; margin-bottom: 3.75rem; }
.section-meta .eyebrow { color: var(--terra); }
.section-sidenote { color: var(--muted); font-size: .75rem; line-height: 1.5; }
h2 { font-size: clamp(2.5rem, 4.35vw, 4.7rem); font-weight: 650; line-height: 1.08; letter-spacing: -.055em; }
h2 em { font-family: var(--serif); font-weight: 400; letter-spacing: -.055em; }
.about { border-top: 1px solid var(--rule); }
.about-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 8%; }
.about-copy { max-width: 35rem; }
.about-copy p { font-size: 1rem; line-height: 1.8; }
.about-copy p + p { margin-top: 1.5rem; color: var(--muted); }
.experience-number { display: flex; gap: 2rem; align-items: center; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.experience-number strong { font-size: 4rem; font-weight: 500; letter-spacing: -.08em; }
.experience-number strong span { font-family: var(--serif); color: var(--terra); font-size: 2.8rem; vertical-align: super; line-height: 0; margin-left: .15em; }
.experience-number > span { font-size: .875rem; line-height: 1.65; }
.services { background: var(--ink); color: var(--paper); }
.services .section-meta .eyebrow, .contact .section-meta .eyebrow { color: var(--terra-light); }
.services .section-sidenote, .contact .section-sidenote { color: #b5b2a9; }
.service-layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: 7%; }
.service-intro h2 { font-size: clamp(2.5rem, 3.5vw, 4rem); }
.service-intro em { color: var(--terra-light); }
.service-list { min-width: 0; }
.service-list details { border-top: 1px solid var(--dark-rule); }
.service-list details:last-child { border-bottom: 1px solid var(--dark-rule); }
.service-list summary { list-style: none; display: flex; align-items: baseline; gap: 1.25rem; font-size: clamp(1.125rem, 1.7vw, 1.6rem); letter-spacing: -.035em; padding-block: 1.5rem; cursor: pointer; }
.service-list summary::-webkit-details-marker { display: none; }
.service-number { color: var(--terra-light); font-size: .75rem; letter-spacing: 0; flex-shrink: 0; }
.plus { display: inline-block; width: 1rem; height: 1rem; position: relative; margin-left: auto; flex-shrink: 0; }
.plus::before, .plus::after { content: ''; position: absolute; background: currentColor; top: 50%; left: 0; width: 100%; height: 1px; }
.plus::after { transform: rotate(90deg); transition: transform .2s; }
details[open] .plus::after { transform: rotate(0); }
.service-description { margin-left: 2.25rem; padding-bottom: 1.8rem; }
.service-description p { color: #cfccc3; font-size: 1rem; line-height: 1.7; }
.service-tags { display: block; margin-top: 1.2rem; color: var(--terra-light); font-size: .75rem; line-height: 1.7; }
.portfolio { border-bottom: 1px solid var(--rule); }
.portfolio-top { display: flex; justify-content: space-between; gap: 3rem; align-items: end; margin-bottom: 3.5rem; }
.portfolio-top p { width: min(40%, 27rem); color: var(--muted); line-height: 1.7; }
.portfolio-cover { display: flex; flex-direction: column; justify-content: space-between; padding: 2.5rem 3rem; background: #e6e1d7; min-height: 26rem; transition: background .25s; }
.portfolio-cover:hover { background: #ded7cb; }
.portfolio-cover-top, .portfolio-cover-bottom { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: .875rem; line-height: 1.5; }
.portfolio-cover-top { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.portfolio-lettering { white-space: nowrap; font-weight: 700; letter-spacing: -.09em; font-size: clamp(4.5rem, 12vw, 12rem); line-height: 1.25; padding-block: 2rem; }
.portfolio-lettering span { font-family: var(--serif); font-weight: 400; font-style: italic; letter-spacing: -.07em; }
.portfolio-lettering i { color: var(--terra); font-style: normal; }
.portfolio-cta { border-bottom: 1px solid currentColor; padding-bottom: .4rem; }
.portfolio-cta > span { margin-left: 1rem; }
.portfolio-note { font-size: .75rem; color: var(--muted); margin-top: 1rem; }
.perspective-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; margin-top: 4rem; }
.perspective-grid article { border-top: 1px solid var(--rule); padding-top: 1.125rem; }
.perspective-number { display: block; font-size: .75rem; color: var(--terra); margin-bottom: 1.8rem; }
.perspective-grid h3 { font-size: 1.125rem; font-weight: 500; letter-spacing: -.025em; line-height: 1.4; margin-bottom: 1rem; }
.perspective-grid p { font-size: 1rem; line-height: 1.7; color: var(--muted); }
.contact { background: var(--ink); color: var(--paper); }
.contact h2 { font-size: clamp(4rem, 8.5vw, 9.5rem); line-height: 1; }
.contact h2 em { font-weight: 400; }
.contact-bottom { display: flex; justify-content: space-between; align-items: center; gap: 3rem; margin-top: 4rem; }
.contact-bottom > p { max-width: 25rem; line-height: 1.75; color: #cfccc3; }
.contact-actions { display: flex; flex-direction: column; gap: 1.4rem; }
.contact-button { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.125rem 1.5rem; background: var(--paper); color: var(--ink); font-size: .875rem; border: 1px solid var(--paper); transition: color .2s, background .2s; }
.contact-button:hover { background: transparent; color: var(--paper); }
.email { font-size: 1rem; text-decoration: underline; text-underline-offset: .3em; overflow-wrap: anywhere; }
.contact a:focus-visible, .services summary:focus-visible { outline-color: var(--terra-light); }
.footer { display: flex; gap: 2rem; justify-content: space-between; align-items: center; font-size: .875rem; padding-block: 2.5rem; }
.footer a:not(.wordmark):hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-wordmark { font-size: 1.75rem; }
@media (min-width: 1800px) { .edition-bar { padding-inline: max(5%, calc((100% - 1440px)/2)); } }
@media (max-width: 1000px) { .perspective-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; } .service-layout { grid-template-columns: 1fr 1.3fr; gap: 4%; } .hero h1 { font-size: 7.9vw; } .hero-bottom p { width: 50%; } .portfolio-cover { min-height: 22rem; } .nav-contact { margin-left: 0; } }
@media (max-width: 740px) {
.page-width { width: 90%; }
.edition-bar { font-size: .75rem; align-items: baseline; flex-wrap: wrap; gap: .3rem 1rem; }
.header { flex-wrap: wrap; gap: 1.2rem; padding-block: 1.5rem 1rem; }
.wordmark { font-size: 2rem; }
nav { width: 100%; justify-content: space-between; gap: .5rem; font-size: .875rem; }
.nav-contact { border: 0; }
.nav-contact span { margin-left: .2rem; }
.hero { padding-top: 1.5rem; }
.hero-topline { flex-wrap: wrap; gap: .4rem 1rem; }
.location { color: var(--muted); }
.eyebrow { font-size: .75rem; letter-spacing: .04em; }
.hero h1 { margin-block: 3.5rem 2.5rem; font-size: clamp(2.35rem, 8.2vw, 4rem); letter-spacing: -.065em; line-height: 1.13; }
.hero-bottom { flex-direction: column-reverse; align-items: flex-start; gap: 1.75rem; margin-bottom: 2.5rem; }
.hero-bottom p { width: 100%; max-width: 29rem; font-size: 1rem; }
.hero-caption { flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .75rem; }
.caption-index { display: none; }
.section { padding-block: 3.75rem; }
.section-meta { margin-bottom: 2.5rem; flex-wrap: wrap; gap: .5rem 1rem; }
.about-layout, .service-layout { grid-template-columns: 1fr; gap: 2.5rem; }
h2 { font-size: clamp(2.45rem, 7.5vw, 3.75rem); }
.about-copy { max-width: 100%; }
.service-intro h2 { font-size: clamp(2.45rem, 7.5vw, 3.75rem); }
.service-list summary { font-size: 1.2rem; padding-block: 1.3rem; gap: .9rem; }
.service-description { margin-left: 1.8rem; }
.portfolio-top { flex-direction: column; align-items: flex-start; gap: 1.5rem; margin-bottom: 2rem; }
.portfolio-top p { width: 100%; max-width: 28rem; }
.portfolio-cover { padding: 1.5rem; min-height: 20rem; }
.portfolio-lettering { font-size: clamp(3rem, 12vw, 6.5rem); }
.portfolio-cover-top { flex-wrap: wrap; gap: .4rem; letter-spacing: .035em; }
.portfolio-cover-bottom { align-items: flex-start; flex-direction: column; gap: 1rem; }
.perspective-grid { gap: 2rem 1.5rem; margin-top: 2.75rem; }
.perspective-number { margin-bottom: 1.2rem; }
.contact h2 { font-size: clamp(3.5rem, 11vw, 6rem); }
.contact-bottom { flex-direction: column; align-items: flex-start; gap: 2rem; margin-top: 2.5rem; }
.contact-actions { width: 100%; max-width: 27rem; }
.contact-button { gap: 1rem; padding: 1.2rem; }
.footer { flex-wrap: wrap; justify-content: flex-start; gap: 1.5rem 2rem; }
.footer-wordmark { width: 100%; }
.footer > span { width: 100%; }
}
@media (max-width: 400px) { .perspective-grid { grid-template-columns: 1fr; } nav { font-size: .875rem; flex-wrap: wrap; gap: .35rem 1rem; } .nav-contact { margin-left: auto; } .hero h1 { font-size: 8vw; } .edition-divider { margin-inline: .2rem; } .service-list summary { font-size: 1.075rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }
@media (forced-colors: active) { .outline { color: CanvasText; -webkit-text-stroke: 0; } }
top of page
bottom of page
