/* ==========================================================
   home.css: landing page only.
   The case study pages keep using style.css.
   Mobile-first: base styles = phone layout, one breakpoint
   at 900px switches to the two-column desktop layout.
   ========================================================== */

/* ---------- Fonts ---------- */
@font-face {
	font-family: "portFontSerifRegular";
	src: url("./fonts/portFont-SerifRegular.otf") format("opentype");
	font-display: swap;
}
@font-face {
	font-family: "portFontSerifMedium";
	src: url("./fonts/portFont-SerifMedium.otf") format("opentype");
	font-display: swap;
}
@font-face {
	font-family: "portFontSansMedium";
	src: url("./fonts/portFont-SansMedium.otf") format("opentype");
	font-display: swap;
}
@font-face {
	font-family: "portFontSansSemibold";
	src: url("./fonts/portFont-SansSemibold.otf") format("opentype");
	font-display: swap;
}

/* ---------- Tokens (tweak these first) ---------- */
:root {
	--text: #5F5F5F;
	--paper: #F4F0EB;
	--link: #6B95D0;
	--hover: #C83B96;
	--accent: #FF7719;

	--serif: "portFontSerifRegular", Georgia, "Times New Roman", serif;
	--serif-med: "portFontSerifMedium", Georgia, "Times New Roman", serif;
	--sans-med: "portFontSansMedium", "Helvetica Neue", Arial, sans-serif;
	--sans-semi: "portFontSansSemibold", "Helvetica Neue", Arial, sans-serif;

	/* type sizes (phone values; desktop values set in the breakpoint) */
	--fs-title: 24pt;
	--fs-summary: 10pt;
	--fs-role: 10pt;
	--fs-link: 15pt;

	--gutter: 16px;   /* side padding on phones; 0 on desktop */
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--text);
	font-family: var(--serif);
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--hover); }

img, video { max-width: 100%; }

.wrap {
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	padding-bottom: 70px;
}

hr.rule {
	border: 0;
	border-top: 1px solid var(--text);
	margin: 56px var(--gutter);
}

/* ---------- Header ---------- */
.site-header {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 28px var(--gutter) 0;
}

.site-header h1 {
	margin: 0;
	width: min-content;            /* forces "Christopher / Watson" onto two lines */
	font: 400 clamp(2.6rem, 12.9vw, 4.333rem)/0.87 var(--sans-semi);
	color: var(--text);
}

.contact {
	font-family: var(--sans-med);
	font-size: 17px;
	line-height: 1.4;
	padding-left: 6px;
}
.contact p { margin: 0; }

.site-header + hr.rule { margin-top: 16px; margin-bottom: 44px; }

/* ---------- Project blocks (phone layout) ---------- */
.project {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "media" "info";
	gap: 44px;
	padding-inline: var(--gutter);
	overflow-x: clip;      /* lets the icons bleed off the edge without a sideways scrollbar */
	overflow-y: visible;
}

.media { grid-area: media; min-width: 0; }
.info  { grid-area: info; }

/* Phone: icon + text sit side by side; icon is half out of frame */
.info {
	display: grid;
	align-items: start;
	grid-template-columns: 62px minmax(0, 1fr);
	column-gap: 55px;
}
.project--media-left .info {
	grid-template-columns: minmax(0, 1fr) 64px;
	column-gap: 50px;
}
.project--media-left .icon { order: 2; justify-content: flex-start; }

.icon {
	display: flex;
	justify-content: flex-end;   /* odd: image's right edge pinned, overflow goes off the left */
}
.icon img {
	display: block;
	flex: none;
	max-width: none;
	height: 165px;
	width: auto;
}

/* ---------- Text ---------- */
.text h2 {
	margin: 0;
	font: 400 var(--fs-title)/1.1 var(--sans-semi);
}
.summary {
	margin: 0 0 .6rem;
	padding-top: .55em;
	border-top: 1px solid;
	font: 400 var(--fs-summary)/1.2 var(--serif);
}
.role {
	margin: 0 0 .5rem;
	font: 400 var(--fs-role)/1.2 var(--serif);
}
.more {
	margin: 0;
	padding-top: .4em;
	border-top: 1px solid;
	font: 400 var(--fs-link)/1.2 var(--sans-med);
}
.more a { color: var(--accent); }
.more a:hover { color: var(--hover); }

/* ---------- Frames (CSS-drawn colored backing + clipped screenshot) ----------
   --w   : width of the image/video inside the frame, as a % of the visible screen area.
           Bigger = more zoomed in / more cropped on the right.
   --ar  : frame aspect ratio (width / height)
   --pl --pt --pb : how much frame color shows left / top / bottom
   --ri  : corner radius of the screen inside the frame                                */
.frame {
	--bg: #7A8582;
	--w: 150%;
	--pl: 18px;
	--pt: 0px;
	--pb: 16px;
	--r: 18px;
	--ri: 10px;

	position: relative;
	aspect-ratio: var(--ar, auto);
	background: var(--bg);
	border-radius: var(--r) ; /* 0 0 var(--r);   /* right side square: it bleeds off the edge */
	/* box-shadow: 0 6px 16px rgba(0, 0, 0, .22);  */
	overflow: hidden;
}

.frame__screen {
	position: absolute;
	inset: var(--pt) 0 var(--pb) var(--pl);
	overflow: hidden;
	background: #fff;
	box-shadow: 0 7px 14px rgba(0, 0, 0, .5);
/*	
	border-radius: var(--ri) 0 0 var(--ri);
*/
}
.frame__screen > img,
.frame__screen > video {
	position: absolute;
/*	top: -16px;  */
	left: 0;
	display: block;
	width: var(--w);
	max-width: none;
	height: auto;
}

.frame__screen > video {
	top: -16px;
}
/* Server of Record */
.frame--slate { --bg: #7A8582; --ar: 492 / 405; --w: 141%; }

/* The Grid */
.frame--mauve { --bg: #8D5D62; --ar: 485 / 468; --pb: 15px; --pt: -40px; --w: 177%; }

/* Targeting: two overlapping frames */
.stack {
	position: relative;
	aspect-ratio: 528 / 590;
}
.stack .frame { position: absolute; }

.frame--sand {
	--bg: #F0B676;
	--pl: 22px; --pt: 22px; --pb: 22px; --ri: 8px;
	--w: 125%;
	top: 0; left: 0; right: 0;
	height: 79.3%;
}
.frame--sky {
	--bg: #B9D1E6;
	--pl: 16px; --pt: 16px; --pb: 16px; --ri: 8px;
	--w: 158%;
	top: 19.5%; left: 20.3%; right: 0; bottom: 0;
	border-radius: var(--r) 0 var(--r) var(--r);   /* right side square: it bleeds off the edge */
}
.frame--sky .frame__screen { background: #E8F0F8; }

/* ---------- Dr. Prebid phones ---------- */
.media--phones { width: 95%; margin-inline: auto; }

.phones {
	position: relative;
	aspect-ratio: 394 / 508;
}
.phones__splash {
	position: absolute;
	top: 0; left: 0;
	width: 56.3%;
	height: auto;
}
.phones__live {
	position: absolute;
	top: 8.5%;
	left: 44.2%;
	width: 56%;
	aspect-ratio: 633 / 1295;   /* same as the phone chrome PNG */
}
.phones__live video {
	position: absolute;
	top: 2.44%;
	left: 5.33%;
	width: 88.67%;
	height: auto;
	border-radius: 12.5% / 5.8%;
	z-index: 0;
}
.phones__chrome {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
}

/* ==========================================================
   DESKTOP (900px and up)
   ========================================================== */
@media (min-width: 900px) {

	:root {
		--gutter: 0px;
		--fs-title: 27pt;
		--fs-summary: 11.25pt;
		--fs-role: 12pt;
		--fs-link: 17pt;
	}

	/* The vertical background bars (same colors/proportions as before) */
	body {
		background: linear-gradient(to right,
			#FFFFFF 0 3%,
			#FCFCF7 3% 5.82%,
			#FBF8F3 5.82% 8.47%,
			#F7F3EE 8.47% 10.96%,
			#F4F0EB 10.96% 89.04%,
			#F7F3EE 89.04% 91.53%,
			#FBF8F3 91.53% 94.18%,
			#FCFCF7 94.18% 97%,
			#FFFFFF 97%);
	}

	.wrap {
		width: min(861px, calc(78% - 40px));
		max-width: none;
	}

	/* Header: name left, contact block right */
	.site-header {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 28px 10px 0;
	}
	.site-header h1 { font-size: 4.333rem; }   /* 52pt */
	.contact { font-size: 19.5px; padding-top: 25px;}

	.site-header + hr.rule { margin-top: 14px; margin-bottom: 52px; }
	hr.rule { margin-block: 55px; }

	/* Two-column project blocks */
	.project {
		gap: 0;
		align-items: start;
		overflow: visible;
	}

	.project--media-right {
		grid-template-columns: minmax(0, 1fr) var(--col);
		grid-template-areas: "info media";
	}
	.project--media-left {
		grid-template-columns: 61.3% minmax(0, 1fr);
		grid-template-areas: "media info";
	}

	#usor      { --col: 57.1%; }
	#targeting { --col: 61.3%; }

	.project--media-left .media { width: var(--media-w, 100%); }
	#prebid   { --media-w: 87.6%; }
	#the-grid { --media-w: 91.9%; }

	.media--phones { width: var(--media-w); margin-inline: 0; }

	/* Info column: icon on top, text underneath */
	.info {
		display: flex;
		flex-direction: column;
		gap: 40px;
		padding-top: 10px;
	}
	.project--media-right .info { padding-left: 24px; }

	.icon,
	.project--media-left .icon { order: 0; justify-content: flex-start; }
	.icon img { height: 150px; }

	.text { max-width: 262px; }
}


/* ==========================================================
   STICKY TOP BAR (appears after the header scrolls away)
   ========================================================== */
.topbar {
	/* where the name and email "come from" before they settle into the bar (tweak these) */
	--name-from: translateY(26px) scale(2.2);
	--email-from: translateY(20px) scale(.9);
	--bar-pt: 10px;
	--bar-pb: 9px;
	--fs-bar: 13.5pt;

	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 10;
	overflow: hidden;                 /* keeps the zooming name inside the bar */
	background: var(--paper);
	border-bottom: 1px solid var(--text);

	/* hidden state */
	transform: translateY(-100%);
	opacity: 0;
	visibility: hidden;
	transition: transform .35s ease, opacity .25s ease, visibility 0s linear .35s;
}
.topbar.is-visible {
	transform: none;
	opacity: 1;
	visibility: visible;
	transition: transform .35s ease, opacity .25s ease, visibility 0s;
}

.topbar__inner {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	padding: var(--bar-pt) var(--gutter) var(--bar-pb);
	font: 400 var(--fs-bar)/1.2 var(--sans-med);
}

/* name and email: start oversized and lower down, settle into place */
.topbar__name,
.topbar__email {
	margin: 0;
	opacity: 0;
	transition: transform .5s cubic-bezier(.2, .7, .2, 1), opacity .3s ease;
}
.topbar__name  { transform: var(--name-from);  transform-origin: left center; }
.topbar__email { transform: var(--email-from); transform-origin: right center; }

.topbar.is-visible .topbar__name,
.topbar.is-visible .topbar__email {
	transform: none;
	opacity: 1;
}

/* narrow phones: short link text so everything fits on one line */
.topbar__short { display: none; }
@media (max-width: 559px) {
	.topbar__long  { display: none; }
	.topbar__short { display: inline; }
}

@media (min-width: 900px) {
	.topbar {
		--bar-pt: 8px;
		--bar-pb: 7px;
		--fs-bar: 16pt;
		width: 78.08%;                /* the paper-colored stripe, same as the case study bar */
		margin-inline: auto;
	}
	.topbar__inner {
		width: min(861px, calc(100% - 40px));   /* same column as .wrap */
		max-width: none;
		padding-inline: 10px;                    /* same inset as the header text */
	}
}

@media (prefers-reduced-motion: reduce) {
	.topbar,
	.topbar__name,
	.topbar__email { transition: none; }
}