/* Winegar's Coffee & Creamery — shared design system for the /site/ pages.
   The homepage (index.html) currently carries its own copy of these tokens
   inline; keep the two in step until the homepage is refactored onto this file. */
:root{
  --red:#B22326; --red-deep:#8E1B1E;
  --cream:#FBF7EF; --parchment:#F4EBDC; --card:#FFFDF8;
  --ink:#2E2119; --ink-soft:#6B5847; --line:#E3D6C2;
  --gold:#C98A2E; --gold-soft:#E9D9BC;
  --board:#2B1E15; --board-card:#3A2A1E; --board-ink:#F3E9DC; --board-line:#54402E;
  --btn-ink:#FFFDF8;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--cream);color:var(--ink);font-family:'Lora',Georgia,serif;line-height:1.6}
img{max-width:100%;display:block}
a{color:var(--red);text-decoration:none}
a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

.ribbon{background:var(--gold);color:#2E2119;text-align:center;font-family:'Archivo Narrow',Arial,sans-serif;font-weight:600;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;padding:.45rem .8rem}

header.site{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem clamp(1rem,4vw,3rem);background:var(--cream);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.7rem}
.brand .badge{display:grid;place-items:center;flex:none}
.brand .badge img{width:64px;height:auto}
.brand .wordmark{font-family:'Yeseva One',Georgia,serif;font-size:1.25rem;letter-spacing:.01em;color:var(--ink)}
.brand .wordmark small{display:block;font-family:'Archivo Narrow',Arial,sans-serif;font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--red)}
nav.main{display:flex;align-items:center;gap:clamp(.8rem,2vw,1.6rem);font-family:'Archivo Narrow',Arial,sans-serif;font-weight:600;font-size:.92rem;letter-spacing:.08em;text-transform:uppercase}
nav.main a{color:var(--ink)}
nav.main a:hover{color:var(--red)}
/* ⚠ THE GIFT CARDS BUTTON WAS UNREADABLE (Kori, 08-22, from a screenshot).
   .btn sets color:var(--btn-ink), but `nav.main a` is the more specific
   selector, so the dark nav ink won and the lettering sat near-black on the
   red — 2.35:1, well under the 4.5:1 a person needs. Restating it at equal-
   or-higher specificity puts the cream back: 6.22:1, and 8.45:1 on hover. */
nav.main a.btn,nav.main a.btn:hover{color:var(--btn-ink)}
nav.main a[aria-current="page"]{color:var(--red);border-bottom:2px solid var(--gold);padding-bottom:2px}

.btn{display:inline-block;background:var(--red);color:var(--btn-ink);font-family:'Archivo Narrow',Arial,sans-serif;font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:.9rem;padding:.7rem 1.4rem;border-radius:3px;border:none;cursor:pointer}
.btn:hover{background:var(--red-deep);color:var(--btn-ink)}

.pagehead{background:var(--parchment);border-bottom:1px solid var(--line);text-align:center;padding:clamp(2rem,5vw,3.4rem) 1.2rem}
.pagehead .eyebrow{font-family:'Archivo Narrow',Arial,sans-serif;font-weight:600;font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.pagehead h1{font-family:'Yeseva One',Georgia,serif;font-size:clamp(2rem,5vw,3rem);line-height:1.1;margin-top:.4rem;text-wrap:balance}
.pagehead h1 em{font-style:normal;color:var(--red)}
.pagehead p{max-width:38rem;margin:.8rem auto 0;color:var(--ink-soft)}

.wrap{max-width:1100px;margin:0 auto;padding:clamp(2rem,5vw,3.4rem) clamp(1rem,4vw,3rem)}
.eyebrow{font-family:'Archivo Narrow',Arial,sans-serif;font-weight:600;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
h2.sect{font-family:'Yeseva One',Georgia,serif;font-size:clamp(1.5rem,3.4vw,2.1rem);margin-top:.3rem;text-wrap:balance}

.farmband{background:var(--cream);line-height:0;border-top:1px solid var(--line)}
.farmband img{width:100%;height:clamp(110px,15vw,180px);object-fit:cover;object-position:50% 82%;display:block}

footer.site{background:var(--board);color:#CBB79E;padding:2.2rem clamp(1rem,4vw,3rem);text-align:center;font-size:.92rem}
footer.site .fbrand{font-family:'Yeseva One',Georgia,serif;color:var(--board-ink);font-size:1.15rem;margin-bottom:.4rem}
footer.site nav{display:flex;justify-content:center;gap:1.4rem;flex-wrap:wrap;margin:.9rem 0 1.1rem;font-family:'Archivo Narrow',Arial,sans-serif;font-weight:600;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase}
footer.site nav a{color:#F5C97B}
footer.site .fine{font-size:.8rem;color:#8A755D}

@media (max-width:720px){
  header.site{flex-direction:column;gap:.6rem;padding-bottom:.8rem}
  nav.main{width:100%;justify-content:center;flex-wrap:wrap;font-size:.82rem;gap:.7rem 1.1rem}
  nav.main a.btn{padding:.5rem 1rem;font-size:.8rem}
}

/*NAVBAR*/
.navtoggle{display:none;background:none;border:1px solid var(--line);border-radius:5px;
  color:var(--ink);font-size:1.15rem;line-height:1;padding:.45rem .6rem;cursor:pointer;flex:none}
/* brand hard left; the nav and the Gift Cards button travel together on the right */
header.site .brand{margin-right:auto}
.navgift{flex:none}
@media (max-width:820px){
  /* ⚠ THE BUTTON IS NOT IN THE DROPDOWN. It sits beside the wordmark on every
     page and at every width - Kori, 08-22. Only the links collapse. */
  header.site{flex-direction:row;flex-wrap:wrap;align-items:center;gap:.6rem;position:relative}
  .navtoggle{display:block;order:-1}
  .brand .badge img{width:44px}
  .brand .wordmark{font-size:1rem}
  .brand .wordmark small{font-size:.6rem;letter-spacing:.18em}
  .navgift{padding:.5rem .85rem;font-size:.75rem;letter-spacing:.08em}
  nav.main{display:none;order:9;width:100%;flex-direction:column;align-items:stretch;gap:0;
    border-top:1px solid var(--line);margin-top:.2rem;padding-top:.2rem}
  nav.main.open{display:flex}
  nav.main a{padding:.75rem .2rem;border-bottom:1px solid var(--line)}
  nav.main a:last-child{border-bottom:none}
}
/*/NAVBAR*/

/*MOVE*/
/* ── THINGS ARRIVE AS YOU SCROLL ─────────────────────────────────────────
   Kori, 08-23: "is there a way to put some more movement into the website at
   all... it just kind of seems a little bit stale."
   ⚠⚠ NOTHING IS HIDDEN UNLESS THE SCRIPT IS RUNNING. The `move-on` class is put
     on <html> by the script itself, so with JavaScript off — or if the script
     throws — every card is simply visible, which is the state that matters.
   ⚠ ARRIVAL USES `translate`, HOVER USES `transform` — separate properties on
     purpose. When both used `transform`, the arrival rule outranked the hover
     rule and no card could ever lift. Kori found it by pointing at cards. */
.move-on .mv{opacity:0;translate:0 18px;
  transition:opacity .6s ease-out,translate .6s ease-out}
.move-on .mv.mv-in{opacity:1;translate:0 0}
/* ── THE LIFT. Kori, 08-23, on the first version: "they really don't come out
   at me." -3px read as nothing; this is a real lift, and the photo leans in
   with the card. Cards clip their corners (overflow:hidden), so the zoom
   stays inside the frame. */
.bcard,.sbcard,.wing,.fl,.mi.lk{transition:transform .22s ease,box-shadow .22s ease}
.bcard:hover,.sbcard:hover{transform:translateY(-7px);box-shadow:0 16px 34px rgba(0,0,0,.30)}
.wing:hover,a.fl:hover{transform:translateY(-7px);box-shadow:0 16px 34px rgba(0,0,0,.16)}
.mi.lk:hover{transform:translateY(-3px)}
.bcard .ph,.sbcard .ph,.wing .ph{transition:transform .3s ease}
.bcard:hover .ph,.sbcard:hover .ph,.wing:hover .ph{transform:scale(1.05)}
@media (prefers-reduced-motion: reduce){
  .move-on .mv{opacity:1;translate:none;transition:none}
  .bcard,.sbcard,.wing,.fl,.mi.lk,.bcard .ph,.sbcard .ph,.wing .ph{transition:none}
  .bcard:hover,.sbcard:hover,.wing:hover,a.fl:hover,.mi.lk:hover{transform:none}
  .bcard:hover .ph,.sbcard:hover .ph,.wing:hover .ph{transform:none}
}
/*/MOVE*/