/* Resin Ranchers — site styles */
@import url('https://fonts.googleapis.com/css2?family=Rye&family=Lobster+Two:ital,wght@0,400;0,700;1,400;1,700&family=Bitter:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap');

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: 'Bitter', Georgia, serif;
  color: #fff;
  background: #231f20;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
a { color: inherit; }
img { display: block; max-width: 100%; }

:root {
  --black: #231f20;
  --card: #2d2829;
  --line: #3a3537;
  --green: #5bad3c;
  --green-soft: #9ccf85;
  --green-dark: #46892e;
  --fog: #c9c9c7;
}

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* nav */
.nav { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; max-width: 1100px; margin: 0 auto; }
.nav .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav .brand img { width: 40px; height: 40px; object-fit: contain; border-radius: 4px; }
.nav .brand span { font-family: 'Rye', serif; text-transform: uppercase; letter-spacing: .05em; font-size: 16px; color: #fff; }
.nav .links { display: flex; gap: 28px; font-size: 14px; font-weight: 500; }
.nav .links a { text-decoration: none; color: #e7e7e4; }
.nav .links a:hover, .nav .links a.active { color: var(--green-soft); }

/* shared bits */
.eyebrow { font-style: italic; font-weight: 600; text-transform: uppercase; letter-spacing: .18em; font-size: 13px; color: var(--green-soft); }
.display { font-family: 'Rye', serif; text-transform: uppercase; letter-spacing: .04em; font-weight: 400; color: #fff; line-height: 1.05; }
.script { font-family: 'Lobster Two', cursive; font-weight: 700; font-style: italic; color: var(--green); }
.btn { display: inline-block; text-decoration: none; padding: 14px 32px; border-radius: 4px; font-weight: 600; letter-spacing: .02em; font-size: 15px; border: 2px solid transparent; cursor: pointer; transition: background .15s ease-out, border-color .15s ease-out; }
.btn-green { background: var(--green); color: #fff; border-color: var(--green); }
.btn-green:hover { background: var(--green-dark); border-color: var(--green-dark); }
.btn-outline { background: transparent; color: #fff; border-color: #565656; }
.btn-outline:hover { border-color: #fff; }

/* footer */
.footer { border-top: 1px solid var(--line); padding: 36px 24px; }
.footer .inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.footer .name { font-family: 'Rye', serif; text-transform: uppercase; letter-spacing: .05em; font-size: 15px; color: #fff; }
.footer .meta { font-size: 13px; color: #9a9a96; }
.footer a { color: var(--green-soft); text-decoration: none; }

@media (max-width: 640px) {
  .nav { flex-direction: column; gap: 12px; }
  .nav .links { gap: 18px; }
}