:root {
		--ink: #16181f;
		--ink-deep: #101218;
		--ink-raise: #1d2029;
		--paper: #e8e4da;
		--gold: #fc0;
		--red: #d42a1e;
		--slate: #a6bac4;
		--line: rgba(232, 228, 218, 0.14);
		--display: 'Fraunces', 'Libre Baskerville', serif;
		--body: 'Archivo', 'Open Sans', sans-serif;
		--mono: 'IBM Plex Mono', monospace;
	}

	* {
		box-sizing: border-box;
	}

	html {
		scroll-behavior: smooth;
	}

	body {
		margin: 0;
		background: var(--ink);
		color: var(--paper);
		font-family: var(--body);
		font-size: 1rem;
		line-height: 1.6;
		-webkit-font-smoothing: antialiased;
		overflow-x: clip;
	}

	::selection {
		background: var(--gold);
		color: var(--ink);
	}

	img {
		display: block;
		max-width: 100%;
		height: auto;
	}

	a {
		color: var(--gold);
	}

	/* ---------- Grain + atmosphere ---------- */
	body::before {
		content: "";
		position: fixed;
		inset: 0;
		z-index: 2000;
		pointer-events: none;
		opacity: 0.5;
		mix-blend-mode: overlay;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E");
	}

	/* ---------- Scroll progress ---------- */
	#progress {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 3px;
		background: linear-gradient(90deg, var(--red), var(--gold));
		transform-origin: 0 50%;
		transform: scaleX(0);
		z-index: 1000;
	}

	@media (prefers-reduced-motion: no-preference) {
		@supports (animation-timeline: scroll()) {
			@keyframes grow-progress {
				from {
					transform: scaleX(0);
				}

				to {
					transform: scaleX(1);
				}
			}

			#progress {
				animation: grow-progress auto linear;
				animation-timeline: scroll(root);
			}
		}
	}

	/* ---------- Header ---------- */
	.site-head {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 900;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 1.1rem clamp(1.25rem, 4vw, 3rem);
		font-family: var(--mono);
		font-size: 0.72rem;
		letter-spacing: 0.22em;
		text-transform: uppercase;
		background: linear-gradient(to bottom, rgba(16, 18, 24, 0.85), rgba(16, 18, 24, 0));
		pointer-events: none;
	}

	.site-head a {
		pointer-events: auto;
		color: var(--paper);
		text-decoration: none;
		transition: color 0.25s;
	}

	.site-head a:hover {
		color: var(--gold);
	}

	.wordmark {
		display: flex;
		align-items: center;
		gap: 0.6em;
	}

	.dot {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: var(--paper);
		opacity: 0.5;
		flex: none;
	}

	/* ---------- Hero ---------- */
	.hero {
		min-height: 100svh;
		display: grid;
		align-content: center;
		position: relative;
		padding: 55vh clamp(1.25rem, 4vw, 3rem) 4rem;
		view-timeline: --hero;
		background: url('/img/Web/2023-frogtape-design-trends.webp') no-repeat center center;
		background-size: cover;
	}

	.hero-kicker {
		font-family: var(--mono);
		color: #fff;
		font-size: clamp(0.7rem, 1.4vw, 0.85rem);
		letter-spacing: 0.35em;
		text-transform: uppercase;
		margin: 0 0 1.5rem;
		display: flex;
		align-items: center;
		gap: 1rem;
	}

	.hero-kicker::before {
		content: "";
		width: 3em;
		height: 1px;
		background: var(--gold);
	}

	.hero h1 {
		font-family: var(--display);
		font-weight: 560;
		font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1;
		font-size: clamp(3.2rem, 8.5vw, 11.5rem);
		line-height: 0.92;
		letter-spacing: -0.02em;
		margin: 0;
		text-wrap: balance;
	}

	.hero h1 .accent {
		font-weight: 400;
		color: var(--gold);
	}

	.hero h1 .mark-dot {
		display: inline-block;
		width: 0.14em;
		height: 0.14em;
		border-radius: 50%;
		background: var(--red);
		margin-left: 0.06em;
	}

	.hero-sub {
		max-width: 34em;
		margin: 2.2rem 0 0;
		font-size: clamp(1rem, 1.8vw, 1.2rem);
		color: var(--paper);
	}

	.hero-sub strong {
		color: var(--paper);
		font-weight: 600;
	}

	/* floating background glyphs */
	.hero-glyphs {
		position: absolute;
		inset: 0;
		overflow: clip;
		pointer-events: none;
		z-index: -1;
	}

	.hero-glyphs span {
		position: absolute;
		font-family: var(--display);
		font-style: italic;
		color: transparent;
		-webkit-text-stroke: 1px rgba(232, 228, 218, 0.09);
		font-size: clamp(6rem, 18vw, 26rem);
		line-height: 1;
		user-select: none;
	}

	.hero-glyphs span:nth-child(1) {
		top: 4%;
		right: 4%;
	}

	.hero-glyphs span:nth-child(2) {
		bottom: 18%;
		left: 4%;
		-webkit-text-stroke-color: rgba(255, 204, 0, 0.08);
	}

	.hero-glyphs span:nth-child(3) {
		top: 40%;
		right: 8%;
		font-size: clamp(4rem, 12vw, 13rem);
		-webkit-text-stroke-color: rgba(212, 42, 30, 0.14);
	}

	@media (prefers-reduced-motion: no-preference) {
		@supports ((animation-timeline: view()) and (animation-range: entry)) {
			@keyframes drift-up {
				to {
					transform: translateY(-18vh) rotate(4deg);
				}
			}

			@keyframes drift-down {
				to {
					transform: translateY(14vh) rotate(-3deg);
				}
			}

			.hero-glyphs span:nth-child(odd) {
				animation: drift-up linear both;
				animation-timeline: --hero;
				animation-range: exit;
			}

			.hero-glyphs span:nth-child(even) {
				animation: drift-down linear both;
				animation-timeline: --hero;
				animation-range: exit;
			}

			@keyframes hero-fade {
				to {
					opacity: 0;
					transform: translateY(-6vh);
				}
			}

			.hero>*:not(.hero-glyphs) {
				animation: hero-fade linear both;
				animation-timeline: --hero;
				animation-range: exit 10% exit 90%;
			}
		}
	}

	/* load-in */
	@media (prefers-reduced-motion: no-preference) {
		@keyframes rise-in {
			from {
				opacity: 0;
				transform: translateY(1.6rem);
			}

			to {
				opacity: 1;
				transform: none;
			}
		}

		.hero-kicker,
		.hero h1,
		.hero-sub,
		.scroll-cue {
			animation: rise-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) backwards;
		}

		.hero h1 {
			animation-delay: 0.12s;
		}

		.hero-sub {
			animation-delay: 0.28s;
		}

		.scroll-cue {
			animation-delay: 0.5s;
		}
	}

	.scroll-cue {
		position: absolute;
		bottom: 2rem;
		left: clamp(1.25rem, 4vw, 3rem);
		font-family: var(--mono);
		font-size: 0.7rem;
		letter-spacing: 0.3em;
		text-transform: uppercase;
		color: var(--slate);
		display: flex;
		align-items: center;
		gap: 0.8rem;
	}

	.scroll-cue::after {
		content: "";
		width: 1px;
		height: 3.2em;
		background: linear-gradient(to bottom, var(--gold), transparent);
	}

	@media (prefers-reduced-motion: no-preference) {
		@keyframes cue-pulse {

			0%,
			100% {
				opacity: 0.5;
			}

			50% {
				opacity: 1;
			}
		}

		.scroll-cue::after {
			animation: cue-pulse 2.2s ease-in-out infinite;
		}
	}

	/* ---------- Marquee ---------- */
	.marquee {
		border-top: 1px solid var(--line);
		border-bottom: 1px solid var(--line);
		overflow: clip;
		padding: 1.1rem 0;
		background: var(--ink-deep);
		display: flex;
	}

	.marquee-track {
		display: flex;
		gap: 3rem;
		flex: none;
		padding-right: 3rem;
		white-space: nowrap;
		font-family: var(--display);
		font-style: italic;
		font-size: clamp(1.1rem, 2.4vw, 1.6rem);
		color: var(--slate);
	}

	.marquee-track em {
		font-style: normal;
		font-family: var(--mono);
		font-size: 0.6em;
		color: var(--gold);
		align-self: center;
		letter-spacing: 0.3em;
	}

	@media (prefers-reduced-motion: no-preference) {
		@keyframes marquee-scroll {
			to {
				transform: translateX(-100%);
			}
		}

		.marquee-track {
			animation: marquee-scroll 28s linear infinite;
		}
	}

	/* ---------- Sections ---------- */
	.work {
		padding: clamp(4rem, 10vh, 8rem) clamp(1.25rem, 4vw, 3rem);
	}

	.chapter {
		display: grid;
		grid-template-columns: 1fr;
		gap: 2rem;
		max-width: 1500px;
		margin: 0 auto clamp(6rem, 14vh, 11rem);
	}

	@media (min-width: 900px) {
		.chapter {
			grid-template-columns: minmax(240px, 1fr) 3fr;
			gap: clamp(2rem, 5vw, 5rem);
		}
	}

	.chapter-meta {
		position: relative;
	}

	@media (min-width: 900px) {
		.chapter-meta-inner {
			position: sticky;
			top: 6rem;
		}
	}

	.chapter-index {
		font-family: var(--mono);
		font-size: 0.72rem;
		letter-spacing: 0.3em;
		color: var(--red);
		display: block;
		margin-bottom: 1rem;
	}

	.chapter h2 {
		font-family: var(--display);
		font-weight: 500;
		font-variation-settings: "opsz" 100;
		font-size: clamp(1.7rem, 3.4vw, 2.6rem);
		line-height: 1.05;
		letter-spacing: -0.015em;
		margin: 0 0 1.2rem;
		text-wrap: balance;
	}

	.chapter p {
		color: var(--slate);
		font-size: 0.98rem;
		max-width: 38em;
		margin: 0 0 1rem;
	}

	.chapter .visit {
		font-family: var(--mono);
		font-size: 0.75rem;
		letter-spacing: 0.2em;
		text-transform: uppercase;
		text-decoration: none;
		border-bottom: 1px solid var(--gold);
		padding-bottom: 0.2em;
		transition: color 0.25s, border-color 0.25s;
	}

	.chapter .visit:hover {
		color: var(--paper);
		border-color: var(--paper);
	}

	.chapter-divider {
		font-family: var(--display);
		font-style: italic;
		font-size: clamp(2.2rem, 6vw, 4.5rem);
		color: var(--gold);
		text-align: center;
		margin: 0 auto clamp(6rem, 14vh, 11rem);
		max-width: 1500px;
		padding: 0 clamp(1.25rem, 4vw, 3rem);
		letter-spacing: -0.02em;
	}

	.chapter-divider small {
		display: block;
		font-family: var(--mono);
		font-style: normal;
		font-size: 0.72rem;
		letter-spacing: 0.35em;
		text-transform: uppercase;
		color: var(--slate);
		margin-bottom: 1rem;
	}

	/* gallery */
	.gallery {
		display: grid;
		grid-template-columns: 1fr;
		gap: clamp(1.2rem, 2.5vw, 2rem);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	@media (min-width: 700px) {
		.gallery {
			grid-template-columns: 1fr 1fr;
		}

		.gallery>li:nth-child(4n+1):last-child,
		.gallery>li:only-child {
			grid-column: 1 / -1;
		}

		.gallery.stagger>li:nth-child(even) {
			transform: translateY(clamp(1.5rem, 4vw, 3.5rem));
		}
	}

	.gallery figure {
		margin: 0;
		position: relative;
	}

	.gallery img {
		width: 100%;
		border: 1px solid var(--line);
		background: var(--ink-raise);
		transition: transform 0.5s cubic-bezier(0.34, 0.14, 0.25, 1), border-color 0.35s;
	}

	.gallery a {
		display: block;
	}

	.gallery a:hover img {
		transform: scale(1.02) rotate(-0.3deg);
		border-color: var(--gold);
	}

	.gallery figcaption {
		font-family: var(--mono);
		font-size: 0.68rem;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		color: var(--slate);
		margin-top: 0.7rem;
	}

	/* ---------- Scroll-snap gallery (single row) ---------- */
	.gallery.gallery--snap {
		display: flex;
		flex-wrap: nowrap;
		gap: clamp(1.2rem, 2.5vw, 2rem);
		overflow-x: auto;
		width: calc(100% + clamp(1.25rem, 4vw, 3rem));
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-color: var(--slate) var(--ink-raise);
		scrollbar-width: thin;
	}

	.gallery.gallery--snap::-webkit-scrollbar {
		height: 8px;
	}

	.gallery.gallery--snap::-webkit-scrollbar-track {
		background: var(--ink-raise);
		border-radius: 8px;
	}

	.gallery.gallery--snap::-webkit-scrollbar-thumb {
		background: var(--slate);
		border-radius: 8px;
	}

	.gallery.gallery--snap::-webkit-scrollbar-thumb:hover {
		background: var(--gold);
	}

	@media (min-width: 900px) {
		.gallery.gallery--snap {
			width: calc(50vw + (100% / 3) - (clamp(2rem, 5vw, 5rem) / 2));
		}
	}

	.gallery.gallery--snap > li {
		flex: 0 0 auto;
		scroll-snap-align: start;
		width: calc((100% - 0.2 * clamp(1.2rem, 2.5vw, 2rem)) / 1.2);
	}

	/* scroll reveals — decorative, progressive enhancement */
	@media (prefers-reduced-motion: no-preference) {
		@supports ((animation-timeline: view()) and (animation-range: entry)) {
			@keyframes reveal {

				from,
				20% {
					opacity: 0;
					transform: translateY(3.5rem);
					clip-path: inset(12% 6% 12% 6%);
				}

				to {
					opacity: 1;
					clip-path: inset(0 0 0 0);
				}
			}

			.gallery>li {
				animation: reveal linear backwards;
				animation-timeline: view();
				animation-range: entry 0% entry 70%;
			}

			@keyframes snap-fade {
				from {
					opacity: 0;
				}

				to {
					opacity: 1;
				}
			}

			.gallery.gallery--snap>li {
				animation: snap-fade auto linear backwards;
				animation-timeline: view(inline);
				animation-range: entry 0% entry 15%;
			}

			@keyframes meta-reveal {

				from,
				20% {
					opacity: 0;
					transform: translateX(-14.5rem);
				}
			}

			.chapter-meta-inner {
				animation: meta-reveal linear backwards;
				animation-timeline: view();
				animation-range: entry 0% entry 50%;
			}

			@keyframes divider-in {

				from,
				20% {
					opacity: 0;
					letter-spacing: 0.15em;
				}

				to {
					opacity: 1;
					letter-spacing: -0.02em;
				}
			}

			.chapter-divider {
				animation: divider-in linear backwards;
				animation-timeline: view();
				animation-range: entry 0% entry 70%;
			}
		}
	}

	/* ---------- Footer ---------- */
	.site-foot {
		border-top: 1px solid var(--line);
		background: var(--ink-deep);
		padding: clamp(4rem, 12vh, 8rem) clamp(1.25rem, 4vw, 3rem) 3rem;
		text-align: center;
	}

	.site-foot .kicker {
		font-family: var(--mono);
		font-size: 1.72rem;
		letter-spacing: 0.35em;
		text-transform: uppercase;
		color: var(--slate);
		margin: 0 0 1.5rem;
	}

	.site-foot .cta {
		font-family: var(--display);
		font-weight: 500;
		font-variation-settings: "opsz" 144, "WONK" 1;
		font-size: clamp(2rem, 7vw, 5.5rem);
		line-height: 1;
		letter-spacing: -0.02em;
		color: var(--paper);
		text-decoration: none;
		display: inline-block;
		transition: color 0.3s;
	}

	.site-foot .cta em {
		color: var(--gold);
		font-weight: 400;
	}

	.site-foot .cta:hover {
		color: var(--gold);
	}

	.site-foot .fine {
		font-family: var(--mono);
		font-size: 0.68rem;
		letter-spacing: 0.2em;
		text-transform: uppercase;
		color: var(--slate);
		margin-top: 4rem;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 0.8rem;
	}

	.site-foot .fine .dot {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: var(--gold);
	}