/* ============================================================
WALDRON LEGACY LIFE — Brand Stylesheet
------------------------------------------------------------
Single source of truth for the site's look & feel.
Link it on EVERY page:
Build pages with the component classes below — don't write
one-off styles per page. If a new pattern is needed, add it
here so the whole site stays consistent.
============================================================ */
/* Fonts load with the stylesheet for simplicity. For best
performance you can instead move this into each page's
and delete this @import:
*/
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');
/* ------------------------------------------------------------
1. DESIGN TOKENS
------------------------------------------------------------ */
:root{
/* Brand palette */
--forest:#1d3527; /* primary dark — headings, brand */
--pine:#2f5240; /* secondary green */
--moss:#5c7a5f; /* muted green — eyebrows, accents */
--cream:#f6f1e7; /* page background (paper) */
--cream-deep:#efe6d4; /* inset / alt surface */
--card:#fffdf8; /* card surface */
--ink:#1a2620; /* body text */
--muted:#5f6b60; /* secondary text */
--ochre:#c0701f; /* warm accent — CTAs, links */
--ochre-deep:#a45e16; /* accent hover / pressed */
--line:rgba(29,53,39,.14); /* hairline borders */
/* Semantic aliases */
--bg:var(--cream);
--text:var(--ink);
--accent:var(--ochre);
--accent-strong:var(--ochre-deep);
/* Type */
--font-display:'Fraunces',Georgia,'Times New Roman',serif;
--font-body:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
/* Scale */
--maxw:1080px;
--gutter:24px;
--radius-sm:8px;
--radius:11px;
--radius-lg:18px;
/* Shadows */
--shadow-soft:0 14px 36px -22px rgba(29,53,39,.45);
--shadow-card:0 1px 0 rgba(255,255,255,.6) inset, 0 26px 60px -28px rgba(29,53,39,.5), 0 6px 18px -12px rgba(29,53,39,.3);
}
/* ------------------------------------------------------------
2. BASE & BACKGROUND
------------------------------------------------------------ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
font-family:var(--font-body);
color:var(--text);
background-color:var(--bg);
background-image:
radial-gradient(120% 90% at 85% -10%, rgba(192,112,31,.10), transparent 55%),
radial-gradient(110% 80% at 5% 110%, rgba(47,82,64,.14), transparent 50%);
background-attachment:fixed;
line-height:1.55;
-webkit-font-smoothing:antialiased;
min-height:100vh;
position:relative;
}
/* Faint topographic contour texture — sits behind everything */
body::before{
content:"";
position:fixed;
inset:0;
pointer-events:none;
z-index:0;
opacity:.5;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='%231d3527' stroke-opacity='0.05' stroke-width='1.2'%3E%3Cpath d='M-50 120C120 60 260 200 420 140s260-40 280 20'/%3E%3Cpath d='M-50 220C120 160 260 300 420 240s260-40 280 20'/%3E%3Cpath d='M-50 320C120 260 260 400 420 340s260-40 280 20'/%3E%3Cpath d='M-50 420C120 360 260 500 420 440s260-40 280 20'/%3E%3Cpath d='M-50 520C120 460 260 600 420 540s260-40 280 20'/%3E%3C/g%3E%3C/svg%3E");
background-size:760px 760px;
}
/* Keep real content above the texture */
.container,.site-header,.site-footer{position:relative;z-index:1}
img{max-width:100%;display:block}
a{color:var(--accent-strong)}
/* ------------------------------------------------------------
3. LAYOUT
------------------------------------------------------------ */
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.container--narrow{max-width:760px}
/* Vertical rhythm between page sections */
.section{padding:72px 0}
.section--tight{padding:44px 0}
@media (max-width:640px){.section{padding:48px 0}}
/* Simple 2-up split (e.g., copy + form/image) */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:54px;align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:34px}}
/* ------------------------------------------------------------
4. TYPOGRAPHY
------------------------------------------------------------ */
.eyebrow{
display:inline-flex;align-items:center;gap:9px;
font-size:12.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
color:var(--accent-strong);margin-bottom:20px;
}
.eyebrow::before{content:"";width:26px;height:1.5px;background:var(--accent)}
h1,h2,h3,.display{font-family:var(--font-display);font-weight:600;color:var(--forest);line-height:1.08;letter-spacing:-.01em}
h1{font-size:clamp(2.2rem,4.6vw,3.5rem);line-height:1.04;margin-bottom:20px}
h2{font-size:clamp(1.7rem,3vw,2.4rem);margin-bottom:16px}
h3{font-size:1.3rem;margin-bottom:10px}
em{font-style:italic;color:var(--accent-strong)}
.lede{font-size:clamp(1.02rem,1.4vw,1.18rem);color:var(--muted);max-width:46ch}
/* Long-form body copy (about page, explainers, articles) */
.prose{max-width:68ch;color:var(--ink);font-size:1.05rem;line-height:1.7}
.prose p{margin-bottom:1.1em}
.prose h2{margin-top:1.6em}
.prose h3{margin-top:1.4em}
.prose a{color:var(--accent-strong);text-decoration:underline;text-underline-offset:2px}
.prose ul,.prose ol{margin:0 0 1.1em 1.3em}
.prose li{margin-bottom:.4em}
.prose blockquote{border-left:3px solid var(--accent);padding:.2em 0 .2em 1.1em;margin:1.3em 0;font-family:var(--font-display);font-size:1.2rem;color:var(--pine)}
/* ------------------------------------------------------------
5. HEADER / NAV
------------------------------------------------------------ */
.site-header{padding:26px 0 8px}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand-mark{
width:38px;height:38px;border-radius:9px;flex:0 0 auto;
background:linear-gradient(150deg,var(--forest),var(--pine));
display:grid;place-items:center;color:var(--cream);
font-family:var(--font-display);font-weight:600;font-size:19px;
box-shadow:0 4px 14px rgba(29,53,39,.22);
}
.brand-name{font-family:var(--font-display);font-weight:600;font-size:18px;color:var(--forest);line-height:1.1}
.brand-name span{display:block;font-family:var(--font-body);font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--moss);margin-top:2px}
.nav-links{display:flex;align-items:center;gap:24px;list-style:none}
.nav-links a{color:var(--forest);text-decoration:none;font-weight:500;font-size:15px;transition:color .2s ease}
.nav-links a:hover{color:var(--accent-strong)}
@media (max-width:560px){.nav-links{display:none}} /* swap for a menu if needed */
/* ------------------------------------------------------------
6. BUTTONS (work on and