/* =====================================================================
DESIGN SYSTEM — EDIT EVERYTHING HERE FIRST
---------------------------------------------------------------------
Change the whole look of the site by editing the variables in this
one block. Colors and fonts are defined once and reused everywhere.
===================================================================== */
:root {
/* ---- COLOR PALETTE -------------------------------------------------
Base = cream / tan / sandstone. Accents = maroon + black.
Swap any hex value below and it updates across all pages. */
--color-bg: #F0E6D2; /* page background — warm Jerusalem stone */
--color-surface: #E8DBC0; /* cards / panels — deeper stone */
--color-sandstone: #D4C09A; /* borders, dividers, image frames */
--color-maroon: #6E1A2A; /* PRIMARY accent — headings, bars, links */
--color-maroon-dk: #531320; /* darker maroon for hover states */
--color-black: #1B1714; /* near-black — now used sparingly */
--color-text: #2C2620; /* body text */
--color-muted: #7A6F58; /* captions, secondary / placeholder text */
/* ---- TYPOGRAPHY ----------------------------------------------------
To change fonts: update the in each HTML , then set
the families below to match. (Tinos is a Times New Roman lookalike;
"Times New Roman" is the local fallback.) */
--font-display: "Tinos", "Times New Roman", Times, serif; /* headings */
--font-body: "Tinos", "Times New Roman", Times, serif; /* body */
--weight-normal: 400;
--weight-medium: 400;
--weight-bold: 700;
/* ---- SPACING & SIZING ---------------------------------------------
A simple scale. Larger numbers = more breathing room. */
--space-xs: 0.5rem;
--space-sm: 1rem;
--space-md: 2rem;
--space-lg: 3.5rem;
--space-xl: 6rem;
--content-width: 1080px; /* max width of centered content */
--radius: 10px; /* rounded-corner amount */
--border: 1px solid var(--color-sandstone);
}
/* =====================================================================
BASE / RESET
===================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
/* min-height + flex lets the contact bar sit at the bottom of short
pages without needing position:fixed (it scrolls normally too). */
min-height: 100vh;
display: flex;
flex-direction: column;
background-color: var(--color-bg);
color: var(--color-text);
font-family: var(--font-body);
font-weight: var(--weight-normal);
font-size: 1.0625rem; /* ~17px */
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-maroon); }
a:hover { color: var(--color-maroon-dk); }
h1, h2, h3 {
font-family: var(--font-display);
font-weight: var(--weight-bold);
color: var(--color-maroon); /* maroon is the dominant accent */
line-height: 1.1;
margin: 0 0 var(--space-sm);
}
/* Small italic note used to flag placeholder copy — restyle or remove. */
.placeholder-note {
font-size: 0.8rem;
font-style: italic;
color: var(--color-muted);
margin-top: var(--space-xs);
}
.eyebrow {
font-size: 0.8rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-maroon);
font-weight: var(--weight-bold);
margin: 0 0 var(--space-xs);
}
/* =====================================================================
SHARED NAV
===================================================================== */
.site-header {
border-bottom: var(--border);
background-color: var(--color-bg);
}
.nav {
max-width: var(--content-width);
margin: 0 auto;
padding: var(--space-sm) var(--space-md);
display: flex;
align-items: center;
justify-content: space-between;
}
.nav__brand {
font-family: var(--font-display);
font-weight: var(--weight-bold);
font-size: 1.15rem;
color: var(--color-maroon);
text-decoration: none;
}
.nav__links {
list-style: none;
display: flex;
gap: var(--space-md);
margin: 0;
padding: 0;
}
.nav__links a {
text-decoration: none;
color: var(--color-text);
font-weight: var(--weight-medium);
padding-bottom: 2px;
border-bottom: 2px solid transparent;
}
.nav__links a:hover { color: var(--color-maroon); }
.nav__links a.is-active {
color: var(--color-maroon);
border-bottom-color: var(--color-maroon);
}
/* Mobile menu toggle button — hidden on desktop, shown < 720px */
.nav__toggle {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: 0;
cursor: pointer;
padding: 6px;
}
.nav__toggle-bar {
width: 24px;
height: 2px;
background-color: var(--color-black);
}
/* =====================================================================
HERO / LANDING (index.html)
===================================================================== */
.hero {
flex: 1; /* push contact bar to the bottom */
max-width: var(--content-width);
width: 100%;
margin: 0 auto;
padding: var(--space-xl) var(--space-md);
}
.hero__inner {
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
gap: var(--space-lg);
align-items: center;
}
.hero__photo {
margin: 0;
max-width: 85%; /* shrink the photo ~15% within its cell */
border: var(--border);
border-radius: var(--radius);
overflow: hidden;
background-color: var(--color-surface);
}
.hero__name {
font-size: clamp(2.5rem, 6vw, 4rem);
margin-bottom: var(--space-sm);
}
.hero__intro {
font-size: 1.15rem;
max-width: 34em;
}
/* =====================================================================
WORK / CASE STUDIES (work.html)
===================================================================== */
.work {
flex: 1;
max-width: var(--content-width);
width: 100%;
margin: 0 auto;
padding: var(--space-lg) var(--space-md);
}
.work__intro { max-width: 40em; margin-bottom: var(--space-lg); }
.work__intro h1 { font-size: clamp(2.25rem, 5vw, 3.25rem); }
/* Single column — case studies stacked on top of each other */
.work__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-md);
}
/* Stacked rows: logo floats free on the LEFT (no box), text sits in its
own free-standing rounded card on the RIGHT (desktop). */
.case {
display: flex;
flex-direction: row;
align-items: center; /* center logo against the text card */
gap: var(--space-md);
/* no background / border here — the row itself is just a layout wrapper */
}
.case__media {
margin: 0;
flex: 0 0 38%; /* logo column width */
background-color: transparent; /* logo sits on the tan page bg */
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-md);
}
.case__media img {
width: 100%;
height: auto;
max-height: 150px;
object-fit: contain; /* show the whole logo, never crop it */
}
/* The free-standing text box (rounded card) */
.case__body {
flex: 1;
background-color: var(--color-surface);
border: var(--border);
border-radius: var(--radius);
padding: var(--space-md);
}
.case__title { font-size: 1.5rem; }
.case__problem,
.case__solution { margin: 0 0 var(--space-sm); }
/* The little "Problem." / "Solution." lead-ins */
.case__label {
font-family: var(--font-display);
font-weight: var(--weight-bold);
color: var(--color-maroon);
}
.case__link {
display: inline-block;
margin-top: var(--space-xs);
font-weight: var(--weight-medium);
text-decoration: none;
}
.case__link:hover { text-decoration: underline; }
/* =====================================================================
RÉSUMÉ (resume.html)
===================================================================== */
.resume {
flex: 1;
max-width: var(--content-width);
width: 100%;
margin: 0 auto;
padding: var(--space-lg) var(--space-md);
display: flex;
flex-direction: column;
}
.resume__head {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-sm);
margin-bottom: var(--space-md);
}
.resume__head h1 { margin: 0; font-size: clamp(2.25rem, 5vw, 3.25rem); }
/* Inline PDF frame */
.resume__viewer {
border: var(--border);
border-radius: var(--radius);
overflow: hidden;
background-color: var(--color-surface);
}
/* Height uses a viewport unit (vh) — a plain height:100% won't resolve
on an