/* ==========================================================================
   Fangio the Aussie — hand-written CSS. Zero-build, no frameworks.
   Red / black / white. Solid colours only: no gradients anywhere.
   Sections: Tokens · Base · Utilities · Header · Hero · Reels · Photos ·
   About · Connect · Footer · Lightbox · Reveal · Small screens · Motion
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
	--red: #C42B35;
	--red-dark: #A2222B;
	/* The brand red only reaches 3.4:1 on the ink background — under AA for
	   anything below large-text size. This lift clears 5.1:1 on #111. */
	--red-on-dark: #DE5A62;
	--ink: #111111;
	--body-c: #3D3D3D;
	--muted: #6E6E6E;
	/* --muted on ink only reaches ~3:1; this clears 6:1 for secondary text. */
	--muted-dark: #9A9A9A;
	--white: #FFFFFF;
	--line: #E3E3E3;
	--line-dark: #2E2E2E;

	--container: min(1140px, 92vw);
	--header-h: 76px;

	/* Drives the hero wordmark. Sized for the half-width text column, and set
	   larger than the old face needed: Cormorant's small cap height makes it
	   read a size down at the same px. */
	--word-size: clamp(5.5rem, 15.1vw, 13.2rem);


	/* One family site-wide; hierarchy comes from weight and size, not from a
	   second face. Both names are kept so the display/body split still reads
	   in the rules below. */
	--font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--font-body: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}

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

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--white);
	color: var(--body-c);
	font-family: var(--font-body);
	font-optical-sizing: auto;
	/* Cormorant runs small and light: at the old 17px/400 the body copy read
	   faint, so paragraphs sit a step up in both size and weight. */
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
	font-family: var(--font-display);
	font-weight: 400;
	color: var(--ink);
	line-height: 1.05;
	letter-spacing: -0.015em;
	margin: 0 0 0.5em;
}

h1 { font-size: var(--word-size); }
h2 { font-size: clamp(2.25rem, 5vw, 3.75rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a {
	color: var(--red);
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}
a:hover { color: var(--red-dark); }

img, video { max-width: 100%; display: block; }

::selection { background: var(--red); color: var(--white); }

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

.skip-link {
	position: absolute;
	left: -999px;
	top: 0;
	z-index: 200;
	background: var(--ink);
	color: var(--white);
	padding: 0.6rem 1.1rem;
	text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---------- Utilities ---------- */
.container { width: var(--container); margin-inline: auto; }

.section {
	padding: clamp(4.5rem, 10vw, 7.5rem) 0;
	scroll-margin-top: var(--header-h);
}
.section--dark {
	background: var(--ink);
	color: #C9C9C9;
}
.section--dark h2 { color: var(--white); }

/* Sections alternate white / black, so every component that carries an ink
   colour or a hairline needs a dark-context counterpart. Scoped to the
   modifier rather than to a section id, so reordering the page stays safe. */
.section--dark .lede { color: var(--red-on-dark); }
/* Body links inherit the brand red, which only reaches 3.4:1 on the ink
   background — the same reason --red-on-dark exists for the ledes. Photo tiles
   are links too, but they carry an image and a caption that sets its own
   muted colour, so they are left out of it. */
.section--dark a:not(.tile) { color: var(--red-on-dark); }
.section--dark a:not(.tile):hover { color: var(--white); }
.section--dark .about-caption,
.section--dark .tile-cap,
.section--dark .tile--placeholder,
.section--dark .reel--placeholder { color: var(--muted-dark); }
.section--dark .tile--placeholder,
.section--dark .reel--placeholder { border-color: var(--line-dark); }
.section--dark .tile-media { background: transparent; }

.section-head { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.section-head--center { text-align: center; }
.section-head h2 { margin-bottom: 0.25em; }
.section-head .lede { margin-bottom: 0; }

.noscript-note { text-align: center; margin-top: 1.5rem; }

.dot { color: var(--red); }

/* ---------- Header ---------- */
/* The bar is present from the first screen. Over the hero it rides on the page's
   own white with no chrome; once you scroll it takes a solid background and a
   hairline so it stays legible over the dark sections and the photo grids. */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	height: var(--header-h);
	display: flex;
	align-items: center;
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
.site-header.is-revealed {
	background: var(--white);
	border-bottom-color: var(--line);
}
.site-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.wordmark {
	font-family: var(--font-display);
	font-size: 1.6rem;
	line-height: 1;
	color: var(--ink);
	text-decoration: none;
	white-space: nowrap;
}

.site-nav { display: flex; align-items: center; gap: 2rem; }

.nav-links {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 2rem;
}
.nav-links a {
	font-size: 0.95rem;
	color: var(--ink);
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: 1px solid transparent;
}
.nav-links a:hover,
.nav-links a.is-current {
	color: var(--red);
	border-bottom-color: var(--red);
}

/* Instagram and email sit past the links as icons only — same ink as the text,
   red on hover, so they read as part of the same row rather than as buttons. */
.nav-social {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0.9rem;
}
.nav-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	color: var(--ink);
	text-decoration: none;
	border: 1px solid transparent;
	transition: color 0.18s ease, border-color 0.18s ease;
}
.nav-icon:hover {
	color: var(--red);
	border-color: var(--red);
}

.nav-toggle { display: none; }

/* ---------- Hero ---------- */
.hero {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 2rem 0 5rem;
}
.hero .container { display: flex; flex-direction: column; align-items: center; }

/* Copy on the left, cutout on the right. The pair is centred as one group so
   the two sit close together instead of being pushed to opposite margins. */
.hero-stage {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: clamp(1rem, 3vw, 2.75rem);
	width: 100%;
}
/* The "F" hangs on its own left side bearing so it starts on the container's
   optical edge. That correction lives here rather than as a text-indent on
   .hero-word, because an indent shifts the word's glyphs inside its own box —
   which would then throw off the tagline centred under it. As a margin it
   moves word and tagline together and the layout is unchanged. */
.hero-text {
	flex: 0 1 auto;
	min-width: 0;
	text-align: left;
	margin-left: calc(var(--word-size) * -0.03);
}
.hero-word {
	font-weight: 700;
	margin: 0;
	line-height: 0.86;
	letter-spacing: -0.01em;
}
/* The reference for the red-under-the-heading pattern the sections follow. */
.hero-tagline {
	font-weight: 400;
	font-size: clamp(1.05rem, 2.4vw, 1.75rem);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--red);
	/* The wordmark's 0.86 line-height makes its box shorter than the glyphs, so
	   the "g" tail hangs 0.171em past the bottom. Clear that plus an optical
	   gap, in units of the wordmark itself, so resizing it can't reintroduce
	   the collision. */
	margin: calc(var(--word-size) * 0.26) 0 0;
	/* Centred under the wordmark at every width: .hero-text is sized by its
	   widest child — the wordmark — so centring within it centres under the
	   word. */
	text-align: center;
}
/* The photo is a cutout: the WebP carries its own alpha, and the JPEG the
   <picture> falls back to is backed with white, which on a white page reads
   the same. Nothing here has to shape him. */
.hero-photo {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	/* The vw cap keeps him from crowding the copy on tall, narrow viewports. */
	height: min(clamp(260px, 56svh, 560px), 48vw);
	width: auto;
}
/* <picture> is the flex item now; it should size to the photo and nothing
   more, and its inline layout would otherwise add a descender gap. */
.hero-stage picture {
	display: flex;
	flex: 0 0 auto;
}

/* The red line that sits under every section heading — the same shape the
   hero has, where "Dog UGC Creator" follows the wordmark. */
.lede {
	font-family: var(--font-display);
	font-style: italic;
	font-size: clamp(1.25rem, 2.2vw, 1.6rem);
	line-height: 1.4;
	color: var(--red);
	margin-bottom: 1.1em;
}

.scroll-cue {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 1.75rem;
	color: var(--red);
	animation: cue-bob 2.4s ease-in-out infinite;
}
@keyframes cue-bob {
	0%, 100% { transform: translate(-50%, 0); }
	50% { transform: translate(-50%, 8px); }
}

/* ---------- Reels ---------- */
/* Pinned to 4 or 2 columns for the same reason as .photo-grid — see the note
   there. Both grids share a breakpoint and a two-column cap so the two blocks
   stay the same width down the page. */
.video-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;
	max-width: 1040px;
	margin-inline: auto;
}
.reel {
	position: relative;
	aspect-ratio: 9 / 16;
	overflow: hidden;
	background: #000;
	border: 1px solid var(--line-dark);
	margin: 0;
}
.reel video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.reel-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 62px;
	height: 62px;
	border-radius: 50%;
	border: 0;
	cursor: pointer;
	background: var(--red);
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.18s ease;
}
.reel-play:hover { background: var(--white); color: var(--red); }
.reel-title {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0.7rem 0.9rem;
	background: var(--ink);
	color: var(--white);
	font-size: 0.85rem;
	line-height: 1.4;
	transition: opacity 0.18s ease;
}
.reel.is-playing .reel-play,
.reel.is-playing .reel-title,
.reel.has-played .reel-title {
	opacity: 0;
	pointer-events: none;
}
.reel--placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 1.5rem;
	text-align: center;
	background: transparent;
	border: 1px dashed var(--line);
	color: var(--muted);
}
.reel--placeholder p { margin: 0; font-size: 0.9rem; }

/* Small red square standing in for missing media. */
.ph-mark {
	width: 14px;
	height: 14px;
	background: var(--red);
	flex: none;
}

/* ---------- Photos ---------- */
/* Same 1040px cap as the reels, which lands the four tiles in one clean row
   instead of leaving a fifth column empty. */
/* The grid always holds exactly GRID_SIZE (4) tiles, so the column count is
   pinned to 4 or 2 rather than derived: an auto-fill track list passes through
   a 3-column band on the way down and strands the fourth tile alone on a
   second row. */
.photo-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;
	max-width: 1040px;
	margin-inline: auto;
}
/* The tile is photo + caption stacked; only the photo box is shaped and
   clipped, so the caption sits below the image instead of over it. */
.tile {
	position: relative;
	display: block;
	text-decoration: none;
}
/* 2:3 to match the photos as shot, and `contain` so a tile never crops one:
   anything off that ratio letterboxes against the section instead of losing
   its edges. Shipped photos are sized to the tile, not cropped to it. */
.tile-media {
	display: block;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	background: var(--white);
}
.tile-media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.4s ease;
}
.tile:hover .tile-media img { transform: scale(1.04); }
/* Always visible, under the photo rather than over it — the same treatment
   the About photo's caption gets. */
.tile-cap {
	display: block;
	font-family: var(--font-display);
	font-style: italic;
	font-size: 0.95rem;
	line-height: 1.4;
	color: var(--muted);
	margin-top: 0.6rem;
}
.tile--placeholder {
	aspect-ratio: 2 / 3;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.9rem;
	padding: 1.25rem;
	text-align: center;
	border: 1px dashed var(--line);
	color: var(--muted);
}
.tile--placeholder p { margin: 0; font-size: 0.88rem; }

/* ---------- About ---------- */
.about-grid {
	display: grid;
	/* Even columns: the photo runs landscape, so a narrow slot would shrink it
	   to a strip. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2.5rem, 6vw, 5rem);
	align-items: start;
}
.about-photo { overflow: hidden; }
.about-photo img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.about-caption {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1rem;
	color: var(--muted);
	margin: 0.75rem 0 0;
}
.about-copy h2 { margin-bottom: 0.25em; }

/* ---------- Connect ---------- */
.connect-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(2.5rem, 6vw, 5rem);
	align-items: center;
}
.connect-photo { overflow: hidden; }
.connect-photo img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}
.connect-copy h2 { margin-bottom: 0.6em; }

.social-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
}
.social-link {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	border: 1px solid var(--line);
	padding: 0.7rem 1.15rem;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink);
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.social-link:hover,
.social-link:focus-visible {
	background: var(--red);
	border-color: var(--red);
	color: var(--white);
}
.social-link svg { flex: 0 0 auto; }

/* ---------- Footer ---------- */
.site-footer {
	background: var(--ink);
	color: #B9B9B9;
	padding: clamp(3.5rem, 7vw, 5rem) 0 2rem;
}
.footer-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 2.5rem 3rem;
	margin-bottom: 3rem;
}
.site-footer .wordmark { color: var(--white); font-size: 1.75rem; }
.footer-tag { margin-top: 0.75rem; max-width: 24em; }
.footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}
.site-footer a {
	color: var(--white);
	text-decoration: none;
	border-bottom: 1px solid var(--line-dark);
}
.site-footer a:hover { color: var(--red); border-bottom-color: var(--red); }
.footer-bottom {
	border-top: 1px solid var(--line-dark);
	padding-top: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.6rem 2rem;
	font-size: 0.88rem;
}
.footer-bottom p { margin: 0; }

/* ---------- Lightbox ---------- */
.lightbox {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	opacity: 0;
	/* Inert while it fades out — the element stays in the layer for the length
	   of the transition, and a full-viewport overlay would otherwise swallow
	   the click that lands right after a close. */
	pointer-events: none;
	transition: opacity 0.2s ease;
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox-backdrop {
	position: absolute;
	inset: 0;
	background: var(--ink);
	cursor: zoom-out;
}
.lightbox-figure {
	position: relative;
	z-index: 1;
	margin: 0;
	text-align: center;
}
.lightbox-figure img {
	max-width: min(92vw, 860px);
	max-height: 80vh;
	width: auto;
	height: auto;
	object-fit: contain;
	margin-inline: auto;
}
.lightbox-figure figcaption {
	font-family: var(--font-display);
	font-style: italic;
	color: var(--white);
	font-size: 1.05rem;
	margin-top: 1rem;
}
.lightbox-figure figcaption:empty { display: none; }
.lightbox-btn {
	position: absolute;
	z-index: 2;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 0;
	cursor: pointer;
	background: var(--white);
	color: var(--ink);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.lightbox-btn:hover { background: var(--red); color: var(--white); }
.lightbox-close { top: 1.25rem; right: 1.25rem; }
.lightbox-prev { left: 1.25rem; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 1.25rem; top: 50%; transform: translateY(-50%); }

body.lightbox-open { overflow: hidden; }

/* ---------- Reveal ---------- */
.js .reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s ease, transform 0.6s ease;
	transition-delay: var(--reveal-delay, 0ms);
}
.js .reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* ---------- Small screens ---------- */
@media (max-width: 900px) {
	.nav-toggle {
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 44px;
		height: 44px;
		padding: 0 10px;
		background: transparent;
		border: 1px solid var(--ink);
		cursor: pointer;
		position: relative;
		z-index: 60;
	}
	.nav-toggle span {
		display: block;
		height: 1.5px;
		width: 100%;
		background: var(--ink);
		transition: transform 0.25s ease, opacity 0.25s ease;
	}
	body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
	body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
	body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

	.site-nav {
		position: fixed;
		inset: 0;
		z-index: 40;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2.5rem;
		background: var(--white);
		opacity: 0;
		pointer-events: none;
		/* visibility, not just opacity: a transparent overlay still hands its
		   links to the keyboard and to screen readers, so a closed menu would
		   put six invisible stops ahead of the toggle in the tab order. It is
		   transitioned so the fade still plays, then flips at the end. */
		visibility: hidden;
		transition: opacity 0.22s ease, visibility 0s linear 0.22s;
	}
	body.nav-open .site-nav {
		opacity: 1;
		pointer-events: auto;
		visibility: visible;
		transition: opacity 0.22s ease, visibility 0s linear 0s;
	}
	body.nav-open { overflow: hidden; }
	.nav-links {
		flex-direction: column;
		align-items: center;
		gap: 1.75rem;
	}
	.nav-links a {
		font-family: var(--font-display);
		font-size: 2rem;
	}
	/* In the overlay the icons get room to be tapped: 44px targets, sitting in a
	   row under the stacked links. */
	.nav-social { gap: 1.5rem; }
	.nav-icon {
		width: 44px;
		height: 44px;
		border-color: var(--line);
	}
	.nav-icon svg { width: 24px; height: 24px; }

	/* Four across straight to a 2x2 block — never 3 + 1. The tighter cap stops
	   two-per-row tiles from ballooning to half the container. */
	.photo-grid,
	.video-grid {
		grid-template-columns: repeat(2, 1fr);
		max-width: 620px;
	}
}

@media (max-width: 820px) {
	.about-grid,
	.connect-grid { grid-template-columns: 1fr; }
	.about-media,
	.connect-media { max-width: 420px; }
	/* Stacked, a capped media block would otherwise hug the left edge of a
	   full-width column. Centre the photos, and the caption that goes with the
	   about one, on the page. The explicit width matters: auto margins turn a
	   grid item shrink-to-fit, which would size each block to its image's
	   intrinsic width instead of the 420px cap. */
	.about-media,
	.connect-media {
		width: 100%;
		margin-inline: auto;
	}
	.about-caption { text-align: center; }
}

@media (max-width: 640px) {
	/* Side-by-side runs out of room: stack the copy over the cutout and let
	   the wordmark go back to full width. */
	:root {
		--word-size: clamp(5.1rem, 28.8vw, 10.8rem);
		/* A percentage gutter shrinks as the screen does — 92vw leaves only 15px
		   a side on a 375px phone. Below here it becomes a fixed 24px instead,
		   so the smaller the device the more it gains. */
		--container: min(1140px, 100vw - 3rem);
	}
	.hero-stage { flex-direction: column; align-items: center; }
	/* The whole block centres here, so the side-bearing pull would just knock
	   it off centre. The tagline stays centred under the word either way. */
	.hero-text {
		text-align: center;
		margin-left: 0;
	}
	/* Stacked and centred, the cutout reads off-centre: his visual mass lands
	   right of the frame's middle. Nudge the render left to centre the dog
	   rather than the box. The alpha centroid of the current photo sits 4.7%
	   of its width right of centre, which is ~10px at this render size —
	   re-measure if the photo is replaced. */
	.hero-photo {
		height: clamp(240px, 46svh, 400px);
		transform: translateX(-10px);
	}

	/* Still 2x2, inherited above — only the gap tightens on small screens. */
	.photo-grid,
	.video-grid { gap: 0.75rem; max-width: none; }
	.footer-bottom { flex-direction: column; }
	.lightbox-prev { left: 0.6rem; }
	.lightbox-next { right: 0.6rem; }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	.scroll-cue { animation: none; }
	.js .reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}