:root{--paper:#f6f3ee;--ink:#332b25;--muted:#6f6259;--line:#cbbcac;--accent:#a94710}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit}button,input,textarea{font:inherit}.skip-link{position:absolute;left:1rem;top:-5rem;background:var(--ink);color:#fff;padding:.8rem;z-index:10}.skip-link:focus{top:1rem}.site-header{height:92px;display:flex;justify-content:space-between;align-items:center;padding:0 4.2vw;border-bottom:1px solid var(--line)}.wordmark{text-decoration:none;font-size:1rem;font-weight:700;letter-spacing:.22em}.wordmark span{font-weight:400}.site-header nav{display:flex;gap:2.6rem}.site-header nav a,.site-footer a{text-decoration:none;font-size:.72rem;text-transform:uppercase;letter-spacing:.15em}.site-header a:hover,.site-footer a:hover,.text-link:hover{color:var(--accent)}.hero{position:relative;min-height:calc(100svh - 92px);padding:8vh 4.2vw 5vh;display:flex;flex-direction:column;justify-content:space-between}.eyebrow,.kicker,.section-meta,.hero-index{font-size:.68rem;letter-spacing:.19em;text-transform:uppercase}.eyebrow{display:flex;align-items:center;gap:1rem}.rule{display:inline-block;width:38px;height:1px;background:var(--ink)}h1,h2,h3,p{margin-top:0}h1,h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.055em}h1{font-size:clamp(5rem,11.4vw,12.8rem);line-height:.89;margin:2rem 0 4rem}h1 em,h2 em{font-weight:400;color:var(--accent)}.hero-bottom{display:flex;align-items:end;justify-content:space-between;gap:3rem}.hero-bottom p{font-size:clamp(1.1rem,1.6vw,1.5rem);line-height:1.4;max-width:540px;margin:0}.text-link{font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;text-decoration:none;white-space:nowrap;border-bottom:1px solid var(--ink);padding-bottom:.7rem}.text-link span{margin-left:2rem}.hero-index{position:absolute;right:4.2vw;top:8vh;color:var(--muted)}.section{display:grid;grid-template-columns:20% 1fr;border-top:1px solid var(--line);padding:5rem 4.2vw 8rem;gap:2rem}.section-meta{display:flex;justify-content:space-between;padding-right:4rem;color:var(--muted)}.section-body{max-width:990px}.kicker{color:var(--accent);margin-bottom:3.2rem}h2{font-size:clamp(4.2rem,8.4vw,9rem);line-height:.95;margin-bottom:4.5rem}.about-copy{display:grid;grid-template-columns:1fr 1fr;gap:4rem;max-width:850px;margin-left:auto}.about-copy p,.contact-intro{font-size:clamp(1.1rem,1.55vw,1.4rem);line-height:1.5}.about-copy p:last-child{color:var(--muted)}.work-list{border-top:1px solid var(--line)}.work-item{display:grid;grid-template-columns:70px 1fr 40%;gap:1rem;align-items:baseline;border-bottom:1px solid var(--line);padding:1.8rem 0}.work-number{color:var(--accent);font-size:.7rem;letter-spacing:.15em}.work-item h3{font-family:Georgia,'Times New Roman',serif;font-size:clamp(1.7rem,2.6vw,2.6rem);font-weight:400;letter-spacing:-.03em;margin:0}.work-item p{color:var(--muted);line-height:1.45;margin:0}.contact-intro{max-width:550px;margin-bottom:4rem}form{max-width:780px}.hidden{position:absolute;left:-9999px}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:2rem}label{display:block;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:2rem}input,textarea{display:block;width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;padding:1rem 0;color:var(--ink);font-size:1rem;letter-spacing:normal;outline:0}input:focus,textarea:focus{border-color:var(--accent)}textarea{resize:vertical}button{border:0;background:var(--ink);color:var(--paper);padding:1.25rem 1.5rem;min-width:210px;text-align:left;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;cursor:pointer;display:flex;justify-content:space-between}button:hover{background:var(--accent)}.site-footer{border-top:1px solid var(--line);padding:2.2rem 4.2vw;display:flex;justify-content:space-between;gap:2rem;align-items:center;font-size:.7rem;letter-spacing:.15em;text-transform:uppercase}.site-footer span:nth-child(2){color:var(--muted)}@media(max-width:800px){.site-header{height:76px}.site-header nav{gap:1rem}.hero{min-height:740px}.hero-index{display:none}h1{font-size:clamp(4.5rem,14vw,7rem)}.section{grid-template-columns:1fr;padding:3rem 4.2vw 6rem}.section-meta{justify-content:initial;gap:2rem}.kicker{margin:3rem 0}h2{font-size:clamp(4rem,12vw,6rem)}.about-copy{gap:2rem}.work-item{grid-template-columns:40px 1fr}.work-item p{grid-column:2}.site-footer span:nth-child(2){display:none}}@media(max-width:560px){.site-header nav a:nth-child(1),.site-header nav a:nth-child(2){display:none}.hero{min-height:650px}.hero-bottom{display:block}.hero-bottom p{margin-bottom:3rem}.about-copy,.field-row{grid-template-columns:1fr;gap:0}.work-item h3{font-size:1.6rem}.site-footer{font-size:.62rem}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* White ground with taupe structure and orange accents. */
.site-header,.hero{background:var(--paper);color:var(--ink)}
.site-header{border-color:var(--line)}
.hero .rule{background:var(--ink)}
.hero .text-link{border-color:var(--ink)}
.hero .hero-index{color:var(--muted)}
.hero h1 em{color:var(--accent)}
.contact{background:var(--paper)}
.site-footer{background:var(--paper);color:var(--ink);border-color:var(--line)}
.site-footer span:nth-child(2){color:var(--muted)}
.hero-portrait{position:absolute;right:4.2vw;top:15%;width:min(35vw,500px);height:61%;margin:0;overflow:hidden;z-index:0}
.hero-portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:saturate(.83)}
.hero h1,.hero-bottom,.hero .eyebrow{position:relative;z-index:1}
.hero h1{max-width:70%}
.hero-bottom p{max-width:490px}
@media(max-width:800px){.hero-portrait{top:20%;width:42vw;height:53%}.hero h1{max-width:75%;font-size:clamp(4.5rem,12vw,7rem)}}
@media(max-width:560px){.hero{min-height:0;gap:2.5rem;padding-top:3rem}.hero .eyebrow{order:0}.hero h1{order:1;max-width:none;font-size:clamp(4.2rem,15vw,6rem);margin:1.5rem 0 0}.hero-portrait{position:relative;order:2;top:auto;right:auto;width:100%;height:auto;aspect-ratio:1.08;margin:0}.hero-bottom{order:3;padding-bottom:3rem}.hero-bottom p{margin-bottom:2.5rem}}

/* Type: geometric display capitals with a quiet editorial text face. */
body{font-family:'DM Sans',Arial,sans-serif}
h1,h2,.work-item h3{font-family:'Syne','Arial Narrow',Arial,sans-serif;font-style:normal;font-weight:600;text-transform:uppercase;letter-spacing:-.065em}
h1 em,h2 em{font-style:normal;font-weight:600}
h1{font-size:clamp(4.8rem,8vw,8.5rem);line-height:.95}
h2{font-size:clamp(3.6rem,6.7vw,7rem);line-height:1.01}
.work-item h3{font-size:clamp(1.45rem,2.1vw,2.1rem);letter-spacing:-.04em}
.wordmark{font-family:'Syne',Arial,sans-serif;font-weight:700;letter-spacing:.19em}
.site-header nav a,.text-link,.kicker,.section-meta,.eyebrow,.hero-index,.site-footer,button{font-weight:600}
.hero-bottom p,.about-copy p,.contact-intro,.work-item p{font-weight:400}

/* Click-through opening. Without JavaScript, the site opens directly. */
.entry-screen{display:none;position:fixed;inset:0;z-index:50;background:var(--paper);place-items:center;opacity:1;transition:opacity .45s ease}
.has-js .entry-screen{display:grid}
.entry-screen[hidden]{display:none!important}
.entered .entry-screen{opacity:0;pointer-events:none}
.entry-button{display:flex;flex-direction:column;align-items:center;gap:2rem;width:auto;min-width:0;padding:0;border:0;background:transparent;color:var(--ink);text-align:center;cursor:pointer}
.entry-button:hover,.entry-button:focus-visible{background:transparent;color:var(--ink)}
.entry-mark{display:grid;place-items:center;width:min(34vw,280px);height:min(34vw,280px);border-radius:50%;background:#ec812d;font-family:'Syne',Arial,sans-serif;font-size:4.5rem;font-weight:500;letter-spacing:-.1em;padding-right:.1em;transition:transform .35s ease,background .35s ease}
.entry-button:hover .entry-mark,.entry-button:focus-visible .entry-mark{transform:scale(1.045);background:#d96b1c}
.entry-label{font-size:.66rem;letter-spacing:.42em;text-transform:uppercase;margin-left:.42em}
.entry-button:focus-visible{outline:2px solid var(--accent);outline-offset:12px}
@media(max-width:800px){.hero h1{font-size:clamp(4.3rem,9vw,6.5rem)}.section h2{font-size:clamp(3.5rem,8vw,5.5rem)}}
@media(max-width:560px){.hero h1{font-size:clamp(3.7rem,12vw,5.2rem)}.section h2{font-size:clamp(3.1rem,10.5vw,4.7rem)}.entry-mark{width:220px;height:220px}}
@media(prefers-reduced-motion:reduce){.entry-screen,.entry-mark{transition:none}}

/* Orange is a restrained accent against the taupe foundation. */
.contact button{background:#a94710}
.contact button:hover{background:#873507}
.entry-mark{color:#332b25}

/* Image-led editorial layout and quiet motion. */
.site-header{position:sticky;top:0;z-index:20;background:rgba(246,243,238,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:0}
.hero{min-height:calc(100svh - 92px);overflow:hidden}
.hero-portrait{top:0;right:0;width:52%;height:100%;mask-image:linear-gradient(to right,transparent 0%,#000 20%);-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 20%)}
.hero-portrait img{object-position:center 25%;filter:none}
.hero h1{max-width:66%;font-size:clamp(4.5rem,6.25vw,7.2rem);line-height:1.01;letter-spacing:-.067em}
.hero-bottom p{max-width:560px}
.section{padding-top:7rem;padding-bottom:9rem}
.work-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;border:0}
.work-item{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:0;min-height:350px;padding:1.7rem;background:#eae4da;border:0;transition:transform .5s cubic-bezier(.2,.7,.1,1),background-color .5s ease}
.work-item:nth-child(2){background:#e5dfd5}
.work-item:nth-child(3){background:#ded6ca}
.work-item::after{content:'↗';position:absolute;top:1.4rem;right:1.5rem;display:grid;place-items:center;width:2.2rem;height:2.2rem;border:1px solid currentColor;border-radius:50%;font-size:1.2rem;line-height:1;transition:transform .4s ease}
.work-item:hover{transform:translateY(-8px);background:#e2d7c8}
.work-item:hover::after{transform:rotate(45deg)}
.work-item h3{margin-top:auto;margin-bottom:1.1rem}
.work-item p{font-size:.95rem;max-width:27ch}
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.1,1);transition-delay:var(--reveal-delay,0ms)}
.reveal.is-visible{opacity:1;transform:translateY(0)}
.entry-mark{animation:entry-breathe 4s ease-in-out infinite}
@keyframes entry-breathe{50%{transform:scale(1.035)}}
@keyframes rise-in{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:800px){.hero-portrait{width:54%;height:100%;top:0}.hero h1{max-width:72%;font-size:clamp(4.2rem,7vw,5.6rem)}.work-list{gap:.7rem}.work-item{min-height:320px;padding:1.2rem}}
@media(max-width:560px){.site-header{min-height:76px}.hero{min-height:0;overflow:visible}.hero h1{max-width:none;font-size:clamp(3.6rem,11vw,5rem)}.hero-portrait{position:relative;top:auto;right:auto;width:100%;height:auto;aspect-ratio:1.08;mask-image:none;-webkit-mask-image:none}.section{padding-top:4rem;padding-bottom:5rem}.work-list{grid-template-columns:1fr}.work-item{min-height:220px;padding:1.6rem}.work-item p{max-width:none}}
@media(prefers-reduced-motion:reduce){.entry-mark{animation:none}.reveal{opacity:1;transform:none;transition:none}.work-item,.work-item::after{transition:none}}

/* Faye's supplied headshot is presented as an editorial image panel. */
.hero-portrait{top:12%;right:4.2vw;width:39%;height:67%;mask-image:none;-webkit-mask-image:none}
.hero-portrait img{object-position:center 33%}
.hero h1{max-width:58%}
@media(max-width:800px){.hero-portrait{top:17%;right:4.2vw;width:42%;height:55%}.hero h1{max-width:62%}}
@media(max-width:560px){.hero-portrait{position:relative;top:auto;right:auto;width:100%;height:auto;aspect-ratio:1.08}.hero h1{max-width:none}}

/* The opening mark contracts; a circular aperture reveals the page. */
@property --aperture{syntax:'<length>';inherits:false;initial-value:0px}
.has-js:not(.entered) body{overflow:hidden}
.entry-label{transition:opacity .2s ease,transform .3s ease}
.entry-screen.is-opening .entry-button{pointer-events:none}
.entry-screen.is-opening .entry-button{opacity:0;transition:none}
.entry-button{position:relative;z-index:1}
.has-js .entry-screen{mask-image:radial-gradient(circle at var(--reveal-x,50%) var(--reveal-y,50%),transparent calc(var(--aperture) - 1px),#000 var(--aperture));-webkit-mask-image:radial-gradient(circle at var(--reveal-x,50%) var(--reveal-y,50%),transparent calc(var(--aperture) - 1px),#000 var(--aperture));transition:--aperture .55s cubic-bezier(.22,.62,.25,1)}
.has-js.is-revealing .entry-screen{--aperture:150vmax}
.entered .entry-screen{transition:none}
@media(prefers-reduced-motion:reduce){.entry-button,.entry-label{animation:none;transition:none}}

/* Keep type, portrait, and text panels in separate spaces at every width. */
.hero h1{max-width:50%;font-size:clamp(3.9rem,5.2vw,6.1rem)}
.hero-bottom p{max-width:min(46vw,520px)}
@media(max-width:1050px){.work-list{grid-template-columns:1fr}.work-item{min-height:220px}.work-item p{max-width:58ch}.about-copy{grid-template-columns:1fr;gap:1.4rem}.about-copy p{max-width:60ch}}
@media(max-width:900px){.hero{gap:2.5rem}.hero h1{max-width:none;font-size:clamp(3.8rem,9vw,6rem);margin:1.2rem 0 0}.hero-portrait{position:relative;top:auto;right:auto;width:100%;height:auto;aspect-ratio:1.65;order:2}.hero .eyebrow{order:0}.hero h1{order:1}.hero-bottom{order:3}.hero-bottom p{max-width:60ch}.hero-index{display:none}}
@media(max-width:560px){.hero h1{font-size:clamp(3.2rem,11vw,4.8rem)}.hero-portrait{aspect-ratio:1.08}.hero-bottom p{max-width:none}}

h1,h2,.work-item h3{overflow-wrap:break-word}
.project-example{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem;align-items:end;margin-top:7rem;padding:2.5rem 0 3rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.project-example .kicker{margin:0 0 2.5rem}
.project-example h3{margin:0;font-family:'Syne',Arial,sans-serif;font-size:clamp(2.5rem,4.5vw,4.7rem);font-weight:600;line-height:1.02;letter-spacing:-.06em;text-transform:uppercase}
.project-detail p{max-width:48ch;font-size:1.1rem;line-height:1.5;margin-bottom:2.5rem}
.project-detail .text-link{display:inline-block}
@media(max-width:800px){.project-example{grid-template-columns:1fr;gap:2rem;margin-top:4rem}.project-example .kicker{margin-bottom:1.5rem}}
.office-line{display:flex;gap:1.4rem;align-items:baseline;margin:-1.3rem 0 3.5rem;font-size:.83rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase}
.office-line span{color:var(--accent);font-size:.7rem;letter-spacing:.19em}
@media(max-width:560px){.office-line{display:block;margin:0 0 3rem}.office-line span{display:block;margin-bottom:.8rem}}
.contact-details{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin:-1.3rem 0 3.5rem}
.contact-details .office-line{margin:0}
.contact-details a{text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:.25rem}
.contact-details a:hover{color:var(--accent)}
@media(max-width:800px){.contact-details{grid-template-columns:1fr;gap:1.3rem;margin:0 0 3rem}}