/* ==========================================================
   Bickford Llama Ranch — style.css
   Modern CSS: custom properties, oklch, color-mix, clamp,
   container queries, logical properties, reduced motion.
   ========================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* Core brand: #214223 expressed in oklch so we can shift
     lightness/chroma predictably for tints and shades. */
  --pine:        oklch(0.36 0.07 150);   /* ≈ #214223 */
  --pine-deep:   oklch(0.28 0.06 150);   /* shaded sections */
  --pine-soft:   oklch(0.46 0.06 150);   /* hover, borders */

  --hay:         oklch(0.74 0.12 80);    /* ≈ #c9973f gold */
  --wool:        oklch(0.94 0.025 90);   /* ≈ #f2ead8 cream */
  --sage:        oklch(0.78 0.05 145);   /* light pasture green */
  --soil:        oklch(0.42 0.06 60);    /* warm brown */

  /* Derived, not hardcoded: */
  --ink:         color-mix(in oklch, var(--pine-deep) 85%, black);
  --wool-dim:    color-mix(in oklch, var(--wool) 88%, var(--pine));
  --hay-bright:  color-mix(in oklch, var(--hay) 80%, white);

  /* Fluid type scale (mobile -> desktop, no media queries) */
  --step--1: clamp(0.83rem, 0.79rem + 0.2vw,  0.95rem);
  --step-0:  clamp(1.00rem, 0.93rem + 0.35vw, 1.20rem);
  --step-1:  clamp(1.25rem, 1.12rem + 0.65vw, 1.62rem);
  --step-2:  clamp(1.56rem, 1.33rem + 1.15vw, 2.18rem);
  --step-3:  clamp(1.95rem, 1.56rem + 1.95vw, 3.05rem);
  --step-4:  clamp(2.44rem, 1.78rem + 3.3vw,  4.30rem);

  --space-s:  clamp(0.75rem, 0.7rem + 0.4vw, 1rem);
  --space-m:  clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem);
  --space-l:  clamp(2.5rem,  2rem + 2.5vw,   4rem);
  --space-xl: clamp(4rem,    3rem + 5vw,     7rem);

  --content-width: 68rem;
  --radius: 0.75rem;

  --font-display: "Young Serif", "Iowan Old Style", Georgia, serif;
  --font-body: "Karla", "Avenir Next", system-ui, sans-serif;
}

/* ---------- Reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  color-scheme: light;
}

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--wool);
  -webkit-font-smoothing: antialiased;
  text-align: center;
  font-size: 1.5em;
  font-weight: bold;
  width: 90%;
  margin: 0 auto;
}

img, svg {
	display: block;
	max-inline-size: 100%;
	border: 3px solid gray;
	border-radius: 3px;
	margin-bottom: 100px;
}
img#logo {
	border-radius: 25px;
	width: 80%;
	position: relative;
	left: 10%;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  text-wrap: balance;
}

p { max-inline-size: 62ch; text-wrap: pretty; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--hay);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Layout primitives ---------- */
.wrap {
  inline-size: min(var(--content-width), 100% - 2 * var(--space-m));
  margin-inline: auto;
}

section { padding-block: var(--space-xl); }

/* ---------- Header / nav ---------- */
.site-header {
  background: var(--pine);
  color: var(--wool);
  padding-block: var(--space-s);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  flex-wrap: wrap;
}

.brand {
  font-family: var(--font-display);
  font-size: var(--step-1);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.6em;
}

.brand svg { inline-size: 1.6em; block-size: auto; fill: var(--hay); }

.site-nav {
  display: flex;
  gap: var(--space-m);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site-nav a {
  text-decoration: none;
  color: var(--wool-dim);
  transition: color 160ms ease;
}

.site-nav a:hover { color: var(--hay-bright); }

/* ---------- Hero ---------- */
.hero {
  background: var(--pine);
  color: var(--wool);
  padding-block: var(--space-xl) 0;
  overflow: clip;
}

.hero .wrap { text-align: center; }

.hero h1 {
  font-size: var(--step-4);
  color: var(--wool);
  margin-block-end: var(--space-s);
}

.hero h1 em {
  font-style: normal;
  color: var(--hay);
}

.hero p {
  margin-inline: auto;
  font-size: var(--step-1);
  color: var(--wool-dim);
  margin-block-end: var(--space-l);
}

.cta {
  display: inline-block;
  background: var(--hay);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  padding: 0.8em 1.8em;
  border-radius: 999px;
  transition: background 160ms ease, transform 160ms ease;
}

.cta:hover {
  background: var(--hay-bright);
  transform: translateY(-2px);
}

/* ---------- Signature: pasture horizon dividers ---------- */
/* Each divider is an inline SVG; this just sizes and colors it.
   The llama on the ridge is part of the path. */
.pasture {
  display: block;
  inline-size: 100%;
  block-size: clamp(3rem, 8vw, 6rem);
}

.pasture--into-wool   { fill: var(--wool); background: var(--pine); }
.pasture--into-pine   { fill: var(--pine); background: var(--wool); }

/* ---------- Herd (container queries) ---------- */
.herd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-m);
  margin-block-start: var(--space-l);
}

.llama-card {
  container-type: inline-size;
  container-name: card;
  background: color-mix(in oklch, var(--wool) 70%, white);
  border: 1px solid color-mix(in oklch, var(--sage) 50%, var(--wool));
  border-radius: var(--radius);
  overflow: clip;
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.llama-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -12px color-mix(in oklch, var(--pine) 40%, transparent);
}

.llama-card .portrait {
  background: var(--sage);
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
}

.llama-card .portrait svg {
  inline-size: 45%;
  fill: var(--pine);
  opacity: 0.85;
}

.llama-card .bio { padding: var(--space-m); }

.llama-card h3 {
  font-size: var(--step-1);
  color: var(--pine);
  margin-block-end: 0.35em;
}

.llama-card .role {
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--soil);
  margin-block-end: 0.8em;
}

/* When a card gets wide (single-column on tablet, say),
   lay the portrait and bio side by side. */
@container card (min-width: 30rem) {
  .llama-card {
    display: grid;
    grid-template-columns: 2fr 3fr;
  }
  .llama-card .portrait { aspect-ratio: auto; block-size: 100%; }
}

/* ---------- About (pine band) ---------- */
.about {
  background: var(--pine);
  color: var(--wool);
}

.about h2 { color: var(--hay); }

.about p { color: var(--wool-dim); }

.about .wrap {
  display: grid;
  gap: var(--space-l);
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  align-items: start;
}

/* ---------- Section headings ---------- */
h2 {
  font-size: var(--step-3);
  margin-block-end: var(--space-s);
}

.eyebrow {
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--soil);
  margin-block-end: 0.6em;
}

.about .eyebrow { color: var(--sage); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--pine-deep);
  color: var(--wool-dim);
  padding-block: var(--space-l);
  font-size: var(--step--1);
  text-align: center;
}

/* ---------- Scroll reveal (progressive enhancement) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      animation: rise both ease-out;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
    @keyframes rise {
      from { opacity: 0; transform: translateY(1.5rem); }
      to   { opacity: 1; transform: none; }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}