/* Uncommonly Bold. A white sheet: one hand-drawn mark that never sits quite
   still, the name, who we've written for, and the letter. */

:root {
	--ground: #ffffff;
	--ink: #1d1a14;
	--ink-soft: rgba(29, 26, 20, 0.74);
	--rule: rgba(29, 26, 20, 0.22);
	--sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
	/* one gap, used twice: note → logos, and logos → letter. The second one
	   straddles the fold: most of it is the white under the logos, the rest is
	   above the letter, so the letter always starts just off the first screen. */
	--gap: clamp(3.25rem, 8.5vh, 7rem);
	/* the name's size. It follows the window's width and its height, so the
	   whole first screen scales together from a phone to a large monitor. */
	--name: clamp(1.9rem, min(10vw, 7.8vh), 6.5rem); /* 10vw keeps it on one line down to 320px */
	color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--ground); -webkit-text-size-adjust: 100%; }
body {
	font-family: var(--sans);
	color: var(--ink);
	background: var(--ground);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
a { color: inherit; }

/* Selection. Text highlights as a thinned pass of the same ink. The mark and
   the logo row are pictures: they can't be highlighted or dragged off. */
::selection { background: rgba(29, 26, 20, 0.18); }
.bang, .logos { -webkit-user-select: none; user-select: none; }
img { -webkit-user-drag: none; -webkit-touch-callout: none; }

.top-nav {
	position: absolute;
	top: calc(env(safe-area-inset-top, 0px) + 1.4rem);
	right: max(2rem, env(safe-area-inset-right, 0px));
}
.top-nav a {
	font-size: 0.95rem;
	letter-spacing: 0.01em;
	display: inline-block;
	margin: -0.85rem; /* a 44px tap target without moving the word */
	padding: 0.85rem;
	text-decoration: none;
	opacity: 0.72;
	transition: opacity 0.2s ease;
}
.top-nav a:hover { opacity: 1; }
.top-nav a:focus-visible, .details a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; opacity: 1; }

/* "copied to your clipboard": a small label that appears beside whichever email
   link was clicked (a.js places it) and leaves after a couple of seconds */
.copied {
	position: absolute;
	z-index: 10;
	padding: 0.4em 0.65em;
	border-radius: 3px;
	background: var(--ink);
	color: var(--ground);
	font-size: 0.8rem;
	line-height: 1.2;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transform: translateY(-3px);
	transition: opacity 0.18s ease, transform 0.18s ease;
}
.copied.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .copied { transition: none; transform: none; } }

/* the first screen, exactly: mark, name, note, logos. It is as tall as the
   window, and the mark takes whatever height the words and logos leave, so on
   any screen the logos sit clear of the bottom edge and the letter is the
   first thing below it. */
.hero {
	display: grid;
	grid-template-rows: minmax(140px, 1fr) auto auto auto;
	justify-items: center;
	text-align: center;
	min-height: 100vh;
	min-height: 100svh; /* phones: the screen with the browser bars showing */
	padding: clamp(3.5rem, 10vh, 9rem) max(6vw, env(safe-area-inset-right, 0px)) calc(var(--gap) * 0.62) max(6vw, env(safe-area-inset-left, 0px));
}

/* the mark: six drawings of the same "!", stacked, one showing at a time
   (a.js cycles them). It fades as you scroll away from it. */
.bang {
	position: relative;
	align-self: end; /* stays next to the name; any spare height goes above it */
	height: 80%; /* of the height the words and logos leave */
	max-height: calc(var(--name) * 7.2); /* never out of proportion to the name */
	aspect-ratio: 205 / 843; /* every drawing shares this box */
	opacity: var(--fade, 1);
}
.bang img { position: absolute; inset: 0; width: 100%; height: 100%; visibility: hidden; }
.bang img.on { visibility: visible; }

.brand {
	margin-top: clamp(1.25rem, 4.5vh, 4rem);
	font-size: var(--name);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1;
	text-wrap: balance;
}
.subtitle {
	margin-top: 0.7em;
	max-width: 27.7em;
	font-size: clamp(1.05rem, calc(var(--name) * 0.296), 1.75rem); /* in step with the name */
	line-height: 1.45;
	color: var(--ink-soft);
	text-wrap: balance;
}

/* the proof: client marks in the same ink as everything else, stamped a hair
   off-true. No label; the names are the label. */
.logos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	font-size: clamp(1rem, min(1.78vh, 1.2vw), 1.4rem); /* every size in the row is in em of this */
	gap: 1em 2em;
	max-width: 78em; /* nine marks on one line at desktop widths */
	margin-top: var(--gap);
	color: var(--ink);
	filter: url(#ink);
}
.logo {
	display: inline-flex;
	align-items: center;
	height: var(--h, 1.5em);
	transform: rotate(var(--t, 0deg));
	opacity: 0.94;
}
.logo svg { height: 100%; width: auto; display: block; }
/* heights are set per mark so they read the same size (viewBoxes differ wildly) */
.logo:nth-child(1) { --t: -1.5deg; --h: 1.45em; } /* stripe */
.logo:nth-child(2) { --t: 1deg;    --h: 0.95em; } /* increase */
.logo:nth-child(3) { --t: -0.5deg; --h: 1.35em; } /* meter */
.logo:nth-child(4) { --t: 1.5deg;  --h: 1.55em; } /* runway, now cfo.ai */
.logo:nth-child(5) { --t: -1deg; }                 /* flighty */
.logo:nth-child(6) { --t: 0.5deg;  --h: 1.8em; }  /* method */
.logo:nth-child(7) { --t: -1.5deg; }               /* product hunt */
.logo:nth-child(8) { --t: 1deg;    --h: 1.3em; }  /* compound */
.logo:nth-child(9) { --t: -1deg;   --h: 1.4em; }  /* next play */
/* Next Play's wordmark only exists as a bitmap, so it is used as a mask and takes the ink like the rest */
.logo.np { aspect-ratio: 640 / 141; background: currentColor; -webkit-mask: url(logos/nextplay.png) center / contain no-repeat; mask: url(logos/nextplay.png) center / contain no-repeat; }
.logo.ph, .logo.flighty {
	gap: 0.3em;
	font-size: 1.25em;
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1;
}
.logo.ph svg { height: 1.2em; }
.logo.flighty { font-family: ui-rounded, "SF Pro Rounded", var(--sans); }
.logo.flighty img {
	height: 1.3em;
	width: auto;
	border-radius: 22%;
	filter: grayscale(1) contrast(1.35) brightness(0.9);
}

/* the letter */
.details {
	max-width: 44rem;
	margin: calc(var(--gap) * 0.38) auto 0;
	padding: 0 max(6vw, env(safe-area-inset-right, 0px)) calc(14vh + env(safe-area-inset-bottom, 0px)) max(6vw, env(safe-area-inset-left, 0px));
	font-size: clamp(1rem, 1.4vw, 1.1rem);
	line-height: 1.6;
}
.details p { margin-bottom: 1.1em; text-wrap: pretty; }
.details a { text-decoration: underline; text-underline-offset: 0.16em; text-decoration-thickness: 1px; }
.details a:hover { opacity: 0.75; }
.pb { display: block; height: 1.1em; } /* a blank line in the copy: a paragraph gap */
.footnote {
	margin-top: 2.4rem;
	padding-top: 1rem;
	border-top: 1px solid var(--rule);
	font-size: 0.88em;
	color: var(--ink-soft);
}

/* Nine marks never leave one alone on a line. Wide: one line. Narrower:
   always five over four (an empty, full-width item forces the break). Upright
   phones and tablets: three rows of three. */
@media (max-width: 1380px) {
	.logos { font-size: clamp(0.72rem, min(1.78vh, 1.9vw), 1.4rem); }
	.logos::before { content: ""; flex-basis: 100%; height: 0; margin-bottom: -1em; order: 2; }
	.logo:nth-child(-n+5) { order: 1; }
	.logo:nth-child(n+6) { order: 3; }
}
@media (max-width: 900px) and (orientation: portrait) {
	.logos { font-size: clamp(0.72rem, 2.3vw, 1.2rem); display: grid; grid-template-columns: repeat(3, auto); justify-items: center; align-items: center; gap: 1.5em 1.7em; }
	.logos::before { display: none; }
	.logo { order: 0 !important; }
}

@media (max-width: 720px) {
	.top-nav { right: max(1.2rem, env(safe-area-inset-right, 0px)); }
	.hero { padding-top: clamp(3.5rem, 9vh, 6rem); }
	/* the rough ink edge is a fixed number of pixels, too coarse for marks this small */
	.logos { filter: none; }
}
@media (max-width: 370px) and (orientation: portrait) { .logos { font-size: 0.64rem; column-gap: 1.2em; } }