/* ======================================================================
Ellen Presents — shared stylesheet
Loaded by every page. Dependency-free apart from the Google Fonts link
in each page's .
====================================================================== */
:root {
--sand: #f6f2e8;
--sand-2: #ece6d8;
--line: #ded7c7;
--paper: #fbf9f3;
--ink: #212d3a;
--umber: #4a5766;
--muted: #5c6674;
--accent: #2f4a63;
--accent-2:#46647f;
--brass: #7e5f2c;
--brass-lift: #c9a96a;
--header-bg: rgba(246, 242, 232, 0.94);
--on-ink-soft: rgba(251, 249, 243, 0.74);
--on-ink-faint: rgba(251, 249, 243, 0.32);
--on-ink-rule: rgba(251, 249, 243, 0.28);
--focus-ring: rgba(47, 74, 99, 0.17);
--pill-shadow: rgba(33, 45, 58, 0.26);
--display: "EB Garamond", Georgia, "Palatino Linotype", "Book Antiqua", serif;
--sans: "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
--maxw: 1180px;
--measure: 66ch;
--ease: cubic-bezier(0.22, 0.61, 0.24, 1);
}
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
background: var(--sand);
color: var(--umber);
font-family: var(--sans);
font-size: 17px;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 {
font-family: var(--display);
font-weight: 400;
color: var(--ink);
margin: 0;
text-wrap: balance;
line-height: 1.12;
letter-spacing: -0.005em;
}
h1 { font-size: clamp(2.7rem, 6vw, 4.5rem); font-weight: 500; }
h2 { font-size: clamp(1.95rem, 3.6vw, 2.9rem); font-weight: 500; }
h3 { font-size: 1.32rem; font-weight: 600; letter-spacing: 0; line-height: 1.3; }
p { margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 200;
background: var(--ink);
color: var(--paper);
padding: 12px 18px;
font-size: 0.9rem;
font-weight: 600;
}
.skip-link:focus { left: 12px; top: 12px; color: var(--paper); }
.wrap {
max-width: var(--maxw);
margin: 0 auto;
padding: 0 clamp(20px, 4vw, 40px);
}
.stack { display: flex; flex-direction: column; }
.measure { max-width: var(--measure); }
.eyebrow {
font-family: var(--sans);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--brass);
}
.lede {
font-size: clamp(1.08rem, 1.6vw, 1.32rem);
line-height: 1.6;
color: var(--umber);
}
/* ---------------------------------------------------------- Header */
.site-header {
position: sticky;
top: 0;
z-index: 60;
background: var(--header-bg);
backdrop-filter: blur(12px) saturate(1.3);
border-bottom: 1px solid var(--line);
}
.site-nav {
max-width: var(--maxw);
margin: 0 auto;
padding: 16px clamp(20px, 4vw, 40px);
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
/* Wordmark lockup — the type half of the logo. Swap in the full monogram
artwork by replacing the two spans with an ![]()
/