/* Ledger & Line. Tokens and type styles come from the L&L Branding Figma file. */
:root {
  --ll-sage: #41604a;        /* main brand background */
  --ll-deep-green: #263a2c;  /* text and logo on light backgrounds */
  --ll-honey: #f0c76a;       /* accent on dark backgrounds */
  --ll-honey-ink: #b5852c;   /* accent on light backgrounds */
  --ll-cream: #f3ead6;       /* light background, logo on dark */

  --ink-muted: rgba(38, 58, 44, 0.78);
  --cream-muted: rgba(243, 234, 214, 0.82);
  --rule-light: rgba(38, 58, 44, 0.16);
  --rule-dark: rgba(243, 234, 214, 0.18);

  --gutter: clamp(1.25rem, 6.67vw, 6rem);   /* 96px at 1440, as in the Figma */
  --max: 78rem;                              /* 1248px content width */
  --serif: "Fraunces", Georgia, serif;
  --sans: "Manrope", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ll-cream);
  color: var(--ll-deep-green);
  font-family: var(--sans);
  font-size: 1rem;           /* Body · Manrope Regular 16 */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

/* No widows or orphans: balance display lines, avoid one-word last lines in body copy */
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }

.wrap { max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }

/* Type styles */
.display {               /* Display · Fraunces Black 88 */
  font-family: var(--serif);
  font-weight: 900;
  font-variation-settings: "opsz" 144;
  line-height: 0.95;
  letter-spacing: -0.028em;
}
.h1 {                    /* Heading 1 · Fraunces Black 56 */
  font-family: var(--serif);
  font-weight: 900;
  font-variation-settings: "opsz" 144;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.036em;
}
.h2 {                    /* Heading 2 · Fraunces Black 36 */
  font-family: var(--serif);
  font-weight: 900;
  font-variation-settings: "opsz" 144;
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.042em;
}
.h3 {                    /* Heading 3 · Fraunces Bold 24 */
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.042em;
}
.body-large { font-size: 1.125rem; line-height: 1.6; }   /* Body large · Manrope Regular 18 */
.label {                 /* Label · Manrope SemiBold 12 */
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Button · Manrope Bold 15, honey pill */
.button {
  display: inline-block;
  padding: 0.875rem 1.625rem;
  border-radius: 999px;
  background: var(--ll-honey);
  color: var(--ll-deep-green);
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.15s, transform 0.15s;
}
.button:hover { background: #f4d68e; }
.button:active { transform: translateY(1px); }

a:focus-visible, .button:focus-visible { outline: 2px solid var(--ll-honey); outline-offset: 3px; border-radius: 4px; }
.button:focus-visible { border-radius: 999px; }

/* Header */
.site-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 2rem 0; }
.site-header .logo img { width: 10rem; }   /* never below 120px on screen */
.site-header .meta { margin: 0; }

/* Footer, deep green */
.site-footer { background: var(--ll-deep-green); color: var(--ll-cream); }
.site-footer .wrap { padding-top: 4rem; padding-bottom: 3rem; }
.site-footer .logo img { width: 10rem; }
.site-footer .bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rule-dark);
  color: var(--cream-muted);
}
.site-footer .bottom p { margin: 0; }
.site-footer a:not(.button) { color: var(--ll-cream); }
.site-footer .bottom a { color: var(--cream-muted); text-decoration: none; border-bottom: 1px solid var(--rule-dark); }
.site-footer .bottom a:hover { color: var(--ll-honey); border-bottom-color: var(--ll-honey); }

@media (max-width: 640px) {
  .site-header { padding: 1.5rem 0; }
  .site-header .meta { display: none; }
}