/* ============================================
   jimmorel.com — stylesheet
   Design system: warm light palette, single
   typeface (Inter) throughout. Decided 17 Jun 2026
   (S03). The two callback lines (.pattern p,
   .emphasis) use italic Inter at weight 600 to mark
   them as deliberate echoes, not a second typeface.
   Tokens live in :root — change values here, not
   in the markup, when the palette or type evolves.
   ============================================ */

:root {
	/* colour */
	--color-bg: #fbf8f3;
	--color-text: #1f1b16;
	--color-text-muted: #6b6358;
	--color-accent: #b5562a;
	--color-border: #e8e1d6;

	/* type */
	--font-display:
		"Fraunces", Georgia, serif; /* unused, left in place per S03 handoff */
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* scale */
	--space-unit: 1rem;
	--max-width: 640px;
	--radius: 4px;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--color-text);
	background: var(--color-bg);
	line-height: 1.65;
	font-size: 1.125rem;
}

h1,
h2,
h3 {
	font-family: var(--font-body);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0 0 1rem 0;
}

p {
	margin: 0 0 1.25rem 0;
}

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

a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 3px;
}

.container {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 1.5rem;
}

/* ---------- header ---------- */

.site-header {
	border-bottom: 1px solid var(--color-border);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 1.25rem;
	padding-bottom: 1.25rem;
	max-width: 880px;
}

.logo {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 1.125rem;
	text-decoration: none;
	color: var(--color-text);
}

.site-nav a {
	margin-left: 1.5rem;
	text-decoration: none;
	color: var(--color-text-muted);
	font-size: 0.9375rem;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
	color: var(--color-accent);
}

/* ---------- screens ----------
   Each homepage block is "one short screen, not a
   long-form chapter" per the handoff. Generous
   vertical padding carries that pacing. */

.screen {
	padding: 4.5rem 0;
	border-bottom: 1px solid var(--color-border);
}

.screen:last-of-type {
	border-bottom: none;
}

/* Hero: anchored low-left rather than centered, with
   a vertical accent spine. Needs its own flex layout
   and height, .screen gives it padding only. */
.hero {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: calc(100vh - var(--header-height, 72px));
	position: relative;
}

.hero-spine {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 1.5rem;
	align-items: start;
}

.hero-rule {
	width: 4px;
	grid-row: 1 / span 2;
	align-self: stretch;
	background: var(--color-accent);
}

.hero h1 {
	font-size: 4.25rem;
	max-width: 14ch;
	margin-bottom: 0.5rem;
}

.hero-subhead {
	margin: 0;
	font-size: 1rem;
	font-weight: 400;
	color: var(--color-text-muted);
	line-height: 1.5;
}

.accent-word {
	color: var(--color-accent);
}

@media (prefers-reduced-motion: no-preference) {
	.hero-spine {
		animation: hero-rise 0.7s ease both;
	}
}

@keyframes hero-rise {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ---------- hero scroll cue ---------- */

.hero-scroll-cue {
	position: absolute;
	left: 50%;
	bottom: 2rem;
	transform: translateX(-50%);
	color: var(--color-text-muted);
	line-height: 0;
	animation: hero-scroll-bob 1.8s ease-in-out infinite;
}

.hero-scroll-cue svg {
	width: 20px;
	height: 20px;
	display: block;
}

@keyframes hero-scroll-bob {
	0%,
	100% {
		transform: translateX(-50%) translateY(0);
	}
	50% {
		transform: translateX(-50%) translateY(6px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-scroll-cue {
		animation: none;
	}
}

.story {
	display: flex;
	gap: 1rem;
}

.story-number {
	flex-shrink: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-text-muted);
	line-height: 1.65;
}

.story-inner {
	display: flex;
	gap: 1rem;
}

.story-number {
	flex-shrink: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-text-muted);
	line-height: 1.65;
}

.story p,
.values p {
	font-size: 1.125rem;
}

/* Values line carries the site's sharpest sentence —
   given accent weight (not italic) so it reads as a
   deliberate statement, distinct from the pattern
   callback's italic treatment below. Added when
   colour was extended past hero/CTA (see handoff). */
.values p {
	color: var(--color-text);
	font-weight: 600;
}

/* The pattern-reveal echoes the hero line on purpose
   (see CLAUDE.md / handoff). Setting it apart in
   accent italic marks it as a deliberate callback,
   not a repeated thought. */
.pattern p {
	font-family: var(--font-body);
	font-style: italic;
	font-weight: 600;
	font-size: 1.5rem;
	color: var(--color-accent);
	max-width: 28ch;
}

/* Marks the single reframing sentence within each
   client story — the "problem behind the problem"
   made concrete. One per story, accent weight without
   italic (italic is reserved for .pattern/.emphasis). */
.story-pivot {
	color: var(--color-accent);
	font-weight: 600;
}

.emphasis {
	font-family: var(--font-body);
	font-weight: 600;
	font-style: italic;
}

.cta {
	text-align: center;
}

.cta p {
	font-family: var(--font-display, "Fraunces"), serif;
	font-weight: 700;
	font-size: 1.375rem;
	color: var(--accent, #b5562a);
	margin-bottom: 1.5rem;
}

.cta-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	background: var(--color-accent);
	color: var(--color-bg);
	border: 1px solid var(--color-accent);
	font-weight: 500;
	padding: 0.625rem 1.375rem;
	border-radius: 4px;
	text-decoration: none;
	cursor: pointer;
	transition: padding 0.3s ease;
}

.cta-arrow {
	width: 0;
	margin-right: 0;
	transition: width 0.3s ease, margin-right 0.3s ease;
}

.cta-arrow .shaft {
	position: relative;
	display: block;
	height: 1px;
	background: currentColor;
}

.cta-arrow .shaft::before,
.cta-arrow .shaft::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	height: 1px;
	width: 0;
	background: currentColor;
	transition: width 0.3s ease, transform 0.3s ease;
}

.cta-arrow .shaft::before { transform-origin: top right; }
.cta-arrow .shaft::after  { transform-origin: bottom right; }

.cta-button:hover .cta-arrow {
	width: 20px;
	margin-right: 14px;
}

.cta-button:hover .cta-arrow .shaft::before,
.cta-button:hover .cta-arrow .shaft::after {
	width: 6px;
}

.cta-button:hover .cta-arrow .shaft::before { transform: rotate(40deg); }
.cta-button:hover .cta-arrow .shaft::after  { transform: rotate(-40deg); }

.cta-label {
	position: relative;
	display: inline-grid;
}

.cta-text {
	grid-area: 1 / 1;
	white-space: nowrap;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.cta-text--default {
	opacity: 1;
	transform: translateY(0);
}

.cta-text--email {
	opacity: 0;
	transform: translateY(8px);
}

.cta-button:hover .cta-text--default {
	opacity: 0;
	transform: translateY(-8px);
}

.cta-button:hover .cta-text--email {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.08s;
}

@media (prefers-reduced-motion: reduce) {
	.cta-button,
	.cta-arrow,
	.cta-text,
	.cta-arrow .shaft::before,
	.cta-arrow .shaft::after {
		transition: none !important;
	}
}

/* ---------- scroll reveal ----------
   JS adds .js-reveal to <html> only when
   IntersectionObserver is supported. Without JS
   every section is visible at all times. */

.js-reveal .screen:not(.hero) {
	opacity: 0;
	transform: translateY(14px);
}

@keyframes screen-rise {
	from {
		opacity: 0;
		transform: translateY(28px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.js-reveal .screen.is-visible {
		animation: screen-rise 0.7s ease both;
	}
}

@media (prefers-reduced-motion: reduce) {
	.js-reveal .screen:not(.hero) {
		opacity: 1;
		transform: none;
	}
}

/* ---------- thin pages (About / Contact) ---------- */

.page-thin {
	min-height: 40vh;
}

.placeholder {
	color: var(--color-text-muted);
	font-style: italic;
}

/* ---------- footer ---------- */

.site-footer {
	padding: 2rem 0;
}

.site-footer p {
	margin: 0;
	font-size: 0.875rem;
	color: var(--color-text-muted);
}

/* ---------- responsive ---------- */

@media (max-width: 480px) {
	body {
		font-size: 1rem;
	}

	.hero h1 {
		font-size: 2.5rem;
		margin-bottom: 2rem;
	}

	.pattern p {
		font-size: 1.25rem;
	}

	.cta p {
		font-size: 1.5rem;
	}

	.screen {
		padding: 3rem 0;
	}
}