:root{
  --honey:#e3bc6f;  /* exact gold */
  --amber:#d9922b;
  --cream:#fff8e6;
  --ink:#241d1c;
  --blue:#173b56;
}

*{box-sizing:border-box}
html,body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6;
}

@font-face{
  font-family:'AquilineTwo';
  src:url('assets/fonts/AquilineTwo.ttf') format('truetype');
  font-display:swap;
}

a{color:var(--blue);text-decoration:none}

/* =================== HEADER (logo left; text stack right) =================== */
header{
  background:linear-gradient(180deg,#fffdf7cc,#fff8e6f6),
             url('assets/img/apiary-2.jpg') center/cover no-repeat fixed;
  border-bottom:1px solid #ead9b0;
  padding:10px 12px 42px;
  position:relative; overflow:hidden;
}

.brand{
  max-width:1100px; margin:0 auto;
  display:flex; align-items:center; justify-content:center;
  gap:22px; flex-wrap:wrap;
}

.brand img{
  width:clamp(180px,20vw,260px); height:auto; display:block;
  border:3px solid var(--blue); background:#fff8e6; padding:4px;
  box-shadow:0 4px 10px rgba(0,0,0,.12);
}

.brand-info{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.brand-info h1{font-family:'AquilineTwo',serif;font-size:clamp(44px,6vw,72px);color:var(--blue);margin:0 0 4px}
.tag{margin:0;color:#46525e}
.brand-info .cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:0}
.brand-info .cta .button{background:var(--blue);color:#fff;padding:12px 20px;font-weight:700;border-radius:999px;box-shadow:0 8px 16px rgba(0,0,0,.12)}
.brand-info .cta .button:last-child{background:var(--honey)}

@media (max-width:700px){
  .brand{flex-direction:column;gap:12px}
  .brand img{width:170px}
}

/* =================== NAV =================== */
nav.sticky{
  position:sticky; top:0; z-index:50;
  background:rgba(255,248,230,.95);
  border-bottom:1px solid #ead9b0;
  backdrop-filter:saturate(120%) blur(6px);
}
nav.sticky .inner{
  max-width:1100px;margin:auto;display:flex;justify-content:center;flex-wrap:wrap;padding:8px 12px;gap:10px
}
nav a {
  position: relative;
  font-family: 'AquilineTwo', serif;
  font-size: 1.1rem; /* was 1.2rem, now slightly smaller */
  letter-spacing: 0.5px;
  text-decoration: none;
  color: inherit;
  margin: 0 18px; /* tweak spacing if needed */
}
nav a::after{
  content:""; position:absolute; left:0; bottom:-4px; width:0; height:3px;
  background:var(--honey); transition:width .3s ease
}
nav a:hover::after{width:100%}

/* =================== HONEY DRIP DIVIDER =================== */
.honey-drip{
  height:30px;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="60" viewBox="0 0 1200 60"><path fill="%23e3bc6f" d="M0,0H1200V34c-54,16-108,16-162,0s-108-16-162,0-108,16-162,0-108-16-162,0-108,16-162,0S108,18,54,34,0,34,0,34Z"/></svg>') center/cover no-repeat
}

/* =================== MAIN LAYOUT =================== */
main{max-width:1100px;margin:auto;padding:28px 18px}
section{padding:30px 0;border-bottom:1px solid #ead9b0}
section:last-child{border-bottom:none}
h2{font-family:'AquilineTwo',serif;color:var(--blue);font-size:clamp(30px,4vw,40px);margin:0 0 12px}
.lead{font-size:1.05rem;max-width:70ch}

/* =================== CARDS / GRID =================== */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:16px}
.card{background:#fff;border:1px solid #ead9b0;border-radius:16px;overflow:hidden;box-shadow:0 8px 18px rgba(0,0,0,.06)}
.card img{width:100%;height:200px;object-fit:cover;display:block}
.card .p{padding:14px}

/* =================== PAPER / GALLERY =================== */
.paper{background:radial-gradient(ellipse at top,#fffef8 0%,#fff6d8 100%);border:1px solid #ead9b0;border-radius:14px;padding:16px;box-shadow:0 8px 18px rgba(0,0,0,.05)}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.gallery img{width:100%;height:200px;object-fit:cover;border-radius:12px;cursor:pointer}

/* =================== FOOTER =================== */
footer{background:#f7e8bf;padding:28px 16px;text-align:center;border-top:1px solid #ead9b0}
footer .social a{margin:0 8px;font-weight:700}
small{opacity:.8}

/* =================== HELPERS =================== */
.button{display:inline-block;border:none;cursor:pointer}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:12px}

/* Back-to-top + chat */
#toTop{position:fixed;right:18px;bottom:18px;background:#ffffffcc;border:1px solid #ead9b0;border-radius:999px;padding:10px 14px;cursor:pointer;display:none}
#toTop:hover{background:#fff}
#chatBubble{position:fixed;right:18px;bottom:76px;background:var(--blue);color:#fff;border-radius:999px;padding:12px 16px;font-weight:700;cursor:pointer;box-shadow:0 8px 16px rgba(0,0,0,.2)}

/* Little mascot bee (optional) */
.bee{
  position:absolute; left:-60px; top:30%; width:36px; height:36px;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g fill="%23ffcc00"><ellipse cx="32" cy="32" rx="14" ry="10"/></g><g fill="%23000"><rect x="22" y="26" width="20" height="4"/><rect x="22" y="34" width="20" height="4"/></g><circle cx="18" cy="32" r="6" fill="%23000"/><circle cx="20" cy="30" r="2" fill="%23fff"/></svg>') center/contain no-repeat;
  animation:fly 22s linear infinite; opacity:.9
}
@keyframes fly{
  0%{transform:translateX(0) translateY(0) rotate(0deg)}
  25%{transform:translateX(40vw) translateY(-10px) rotate(10deg)}
  50%{transform:translateX(60vw) translateY(10px) rotate(-8deg)}
  75%{transform:translateX(85vw) translateY(-6px) rotate(6deg)}
  100%{transform:translateX(110vw) translateY(0) rotate(0deg)}
}
/* =================== MOBILE POLISH (phones ≤ 700px) =================== */
@media (max-width: 700px) {
  /* Header spacing */
  header { padding: 8px 12px 28px; }

  /* Logo + text/buttons stack */
  .brand { flex-direction: column; gap: 10px; }
  .brand-logo img { width: 160px; }

  /* Main heading + tagline (tighter + centered) */
  .brand-info h1 { font-size: clamp(36px, 8vw, 56px); margin: 0 0 4px; }
  .brand-info .tag { font-size: 1.05rem; margin: 0 0 8px; }

  /* Buttons: bigger tap targets */
  .brand-info .cta { gap: 10px; }
  .brand-info .cta .button {
    padding: 14px 18px;
    min-height: 44px;      /* recommended thumb size */
  }

  /* Nav: readable and tappable */
  nav.sticky .inner { padding: 10px 10px; gap: 8px; }
  nav a {
    font-size: 1.25rem;    /* larger on phones */
    margin: 0 10px;
    line-height: 1.3;
    padding: 6px 2px;      /* touch padding without blowing up layout */
    white-space: nowrap;
  }

  /* Layout + media */
  main { padding: 22px 14px; }
  .grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
  .card img, .gallery img { height: 160px; }

  /* Footer + floating buttons */
  footer { padding: 22px 14px; }
  #toTop, #chatBubble { right: 12px; }
}

/* =================== TABLET TUNE (701–980px) =================== */
@media (min-width: 701px) and (max-width: 980px) {
  nav a { font-size: 1.15rem; margin: 0 12px; }
}
/* Mobile-friendly nav adjustments */
@media (max-width: 768px) {
  nav.sticky .inner {
    flex-wrap: wrap; /* allow wrapping to next line */
    justify-content: center;
    gap: 10px; /* space between touch targets */
  }

  nav a {
    font-size: 1rem; /* slightly smaller for mobile */
    padding: 6px 10px; /* make touch-friendly without crowding */
  }
}
/* Tablet-friendly adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Nav: keep on one line but give more breathing room */
  nav.sticky .inner {
    flex-wrap: nowrap;
    gap: 14px;
    justify-content: center;
  }

  nav a {
    font-size: 1.15rem;  /* slightly bigger than mobile */
    padding: 6px 14px;
  }

  /* Header: balance logo + text stack */
  .brand {
    gap: 18px;
  }
  .brand-logo img {
    max-width: 200px;
  }

  /* Content grids: fewer columns so text isn't squished */
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
  }
}