/* RESET + LAYOUT PRIMITIVES + HEADER/FOOTER + SHARED BITS */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--jj-paper);
	color: var(--jj-ink);
	font-family: var(--jj-sans);
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-weight: 500; line-height: 1.1; margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.jj-wrap { max-width: var(--jj-max); margin: 0 auto; padding-left: var(--jj-gutter); padding-right: var(--jj-gutter); }
.jj-mono { font-family: var(--jj-mono); }
.jj-dot { color: var(--jj-accent); }

/* shared section label */
.jj-section-title {
	font-family: var(--jj-mono); font-weight: 400; font-size: .82rem;
	letter-spacing: .12em; color: var(--jj-faint); margin-bottom: 1.5rem;
}
/* shared eyebrow */
.jj-eyebrow { font-family: var(--jj-mono); font-size: .8rem; letter-spacing: .04em; color: var(--jj-accent); margin: 0 0 1rem; }

/* skip link + focus */
.jj-skip { position: absolute; left: -9999px; top: 0; background: var(--jj-ink); color: var(--jj-paper); padding: .6rem 1rem; z-index: 100; }
.jj-skip:focus { left: 0; }
:focus-visible { outline: 2px solid var(--jj-accent); outline-offset: 3px; }

/* header */
.jj-header { padding: 1.6rem 0; }
.jj-header__inner { display: flex; align-items: center; justify-content: space-between; }
.jj-wordmark { font-size: 1.15rem; font-weight: 500; }
.jj-nav { display: flex; gap: 1.5rem; font-size: .95rem; color: var(--jj-muted); }
.jj-nav a:hover { color: var(--jj-accent); }

/* footer */
.jj-footer { border-top: 1px solid var(--jj-line); margin-top: 5rem; padding: 2rem 0; }
.jj-footer__inner { display: flex; justify-content: space-between; align-items: center; color: var(--jj-faint); font-size: .85rem; }

/* vertical rhythm for the simple sections */
.jj-whatido, .jj-work, .jj-writing, .jj-cases { padding: 3.5rem 0; }
.jj-metrics { padding: .5rem 0 1rem; }

@media (max-width: 600px) {
	.jj-nav { gap: 1.1rem; font-size: .9rem; }
}