/* Shaw Stephens — landing page
   Desktop geometry is taken from the 1444×1027 Figma frame and scales with
   --s (1 design px), whichever of width/height is the tighter fit. */

:root {
	--cream: #fcf8f0;
	--ink: #350213;
	--brown: #2d1614;
	--olive: #a59d53;
	--serif: "optima-lt-pro", "Optima", Candara, "Segoe UI", sans-serif;
	--sans: "neue-haas-grotesk-display", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--sans-weight: 500; /* Adobe Fonts maps 55 Roman to 500 */
	--s: min(100vw / 1444, 100svh / 1027);
	--gutter: 22px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.ss {
	margin: 0;
	background: var(--cream);
	color: var(--ink);
	font-family: var(--sans);
	font-weight: var(--sans-weight);
	font-size: 14px;
	line-height: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.ss.menu-open { overflow: hidden; }

:where(.ss) img { display: block; max-width: 100%; }
:where(.ss) :is(p, h1, h2, ul, figure) { margin: 0; padding: 0; }
:where(.ss) ul { list-style: none; }

/* Hover line (Figma "Buttons Hover Line") */
.ss-link {
	color: inherit;
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
	transition: background-size .3s ease;
	padding-bottom: 1px;
}
a.ss-link:hover,
button.ss-link:hover,
a.ss-link:focus-visible,
button.ss-link:focus-visible { background-size: 100% 1px; }

.ss :focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

/* ---------- Page ---------- */

.ss-page {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	overflow: hidden;
}

.ss-header {
	position: absolute;
	top: 13px;
	right: 45px;
	z-index: 2;
}

.ss-more {
	appearance: none;
	border: 0;
	padding: 0 0 1px;
	margin: 0;
	background-color: transparent;
	color: var(--ink);
	font: 22px/normal var(--serif);
	cursor: pointer;
}

.ss-logo {
	position: absolute;
	left: var(--gutter);
	top: 52.7%;
	transform: translateY(-50%);
	width: calc(355 * var(--s));
	line-height: 0;
}
.ss-logo img { width: 100%; height: auto; }

.ss-tagline {
	position: absolute;
	right: 21px;
	top: 52.82%;
	transform: translateY(-50%);
	color: var(--brown);
	font: calc(42 * var(--s)) / normal var(--serif);
	white-space: nowrap;
}

.ss-footer {
	position: absolute;
	left: 23px;
	right: 23px;
	bottom: 15px;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 14px;
}
.ss-copyright { white-space: pre; }

/* ---------- Carousel ---------- */

.ss-carousel {
	position: absolute;
	left: 53.81%;
	top: 53.75%;
	width: calc(410 * var(--s));
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
}

.ss-carousel__track {
	position: relative;
	width: 100%;
	height: 100%;
	outline: none;
}

.ss-carousel__slide {
	position: absolute;
	inset: 0;
	visibility: hidden;
}
.ss-carousel__slide.is-active { visibility: visible; }

.ss-carousel__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	user-select: none;
	-webkit-user-drag: none;
}

/* ---------- More panel ---------- */

.ss-menu {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 20;
	width: 443px;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	background: var(--olive);
	color: var(--ink);
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform .5s cubic-bezier(.65, 0, .35, 1), visibility 0s .5s;
	visibility: hidden;
}
.menu-open .ss-menu {
	transform: none;
	visibility: visible;
	transition: transform .5s cubic-bezier(.65, 0, .35, 1);
}

.ss-scrim {
	position: fixed;
	inset: 0;
	z-index: 19;
	display: none;
}
.menu-open .ss-scrim { display: block; }

.ss-menu__top {
	position: relative;
	height: 100px;
	flex: none;
}
.ss-menu__mark {
	position: absolute;
	top: 22px;
	left: 36px;
	width: 74px;
	height: 78px;
}
.ss-menu__close {
	position: absolute;
	top: 21px;
	left: 377px;
	appearance: none;
	border: 0;
	background: none;
	padding: 0;
	color: var(--ink);
	line-height: 0;
	cursor: pointer;
}

.ss-menu__body {
	margin-top: auto;
	padding: 60px 30px 30px 32px;
}

.ss-menu__title,
.ss-menu__text,
.ss-menu__row { padding-left: 3px; }

.ss-menu__title {
	font: 34px/38px var(--serif);
	font-weight: 400;
}

.ss-menu__text {
	margin-top: 34px;
	padding-right: 25px;
	font-size: 14px;
	line-height: 1.4;
}

.ss-menu__row {
	display: flex;
	justify-content: space-between;
	border-top: .75px solid var(--ink);
	padding-right: 10px;
}

.ss-menu__row--follow {
	margin-top: 25px;
	padding-top: 28px;
	padding-bottom: 28px;
	align-items: flex-start;
}
.ss-menu__follow { font: 22px/normal var(--serif); }
.ss-menu__social { text-align: right; }
.ss-menu__social li + li { margin-top: 10px; }

.ss-menu__row--contact {
	padding-top: 16px;
	padding-bottom: 21px;
	line-height: 1.4;
}

.ss-menu__row--foot {
	padding-top: 15px;
	align-items: baseline;
}

/* ---------- Mobile ---------- */

@media (max-width: 767px), (max-width: 1024px) and (orientation: portrait) {
	:root { --gutter: 22px; }

	.ss-page {
		display: flex;
		flex-direction: column;
	}

	.ss-header {
		position: static;
		display: flex;
		justify-content: flex-end;
		padding: 13px var(--gutter) 0;
	}

	.ss-main {
		flex: 1;
		width: min(100%, 640px);
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 28px;
		padding: 40px 0;
	}

	.ss-logo,
	.ss-tagline,
	.ss-carousel {
		position: static;
		transform: none;
	}

	.ss-logo {
		width: min(355px, 100% - 2 * var(--gutter));
		margin: 0 var(--gutter);
	}

	.ss-tagline {
		align-self: flex-end;
		margin: 0 var(--gutter);
		font-size: 30px;
	}

	.ss-carousel {
		width: 100%;
		aspect-ratio: auto;
	}

	.ss-carousel__track {
		display: flex;
		height: auto;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.ss-carousel__track::-webkit-scrollbar { display: none; }

	.ss-carousel__slide {
		position: relative;
		inset: auto;
		flex: 0 0 100%;
		aspect-ratio: 1;
		visibility: visible;
		scroll-snap-align: center;
		scroll-snap-stop: always;
	}

	.ss-footer {
		position: static;
		padding: 0 var(--gutter) 15px;
	}

	.ss-menu { width: 100%; }
	.ss-menu__close { left: auto; right: 41px; }
}

@media (max-width: 1024px) and (orientation: portrait) {
	.ss-carousel { padding: 0 var(--gutter); }
}

@media (prefers-reduced-motion: reduce) {
	.ss-menu,
	.menu-open .ss-menu { transition: none; }
	.ss-link { transition: none; }
}