:root{--bg:#f5f2ec;
  --ink:#3a4445;
  --muted:#9f9e99;
  --line:#e8e5df}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,"Hiragino Sans","Yu Gothic",sans-serif;
  font-weight:400}
p,h1,h2{margin:0;
  font-weight:400}
a{color:inherit;
  text-decoration:none}
a:focus-visible{outline:2px solid var(--ink);
  outline-offset:6px}
img{display:block}
a:hover{opacity:.72}
header,main,footer{max-width:1440px;
  margin:auto}
.header{height:114px;
  padding:24px 54px;
  display:flex;
  justify-content:flex-end}
.header-brand{display:none}
.social{display:flex;
  flex-direction:column;
  gap:12px;
  font-size:14px;
  line-height:16px;
  letter-spacing:-.24px}
.social a{display:flex;
  align-items:flex-start;
  gap:3px}
.social img{width:8px;
  height:8px;
  margin-top:2px}
.hero{padding:24px 32px 27px;
  min-height:603px;
  position:relative}
.hero-photo{width:min(880px,100%);
  height:480px;
  object-fit:cover}
.hero-statement{font-size:15px;
  line-height:24px;
  letter-spacing:-.15px;
  max-width:607px;
  margin-top:24px}
.scroll{position:absolute;
  right:32px;
  bottom:24px;
  display:flex;
  align-items:center;
  gap:11px;
  flex-direction:column;
  font-size:12px}
.scroll span{writing-mode:vertical-rl}
.profile{height:720px;
  padding-top:100px;
  display:grid;
  grid-template-columns:1fr 400px 1fr;
  grid-template-rows:20px 1fr;
  gap:59px 52px}
.profile-role{grid-column:1/-1;
  text-align:center;
  font-size:20px;
  line-height:20px}
.profile-photo{grid-column:2;
  width:400px;
  height:264px;
  object-fit:cover}
.profile-bio{grid-column:3;
  align-self:end;
  max-width:313px;
  margin-bottom:91px;
  padding-right:0}
.profile h1{font-size:22px;
  line-height:33px;
  letter-spacing:.88px;
  margin-bottom:16px}
.profile-bio p{font-size:12px;
  line-height:1.8;
  letter-spacing:.48px}
.shop{padding:80px 18px}
.shop-card{height:752px;
  background:#000;
  position:relative;
  overflow:hidden}
.shop-photo{position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:fill;
  opacity:.8}
.shop-content{position:relative;
  padding:143px 120px;
  display:flex;
  flex-direction:column;
  align-items:flex-start}
.shop-logo{width:200px;
  height:226.517px}
.shop-pitch{margin-top:40px;
  color:#fff;
  font-size:18px;
  line-height:1.8;
  letter-spacing:.72px}
.shop-mobile-pitch{display:none}
.button{display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:12px;
  padding:16px 48px;
  white-space:nowrap}
.store-button{background:#fff;
  color:#231815;
  margin-top:40px;
  font-size:18px;
  line-height:32px;
  letter-spacing:.72px}
.works{padding:160px 24px 120px;
  position:relative}
.section-title{font-size:20px;
  line-height:20px;
  text-align:center;
  margin-bottom:40px}
.works-grid{display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px}
.work-column{display:flex;
  flex-direction:column;
  gap:24px}
.work-column picture,.work-column img{width:100%;
  height:auto}
.work-1{aspect-ratio:448/298}
.work-2{aspect-ratio:448/635}
.work-3{aspect-ratio:448/385}
.work-4{aspect-ratio:448/672}
.work-5{aspect-ratio:448/336}
.work-6{aspect-ratio:448/586}
.works-caption{margin-top:16px;
  text-align:right;
  font-size:15px;
  line-height:24px;
  letter-spacing:-.15px}
.contact{padding:100px 138px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:40px}
.contact .section-title{margin:0}
.contact-copy{font-size:16px;
  line-height:1.8;
  color:#000}
.email-button{background:#000;
  color:#fff;
  font-size:16px;
  line-height:24px}
.contact-mobile-copy{display:none}
.footer{height:323px;
  padding:40px 54px 40px 32px;
  display:flex;
  justify-content:space-between}
.footer-name{font-family:"Minion Pro","EB Garamond",Georgia,serif;
  font-size:44px;
  line-height:44px}
.footer-description{font-family:"Minion Pro","EB Garamond",Georgia,serif;
  color:var(--muted);
  font-size:28px;
  line-height:28px;
  margin-top:8px}
@media(min-width:768px) and (max-width:1200px){.profile{grid-template-columns:1fr 34% 27%;
  gap:59px 4%;
  padding-right:5%}
.profile-photo{width:100%;
  height:auto;
  aspect-ratio:400/264}
.profile-bio{margin-bottom:91px}
.shop-content{padding-left:8%;
  padding-right:8%}
.contact{padding-left:9.6%;
  padding-right:9.6%}
.contact-copy{font-size:15px}
}
@media(max-width:767px){.header{height:66px;
  padding:20px 24px;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line)}
.header-brand{display:block;
  font-family:"EB Garamond",Georgia,serif;
  font-size:20px;
  line-height:26px}
.header .social{flex-direction:row;
  gap:16px}
.hero{padding:24px 24px 48px;
  min-height:0}
.hero-photo{width:100%;
  height:240px;
  border-radius:8px}
.hero-statement{font-size:14px;
  line-height:22px;
  letter-spacing:-.14px;
  margin-top:24px}
.scroll{display:none}
.profile{height:auto;
  display:flex;
  flex-direction:column;
  gap:32px;
  padding:48px 24px}
.profile-role{font-size:16px;
  line-height:19px;
  white-space:nowrap}
.profile-photo{width:100%;
  height:220px;
  border-radius:8px}
.profile-bio{display:contents}
.profile h1{order:1;
  text-align:center;
  font-size:20px;
  line-height:29px;
  margin-top:-20px;
  margin-bottom:0}
.profile-role{order:0}
.profile-photo{order:2}
.profile-bio p{order:3;
  font-size:13px;
  line-height:24px;
  letter-spacing:.52px}
.shop{padding:16px 24px 32px}
.shop-card{height:480px;
  border-radius:12px}
.shop-photo{object-fit:cover}
.shop-content{height:100%;
  padding:40px 24px;
  align-items:stretch}
.shop-logo{width:80px;
  height:90.607px}
.shop-pitch{display:none}
.shop-mobile-pitch{display:block;
  position:relative;
  margin-top:24px;
  color:#fff;
  font-size:13px;
  line-height:22px;
  letter-spacing:.52px;
  flex:1}
.store-button{margin-top:24px;
  padding:12px 24px;
  font-size:13px;
  line-height:19px;
  border-radius:8px}
.store-button img{width:18px;
  height:18px;
  object-fit:contain}
.works{padding:48px 24px}
.section-title{font-size:14px;
  line-height:17px;
  text-transform:uppercase;
  letter-spacing:.56px;
  margin-bottom:32px}
.section-title:after{content:"";
  display:block;
  width:24px;
  border-bottom:1px solid var(--ink);
  margin:8px auto 0}
.works-grid{display:flex;
  flex-direction:column;
  gap:20px}
.work-column{display:contents}
.work-column picture{display:block;
  height:220px;
  border-radius:8px;
  overflow:hidden}
.work-column img{width:100%;
  height:100%;
  object-fit:cover}
.work-1{order:1}
.work-2{order:2;
  height:280px!important}
.work-3{order:3}
.work-4{order:4;
  height:280px!important}
.work-5{order:5}
.work-6{display:none!important}
.works-caption{margin-top:32px;
  text-align:center;
  color:var(--muted);
  font-size:13px;
  line-height:22px;
  letter-spacing:-.13px}
.contact{padding:48px 24px;
  gap:24px;
  border-block:1px solid var(--line);
  align-items:stretch}
.contact-copy{display:none}
.contact-mobile-copy{display:block;
  font-size:13px;
  line-height:24px;
  letter-spacing:.52px}
.email-button{padding:14px 24px;
  border-radius:8px;
  font-size:13px;
  line-height:20px;
  gap:10px}
.email-button img{width:20px;
  height:20px;
  object-fit:contain}
.footer{height:auto;
  min-height:229px;
  padding:40px 24px;
  flex-direction:column;
  gap:24px}
.footer-name{font-size:28px;
  line-height:37px}
.footer-description{font-size:14px;
  line-height:18px;
  margin-top:4px}
}
@media(max-width:360px){.header .social{gap:10px}
.header{padding-inline:18px}
.profile-role{font-size:14px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
}