/*
Theme Name: DayJob Trader
Theme URI: https://dayjobtrader.com
Author: DayJob Trader
Description: Custom theme for DayJob Trader. Full-screen hero, about, services, projects and latest posts on the homepage, in the Ember brand palette.
Version: 1.2.7
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dayjob-trader
*/

:root {
	--ember: #EF6140;
	--ember-dark: #C2432A; /* Ember text on light grounds (4.6:1 on white) */
	--deep: #0E2F3A;
	--mist: #A9D3DD;
	--signal: #2F9E7E;
	--ink: #0A0A0A;
	--paper: #F5F3F1;
	--line: #E6E2DE;
	--muted: #5E5E5E;
	--white: #FFFFFF;

	--font-display: "Inter Tight", Inter, -apple-system, system-ui, sans-serif;
	--font-body: "DM Sans", -apple-system, system-ui, sans-serif;
	--font-future: Tomorrow, "Inter Tight", Inter, system-ui, sans-serif; /* nav and hero */

	--wrap: 1200px;
	--gutter: clamp(16px, 4vw, 48px);
	--radius: 20px;
	--section: clamp(72px, 10vw, 128px);
}

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

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--white);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.6;
	letter-spacing: -.005em;
	-webkit-font-smoothing: antialiased;
}

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

a { color: var(--ink); text-decoration-color: var(--ember); text-underline-offset: 3px; }
a:hover { color: var(--ember-dark); }

:focus-visible { outline: 3px solid var(--ember); outline-offset: 3px; }

h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.035em; line-height: 1.08; margin: 0; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.skip-link:focus {
	clip: auto; width: auto; height: auto; z-index: 100;
	top: 12px; left: 12px; padding: 12px 18px; background: var(--white); color: var(--ink);
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* The site name in running text: Ember, in the header's Tomorrow (functions.php djt_brand_text). */
.brand-text { font-family: var(--font-future); font-weight: 700; font-size: 1.08em; color: var(--ember); letter-spacing: .01em; }

/* ---------- Buttons ---------- */

.button {
	display: inline-flex; cursor: pointer; align-items: center; gap: 10px;
	min-height: 48px; padding: 0 24px; border-radius: 999px;
	font-family: var(--font-body); font-size: 16px; font-weight: 600;
	text-decoration: none; border: 2px solid transparent;
	transition: background .15s, color .15s, border-color .15s;
}
.button--ember { background: var(--ember); color: var(--ink); }
.button--ember:hover { background: #F27A5E; color: var(--ink); }
.button--ghost { border-color: rgba(255,255,255,.55); color: var(--white); }
.button--ghost:hover { border-color: var(--white); color: var(--white); background: rgba(255,255,255,.08); }
.button--dark { background: var(--deep); color: var(--white); }
.button--dark:hover { background: var(--ink); color: var(--white); }

/* ---------- Header ---------- */

.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 20; padding: 24px 0; }
.site-header--solid { position: static; background: var(--deep); }
/* The header spans the whole browser width: logo far left, menu far right, with the usual edge gutter. */
.site-header .wrap { max-width: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--white); }
.brand:hover { color: var(--white); }
.brand svg { width: 38px; height: 38px; flex: none; }
.brand__name { font-family: var(--font-display); font-size: 24px; letter-spacing: -0.045em; line-height: 1; }
.brand__name b { font-weight: 900; }
.brand__name span { font-weight: 500; color: var(--mist); }

.nav-toggle {
	display: none; min-width: 44px; min-height: 44px; border: 0; border-radius: 10px;
	background: rgba(255,255,255,.1); color: var(--white); cursor: pointer;
}
.primary-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.primary-nav a {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
	color: var(--white); text-decoration: none; border-radius: 999px;
	font-family: var(--font-future); font-weight: 400; font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
}
.primary-nav a:hover, .primary-nav .current-menu-item > a { background: rgba(255,255,255,.12); color: var(--white); }

@media (max-width: 760px) {
	.nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
	.primary-nav { display: none; width: 100%; }
	.primary-nav.is-open { display: block; }
	.primary-nav ul { flex-direction: column; gap: 2px; background: var(--deep); border-radius: 14px; padding: 8px; }
}

/* ---------- Hero ---------- */

.hero {
	--header-h: 92px; /* .site-header: 24px padding + 44px row + 24px padding */
	--volume-h: clamp(40px, 7vw, 110px);
	--hero-top: clamp(32px, 7vw, 110px); /* space under the header */
	/* The text sits this much higher than that space would put it, and the gap
	   above the buttons grows by the same amount so they stay put. Up to 50px,
	   less on small screens so the text keeps 16px clear of the header. */
	--hero-lift: min(50px, var(--hero-top) - 16px);
	position: relative;
	display: flex; align-items: flex-start;
	background-color: var(--deep);
	background-size: cover; background-position: center;
	color: var(--white); overflow: hidden;
}
.hero::before {
	content: ""; position: absolute; inset: 0; z-index: 1;
	/* A faint grain dithers the dark gradients so they don't band into visible steps on large screens. */
	background:
		url("assets/grain.png") 0 0 / 96px 96px,
		linear-gradient(180deg, rgba(14,47,58,.55) 0%, rgba(14,47,58,.35) 45%, rgba(10,10,10,.85) 100%);
}
.hero__inner {
	position: relative; z-index: 2;
	padding-top: calc(var(--header-h) + var(--hero-top) - var(--hero-lift));
	padding-bottom: calc(var(--volume-h) + clamp(40px, 5vw, 72px) + 20px); /* +20px keeps the hero its height with the buttons 20px higher */
	font-family: var(--font-future); text-transform: uppercase;
}
.hero__eyebrow {
	display: inline-block; margin-bottom: 20px;
	font-size: 12px; font-weight: 400; letter-spacing: .24em; color: var(--mist);
}
.hero__title {
	font-family: var(--font-future); font-size: clamp(32px, 5.4vw, 76px); font-weight: 300;
	line-height: 1.1; letter-spacing: .04em; max-width: none;
}
.hero__title em { font-style: normal; font-weight: 700; color: var(--ember); }
.hero__text {
	max-width: 560px; margin: 24px 0 calc(16px + var(--hero-lift));
	font-size: clamp(14px, 1.3vw, 16px); letter-spacing: .06em; line-height: 1.7; color: rgba(255,255,255,.84);
}
.hero .button { font-family: var(--font-future); font-weight: 500; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__scroll {
	position: absolute; right: var(--gutter); bottom: calc(var(--volume-h) + clamp(40px, 5vw, 72px)); z-index: 2;
	writing-mode: vertical-rl; font-family: var(--font-future); font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
	color: rgba(255,255,255,.7); text-decoration: none;
}
.hero__scroll:hover { color: var(--white); }
@media (max-width: 760px) { .hero__scroll { display: none; } }

/* Net Worth Tracker link, right-aligned in the white space under the hero: a plain Deep Teal
   pill with a thin up-right arrow and a slow Mist sweep. On hover Signal wipes in from the
   left, the text turns Ink and the arrow lifts up and to the right. */
.section.section--tracker { padding-top: clamp(32px, 5vw, 56px); }
.tracker-strip { margin-bottom: clamp(48px, 7vw, 88px); text-align: right; }
.tracker-link {
	position: relative; isolation: isolate; overflow: hidden;
	display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px 8px 20px;
	border-radius: 999px; background: var(--deep);
	font-family: var(--font-future); font-size: 13px; font-weight: 500; line-height: 18px; letter-spacing: .02em;
	color: var(--white); text-decoration: none;
	transition: color .35s ease;
}
.tracker-link::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(100deg, transparent 30%, rgba(169,211,221,.22) 50%, transparent 70%);
	transform: translateX(-100%); animation: djt-tracker-sweep 4.5s ease-in-out infinite;
}
.tracker-link::after {
	content: ""; position: absolute; inset: 0; z-index: -1; background: var(--signal);
	transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.65, 0, .35, 1);
}
.tracker-link:hover, .tracker-link:focus-visible { color: var(--ink); }
.tracker-link:hover::after, .tracker-link:focus-visible::after { transform: scaleX(1); }
.tracker-link:hover::before, .tracker-link:focus-visible::before { animation: none; opacity: 0; }
.tracker-link:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.tracker-link__arrow { flex: none; width: 12px; height: 12px; transition: transform .35s ease; }
.tracker-link:hover .tracker-link__arrow, .tracker-link:focus-visible .tracker-link__arrow { transform: translate(2px, -2px); }
@keyframes djt-tracker-sweep {
	0%, 35% { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
}

/* Ember candles from the default hero art: each one rests, then slowly falls
   out of the bottom of the hero beneath the overlay, and fades back in. */
.hero-candles {
	position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
	pointer-events: none; overflow: visible;
}
.hero-candle {
	fill: var(--ember); fill-opacity: .55; stroke: var(--ember); stroke-opacity: .55;
	animation: djt-candle-fall 16s infinite;
}
@keyframes djt-candle-fall {
	0%, 30% { transform: translateY(0); opacity: 1; animation-timing-function: cubic-bezier(.45, 0, .9, .55); }
	80% { transform: translateY(var(--drop)); opacity: 1; }
	80.01% { transform: translateY(0); opacity: 0; animation-timing-function: ease-out; }
	100% { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.hero-candle { animation: none; }
	.tracker-link::before { animation: none; }
	.tracker-link::after, .tracker-link__arrow { transition: none; }
}

/* Three Mist candles that glow like neon. They sit above the dark overlay
   (same layer, later in the page) so it doesn't dim them. */
.hero-neon {
	position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
	pointer-events: none;
}
.hero-neon__candle { fill: var(--mist); stroke: var(--mist); }

/* Volume bars along the hero's bottom edge, in the candles' Ember. */
.hero-volume {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
	width: 100%; height: var(--volume-h); pointer-events: none;
}
.hero-volume path { fill: var(--ember); fill-opacity: .55; }

/* ---------- Sections ---------- */

.section { padding: var(--section) 0; }
/* Services, Projects and Blog sit a little closer to the section above them. */
#services, #projects, #blog { padding-top: clamp(56px, 7.5vw, 96px); }
.section--paper { background: var(--paper); }
.section--deep { background: var(--deep); color: var(--white); }

.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 48px; }
.section__label {
	display: block; margin-bottom: 14px;
	font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ember-dark);
}
.section--deep .section__label { color: var(--ember); }
/* Section titles share the header's Tomorrow, set like the hero headline. */
.section__title {
	font-family: var(--font-future); font-size: clamp(28px, 4vw, 48px); font-weight: 500;
	line-height: 1.12; letter-spacing: .02em; text-transform: uppercase; max-width: 22ch;
}
.section__link { font-weight: 600; }
.section--deep .section__link { color: var(--white); }

/* About */
/* A faint version of the hero's grid across the full width of the About section, on white,
   starting right under the hero (the tracker link sits at the top of this section). */
#about {
	background-color: var(--white);
	background-image:
		linear-gradient(to right, rgba(14,47,58,.06) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(14,47,58,.06) 1px, transparent 1px);
	background-size: 72px 72px;
	background-position: center top;
}
.about { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.about__media {
	aspect-ratio: 4 / 5; border-radius: var(--radius); background: var(--deep); overflow: hidden;
	display: flex; align-items: center; justify-content: center;
}
.about__media img { width: 100%; height: 100%; object-fit: cover; }
.about__media svg { width: 46%; height: auto; }
.about__body p { font-size: 18px; color: #2B2B2B; margin: 0 0 18px; }
.about__body .section__title { margin-bottom: 28px; }
.about__body .button { margin-top: 12px; }
@media (max-width: 860px) { .about { grid-template-columns: minmax(0, 1fr); } .about__media { aspect-ratio: 16 / 10; } }

/* Services */
.services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.service {
	background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
	padding: 32px; display: flex; flex-direction: column; gap: 14px;
}
.service__num { font-family: var(--font-display); font-weight: 900; font-size: 15px; color: var(--ember-dark); }
.service h3 { font-size: 26px; font-weight: 700; }
.service p { margin: 0; color: #3D3D3D; }
@media (max-width: 900px) { .services { grid-template-columns: minmax(0, 1fr); } }

/* Projects */
.projects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.project { display: flex; flex-direction: column; text-decoration: none; color: var(--white); }
.project:hover { color: var(--white); }
.project__thumb {
	aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: #163E4B;
	display: flex; align-items: center; justify-content: center;
}
.project__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.project:hover .project__thumb img { transform: scale(1.04); }
.project__thumb svg { width: 72px; height: 72px; opacity: .9; }
.project__meta { padding: 20px 4px 0; }
.project h3 { font-size: 24px; font-weight: 700; }
.project:hover h3 { text-decoration: underline; text-decoration-color: var(--ember); text-underline-offset: 4px; }
.project p { margin: 8px 0 0; color: rgba(255,255,255,.78); font-size: 16px; }
.projects--first-wide .project:first-child { grid-column: span 2; grid-row: span 2; }
.projects--first-wide .project:first-child .project__thumb { aspect-ratio: auto; flex-grow: 1; min-height: 320px; }
.projects--first-wide .project:first-child h3 { font-size: 30px; }
@media (max-width: 900px) {
	.projects { grid-template-columns: minmax(0, 1fr); }
	.projects--first-wide .project:first-child { grid-column: auto; grid-row: auto; }
	.projects--first-wide .project:first-child .project__thumb { aspect-ratio: 4 / 3; min-height: 0; }
}

/* Posts */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.post-card {
	display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden;
	background: var(--white); border: 1px solid var(--line);
}
.post-card__thumb { aspect-ratio: 16 / 10; background: var(--paper); overflow: hidden; }
.post-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 10px; flex-grow: 1; }
.post-card__meta { font-size: 13px; color: var(--muted); font-weight: 500; }
.post-card h3 { font-size: 22px; font-weight: 700; line-height: 1.2; }
.post-card h3 a { text-decoration: none; }
.post-card h3 a::after { content: ""; position: absolute; inset: 0; }
.post-card { position: relative; }
.post-card:hover h3 a { color: var(--ember-dark); }
.post-card p { margin: 0; color: #3D3D3D; font-size: 16px; }
@media (max-width: 900px) { .posts { grid-template-columns: minmax(0, 1fr); } }

.empty-note { padding: 28px; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); }
.section--deep .empty-note { border-color: rgba(255,255,255,.3); color: rgba(255,255,255,.75); }

/* Contact */
.contact { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.contact__intro .section__title { margin-bottom: 24px; }
.contact__intro p { font-size: 18px; color: #2B2B2B; margin: 0 0 18px; max-width: 42ch; }
.contact-form {
	background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
	padding: clamp(24px, 4vw, 40px); display: flex; flex-direction: column; gap: 20px;
}
.contact-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field span {
	font-family: var(--font-future); font-size: 12px; font-weight: 500; letter-spacing: .12em;
	text-transform: uppercase; color: var(--deep);
}
.field input, .field textarea {
	width: 100%; padding: 13px 16px; border: 1px solid #D5D0CB; border-radius: 12px;
	background: var(--white); color: var(--ink); font: inherit; font-size: 16px;
	transition: border-color .15s, box-shadow .15s;
}
.field textarea { resize: vertical; min-height: 150px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px rgba(47,158,126,.18); }
.contact-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form__foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.contact-form button[disabled] { opacity: .6; cursor: wait; }
.contact-form__status { margin: 0; font-size: 15px; }
.contact-form__status.is-ok { color: #1F7A5F; }
.contact-form__status.is-error { color: var(--ember-dark); }
@media (max-width: 860px) {
	.contact { grid-template-columns: minmax(0, 1fr); }
	.contact-form__row { grid-template-columns: minmax(0, 1fr); }
}

/* CTA band */
.cta { background: var(--ember); color: var(--ink); padding: clamp(56px, 8vw, 96px) 0; }
.cta .wrap { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.cta h2 { font-family: var(--font-future); font-size: clamp(26px, 3.6vw, 44px); font-weight: 500; line-height: 1.12; letter-spacing: .02em; text-transform: uppercase; max-width: 24ch; }

/* ---------- Footer ---------- */

.site-footer { background: var(--ink); color: rgba(255,255,255,.75); padding: 56px 0 40px; font-size: 15px; }
.site-footer .wrap { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; flex-wrap: wrap; }
.site-footer a { color: var(--white); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; flex-wrap: wrap; }
.site-footer__legal { width: 100%; margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; }

/* ---------- Blog / single ---------- */

.page-head { padding: clamp(56px, 8vw, 96px) 0 32px; }
.page-head h1 { font-size: clamp(38px, 6vw, 68px); font-weight: 900; }
.entry { max-width: 720px; margin: 0 auto; padding: 0 var(--gutter) var(--section); }
.entry-content > * { margin: 0 0 1.2em; }
.entry-content h2 { font-size: 34px; margin-top: 1.6em; }
.entry-content h3 { font-size: 26px; margin-top: 1.4em; }
.entry-content img { border-radius: 14px; }
.entry-content blockquote { margin-left: 0; padding-left: 20px; border-left: 4px solid var(--ember); }
.pagination { display: flex; gap: 12px; justify-content: center; padding-bottom: var(--section); }
.pagination .page-numbers { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; }
.pagination .current { background: var(--deep); color: var(--white); border-color: var(--deep); }

/* ---------- Projects page and single project ---------- */
/* Scroll effects come from assets/projects.js. Nothing is hidden until that script arms the
   reveals (html.reveal-armed), and only for things below the fold. */

.projects-intro { position: relative; overflow: hidden; background: var(--deep); color: var(--white); padding: clamp(56px, 8vw, 104px) 0 clamp(40px, 5vw, 64px); }
.projects-intro > .wrap { position: relative; z-index: 1; }
/* Flowing Mist lines behind the intro (assets/background-paths.js), faded at the top and bottom. */
.bg-paths {
	position: absolute; inset: 0; pointer-events: none; color: var(--mist);
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 85%, transparent);
	mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 85%, transparent);
}
.bg-paths canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .5s ease-out; }
.bg-paths canvas.is-ready { opacity: 1; }
/* The same faint grid as the homepage About section, behind the project list. */
.project-rows-band {
	background-color: var(--white);
	background-image:
		linear-gradient(to right, rgba(14,47,58,.06) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(14,47,58,.06) 1px, transparent 1px);
	background-size: 72px 72px;
	background-position: center top;
}
.projects-intro .section__label { color: var(--ember); }
.projects-intro h1, .project-single__head h1 {
	font-family: var(--font-future); font-weight: 500; text-transform: uppercase; letter-spacing: .01em; line-height: 1;
	font-size: clamp(40px, 7vw, 88px); text-wrap: balance;
}
.projects-intro__text { max-width: 56ch; margin-top: 22px; color: rgba(255,255,255,.8); font-size: clamp(17px, 1.6vw, 20px); }
.projects-intro__text p { margin: 0 0 .6em; }
.project-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; }
.project-filters a {
	display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px;
	border: 1.5px solid rgba(255,255,255,.28); color: var(--white); text-decoration: none; font-weight: 600; font-size: 15px;
	transition: background .2s, border-color .2s;
}
.project-filters a:hover { border-color: var(--mist); color: var(--white); }
.project-filters a[aria-current="page"] { background: var(--ember); border-color: var(--ember); color: var(--ink); }

/* One row per project: a big image and its summary, swapping sides each row. */
.project-rows { display: grid; gap: clamp(72px, 11vw, 150px); padding-top: clamp(56px, 8vw, 112px); padding-bottom: var(--section); }
.project-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; color: var(--ink); text-decoration: none; }
.project-row[hidden] { display: none; }
.project-row__media { grid-column: 1 / span 7; }
.project-row__text { grid-column: 9 / span 4; min-width: 0; }
.project-row.is-flip .project-row__media { grid-column: 6 / span 7; grid-row: 1; }
.project-row.is-flip .project-row__text { grid-column: 1 / span 4; grid-row: 1; }
.project-row__media {
	--mat: clamp(16px, 3.2vw, 44px);
	position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden;
	background: var(--paper); border: 1px solid var(--line);
	clip-path: inset(0 round var(--radius));
}
/* The whole image sits on a light Paper mat, never cropped, and drifts a little for the parallax. */
.project-row__art {
	position: absolute; inset: var(--mat);
	display: flex; align-items: center; justify-content: center;
	transform: translate3d(0, var(--parallax, 0px), 0);
}
.project-row__art img {
	width: auto; height: auto; max-width: 100%; max-height: 100%;
	border-radius: 10px; box-shadow: 0 12px 32px rgba(14,47,58,.16);
	transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.project-row__art svg { width: 22%; height: auto; }
.project-row:hover .project-row__art img { transform: scale(1.04); }
.project-row__type { display: flex; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ember-dark); }
.project-row__type span { color: var(--muted); font-weight: 500; letter-spacing: .06em; }
.project-row h2 {
	margin-top: 14px; font-family: var(--font-future); font-size: clamp(30px, 3.4vw, 46px); font-weight: 500;
	letter-spacing: .005em; line-height: 1.08; text-wrap: balance; transition: color .2s;
}
.project-row:hover h2, .project-row:focus-visible h2 { color: var(--ember-dark); }
.project-row p { margin: 16px 0 0; color: var(--muted); max-width: 42ch; }
.project-row__go { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; font-weight: 700; color: var(--deep); }
.project-row__go b {
	display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
	border: 1.5px solid var(--deep); font-weight: 400; transition: background .25s, border-color .25s, transform .25s;
}
.project-row:hover .project-row__go b, .project-row:focus-visible .project-row__go b { background: var(--ember); border-color: var(--ember); transform: translateX(6px); }
@media (max-width: 760px) {
	.project-row__media, .project-row__text,
	.project-row.is-flip .project-row__media,
	.project-row.is-flip .project-row__text { grid-column: 1 / -1; grid-row: auto; }
}

/* Single project */
.project-single__head { background: var(--deep); color: var(--white); padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 6vw, 80px); }
.project-single__head h1 { font-size: clamp(40px, 7.4vw, 96px); line-height: .98; }
.project-single__back { display: inline-block; margin-bottom: 28px; color: var(--mist); text-decoration: none; font-weight: 600; font-size: 15px; }
.project-single__back:hover { color: var(--white); }
.project-single__meta {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: clamp(36px, 5vw, 64px) 0 0;
	padding-top: 28px; border-top: 1px solid rgba(255,255,255,.18);
}
.project-single__meta dt { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ember); }
.project-single__meta dd { margin: 8px 0 0; color: rgba(255,255,255,.88); font-size: 16px; }
.project-single__meta dd a:not(.button) { color: inherit; }
.project-single__meta dd p { margin: 0 0 20px; }
.project-single__summary { grid-column: 3 / span 2; }
@media (max-width: 760px) {
	.project-single__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.project-single__summary { grid-column: 1 / -1; }
}

/* The featured image starts inset to the content width with rounded corners and widens
   to the full browser width as it scrolls in (--inset goes from 1 to 0). */
.project-single__hero { background: linear-gradient(var(--deep) 0 30%, var(--white) 30%); }
.project-single__expand {
	--inset: 0;
	--edge: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
	--mat: clamp(16px, 3.2vw, 44px);
	aspect-ratio: 16 / 9; max-height: 90vh; width: 100%; overflow: hidden;
	display: flex; align-items: center; justify-content: center;
	padding: var(--mat) calc(var(--edge) + var(--mat));
	background: var(--paper);
	clip-path: inset(0 calc(var(--inset) * var(--edge)) round calc(var(--inset) * var(--radius)));
}
.js-projects .project-single__expand { --inset: 1; }
/* The whole image, never cropped, on the Paper band. */
.project-single__expand img {
	width: auto; height: auto; max-width: 100%; max-height: 100%;
	border-radius: 12px; box-shadow: 0 16px 40px rgba(14,47,58,.18);
}

.project-single__body { padding-top: clamp(64px, 9vw, 120px); padding-bottom: var(--section); }
.project-single__body .entry-content { max-width: 760px; margin: 0 auto; }
.project-single__body .entry-content > p:first-child { font-size: 21px; line-height: 1.5; }
.project-single__body .entry-content > .alignwide { max-width: none; margin-left: calc(50% - min(50vw - var(--gutter), var(--wrap) / 2 - var(--gutter))); margin-right: calc(50% - min(50vw - var(--gutter), var(--wrap) / 2 - var(--gutter))); }
.project-single__body .entry-content figure { margin: 2em 0; }
.project-single__body .entry-content img { border-radius: var(--radius); }

/* Next project: a big Deep Teal band, the title drifting sideways with the scroll. */
.project-next { display: block; overflow: hidden; background: var(--deep); color: var(--white); text-decoration: none; padding: clamp(64px, 9vw, 120px) 0; }
.project-next:hover { color: var(--white); }
.project-next .section__label { color: var(--ember); }
.project-next h2 {
	font-family: var(--font-future); font-weight: 500; text-transform: uppercase; letter-spacing: .01em; line-height: 1;
	font-size: clamp(40px, 8vw, 112px); text-wrap: balance; transform: translateX(var(--drift, 0px));
}
.project-next h2 span { color: var(--ember); display: inline-block; transition: transform .3s; }
.project-next:hover h2 span { transform: translateX(.2em); }
.project-next p { margin: 18px 0 0; color: rgba(255,255,255,.75); max-width: 56ch; }

/* Reveals */
[data-reveal] { transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1), clip-path 1.1s cubic-bezier(.7,0,.2,1); }
.reveal-armed [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(36px); }
.reveal-armed [data-reveal="image"]:not(.is-in) { opacity: 1; transform: none; clip-path: inset(22% 0 0 0 round var(--radius)); }
.project-row__art img { scale: 1; transition: transform .6s cubic-bezier(.2,.7,.2,1), scale 1.3s cubic-bezier(.2,.7,.2,1); }
.reveal-armed .project-row__media:not(.is-in) img { scale: 1.08; }

@media (prefers-reduced-motion: reduce) {
	[data-reveal] { transition: none; }
	.project-row__art { transform: none; }
	.project-row__art img { transition: none; }
	.project-next h2 { transform: none; }
	.js-projects .project-single__expand { --inset: 0; }
}