/* ==========================================================
   PICRAY FAMILY FARM — feed-sack print design
   Palette: kraft paper / walnut ink / barn red / field green / straw gold
   Type:   Bevan (display slab) · Staatliches (labels) · Source Serif 4 (body) · Caveat (hand notes)
   ========================================================== */

@font-face{ font-family:'Bevan'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/bevan-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'Staatliches'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/staatliches-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'Source Serif 4'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/source-serif-4-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'Source Serif 4'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/source-serif-4-latin-600-normal.woff2') format('woff2'); }
@font-face{ font-family:'Source Serif 4'; font-style:italic; font-weight:400; font-display:swap;
  src:url('fonts/source-serif-4-latin-400-italic.woff2') format('woff2'); }
@font-face{ font-family:'Caveat'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/caveat-latin-600-normal.woff2') format('woff2'); }

:root{
  --kraft:        #E3D2AC;
  --kraft-deep:   #D5BF8E;
  --cream:        #F3E9CF;
  --ink:          #33261A;
  --ink-soft:     #5A4733;
  --red:          #9E3A26;
  --red-deep:     #7E2D1D;
  --green:        #3F5C39;
  --green-deep:   #324A2E;
  --gold:         #C08A2A;

  --slab:   'Bevan', serif;
  --label:  'Staatliches', sans-serif;
  --body:   'Source Serif 4', Georgia, serif;
  --hand:   'Caveat', cursive;

  --seam: 2px dashed rgba(51,38,26,.45);
  --maxw: 1140px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:90px; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation:none !important; transition:none !important; }
}

body{
  font-family:var(--body);
  font-size:1.06rem;
  line-height:1.65;
  color:var(--ink);
  background-color:var(--kraft);
  /* subtle paper grain */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.15 0 0 0 0 0.1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{ max-width:100%; display:block; }
a{ color:var(--red); }
a:focus-visible, button:focus-visible{ outline:3px solid var(--red); outline-offset:3px; }

/* ---------- type helpers ---------- */
.eyebrow{
  font-family:var(--label);
  font-size:1.05rem;
  letter-spacing:.28em;
  color:var(--red);
  text-transform:uppercase;
}
h1,h2,h3{ font-family:var(--slab); font-weight:400; line-height:1.08; }
h2{ font-size:clamp(2rem, 4.5vw, 3.1rem); margin:.35em 0 .5em; letter-spacing:.01em; }
h3{ font-family:var(--label); font-size:1.45rem; letter-spacing:.12em; text-transform:uppercase; color:var(--green-deep); margin-bottom:.35em; }
.lede{ font-size:1.18rem; }
.muted{ color:var(--ink-soft); }

/* ---------- stamp line (very top) ---------- */
.stampline{
  background:var(--ink);
  color:var(--kraft);
  font-family:var(--label);
  letter-spacing:.3em;
  font-size:.82rem;
  text-align:center;
  padding:.45rem 1rem;
  text-transform:uppercase;
}
@media (max-width:640px){
  .stampline{ font-size:.68rem; letter-spacing:.16em; }
}

/* ---------- nav ---------- */
nav.bar{
  position:sticky; top:0; z-index:50;
  background:var(--kraft);
  border-bottom:3px solid var(--ink);
  box-shadow:0 1px 0 var(--kraft-deep);
}
.bar-inner{
  max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:.55rem 1.25rem;
}
.brand{
  font-family:var(--label); font-size:1.25rem; letter-spacing:.14em;
  color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:.6rem;
}
.brand img{ width:40px; height:auto; }
.navlinks{ display:flex; gap:.25rem; list-style:none; }
.navlinks a{
  font-family:var(--label); letter-spacing:.16em; font-size:1.02rem;
  color:var(--ink); text-decoration:none; padding:.45rem .7rem; text-transform:uppercase;
  border-bottom:3px solid transparent;
}
.navlinks a:hover{ color:var(--red); border-bottom-color:var(--red); }
.navtoggle{ display:none; background:none; border:2px solid var(--ink); font-family:var(--label); letter-spacing:.1em; font-size:1rem; padding:.3rem .65rem; color:var(--ink); cursor:pointer; }
@media (max-width:760px){
  .navtoggle{ display:block; }
  .navlinks{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; background:var(--kraft); border-bottom:3px solid var(--ink); padding:.5rem 1rem 1rem;
  }
  .navlinks.open{ display:flex; }
}

/* ---------- stitched seam divider ---------- */
.seam{
  max-width:var(--maxw); margin:0 auto; padding:0 1.25rem;
  height:18px; position:relative;
}
.seam::before, .seam::after{
  content:""; position:absolute; left:1.25rem; right:1.25rem;
  border-top:var(--seam);
}
.seam::before{ top:4px; }
.seam::after{ top:12px; }

/* ---------- layout ---------- */
section{ padding:4.5rem 0; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 1.25rem; }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
@media (max-width:860px){ .split{ grid-template-columns:1fr; gap:2rem; } }

/* ---------- hero ---------- */
.hero{ padding:3.5rem 0 4rem; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center; }
@media (max-width:920px){ .hero-grid{ grid-template-columns:1fr; } }

.sackpanel{
  border:3px solid var(--ink);
  outline:2px dashed rgba(51,38,26,.5);
  outline-offset:-12px;
  padding:2.6rem 2.4rem 2.2rem;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.25), transparent 60%),
    var(--cream);
  position:relative;
}
.sack-origin{
  font-family:var(--label); letter-spacing:.3em; font-size:.95rem;
  color:var(--ink-soft); text-transform:uppercase; margin-bottom:1.2rem;
}
.sack-title{
  font-family:var(--slab);
  font-size:clamp(2.6rem, 6.4vw, 4.6rem);
  line-height:.98;
  text-transform:uppercase;
}
.sack-title .t-red{ color:var(--red); }
.sack-title .t-green{ color:var(--green); }
.sack-sub{
  margin-top:1.1rem;
  font-family:var(--label); letter-spacing:.22em; font-size:1.08rem;
  color:var(--ink-soft); text-transform:uppercase;
}
.sack-goods{
  margin-top:1.6rem; padding-top:1.2rem; border-top:var(--seam);
  display:flex; flex-wrap:wrap; gap:.5rem 1.4rem;
  font-family:var(--label); letter-spacing:.14em; font-size:1.05rem; text-transform:uppercase;
}
.sack-goods span::before{ content:"✶ "; color:var(--gold); }
.stamp{
  position:absolute; top:-38px; right:-26px;
  width:128px; transform:rotate(8deg);
  filter:drop-shadow(0 6px 12px rgba(51,38,26,.3));
}
@media (max-width:920px){ .stamp{ width:100px; top:-28px; right:-10px; } }

.heroshot{ position:relative; transform:rotate(1.2deg); }
.heroshot img{
  border:10px solid var(--cream);
  box-shadow:0 14px 30px rgba(51,38,26,.28);
  width:100%; aspect-ratio:5/4; object-fit:cover;
}
.heroshot .tape{
  position:absolute; width:120px; height:34px; z-index:2;
  background:rgba(214,191,142,.85);
  box-shadow:0 2px 4px rgba(51,38,26,.2);
  top:-12px; left:50%; transform:translateX(-50%) rotate(-2deg);
}
.heroshot figcaption{
  margin-top:.8rem; text-align:center;
  font-family:var(--hand); font-size:1.35rem; color:var(--ink-soft);
}

/* ---------- the stand board (signature) ---------- */
.standboard-section{ padding-top:2.5rem; }
.standboard{
  max-width:880px; margin:0 auto;
  background:
    linear-gradient(rgba(255,255,255,.05), rgba(0,0,0,.12)),
    var(--green-deep);
  color:var(--cream);
  border:6px solid var(--ink);
  box-shadow:0 18px 36px rgba(51,38,26,.3);
  transform:rotate(-.5deg);
  padding:2.4rem 2.6rem 2.6rem;
  position:relative;
}
.standboard h2{
  font-family:var(--label); letter-spacing:.2em; text-transform:uppercase;
  text-align:center; color:var(--cream); font-size:clamp(1.7rem,3.6vw,2.4rem);
  margin:0 0 .2em;
}
.standboard .board-sub{
  text-align:center; font-family:var(--hand); font-size:1.4rem; color:var(--gold);
  margin-bottom:1.6rem;
}
.board-list{ list-style:none; }
.board-list li{
  display:flex; align-items:baseline; gap:.9rem;
  padding:.55rem 0; font-size:1.12rem;
}
.board-list .item{ font-family:var(--label); letter-spacing:.1em; font-size:1.25rem; text-transform:uppercase; white-space:nowrap; }
.board-list .dots{ flex:1; border-bottom:2px dotted rgba(243,233,207,.45); transform:translateY(-5px); }
.board-list .price{ font-family:var(--label); font-size:1.25rem; letter-spacing:.06em; color:var(--gold); white-space:nowrap; }
.board-note{
  margin-top:1.8rem;
  background:var(--cream); color:var(--ink);
  font-family:var(--hand); font-size:1.45rem; line-height:1.35;
  padding:1rem 1.3rem; max-width:520px;
  transform:rotate(1.4deg);
  box-shadow:0 6px 14px rgba(0,0,0,.25);
  position:relative; margin-left:auto;
}
.board-note::before{
  content:""; position:absolute; top:-12px; left:38px;
  width:90px; height:26px; background:rgba(214,191,142,.9);
  box-shadow:0 2px 4px rgba(51,38,26,.25); transform:rotate(-3deg);
}
.board-foot{
  margin-top:1.6rem; text-align:center;
  font-family:var(--label); letter-spacing:.18em; font-size:.95rem;
  color:rgba(243,233,207,.75); text-transform:uppercase;
}

/* ---------- photo frames ---------- */
.frame{ background:var(--cream); padding:10px; box-shadow:0 10px 24px rgba(51,38,26,.22); }
.frame img{ width:100%; height:100%; object-fit:cover; }
.tilt-l{ transform:rotate(-1deg); }
.tilt-r{ transform:rotate(1deg); }

/* ---------- price card ---------- */
.pricecard{
  background:var(--cream); border:3px solid var(--ink);
  padding:1.6rem 1.8rem;
}
.pricecard h3{ text-align:center; border-bottom:var(--seam); padding-bottom:.7rem; margin-bottom:1rem; color:var(--red-deep); }
.pricecard ul{ list-style:none; }
.pricecard li{ display:flex; gap:.8rem; align-items:baseline; padding:.4rem 0; }
.pricecard .dots{ flex:1; border-bottom:2px dotted rgba(51,38,26,.4); transform:translateY(-4px); }
.pricecard .price{ font-family:var(--label); font-size:1.15rem; color:var(--red); }
.pricecard .fine{ margin-top:1rem; font-size:.95rem; color:var(--ink-soft); }

/* ---------- crew strip ---------- */
.crew{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; margin-top:2.5rem; }
@media (max-width:860px){ .crew{ grid-template-columns:repeat(2,1fr); } }
.crew figure{ background:var(--cream); padding:8px 8px 0; box-shadow:0 8px 18px rgba(51,38,26,.2); }
.crew figure:nth-child(odd){ transform:rotate(-1.2deg); }
.crew figure:nth-child(even){ transform:rotate(1.2deg); }
.crew img{ aspect-ratio:1/1.05; object-fit:cover; width:100%; }
.crew figcaption{ font-family:var(--hand); font-size:1.3rem; text-align:center; padding:.45rem 0 .55rem; color:var(--ink-soft); }

/* ---------- mosaics ---------- */
.mosaic{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; }
.mosaic .wide{ grid-column:1/-1; }
@media (max-width:560px){ .mosaic{ grid-template-columns:1fr; } }

/* ---------- buttons ---------- */
.btn{
  display:inline-block; margin-top:1.2rem;
  font-family:var(--label); letter-spacing:.16em; text-transform:uppercase; font-size:1.05rem;
  color:var(--cream); background:var(--red); text-decoration:none;
  padding:.65rem 1.4rem; border:2px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);
}
.btn:hover{ background:var(--red-deep); transform:translate(1px,1px); box-shadow:3px 3px 0 var(--ink); }
.btn.green{ background:var(--green); }
.btn.green:hover{ background:var(--green-deep); }

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
@media (max-width:760px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-card{ background:var(--cream); border:3px solid var(--ink); padding:2rem; }
.contact-card p{ padding:.5rem 0; font-size:1.12rem; }
.contact-card .k{ font-family:var(--label); letter-spacing:.14em; text-transform:uppercase; color:var(--green-deep); margin-right:.5rem; }
.mapframe{ border:3px solid var(--ink); background:var(--cream); padding:8px; }
.mapframe iframe{ width:100%; height:320px; border:0; display:block; }

/* ---------- footer ---------- */
footer{
  background:var(--ink); color:var(--kraft);
  text-align:center; padding:2.6rem 1.25rem;
}
footer .f-brand{ font-family:var(--label); letter-spacing:.26em; font-size:1.2rem; text-transform:uppercase; }
footer p{ margin-top:.5rem; font-size:.98rem; color:rgba(227,210,172,.8); }
footer .hand{ font-family:var(--hand); font-size:1.35rem; color:var(--gold); }
footer a{ color:var(--kraft); }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } }