/* ==========================================================================
   Roar Folio – Josiah Gana
   Palette "Financial Stability": navy #0A3C6E, white, blue #1783C1, charcoal #333333,
   with #126FA6 for small accent text and light tints of the blue (#5DB1E3, #7CC0E8)
   for accents on navy, where #1783C1 is too dark to read. Source Code Pro headings and
   uppercase micro-labels for a developer feel, with a blue italic accent word; DM Sans body;
   grain, hairline rules before eyebrows, ghost type, hairline grids.
   ========================================================================== */

:root {
	--jg-cream: #ffffff;
	--jg-sand: #f2f6fa;
	--jg-primary: #1783c1;
	--jg-navy: #0a3c6e;
	--jg-charcoal: #333333;
	--jg-blue: #5db1e3;
	--jg-sky: #7cc0e8;
	--jg-hair: color-mix(in srgb, currentColor 18%, transparent);

	/* Fonts: one monospace family for headings and labels, DM Sans for reading. */
	--fo-font-display: "Source Code Pro", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	--fo-font-serif: "Source Code Pro", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	--fo-font-mono: "Source Code Pro", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	--fo-font-body: "DM Sans", system-ui, sans-serif;
}

/* ------------------------------------------------------------------- Type */

body {
	font-weight: 300;
}

strong,
b {
	font-weight: 600;
}

h1,
h2,
h3,
.fo-hero__title,
.fo-head__title,
.fo-pagehero__title,
.fo-contact__title,
.fo-card__title,
.fo-stat__value,
.fo-journey__marker,
.fo-footer__marquee .fo-marquee__item {
	font-weight: 700;
	letter-spacing: -.04em;
}

.fo-hero__title {
	font-size: clamp(2.25rem, 5.4vw, 5.25rem);
	line-height: 1.04;
}

.fo-pagehero__title {
	font-size: clamp(2.125rem, 5vw, 4.75rem);
	line-height: 1.06;
}

.fo-head__title {
	font-size: clamp(1.875rem, 3.6vw, 3.375rem);
	line-height: 1.1;
}

.fo-contact__title {
	font-size: clamp(2.125rem, 5.6vw, 5.5rem);
	line-height: 1.04;
}

.fo-card__title {
	font-size: clamp(1.625rem, 2.8vw, 2.625rem);
}

.fo-stat__value {
	font-size: clamp(2.5rem, 4.6vw, 4.25rem);
}

.fo-footer__marquee .fo-marquee__item {
	font-size: clamp(2.5rem, 7vw, 7rem);
}

/* A blinking cursor after the hero headline. Still for visitors who prefer reduced motion. */
.fo-hero__title::after {
	content: "_";
	margin-left: .06em;
	color: var(--jg-sky);
	font-weight: 500;
	animation: jg-caret 1.1s steps(1) infinite;
}

@keyframes jg-caret {
	50% {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fo-hero__title::after {
		animation: none;
	}
}

.fo-service__title,
.fo-offer__title,
.fo-index__name,
.fo-accordion__title,
.fo-journey__step-title,
.fo-post__title {
	font-weight: 600;
	letter-spacing: -.02em;
}

.fo-about__lead {
	font-family: var(--fo-font-display);
	font-weight: 500;
	letter-spacing: -.02em;
	line-height: 1.35;
}

/* Accent word: the palette blue on white, a light tint of it on navy. */
.fo-serif {
	font-family: var(--fo-font-serif);
	font-style: italic;
	font-weight: 700;
	color: var(--jg-primary);
}

/* Headings in navy on white sections; body text stays charcoal. */
html.fo-js body:not([data-tone="dark"]) :is(.fo-head__title, .fo-pagehero__title, .fo-stat__value, .fo-prose h2, .fo-prose h3, .fo-service__title, .fo-offer__title, .fo-index__name, .fo-post__title, .fo-journey__step-title, .fo-accordion__title, .fo-quote__text p),
html:not(.fo-js) [data-tone="light"] :is(.fo-head__title, .fo-pagehero__title, .fo-stat__value, .fo-prose h2, .fo-prose h3, .fo-service__title, .fo-offer__title, .fo-index__name, .fo-post__title, .fo-journey__step-title, .fo-accordion__title, .fo-quote__text p) {
	color: var(--jg-navy);
}

body[data-tone="dark"] .fo-serif,
html:not(.fo-js) [data-tone="dark"] .fo-serif {
	color: var(--jg-blue);
}

/* Over the hero photo, the light blue reads best. */
.fo-hero .fo-serif {
	color: var(--jg-sky);
}

/* Micro-labels: Source Code Pro, uppercase, wide tracking, hairline rule before. */
.fo-kicker,
.fo-hero__kicker,
.folio-eyebrow,
.fo-card__tagline,
.fo-card__meta,
.fo-index__role,
.fo-method__label,
.fo-facts dt,
.fo-post__date,
.fo-service__num,
.fo-offer__num,
.fo-index__num,
.fo-accordion__num,
.fo-journey__count,
.fo-hero__caption,
.fo-hero__badge,
.fo-btn,
.fo-filter__btn,
.fo-tags span,
.fo-nav__cta,
.fo-brand,
.fo-footer__base {
	font-family: var(--fo-font-mono);
	font-style: normal;
	font-weight: 400;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.fo-kicker,
.fo-hero__kicker,
.folio-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-size: .75rem;
	color: var(--fo-accent);
}

.fo-kicker::before,
.fo-hero__kicker::before,
.folio-eyebrow::before {
	content: "";
	width: 32px;
	height: 1px;
	background: currentColor;
}

body[data-tone="dark"] .fo-kicker,
html:not(.fo-js) [data-tone="dark"] .fo-kicker {
	color: var(--jg-sky);
}

.fo-hero__kicker {
	color: var(--jg-cream);
}

.fo-hero__kicker::before {
	background: var(--jg-sky);
}

.fo-card__tagline,
.fo-index__role,
.fo-tags span,
.fo-filter__btn {
	font-size: .6875rem;
}

.fo-index__role {
	color: var(--fo-accent);
}

.fo-btn {
	border-radius: 4px;
	font-size: .75rem;
}

.fo-tags span {
	border-radius: 2px;
	border-color: var(--jg-hair);
}

.fo-brand__mark {
	border-radius: 4px;
	background: var(--jg-primary);
	color: #fff;
	font-family: var(--fo-font-display);
	font-style: normal;
	font-weight: 900;
	letter-spacing: 0;
}

/* -------------------------------------------------------------- Surfaces */

/* Grain over the whole page, very faint. */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 300;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
	opacity: .045;
	pointer-events: none;
	mix-blend-mode: multiply;
}

/* Light blue-grey bands separate white sections: proof bar, work, experience,
   values and process. */
#ventures,
.fo-ventures,
#speaking,
#values,
#journey {
	background: var(--jg-sand);
}

/* The contact form sits on a light panel edge rather than white on white. */
.fo-contact__form {
	background: var(--jg-sand);
}

/* Light blue-grey band for the proof bar. */
.fo-proof {
	background: var(--jg-sand);
	color: var(--fo-ink);
}

/* Ghost type behind sections. */
#about,
#ventures,
#speaking,
#offers {
	overflow: hidden;
}

#about::before,
#ventures::before,
#speaking::before,
#offers::before {
	position: absolute;
	top: clamp(24px, 4vw, 64px);
	right: -1vw;
	z-index: 0;
	font-family: var(--fo-font-display);
	font-size: clamp(6rem, 17vw, 16rem);
	font-style: italic;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -.04em;
	color: currentColor;
	opacity: .04;
	pointer-events: none;
	user-select: none;
}

#about::before {
	content: "Story";
}

#ventures::before {
	content: "Work";
}

#speaking::before {
	content: "Experience";
}

#offers::before {
	content: "Services";
}

#about > .fo-wrap,
#ventures > .fo-wrap,
#speaking > .fo-wrap,
#offers > .fo-wrap {
	position: relative;
	z-index: 1;
}

/* Hairline grids, not shadows. */
.fo-card {
	background: var(--fo-card);
	box-shadow: none;
}

.fo-card__media {
	border-radius: 4px;
}

.fo-quote,
.fo-profile,
.fo-method {
	border-radius: 4px;
}

/* ----------------------------------------------- Prose: tables, eyebrows */

.fo-prose .folio-eyebrow {
	margin-top: 2.6em;
}

.fo-prose .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1rem;
}

.fo-prose .wp-block-table th,
.fo-prose .wp-block-table td {
	padding: 14px 12px 14px 0;
	border: 0;
	border-bottom: 1px solid var(--jg-hair);
	text-align: left;
	vertical-align: top;
}

.fo-prose .wp-block-table th {
	font-family: var(--fo-font-mono);
	font-size: .6875rem;
	font-weight: 400;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--fo-muted);
}

.fo-prose .wp-block-table td:first-child {
	width: 34%;
	font-weight: 600;
}

.fo-prose ul.wp-block-list {
	padding-left: 0;
	list-style: none;
}

.fo-prose ul.wp-block-list li {
	padding: 10px 0;
	border-bottom: 1px solid var(--jg-hair);
}

.fo-prose .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.fo-prose .wp-block-button__link {
	display: inline-block;
	padding: 14px 24px;
	border: 1px solid var(--fo-ink);
	border-radius: 4px;
	background: var(--fo-ink);
	color: var(--jg-cream);
	font-family: var(--fo-font-mono);
	font-size: .75rem;
	letter-spacing: .14em;
	text-decoration: none;
	text-transform: uppercase;
}

.fo-prose .is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--fo-ink);
}

.fo-prose .wp-block-button__link:hover {
	border-color: var(--fo-accent);
	background: var(--fo-accent);
	color: #fff;
}

/* --------------------------------------------------------- Menu, details */

/* Charcoal footer; with the hero, the only dark parts of the site. */
.fo-footer {
	background: var(--jg-charcoal);
}

.fo-nav__pill {
	background: rgba(10, 60, 110, .82);
}

.fo-nav__pill:hover {
	background: rgba(10, 60, 110, .94);
}

.fo-nav__menu {
	background: rgba(10, 60, 110, .96);
}

/* Product names are not headlines: no automatic italic on case-study titles. */
.fo-project .fo-pagehero__title .fo-serif {
	font-style: normal;
	color: inherit;
}

/* Contact cards: values in DM Sans so an email address fits on one line. */
.fo-method__value {
	font-family: var(--fo-font-body);
	font-size: .9375rem;
	font-weight: 500;
	overflow-wrap: break-word;
}

/* The contact form's button matches the rest of the site. */
.fo-contact__form .fo-form button[type="submit"] {
	padding: 15px 24px;
	border-radius: 4px;
	background: var(--fo-ink);
	font-family: var(--fo-font-mono);
	font-size: .75rem;
	font-weight: 400;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.fo-contact__form .fo-form button[type="submit"]:hover {
	background: var(--fo-accent);
}

.fo-contact__form {
	border-radius: 4px;
}

/* ------------------------------------------ Experience list: hover contrast */

/* The row fills navy on hover; everything on it turns white or light blue.
   Specific enough to win over the parent's dark-tone variant (white fill). */
.fo-index__inner::before,
html body[data-tone] .fo-index__inner::before {
	background: var(--jg-navy);
}

html body[data-tone] .fo-index__inner:hover {
	color: #fff;
}

html .fo-index__inner:hover .fo-index__name,
html.fo-js body .fo-index__inner:hover .fo-index__name {
	color: #fff;
}

.fo-index__inner:hover .fo-index__role {
	color: var(--jg-sky);
}

.fo-index__inner:hover .fo-index__text {
	color: rgba(255, 255, 255, .85);
}

.fo-index__inner:hover .fo-index__num {
	color: rgba(255, 255, 255, .7);
}

/* ------------------------------------------- Editor-only notes and gaps */

.folio-todo {
	display: none;
}

.folio-can-edit .folio-todo {
	display: block;
	padding: 12px 16px;
	border: 1px dashed #c58b00;
	border-radius: 4px;
	background: #fff7dc;
	color: #5c4300;
	font-size: .9375rem;
}

.folio-link-missing a {
	outline: 2px dashed #c58b00;
	outline-offset: 3px;
	opacity: .6;
}