/* ==========================================================================
   Roar Folio – Josiah Gana
   Visual direction from the content document: deep navy, paper, cream, teal
   (sky blue inside dark sections); Playfair Display 900 headlines with a teal
   italic accent word, DM Sans 300 body, DM Mono uppercase micro-labels;
   grain, hairline rules before eyebrows, ghost type, hairline grids.
   ========================================================================== */

:root {
	--jg-cream: #fff6e9;
	--jg-sky: #40a2e3;
	--jg-hair: color-mix(in srgb, currentColor 18%, transparent);
}

/* ------------------------------------------------------------------- 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: 900;
	letter-spacing: -.02em;
}

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

.fo-about__lead {
	font-family: var(--fo-font-display);
	font-weight: 700;
	letter-spacing: -.01em;
}

/* Accent word: teal italic on light, sky blue on navy. */
.fo-serif {
	font-family: var(--fo-font-serif);
	font-style: italic;
	font-weight: 900;
	color: var(--fo-accent);
}

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

/* Micro-labels: DM Mono, 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(--fo-accent);
	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;
}

/* Cream band for the proof bar. */
.fo-proof {
	background: var(--jg-cream);
	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 */

.fo-nav__pill {
	background: rgba(6, 30, 71, .82);
}

.fo-nav__pill:hover {
	background: rgba(6, 30, 71, .94);
}

.fo-nav__menu {
	background: rgba(6, 30, 71, .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;
}

/* ------------------------------------------- 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;
}