/*
Theme Name: Arp273
Theme URI: https://arp273.com
Author: Arp273
Description: One-page brand theme for Arp273® — hero, mission statement, product grid, statement artwork and footer. All texts and images are editable in Appearance → Customize.
Version: 1.1.0
Requires at least: 5.8
Tested up to: 6.6
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: arp273
*/

:root {
	--black: #000;
	--white: #fff;
	--card: #f8f8f8;
	--muted: #a3a3a3;
	--gutter: 16px;
	--serif: Gelasio, Georgia, "Times New Roman", Times, serif;
	--sans: "Neue Haas Grotesk Display Pro", "Helvetica Neue", Helvetica, "Inter Tight", Arial, sans-serif;
	--mono: "Space Mono", "SFMono-Regular", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--white);
	color: var(--black);
	font-family: var(--sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { opacity: .6; }
.screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap;
}
.mono {
	font-family: var(--mono);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0;
}

/* ---------- Hero ---------- */
.hero {
	position: relative;
	height: 71vw;
	min-height: 520px;
	background: #1a1a1a;
	color: var(--white);
	overflow: hidden;
}
.hero__media, .hero__media > img, .hero__media > svg {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.hero__logo {
	position: absolute;
	top: 50%; left: 0; right: 0;
	margin: 0;
	transform: translateY(-50%);
	font-family: var(--serif);
	font-weight: 500;
	font-size: 25.4vw;
	line-height: 1;
	letter-spacing: -.04em;
	font-variant-numeric: lining-nums;
	text-align: center;
	white-space: nowrap;
}
.hero__logo img { width: 94vw; margin: 0 auto; }
/* On scroll the wordmark is pinned to the viewport and shrinks into the top-left corner (assets/hero.js). */
.hero__logo.is-pinned {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	transform-origin: 0 0;
	will-change: transform;
	pointer-events: none;
}
/* Once docked it inverts against whatever is behind it, so it reads on white and black sections. */
.hero__logo.is-docked {
	color: #fff;
	mix-blend-mode: difference;
}
.hero__slash {
	display: inline-block;
	position: relative;
	width: .2em;
	height: .72em;
}
.hero__slash::before {
	content: "";
	position: absolute;
	left: 50%; top: -9%;
	width: .028em; height: 122%;
	margin-left: -.014em;
	background: currentColor;
	border-radius: 1em;
	transform: rotate(26deg);
}
.hero__tagline {
	position: absolute;
	left: 0; right: 0; bottom: 1.6vw;
	margin: 0;
	font-size: clamp(22px, 2.85vw, 56px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -.03em;
	text-align: center;
}

/* ---------- Mission ---------- */
.mission {
	padding: 8.2vw 2.4vw 12vw 17.6vw;
}
.mission__label {
	margin: 0 0 2.6vw .5vw;
	font-size: 12px;
	color: var(--muted);
}
.mission__text {
	margin: 0;
	font-size: clamp(34px, 6.5vw, 132px);
	font-weight: 700;
	line-height: .985;
	letter-spacing: -.022em;
}

/* ---------- Products ---------- */
.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--gutter);
	padding: 0 var(--gutter);
}
.product {
	position: relative;
	display: block;
	background: var(--card);
	aspect-ratio: 696 / 880;
	overflow: hidden;
}
a.product:hover { opacity: 1; }
.product__media {
	position: absolute;
	inset: 4% 12% 13%;
	display: flex; align-items: center; justify-content: center;
}
.product__media img, .product__media svg { width: 100%; height: 100%; object-fit: contain; }
.product__meta {
	position: absolute;
	left: 5.7%; bottom: 3.6%;
	margin: 0;
	font-size: clamp(11px, 1.08vw, 18px);
	line-height: 1.3;
}
.product__meta span { display: block; }

/* ---------- Statement artwork ---------- */
.statement {
	position: relative;
	margin-top: 25.6vw;
	height: 105.8vw;
	min-height: 560px;
	background: var(--white);
	overflow: hidden;
	display: flex; align-items: center; justify-content: center;
}
.statement__media, .statement__media > img, .statement__media > svg {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.statement__text {
	position: relative;
	margin: 0;
	font-size: clamp(13px, 1.5vw, 26px);
	line-height: 1.05;
	text-align: center;
	white-space: pre-line;
}

/* ---------- Footer ---------- */
.site-footer {
	position: relative;
	margin-top: 25.6vw;
	height: 68.75vw;
	min-height: 420px;
	background: var(--black);
	color: var(--white);
	overflow: hidden;
}
.site-footer--inner { margin-top: 0; }
.site-footer__cols {
	display: grid;
	grid-template-columns: 50.5% 24.75% 24.75%;
	padding-top: 1.55vw;
	font-size: clamp(11px, 1.04vw, 18px);
	line-height: 1.22;
}
.site-footer__cols > :first-child { grid-column: 2; }
.site-footer__cols p, .site-footer__cols ul { margin: 0; padding: 0; list-style: none; }
.site-footer__title { margin-bottom: 1.22em !important; }
.site-footer__info { white-space: pre-line; }
.site-footer__wordmark {
	position: absolute;
	left: -14.5vw; bottom: 0;
	margin: 0;
	font-family: var(--sans);
	font-weight: 700;
	font-size: 42.7vw;
	line-height: .74;
	letter-spacing: 0;
	white-space: nowrap;
	transform: translateY(3.5%);
	pointer-events: none;
	user-select: none;
}

/* Hand-kerned ligature of the default "Arp273" wordmark, as drawn in the design. */
.site-footer__wordmark.is-default span:nth-child(1) { margin-right: .06em; }
.site-footer__wordmark.is-default span:nth-child(2) { margin-right: -.19em; }

/* ---------- Inner pages (privacy policy, posts, 404) ---------- */
.site-header {
	display: flex; justify-content: space-between; align-items: baseline;
	padding: 24px var(--gutter);
	font-size: 14px;
}
.site-header ul { display: flex; gap: 24px; margin: 0; padding: 0; list-style: none; }
.content {
	max-width: 760px;
	margin: 0 auto;
	padding: 8vw var(--gutter) 14vw;
	font-size: 18px;
	line-height: 1.5;
	font-weight: 400;
}
.content h1 {
	margin: 0 0 .6em;
	font-size: clamp(40px, 6.5vw, 96px);
	line-height: .985;
	letter-spacing: -.045em;
}
.content h2, .content h3 { letter-spacing: -.03em; line-height: 1.1; margin: 2em 0 .5em; }
.content a { text-decoration: underline; text-underline-offset: 3px; }
.content article + article { margin-top: 6vw; }
.content .entry-meta { font-size: 12px; color: var(--muted); margin-bottom: 2em; }
.content img { height: auto; }
.alignwide { margin-left: -10vw; margin-right: -10vw; max-width: none; }
.alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; }

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
	.hero { height: 135vw; }
	.hero__tagline { bottom: 24px; }
	.mission { padding: 72px var(--gutter) 96px; }
	.mission__label { margin: 0 0 20px; font-size: 11px; }
	.products { grid-template-columns: 1fr; }
	.product__meta { font-size: 12px; }
	.statement { margin-top: 120px; height: 150vw; }
	.site-footer { margin-top: 120px; height: auto; min-height: 0; padding-bottom: 36vw; }
	.site-footer--inner { margin-top: 0; }
	.site-footer__cols {
		grid-template-columns: 1fr 1fr;
		gap: var(--gutter);
		padding: 20px var(--gutter) 0;
		font-size: 11px;
	}
	.site-footer__cols > :first-child { grid-column: 1; }
	.alignwide { margin-left: 0; margin-right: 0; }
}