:root { --ink:#302821; --paper:#f0e6d9; --line:rgba(48,40,33,.22); --accent:#b86f52; --serif: Iowan Old Style, Baskerville, Times New Roman, serif; --sans: Inter, Avenir Next, Helvetica Neue, Arial, sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.5; overflow-x:hidden; } a { color:inherit; text-decoration:none; } button { color:inherit; font:inherit; } img { display:block; max-width:100%; } .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.site-header { position:absolute; z-index:10; inset:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:27px clamp(22px,4vw,68px); color:#f4f1eb; mix-blend-mode:normal; } .wordmark { display:flex; gap:8px; align-items:center; letter-spacing:.17em; font-size:.7rem; font-weight:700; } .wordmark i { width:5px; height:5px; border-radius:50%; background:#c98567; } .site-nav { display:flex; gap:26px; font-size:.76rem; letter-spacing:.08em; } .site-nav a { position:relative; padding-bottom:3px; } .site-nav a::after { content:""; position:absolute; height:1px; background:currentColor; inset:auto 0 0; transform:scaleX(0); transform-origin:right; transition:transform .3s; } .site-nav a:hover::after { transform:scaleX(1); transform-origin:left; } .menu-toggle { display:none; }
.hero { position:relative; min-height:100svh; overflow:hidden; color:#faf8f4; background:#7b8388; } .hero-image,.hero-wash { position:absolute; inset:0; width:100%; height:100%; } .hero-image { object-fit:cover; object-position:center; animation:hero-in 1.7s cubic-bezier(.2,.75,.2,1) both; } .hero-wash { background:linear-gradient(90deg,rgba(20,24,24,.48),rgba(20,24,24,.05) 65%),linear-gradient(0deg,rgba(20,24,24,.42),transparent 35%); } .hero-copy { position:absolute; z-index:1; left:clamp(23px,9vw,150px); bottom:clamp(115px,16vh,180px); } .eyebrow,.section-label { margin:0; text-transform:uppercase; letter-spacing:.16em; font-size:.68rem; font-weight:650; } .hero h1 { margin:20px 0 32px; font:400 clamp(3.4rem,7.1vw,8.5rem)/.86 var(--serif); letter-spacing:-.065em; } h1 em,h2 em,blockquote em { font-style:italic; font-weight:400; } .round-link { display:flex; align-items:center; justify-content:space-between; gap:18px; width:130px; height:130px; border:1px solid rgba(255,255,255,.7); border-radius:50%; padding:20px; font-size:.7rem; line-height:1.25; transition:background .35s,color .35s,transform .35s; } .round-link b { font-size:1.5rem; font-weight:400; } .round-link:hover { background:var(--paper); color:var(--ink); transform:rotate(-8deg); } .hero-index { position:absolute; right:clamp(22px,4vw,68px); bottom:30px; margin:0; font-size:.68rem; letter-spacing:.12em; } .scroll-cue { position:absolute; bottom:29px; left:clamp(23px,4vw,68px); display:flex; align-items:center; gap:9px; text-transform:uppercase; font-size:.61rem; letter-spacing:.14em; } .scroll-cue span { width:26px; height:1px; background:currentColor; animation:line-pulse 1.8s infinite; }
.wrap { width:min(100% - clamp(44px,11vw,180px),1440px); margin-inline:auto; } .intro { padding-block:clamp(110px,17vw,250px); } .intro-grid { display:grid; grid-template-columns:1.45fr .65fr; gap:clamp(35px,9vw,150px); align-items:end; margin-top:70px; } h2 { margin:0; font:400 clamp(2.8rem,5.45vw,6.7rem)/.91 var(--serif); letter-spacing:-.06em; } .intro-copy { max-width:395px; font-size:1.03rem; line-height:1.7; } .intro-copy p { margin:0 0 18px; } .intro-copy p:last-child { color:rgba(41,44,43,.68); }
.heritage { overflow:hidden; padding-block:clamp(100px,14vw,210px); background:#303534; color:var(--paper); } .heritage-inner { position:relative; } .heritage-heading { display:grid; grid-template-columns:.62fr 1.38fr; gap:32px; border-top:1px solid rgba(232,229,222,.28); padding-top:18px; } .heritage-heading h2 { max-width:950px; } .heritage-stage { position:relative; display:grid; grid-template-columns:1fr .55fr; align-items:end; gap:clamp(30px,8vw,130px); min-height:clamp(390px,44vw,650px); padding:clamp(55px,8vw,110px) 7vw 54px; margin:clamp(65px,10vw,145px) 0 clamp(45px,7vw,100px); overflow:hidden; border:1px solid rgba(232,229,222,.23); background:linear-gradient(128deg,rgba(239,233,220,.10),rgba(239,233,220,.015) 45%,rgba(165,103,80,.16)); } .heritage-stage::before { content:""; position:absolute; inset:16px; border:1px solid rgba(232,229,222,.15); pointer-events:none; } .heritage-number { position:absolute; z-index:0; right:-.06em; bottom:-.28em; margin:0; color:rgba(232,229,222,.09); font:400 clamp(19rem,47vw,51rem)/.7 var(--serif); letter-spacing:-.12em; } .heritage-seal,.heritage-stage > p { position:relative; z-index:1; } .heritage-seal { display:grid; place-items:center; width:clamp(145px,18vw,225px); aspect-ratio:1; border:1px solid rgba(232,229,222,.65); border-radius:50%; transform:rotate(-8deg); text-align:center; text-transform:uppercase; letter-spacing:.14em; font-size:.61rem; line-height:1.25; } .heritage-seal strong { margin:7px 0 3px; font:400 clamp(3.8rem,6vw,6.7rem)/.7 var(--serif); letter-spacing:-.08em; } .heritage-stage > p { max-width:330px; margin:0; color:rgba(232,229,222,.76); font:400 clamp(1.25rem,1.9vw,2.1rem)/1.13 var(--serif); letter-spacing:-.035em; } .generations { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(26px,6vw,90px); margin:0; padding:0; list-style:none; } .generations li { border-top:1px solid rgba(232,229,222,.32); padding-top:13px; } .generations span { display:block; color:#d59474; font-size:.65rem; font-weight:650; letter-spacing:.13em; text-transform:uppercase; } .generations p { max-width:265px; margin:16px 0 0; font:400 clamp(1.1rem,1.6vw,1.6rem)/1.18 var(--serif); letter-spacing:-.025em; } .heritage-closing { max-width:620px; margin:clamp(80px,12vw,155px) auto 0; text-align:center; color:rgba(232,229,222,.69); font:400 clamp(1.35rem,2.2vw,2.6rem)/1.08 var(--serif); letter-spacing:-.04em; }
.portfolio { padding-bottom:clamp(120px,16vw,230px); } .section-heading { display:grid; grid-template-columns:.65fr 1fr .7fr; align-items:end; border-top:1px solid var(--line); padding-top:18px; margin-bottom:clamp(45px,8vw,105px); } .section-heading h2 { font-size:clamp(2.6rem,5vw,6rem); } .section-heading > p:last-child { margin:0; max-width:220px; font-size:.88rem; line-height:1.5; } .gallery { display:grid; grid-template-columns:1fr .67fr; gap:clamp(20px,3.1vw,48px); align-items:end; } .work { position:relative; overflow:hidden; border:0; padding:0; text-align:left; cursor:pointer; background:#999; } .work img { width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.75,.2,1); } .work::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(25,27,27,.65),transparent 45%); pointer-events:none; } .work:hover img { transform:scale(1.045); } .work-tall { aspect-ratio:3/3.75; } .work-wide { aspect-ratio:1.2/1; align-self:start; } .work-meta { position:absolute; z-index:1; left:23px; bottom:20px; display:grid; color:#f8f5ef; } .work-meta b { font:400 clamp(1.5rem,2.3vw,2.6rem)/1 var(--serif); letter-spacing:-.04em; } .work-meta small { margin-top:8px; font-size:.65rem; letter-spacing:.11em; text-transform:uppercase; } .work-plus { position:absolute; z-index:1; top:17px; right:19px; width:30px; height:30px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.75); border-radius:50%; color:#fff; font-size:1.25rem; transition:transform .35s, background .35s; } .work:hover .work-plus { background:#fff; color:var(--ink); transform:rotate(90deg); } .gallery-note { grid-column:2; padding:clamp(22px,3vw,45px) 0 8px; } .gallery-note > p:nth-child(2) { margin:18px 0 28px; max-width:245px; font:400 clamp(1.65rem,2.5vw,3rem)/1.03 var(--serif); letter-spacing:-.045em; } .gallery-note a { font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; border-bottom:1px solid var(--ink); padding-bottom:5px; } .gallery-note a span { font-size:1.1rem; margin-left:20px; }
.method { display:grid; grid-template-columns:1fr 1fr; background:var(--ink); color:var(--paper); } .method-image { min-height:820px; overflow:hidden; } .method-image img { width:100%; height:100%; object-fit:cover; filter:saturate(.65) brightness(.72); } .method-copy { padding:clamp(72px,11vw,170px) clamp(32px,9vw,145px); align-self:center; } .method-copy h2 { margin:62px 0 36px; } .method-copy > p { max-width:390px; color:rgba(232,229,222,.72); line-height:1.7; } .method-list { margin:54px 0 0; border-top:1px solid rgba(232,229,222,.32); } .method-list div { display:grid; grid-template-columns:52px 1fr; border-bottom:1px solid rgba(232,229,222,.32); padding:13px 0; } .method-list dt { color:#c68b6d; font-size:.7rem; } .method-list dd { margin:0; font-size:.9rem; }
.statement { padding-block:clamp(130px,19vw,280px); } blockquote { max-width:1000px; margin:clamp(60px,10vw,140px) auto 0; font:400 clamp(2.8rem,6.5vw,8.2rem)/.9 var(--serif); letter-spacing:-.065em; text-align:center; } .contact { position:relative; overflow:hidden; min-height:770px; padding:clamp(80px,12vw,175px) max(7vw,30px) 30px; color:var(--paper); background:linear-gradient(128deg,#2f3c3b,#172020 57%,#2a2b28); } .contact h2 { max-width:990px; margin:48px 0 40px; } .contact-star { position:absolute; right:6vw; top:10vw; color:#b8775b; font-size:clamp(5rem,13vw,14rem); font-family:var(--serif); opacity:.9; animation:star-turn 16s linear infinite; } .contact-link { position:relative; font:400 clamp(1.35rem,2.5vw,3.2rem)/1 var(--serif); border-bottom:1px solid rgba(232,229,222,.6); padding-bottom:7px; } .contact-link span { color:#c68b6d; margin-left:16px; } .contact-bottom { display:flex; justify-content:space-between; align-items:end; gap:32px; position:absolute; inset:auto max(7vw,30px) 28px; padding-top:17px; border-top:1px solid rgba(232,229,222,.25); font-size:.72rem; letter-spacing:.05em; } .contact-bottom p { max-width:310px; margin:0; color:rgba(232,229,222,.7); } .contact-bottom div { display:flex; gap:20px; text-transform:uppercase; } .contact-bottom a { border-bottom:1px solid transparent; } .contact-bottom a:hover { border-color:currentColor; } .footer { display:flex; justify-content:space-between; padding:20px max(4vw,22px); background:#202322; color:rgba(232,229,222,.65); font-size:.62rem; text-transform:uppercase; letter-spacing:.12em; } .footer p { margin:0; }
.lightbox { width:min(100vw - 32px,1100px); max-height:94vh; padding:0; border:0; background:transparent; color:var(--paper); overflow:visible; } .lightbox::backdrop { background:rgba(11,13,13,.91); backdrop-filter:blur(6px); } .lightbox figure { margin:0; } .lightbox figure img { width:100%; max-height:83vh; object-fit:contain; } .lightbox figcaption { display:flex; justify-content:space-between; padding-top:11px; font-size:.75rem; letter-spacing:.08em; } .lightbox-close { position:fixed; top:20px; right:24px; border:0; padding:0; background:transparent; color:#fff; cursor:pointer; font:300 3rem/1 var(--serif); }
.reveal { opacity:0; transform:translateY(22px); transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1); } .reveal.visible { opacity:1; transform:none; } .cursor-glow { position:fixed; z-index:20; top:0; left:0; width:280px; height:280px; border-radius:50%; pointer-events:none; background:radial-gradient(circle,rgba(197,139,109,.10),transparent 65%); transform:translate(-50%,-50%); opacity:0; transition:opacity .3s; } body:has(.work:hover) .cursor-glow { opacity:1; }
@keyframes hero-in { from { transform:scale(1.08); opacity:.1; } to { transform:scale(1); opacity:1; } } @keyframes line-pulse { 50% { transform:scaleX(.45); transform-origin:left; } } @keyframes star-turn { to { transform:rotate(360deg); } }
@media (max-width:800px) { .site-header { padding:22px; } .site-nav { position:fixed; inset:0; display:none; place-content:center; gap:26px; text-align:center; background:var(--ink); font:400 2.7rem var(--serif); } .site-nav.open { display:grid; } .menu-toggle { position:relative; z-index:2; display:grid; gap:5px; width:37px; padding:8px 0 8px 11px; border:0; background:transparent; cursor:pointer; } .menu-toggle span:not(.sr-only) { display:block; height:1px; width:25px; background:currentColor; transition:transform .3s; } .menu-toggle.active span:nth-of-type(2) { transform:translateY(3px) rotate(45deg); } .menu-toggle.active span:nth-of-type(3) { transform:translateY(-3px) rotate(-45deg); } .hero h1 { letter-spacing:-.075em; } .round-link { width:112px; height:112px; padding:16px; } .hero-index { display:none; } .scroll-cue { left:auto; right:22px; } .intro-grid,.section-heading,.method,.heritage-heading,.heritage-stage { grid-template-columns:1fr; } .intro-grid { margin-top:46px; } .heritage-stage { min-height:500px; padding:58px 30px 50px; } .heritage-seal { width:154px; } .heritage-stage > p { max-width:285px; } .generations { grid-template-columns:1fr; gap:30px; } .heritage-closing { margin-top:72px; } .section-heading { gap:20px; } .section-heading > p:last-child { max-width:280px; } .gallery { grid-template-columns:1fr; } .work-tall { aspect-ratio:1/1.14; } .work-wide { aspect-ratio:1/1; } .gallery-note { grid-column:auto; padding:22px 0 0; } .method-image { min-height:430px; } .method-copy { padding:80px 10vw; } .contact { min-height:630px; } .contact-star { top:14px; right:20px; } .contact-bottom { align-items:flex-start; flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }