@charset "UTF-8"; /* CSS Document */:root {  /* Brand + palette */  --logo-prime: #1C3F55;  --primary-1: #0069aa; /* Blue */  --primary-2: #e65100; /* Burnt Orange */  --primary-3: #155780; /* Dark Blue */  --contrast-1: #d62828; /* Red */  --contrast-2: #00796b; /* Teal */  --contrast-3: #ffd166; /* Gold */  /* Neutrals */  --neutral-0: #ffffff;  --neutral-1: #f5f5f5; /* Light Gray */  --neutral-2: #e0e0e0;	 --neutral-2-rgb: 224 224 224;  --neutral-3: #9e9e9e;  --neutral-4: #424242;  --neutral-5: #212121; /* Near Black */  /* Brand accents (descriptive) */  --river: #0d688c;  --oiler: #9cbcd9;  --steel: #626e79;  --darkgray-1: #353C4A;  /* Semantic aliases (optional but helpful) */  --bg: var(--neutral-0);  --bg-muted: var(--neutral-1);  --ink: var(--neutral-5);  --ink-muted: var(--neutral-3);  --border: rgba(0,0,0,0.06);  --brand: var(--primary-1);  --accent: var(--contrast-2);  /* Typography */  --ff-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;  --ff-semp: "Semplicita Pro", system-ui, sans-serif;      /* ensure @font-face name matches */	--ff-semp: "semplicitapro", system-ui, sans-serif;  --ff-pn: "Proxima Nova", system-ui, sans-serif;          /* ensure @font-face name matches */  --ff-pn-wide: "Proxima Nova Wide", var(--ff-pn), sans-serif;  --ff-pn-cond: "Proxima Nova Condensed", var(--ff-pn), sans-serif;  /* Layout */  --container: 120rem;   /* 1920px if 1rem = 16px */  --wrap-max: 90rem;     /* ~1440px content width */  --content-max: 72ch;   /* readable measure */  --space-1: .5rem;  --space-2: 1rem;  --space-3: 1.5rem;  --space-4: 2rem;  --radius: 10px;  /* Elevation */  --shadow-1: 0 1px 2px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.04);  --shadow-2: 0 2px 6px rgba(0,0,0,.12), 0 8px 20px rgba(0,0,0,.08);}*, *::before, *::after {		box-sizing: border-box;}html, body {		margin: 0;		padding: 0;}body {		background: #fff;		background-color: #A0A0A0;		font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;		height: 100vh;}header {		background-image: url("../images/bkgs/home.webp");	background-size: cover;		background-color: var(--logo-prime);/* border-bottom: 2px solid rgb(var(--neutral-2-rgb) / 10%);*/}header h1 {		width: 100%;		max-width: 1600px;		font-family: var(--ff-semp);		font-weight:normal;		letter-spacing: .3em;		margin: 0 auto;		padding: .5em .5em .5em 2em; /*    font-size: clamp(1.125rem, 1.2vw + .5rem, 1.5rem);*/		font-size: 24px;		color: #fff;}nav {		background-color: #804014;}#home-hero {		background-image: url("../images/video-matte.webp");		background-repeat: repeat;} /* Best: make the video a block */ /* OR zero out line-height in the container */#home-hero {		line-height: 0;} /* (Optional) also make it fluid while keeping aspect ratio */#home-hero .hero__video {		display: block;		width: 100%;		height: auto;		aspect-ratio: 1600 / 684; /* reserves correct space while loading */}header, #home-hero, video {		margin: 0;		padding: 0;}main { /* background-color: #D3D3D3;*/		background-color: whitesmoke;		background-color: ghostwhite;		background-color: #ffffff;}main section, main article {		min-height: 400px;}/* Applies to all section > article except gallery + writing grids */section:not(#gallery-items):not(#writing-samples) > article {  width: clamp(60%, 70ch, 80ch);  max-width: 80ch;  margin-inline: auto;  padding-block: clamp(2rem, 5vw, 4rem);}section > article > h2, section > article > p {		width: auto;		margin-left: 0;		margin-right: 0;}aside {		background-color: #f2f2f2;}footer {		min-height: 100px;		background-color: #135177;	color: var(--neutral-0);}h1 {		font-family: var(--ff-pn-cond);		font-weight: 500;		line-height: 1.2;		letter-spacing: 0.02em;		font-size: clamp(1.25rem, 1.5vw + 0.8rem, 2rem);		color: var(--ink);		color: #0062A3;}h2 {		font-family: var(--ff-pn-cond);		font-weight: 500;		line-height: 1.25;		letter-spacing: 0.06em;		color: #0062A3;		font-size: clamp(1.25rem, 1.2vw + 0.75rem, 2rem);}h3 { /* ~one step down (minor-third-ish scale) */		font-size: clamp(1.0625rem, 1vw + 0.5rem, 1.625rem); /* 17px → 26px */		line-height: 1.25; /* a touch looser than h2 for multi-line heads */}.heroTitle {		position: absolute;		right: 0; /* anchors to right edge */		bottom: 0;		display: inline-block;		max-width: min(90%, 42ch);		margin: 0;		padding: .35em 2em .6em .6em;		padding: .45em 4em .5em 1em;		border-radius: 12px 0 0 0; /* special rounded right edge only */		font-family: var(--ff-pn-wide);		font-weight: 500;		letter-spacing: 0.08em;		text-transform: uppercase;		line-height: 1.1;		color: var(--neutral-0) !important;		background-color: #8a2424;		text-shadow: 0 1px 2px rgba(0, 0, 0, .35);		box-shadow: 0 2px 6px rgba(0, 0, 0, .15);		font-size: clamp(1.25rem, 1.5vw + 0.8rem, 2rem); /* ~20px → 32px */		hyphens: auto;		overflow-wrap: anywhere;} /* Paragraphs, lists, blockquotes, asides */p, ul, ol, blockquote, aside {		font-family: var(--ff-sans);		font-size: clamp(.9375rem, 1.2vw + .25rem, 1.125rem);		line-height: clamp(1.5rem, 1.2vw + .75rem, 1.75rem);		text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.1);}ul, ol {		padding-left: 1.1em;		margin-bottom: 1em;}li {		padding: .25em 0;}.heroA {		position: relative;		height: 500px !important;		background-image: url("../images/hero/isd-1600.webp");		background-size: cover; /* fill, crop as needed */		background-position: center top; /* keep focal point centered */		background-repeat: no-repeat; /* no tiling */}.heroB {		position: relative;		height: 500px !important;		background-image: url("../images/hero/rl-1600.webp");		background-size: cover; /* fill, crop as needed */		background-position: center top; /* keep focal point centered */		background-repeat: no-repeat; /* no tiling */}.heroC {		position: relative;		height: 500px !important;		background-image: url("../images/hero/osmosis-1600.webp");		background-size: cover; /* fill, crop as needed */		background-position: center top; /* keep focal point centered */		background-repeat: no-repeat; /* no tiling */}.heroD {		position: relative;		height: 500px !important;		background-image: url("../images/hero/case-1600.webp");		background-size: cover; /* fill, crop as needed */		background-position: center top; /* keep focal point centered */		background-repeat: no-repeat; /* no tiling */}.heroE {		position: relative;		height: 500px !important;		background-image: url("../images/hero/gallery-1600x500.webp");		background-size: cover; /* fill, crop as needed */		background-position: center top; /* keep focal point centered */		background-repeat: no-repeat; /* no tiling */}.heroF {		position: relative;		height: 500px !important;		background-image: url("../images/hero/writing-1600x500.webp");		background-size: cover; /* fill, crop as needed */		background-position: center top; /* keep focal point centered */		background-repeat: no-repeat; /* no tiling */}.heroA, .heroB, .heroC, .heroD, .heroF {		border-top: 5px solid var(--contrast-3);		border-top: 6px solid #ffd16680;		border-bottom: 12px solid var(--contrast-3);}		img {				display: block;				max-width: 100%;				height: auto;		}/* Global – keep outside media */img { display:block; max-width:100%; height:auto; }