/* ==========================================================================
   Portfolio Child (Divi 5) — bold & creative
   Tokens: cobalt hero, sunflower actions, ink outlines with hard offset shadows.
   ========================================================================== */

:root {
	--pf-cobalt: #2433d6;
	--pf-cobalt-deep: #1a25a3;
	--pf-sun: #ffc93c;
	--pf-ink: #14163a;
	--pf-paper: #ffffff;
	--pf-mist: #eef0ff;
	--pf-muted: #4b4f72;

	--pf-display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
	--pf-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

	--pf-line: 3px;
	--pf-shadow: 8px 8px 0 var(--pf-ink);
	--pf-r-card: 16px;
	--pf-r-input: 8px;
	--pf-measure: 66ch;
}

/* Base type: only within portfolio components and Divi content, so Divi defaults elsewhere still work. */
.pf-hero, .pf-projects, .pf-case, .pf-timeline, .pf-skills, .pf-contact, .pf-section-title {
	font-family: var(--pf-body);
	color: var(--pf-ink);
	-webkit-font-smoothing: antialiased;
}

.pf-hero *, .pf-projects *, .pf-case *, .pf-timeline *, .pf-skills *, .pf-contact * {
	box-sizing: border-box;
}

/* Section headings you add in Divi: give the Text module the class "pf-section-title". */
.pf-section-title h2,
h2.pf-section-title {
	font-family: var(--pf-display);
	font-variation-settings: "wdth" 80;
	font-weight: 800;
	font-size: clamp(2.4rem, 6vw, 4.5rem);
	line-height: 0.95;
	letter-spacing: -0.02em;
	color: var(--pf-ink);
	margin: 0 0 0.4em;
	padding: 0;
}

/* ---------- Buttons ---------- */
.pf-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.85em 1.5em;
	border: var(--pf-line) solid var(--pf-ink);
	border-radius: 999px;
	font-family: var(--pf-body);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.1;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pf-btn--primary { background: var(--pf-sun); color: var(--pf-ink); box-shadow: 4px 4px 0 var(--pf-ink); }
.pf-btn--ink { background: var(--pf-ink); color: var(--pf-paper); box-shadow: 4px 4px 0 var(--pf-sun); }
.pf-btn--ghost { background: transparent; color: inherit; border-color: currentColor; }
.pf-btn--primary:hover, .pf-btn--ink:hover { transform: translate(-2px, -2px); }
.pf-btn--primary:hover { box-shadow: 6px 6px 0 var(--pf-ink); }
.pf-btn--ink:hover { box-shadow: 6px 6px 0 var(--pf-sun); }
.pf-btn--ghost:hover { background: rgba(255, 255, 255, 0.12); }
.pf-btn__meta { font-size: 0.75em; font-weight: 600; opacity: 0.75; }

.pf-hero a:focus-visible,
.pf-projects a:focus-visible,
.pf-case a:focus-visible,
.pf-contact a:focus-visible,
.pf-btn:focus-visible {
	outline: 3px solid var(--pf-sun);
	outline-offset: 4px;
	box-shadow: 0 0 0 7px var(--pf-ink);
}

/* ---------- Hero (the one loud moment) ---------- */
.pf-hero {
	background: var(--pf-cobalt);
	color: var(--pf-paper);
	padding: clamp(4rem, 10vw, 8rem) clamp(1.25rem, 5vw, 4rem) clamp(3.5rem, 8vw, 6rem);
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
/* Oversized sunflower ring sits behind the name. */
.pf-hero::after {
	content: "";
	position: absolute;
	right: -6vw;
	bottom: -10vw;
	width: 46vw;
	height: 46vw;
	border: clamp(14px, 2.4vw, 34px) solid var(--pf-sun);
	border-radius: 50%;
	z-index: -1;
}
.pf-hero__inner { max-width: 1200px; margin: 0 auto; }

.pf-hero__status {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	margin: 0 0 2rem;
	padding: 0.45em 1em 0.45em 0.8em;
	background: var(--pf-paper);
	color: var(--pf-ink);
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.95rem;
}
.pf-dot {
	width: 0.7em;
	height: 0.7em;
	border-radius: 50%;
	background: #1fae5b;
	box-shadow: 0 0 0 0 rgba(31, 174, 91, 0.6);
	animation: pf-pulse 2.4s ease-out infinite;
}
@keyframes pf-pulse {
	0% { box-shadow: 0 0 0 0 rgba(31, 174, 91, 0.55); }
	70%, 100% { box-shadow: 0 0 0 10px rgba(31, 174, 91, 0); }
}

.pf-hero__name {
	font-family: var(--pf-display);
	font-weight: 800;
	font-variation-settings: "wdth" 75, "opsz" 96;
	font-size: clamp(4rem, 15vw, 13.5rem);
	line-height: 0.82;
	letter-spacing: -0.035em;
	color: var(--pf-paper);
	margin: 0;
	padding: 0;
	max-width: 9ch;
	text-wrap: balance;
}
.pf-hero__headline {
	font-family: var(--pf-display);
	font-variation-settings: "wdth" 90;
	font-weight: 600;
	font-size: clamp(1.35rem, 2.6vw, 2.1rem);
	line-height: 1.15;
	max-width: 28ch;
	margin: 1.6rem 0 0;
	padding: 0;
	color: var(--pf-sun);
}
.pf-hero__intro {
	max-width: 52ch;
	margin-top: 1.25rem;
	font-size: 1.125rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.88);
}
.pf-hero__intro p { padding: 0; margin: 0 0 0.8em; }
.pf-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.25rem; }
.pf-hero__actions .pf-btn--ghost { color: var(--pf-paper); }
.pf-hero__links {
	display: flex;
	gap: 1.5rem;
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
}
.pf-hero__links a {
	color: var(--pf-paper);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
}
.pf-hero__links a:hover { color: var(--pf-sun); }

/* ---------- Project cards ---------- */
.pf-projects {
	list-style: none;
	margin: 0;
	padding: 0 8px 8px 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
}
.pf-card {
	border: var(--pf-line) solid var(--pf-ink);
	border-radius: var(--pf-r-card);
	box-shadow: var(--pf-shadow);
	overflow: hidden;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
	padding: 0 !important; /* Divi adds padding to li inside text modules */
}
.pf-card:hover { transform: translate(-3px, -3px); box-shadow: 11px 11px 0 var(--pf-ink); }
.pf-card--cobalt { background: var(--pf-cobalt); color: var(--pf-paper); }
.pf-card--sun { background: var(--pf-sun); color: var(--pf-ink); }
.pf-card--paper { background: var(--pf-paper); color: var(--pf-ink); }

.pf-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.pf-card__media { aspect-ratio: 16 / 10; overflow: hidden; border-bottom: var(--pf-line) solid var(--pf-ink); background: var(--pf-mist); }
.pf-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-card__body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.pf-card__year { margin: 0; padding: 0; font-weight: 600; font-size: 0.9rem; opacity: 0.8; }
.pf-card__title {
	font-family: var(--pf-display);
	font-variation-settings: "wdth" 85;
	font-weight: 750;
	font-size: clamp(1.6rem, 2.4vw, 2rem);
	line-height: 1.02;
	color: inherit;
	margin: 0;
	padding: 0;
}
.pf-card__summary { margin: 0; padding: 0; line-height: 1.5; font-size: 1rem; }

.pf-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: auto 0 0; padding: 0.6rem 0 0; }
.pf-tags li {
	padding: 0.25em 0.75em !important;
	border: 2px solid currentColor;
	border-radius: 999px;
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1.3;
}

/* ---------- Case study ---------- */
.pf-case { max-width: 960px; }
.pf-case__meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1.25rem 2rem;
	margin: 0 0 2rem;
	padding: 1.5rem 1.75rem;
	background: var(--pf-mist);
	border: var(--pf-line) solid var(--pf-ink);
	border-radius: var(--pf-r-card);
}
.pf-case__meta dt { font-size: 0.9rem; font-weight: 600; color: var(--pf-muted); margin-bottom: 0.2rem; }
.pf-case__meta dd { margin: 0; font-weight: 700; font-size: 1.1rem; }
.pf-case__stack { grid-column: 1 / -1; }
.pf-case__stack .pf-tags { margin: 0; padding-top: 0.25rem; }
.pf-case__links { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0 0 2.5rem; padding: 0; }

.pf-results {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1.25rem;
	margin: 0 0 3rem;
	padding: 0;
}
.pf-results li { padding: 0 0 0 1rem !important; border-left: 6px solid var(--pf-sun); }
.pf-results__value {
	display: block;
	font-family: var(--pf-display);
	font-variation-settings: "wdth" 80;
	font-weight: 800;
	font-size: clamp(2.2rem, 4vw, 3.2rem);
	line-height: 1;
	color: var(--pf-cobalt);
}
.pf-results__label { display: block; margin-top: 0.35rem; color: var(--pf-muted); font-weight: 600; }

.pf-case__section { margin: 0 0 2.75rem; }
.pf-case__section h2 {
	font-family: var(--pf-display);
	font-variation-settings: "wdth" 85;
	font-weight: 750;
	font-size: clamp(1.75rem, 3vw, 2.4rem);
	line-height: 1.05;
	margin: 0 0 0.75rem;
	padding: 0;
	color: var(--pf-ink);
}
.pf-prose { max-width: var(--pf-measure); font-size: 1.1rem; line-height: 1.7; }
.pf-prose p { padding: 0; margin: 0 0 1em; }
.pf-prose code { background: var(--pf-mist); padding: 0.1em 0.35em; border-radius: 4px; font-size: 0.92em; }

.pf-gallery { display: grid; gap: 2rem; margin-top: 1rem; }
.pf-gallery figure { margin: 0; }
.pf-gallery img {
	display: block;
	width: 100%;
	height: auto;
	border: var(--pf-line) solid var(--pf-ink);
	border-radius: var(--pf-r-card);
	box-shadow: var(--pf-shadow);
}
.pf-gallery figcaption { margin-top: 1rem; color: var(--pf-muted); font-size: 0.95rem; }

/* ---------- Experience timeline (a real sequence, so it gets a spine) ---------- */
.pf-timeline {
	list-style: none;
	margin: 0;
	padding: 0 0 0 2.25rem !important;
	border-left: var(--pf-line) solid var(--pf-ink);
	max-width: 820px;
}
.pf-timeline__item { position: relative; padding: 0 0 2.75rem !important; }
.pf-timeline__item:last-child { padding-bottom: 0 !important; }
.pf-timeline__item::before {
	content: "";
	position: absolute;
	left: calc(-2.25rem - 11px);
	top: 0.2rem;
	width: 19px;
	height: 19px;
	border-radius: 50%;
	background: var(--pf-paper);
	border: var(--pf-line) solid var(--pf-ink);
}
.pf-timeline__item.is-current::before { background: var(--pf-sun); }
.pf-timeline__dates { margin: 0; padding: 0; font-weight: 700; color: var(--pf-cobalt); font-size: 0.95rem; }
.pf-timeline__role {
	font-family: var(--pf-display);
	font-variation-settings: "wdth" 85;
	font-weight: 750;
	font-size: clamp(1.4rem, 2.4vw, 1.85rem);
	line-height: 1.1;
	color: var(--pf-ink);
	margin: 0.3rem 0 0.2rem;
	padding: 0;
}
.pf-timeline__company { margin: 0; padding: 0; font-weight: 600; font-size: 1.05rem; }
.pf-timeline__location { color: var(--pf-muted); font-weight: 500; margin-left: 0.6em; }
.pf-timeline__summary { margin: 0.75rem 0 0; padding: 0; max-width: var(--pf-measure); line-height: 1.6; }
.pf-timeline__highlights { margin: 0.75rem 0 0; padding: 0 0 0 1.2em !important; line-height: 1.55; max-width: var(--pf-measure); }
.pf-timeline__highlights li { padding: 0 0 0.35em !important; }
.pf-timeline__highlights li::marker { color: var(--pf-cobalt); }
.pf-timeline__tech { margin: 0.75rem 0 0; padding: 0; font-size: 0.92rem; color: var(--pf-muted); }

/* ---------- Skills ---------- */
.pf-skills {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: clamp(1.75rem, 4vw, 3rem);
}
.pf-skills__heading {
	font-family: var(--pf-display);
	font-variation-settings: "wdth" 85;
	font-weight: 750;
	font-size: 1.5rem;
	color: var(--pf-ink);
	margin: 0 0 0.75rem;
	padding: 0 0 0.5rem;
	border-bottom: var(--pf-line) solid var(--pf-ink);
}
.pf-skills__list { list-style: none; margin: 0; padding: 0 !important; }
.pf-skill {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 0.15rem 1rem;
	padding: 0.6rem 0 !important;
	border-bottom: 1px solid rgba(20, 22, 58, 0.14);
}
.pf-skill__name { font-weight: 600; }
.pf-skill__meter { display: inline-flex; gap: 3px; }
.pf-skill__meter span { width: 14px; height: 14px; border: 2px solid var(--pf-ink); border-radius: 3px; background: transparent; }
.pf-skill__meter span.is-on { background: var(--pf-cobalt); }
.pf-skill__years { grid-column: 1 / -1; font-size: 0.85rem; color: var(--pf-muted); }

/* ---------- Contact (Gravity Forms) ---------- */
.pf-contact { max-width: 720px; }
.pf-contact .gform_wrapper.gravity-theme {
	--gf-color-primary: var(--pf-cobalt);
	--gf-color-in-ctrl-primary: var(--pf-cobalt);
	--gf-ctrl-border-color: var(--pf-ink);
	--gf-radius: var(--pf-r-input);
	margin: 0;
}
.pf-contact .gform_wrapper .gfield_label,
.pf-contact .gform_wrapper legend.gfield_label {
	font-family: var(--pf-body);
	font-weight: 700;
	font-size: 1rem;
	color: var(--pf-ink);
}
.pf-contact .gform_wrapper input[type="text"],
.pf-contact .gform_wrapper input[type="email"],
.pf-contact .gform_wrapper select,
.pf-contact .gform_wrapper textarea {
	font-family: var(--pf-body);
	font-size: 1.05rem;
	padding: 0.8em 0.95em;
	background: var(--pf-paper);
	color: var(--pf-ink);
	border: var(--pf-line) solid var(--pf-ink);
	border-radius: var(--pf-r-input);
	box-shadow: none;
}
.pf-contact .gform_wrapper input:focus,
.pf-contact .gform_wrapper select:focus,
.pf-contact .gform_wrapper textarea:focus {
	outline: none;
	border-color: var(--pf-cobalt);
	box-shadow: 0 0 0 4px var(--pf-sun);
}
.pf-contact .gform_wrapper .gform_footer { margin-top: 1.5rem; padding: 0; }
.pf-contact .gform_wrapper .gform_footer .pf-btn { font-size: 1.05rem; }
.pf-contact .gform_wrapper .gfield_required { color: var(--pf-muted); font-weight: 500; }
.pf-contact .gform_wrapper .gform_validation_errors {
	border: var(--pf-line) solid #c21f3a;
	border-radius: var(--pf-r-input);
	box-shadow: none;
}
.pf-contact .gform_confirmation_message {
	padding: 1.5rem 1.75rem;
	background: var(--pf-sun);
	border: var(--pf-line) solid var(--pf-ink);
	border-radius: var(--pf-r-card);
	box-shadow: var(--pf-shadow);
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--pf-ink);
}
.pf-contact__alt { margin-top: 1.5rem; padding: 0; color: var(--pf-muted); }
.pf-contact__alt a { color: var(--pf-cobalt); font-weight: 700; }

/* ---------- Editor-only empty states ---------- */
.pf-empty {
	padding: 1rem 1.25rem;
	border: 2px dashed var(--pf-muted);
	border-radius: var(--pf-r-input);
	color: var(--pf-muted);
	font-family: var(--pf-body);
}

/* ---------- Small screens ---------- */
@media (max-width: 640px) {
	.pf-hero::after { width: 80vw; height: 80vw; right: -30vw; bottom: -30vw; }
	.pf-hero__actions .pf-btn { flex: 1 1 100%; justify-content: center; }
	.pf-card, .pf-card:hover { box-shadow: 6px 6px 0 var(--pf-ink); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.pf-dot { animation: none; }
	.pf-btn, .pf-card { transition: none; }
	.pf-btn:hover, .pf-card:hover { transform: none; }
}

/* ---------- Fallback templates ---------- */
.pf-single, .pf-archive { padding: clamp(3rem, 7vw, 5rem) 0; }
.pf-single__header { margin-bottom: 2rem; }
.pf-single__header h1.pf-section-title { font-size: clamp(2.8rem, 8vw, 6rem); }
.pf-single__lede { font-family: var(--pf-body); font-size: 1.3rem; line-height: 1.45; max-width: 46ch; color: var(--pf-muted); padding: 0; }