@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap');

:root {
	--ink: #050505;
	--paper: #f6f5f2;
	--silver: #b7b7b4;
	--champagne: #b69b72;
	--line: rgba(255, 255, 255, .18);
	--darkline: #d8d6d0;
	--serif: 'Playfair Display', Georgia, serif;
	--sans: 'DM Sans', Arial, sans-serif
}

* {
	box-sizing: border-box
}

html {
	scroll-behavior: smooth
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font: 14px/1.5 var(--sans);
	letter-spacing: .02em
}

a {
	color: inherit;
	text-decoration: none
}

button,
input,
select {
	font: inherit
}

/* body:not(.index.html) .site-header { */
    /* background: #050505; */
    /* color: #fff; */
/* } */


.site-header {
	position: fixed;
	top: 0;
	z-index: 20;
	width: 100%;
	color: #fff;
	padding: 25px 4vw;
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: .4s
}

.site-header.solid {
	background: #050505;
	padding: 15px 4vw
}

.wordmark {
	font: 500 29px/1 var(--serif);
	letter-spacing: .17em
}

.wordmark sup {
	font: 10px var(--sans);
	letter-spacing: 0
}

.nav {
	display: flex;
	gap: 26px;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .16em
}

.utility {
	display: flex;
	gap: 15px;
	font-size: 16px
}

.menu {
	display: none;
	background: none;
	border: 0;
	color: inherit;
	font-size: 22px
}

.hero {
	height: 100svh;
	min-height: 650px;
	background: linear-gradient(90deg, rgba(0, 0, 0, .46), rgba(0, 0, 0, .06)), url('../images/campaign-hero.jpg') center/cover;
	display: flex;
	align-items: end;
	padding: 11vh 7vw;
	color: #fff
}

.eyebrow {
	text-transform: uppercase;
	font-size: 10px;
	letter-spacing: .23em
}

.hero h1 {
	font: 500 clamp(48px, 7vw, 108px)/.96 var(--serif);
	max-width: 730px;
	margin: 16px 0 32px
}

.btn {
	display: inline-block;
	border: 1px solid currentColor;
	padding: 14px 23px;
	text-transform: uppercase;
	font-size: 10px;
	letter-spacing: .18em;
	background: transparent;
	color: inherit;
	transition: .3s;
	cursor: pointer
}

.btn:hover {
	background: #fff;
	color: #050505
}

.btn.dark {
	background: #050505;
	color: #fff;
	border-color: #050505
}

.btn.dark:hover {
	background: transparent;
	color: #050505
}

.intro {
	padding: 130px 11vw;
	text-align: center;
	max-width: 1050px;
	margin: auto
}

.intro h2,
.section-title {
	font: 500 clamp(35px, 5vw, 68px)/1.06 var(--serif);
	margin: 16px 0 24px
}

.intro p {
	max-width: 550px;
	margin: auto;
	color: #5d5b57
}

.section {
	padding: 40px 4vw 100px
}

.section-head {
	display: flex;
	justify-content: space-between;
	align-items: end;
	margin: 0 0 28px
}

.section-title {
	font-size: clamp(33px, 4vw, 52px);
	margin: 0
}

.text-link {
	text-transform: uppercase;
	font-size: 10px;
	letter-spacing: .16em;
	border-bottom: 1px solid
}

.product-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 13px
}

.product-card {
	position: relative
}

.product-img {
	aspect-ratio: 1;
	background: #e8e6e1 url('../images/polo-noir.png') center/cover;
	transition: .6s
}

.product-card:hover .product-img {
	transform: scale(.98)
}

.p-white {
	filter: brightness(2.5) contrast(.45)
}

.p-navy {
	filter: hue-rotate(185deg) saturate(1.4) brightness(.55)
}

.p-maroon {
	filter: hue-rotate(290deg) saturate(1.4) brightness(.6)
}

.p-grey {
	filter: grayscale(1) brightness(1.4)
}

.p-hoodie {
	filter: sepia(.25) brightness(.72)
}

.product-info {
	padding: 13px 4px;
	display: flex;
	justify-content: space-between;
	font-size: 12px
}

.product-info span:last-child {
	color: #65635f
}

.product-tag {
	position: absolute;
	top: 12px;
	left: 12px;
	background: #050505;
	color: #fff;
	padding: 6px 8px;
	font: 9px var(--sans);
	letter-spacing: .12em;
	text-transform: uppercase
}

.campaign {
	min-height: 720px;
	background: #161616 url('../images/campaign-hero.png') center/cover fixed;
	position: relative;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center
}

.campaign:before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .5)
}

.campaign>* {
	position: relative
}

.campaign h2 {
	font: 500 clamp(44px, 7vw, 90px)/1 var(--serif);
	max-width: 800px;
	margin: 18px auto 30px
}

.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 650px
}

.split-img {
	background: url('../images/campaign-hero.png') 70% center/cover
}

.split-copy {
	padding: 12vw;
	display: flex;
	justify-content: center;
	flex-direction: column;
	background: #e8e5de
}

.split-copy h2 {
	font: 500 clamp(38px, 5vw, 64px)/1.05 var(--serif);
	margin: 15px 0
}

.split-copy p {
	max-width: 410px;
	color: #5a5751
}

.instagram {
	display: grid;
	grid-template-columns: repeat(6, 1fr)
}

.ig {
	height: 210px;
	background: url('../images/campaign-hero.png') center/cover;
	filter: grayscale(1)
}

.ig:nth-child(even) {
	background-position: 80% center
}

.newsletter {
	background: #151515;
	color: #fff;
	text-align: center;
	padding: 100px 5vw
}

.newsletter h2 {
	font: 500 clamp(35px, 5vw, 64px)/1.05 var(--serif);
	margin: 10px
}

.email-form {
	max-width: 500px;
	margin: 30px auto 0;
	border-bottom: 1px solid #777;
	display: flex
}

.email-form input {
	flex: 1;
	background: none;
	border: 0;
	padding: 14px 0;
	color: #fff;
	outline: 0
}

.email-form button {
	border: 0;
	background: none;
	color: #fff;
	text-transform: uppercase;
	font-size: 10px;
	letter-spacing: .14em
}

.footer {
	background: #050505;
	color: #fff;
	padding: 70px 4vw 28px
}

.footer-grid {
	display: grid;
	grid-template-columns: 2fr repeat(3, 1fr);
	gap: 35px
}

.footer h4 {
	font: 10px var(--sans);
	text-transform: uppercase;
	letter-spacing: .16em;
	color: #aaa
}

.footer li {
	list-style: none;
	margin: 9px 0;
	font-size: 12px
}

.footer ul {
	padding: 0
}

.legal {
	border-top: 1px solid #333;
	margin-top: 50px;
	padding-top: 18px;
	font-size: 10px;
	color: #aaa;
	display: flex;
	justify-content: space-between
}

.page-hero {
	background: #151515;
	color: #fff;
	padding: 170px 7vw 70px
}

.page-hero h1 {
	font: 500 clamp(46px, 7vw, 90px)/1 var(--serif);
	margin: 12px 0
}

.page-hero p {
	max-width: 430px;
	color: #c4c1bb
}

.toolbar {
	display: flex;
	justify-content: space-between;
	padding: 22px 4vw;
	border-bottom: 1px solid var(--darkline);
	font-size: 11px
}

.filters {
	display: flex;
	gap: 18px
}

.filters button {
	border: 0;
	background: none;
	text-transform: uppercase;
	font-size: 10px;
	letter-spacing: .14em;
	cursor: pointer
}

.filters button.active {
	border-bottom: 1px solid
}

.search {
	border: 0;
	border-bottom: 1px solid #777;
	background: transparent;
	outline: 0;
	width: 150px
}

.product-page {
	padding: 105px 4vw
}

.product-layout {
	display: grid;
	grid-template-columns: 1.35fr .65fr;
	gap: 7vw
}

.gallery {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px
}

.gallery img {
	width: 100%;
	background: #e7e5e0;
	cursor: zoom-in
}

.details {
	position: sticky;
	top: 110px;
	height: max-content
}

.details h1 {
	font: 500 46px/1.05 var(--serif);
	margin: 9px 0
}

.price {
	font-size: 15px;
	margin: 17px 0
}

.rule {
	border: 0;
	border-top: 1px solid var(--darkline);
	margin: 25px 0
}

.swatches,
.sizes {
	display: flex;
	gap: 8px;
	margin: 12px 0 26px
}

.swatch,
.size {
	width: 34px;
	height: 34px;
	border: 1px solid #aaa;
	display: grid;
	place-items: center;
	font-size: 11px;
	cursor: pointer
}

.swatch.black {
	background: #050505
}

.swatch.white {
	background: #f2f0ea
}

.swatch.navy {
	background: #162438
}

.size.selected {
	background: #050505;
	color: #fff
}

.accordion summary {
	padding: 16px 0;
	border-top: 1px solid var(--darkline);
	cursor: pointer;
	text-transform: uppercase;
	font-size: 10px;
	letter-spacing: .14em
}

.accordion p {
	color: #5d5b57;
	font-size: 12px
}

.look-grid {
	display: grid;
	grid-template-columns: 1.25fr .75fr;
	gap: 14px;
	padding: 20px 4vw 100px
}

.look {
	min-height: 530px;
	background: url('../images/campaign-hero.png') center/cover
}

.look:nth-child(2) {
	background-position: 20% center;
	filter: grayscale(1)
}

.look:nth-child(3) {
	grid-column: span 2;
	min-height: 650px;
	filter: sepia(.22)
}

.story {
	max-width: 820px;
	margin: 0 auto;
	padding: 120px 30px;
	font-size: 18px;
	line-height: 1.7
}

.story p:first-child {
	font: 500 48px/1.15 var(--serif)
}

.contact {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 70px;
	padding: 110px 9vw
}

.contact h2 {
	font: 500 52px/1 var(--serif)
}

.contact input,
.contact textarea {
	width: 100%;
	border: 0;
	border-bottom: 1px solid #aaa;
	background: none;
	padding: 16px 0;
	margin-bottom: 12px;
	outline: 0
}

.map {
	background: #d2d0cb;
	min-height: 370px;
	display: grid;
	place-items: center;
	color: #555
}

.form-page {
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 120px 20px
}

.form-box {
	width: min(440px, 100%)
}

.form-box h1 {
	font: 500 48px/1 var(--serif)
}

.form-box input {
	width: 100%;
	border: 0;
	border-bottom: 1px solid #aaa;
	background: none;
	padding: 16px 0;
	margin: 6px 0;
	outline: 0
}

.cart {
	padding: 140px 8vw 100px
}

.cart h1 {
	font: 500 55px var(--serif)
}

.cart-row {
	display: grid;
	grid-template-columns: 130px 1fr auto;
	gap: 25px;
	border-top: 1px solid var(--darkline);
	padding: 20px 0
}

.cart-row img {
	width: 130px;
	background: #e8e6e1
}

.checkout-card {
	max-width: 520px;
	margin: 30px 0 0 auto;
	border: 1px solid var(--darkline);
	padding: 28px
}

.loader {
	position: fixed;
	z-index: 99;
	inset: 0;
	background: #050505;
	color: #fff;
	display: grid;
	place-items: center;
	transition: opacity .7s, visibility .7s
}

.loader .wordmark {
	animation: pulse 1.6s infinite
}

@keyframes pulse {
	50% {
		opacity: .3;
		letter-spacing: .25em
	}
}

.loader.done {
	opacity: 0;
	visibility: hidden
}

.reveal {
	opacity: 0;
	transform: translateY(25px);
	transition: .8s
}

.reveal.show {
	opacity: 1;
	transform: none
}

@media(max-width:800px) {
	.nav {
		display: none
	}

	.menu {
		display: block
	}

	.site-header {
		padding: 18px 5vw
	}

	.wordmark {
		font-size: 24px
	}

	.product-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px
	}

	.section {
		padding: 28px 5vw 65px
	}

	.hero {
		padding: 8vh 7vw
	}

	.split,
	.product-layout,
	.contact {
		grid-template-columns: 1fr
	}

	.split-img {
		min-height: 420px
	}

	.split-copy {
		padding: 75px 8vw
	}

	.instagram {
		grid-template-columns: repeat(3, 1fr)
	}

	.ig {
		height: 130px
	}

	.footer-grid {
		grid-template-columns: 1fr 1fr
	}

	.gallery {
		gap: 5px
	}

	.details {
		position: static;
		margin-top: 35px
	}

	.product-page {
		padding: 90px 5vw
	}

	.look-grid {
		grid-template-columns: 1fr;
		padding: 8px 5vw 60px
	}

	.look:nth-child(3) {
		grid-column: auto;
		min-height: 450px
	}

	.look {
		min-height: 400px
	}

	.page-hero {
		padding: 130px 7vw 55px
	}

	.toolbar {
		gap: 12px;
		flex-wrap: wrap
	}

	.filters {
		overflow: auto;
		width: 100%
	}

	.contact {
		padding: 90px 7vw;
		gap: 30px
	}

	.cart {
		padding: 105px 5vw 60px
	}

	.cart-row {
		grid-template-columns: 85px 1fr
	}

	.cart-row img {
		width: 85px
	}

	.cart-row>strong {
		grid-column: 2
	}

	.legal {
		display: block
	}

	.legal span {
		display: block;
		margin: 8px 0
	}
}

.product-image{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:.4s;
}

.gallery-trigger{
    padding:0;
    border:0;
    background:none;
    cursor:pointer;
    width:100%;
    height:100%;
    overflow:hidden;
}

.gallery-trigger:hover .product-image{
    transform:scale(1.05);
}