/* ==========================================================================
   OPG MATAN — stylesheet
   Eco-handmade + modern: kraft paper texture, honey gold, botanical line art
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500;1,9..144,600&family=Work+Sans:wght@300;400;500;600;700&family=Caveat:wght@500;700&display=swap');

/* ---------- Design tokens ---------- */
:root{
  --ink:#221d15;
  --ink-soft:#544c3d;
  --ink-faint:#8a8071;

  --cream:#faf5e8;
  --cream-deep:#f1e7d2;
  --cream-line:rgba(34,29,21,.13);

  --honey:#fbbe07;
  --honey-deep:#c98a0a;
  --honey-ink:#5c3c06;
  --honey-pale:#ffedb0;

  --sage:#6d7a4e;
  --sage-deep:#4c5736;
  --sage-pale:#e7ead9;

  --paper-img:url('../assets/img/paper-texture.jpg');

  --shadow-sm:0 8px 24px -12px rgba(34,29,21,.28);
  --shadow-lg:0 30px 70px -30px rgba(34,29,21,.4);

  --radius:22px;
  --radius-sm:12px;

  --maxw:1200px;

  --font-display:'Fraunces', serif;
  --font-body:'Work Sans', sans-serif;
  --font-hand:'Caveat', cursive;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4,p,figure{margin:0;}
button{font-family:inherit;cursor:pointer;}
input,textarea{font-family:inherit;font-size:1rem;}
.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 clamp(20px,5vw,56px);
}

/* subtle paper-texture background applied to whole page */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background-image:var(--paper-img);
  background-size:900px;
  opacity:.5;
  mix-blend-mode:multiply;
  pointer-events:none;
  z-index:0;
}
body > *{position:relative;z-index:1;}

/* ---------- Typography ---------- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.01em;
  color:var(--ink);
}
h1{font-size:clamp(2.6rem,5.4vw,4.6rem);}
h2{font-size:clamp(2rem,4vw,3rem);}
h3{font-size:clamp(1.3rem,2vw,1.7rem);}
p{line-height:1.7;color:var(--ink-soft);}
.lede{font-size:clamp(1.05rem,1.6vw,1.3rem);}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-hand);
  font-size:1.5rem;
  color:var(--sage-deep);
  margin-bottom:6px;
}
.eyebrow::before{
  content:"";
  width:26px;height:2px;
  background:var(--honey);
  display:inline-block;
  border-radius:2px;
}

.section-head{
  max-width:640px;
  margin-bottom:52px;
}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 30px;
  border-radius:100px;
  font-weight:600;
  font-size:.98rem;
  border:1.5px solid transparent;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  white-space:nowrap;
}
.btn-primary{
  background:var(--honey);
  color:var(--honey-ink);
  box-shadow:var(--shadow-sm);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);}
.btn-outline{
  background:transparent;
  border-color:var(--ink);
  color:var(--ink);
}
.btn-outline:hover{background:var(--ink);color:var(--cream);}
.btn-ghost-light{
  border-color:rgba(255,255,255,.55);
  color:#fff;
}
.btn-ghost-light:hover{background:#fff;color:var(--ink);}
.btn-sm{padding:10px 20px;font-size:.88rem;}

/* ---------- Honeycomb decorative bits ---------- */
.hex{
  clip-path:polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
}
.honeycomb-row{
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(251,190,7,.10) 0, transparent 45%),
    radial-gradient(circle at 90% 80%, rgba(109,122,78,.10) 0, transparent 45%);
  pointer-events:none;
}

.divider-hex{
  display:flex;
  justify-content:center;
  gap:14px;
  padding:46px 0;
}
.divider-hex span{
  width:14px;height:14px;
  background:var(--honey);
  clip-path:polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
  opacity:.55;
}
.divider-hex span:nth-child(2){background:var(--sage);opacity:.7;transform:scale(1.3);}
.divider-hex span:nth-child(4){background:var(--sage);opacity:.7;transform:scale(1.3);}

/* decorative botanical line-art */
.leaf-deco{
  position:absolute;
  opacity:.14;
  filter:brightness(0) saturate(100%);
  pointer-events:none;
  z-index:0;
}

/* ---------- Header / nav ---------- */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  padding:18px 0;
  transition:background .35s ease, padding .35s ease, box-shadow .35s ease;
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.site-header.is-scrolled{
  background:rgba(250,245,232,.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--cream-line);
  padding:12px 0;
}
.brand img{height:40px;width:auto;}
.brand{display:flex;align-items:center;}

.nav-links{
  display:flex;
  align-items:center;
  gap:2px;
}
.nav-links a{
  padding:10px 16px;
  border-radius:100px;
  font-weight:500;
  font-size:.95rem;
  color:var(--ink);
  transition:background .2s ease, color .2s ease;
}
.nav-links a:hover{background:rgba(34,29,21,.06);}
.nav-links a.active{color:var(--honey-ink);font-weight:600;}

.nav-actions{display:flex;align-items:center;gap:14px;}
.mobile-contact{display:none;}

.nav-toggle{
  display:none;
  width:44px;height:44px;
  border-radius:50%;
  border:1.5px solid var(--cream-line);
  background:var(--cream);
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
}
.nav-toggle span{
  width:18px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .3s ease, opacity .3s ease;
}
.nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.is-open span:nth-child(2){opacity:0;}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (max-width:900px){
  .nav-links{
    position:fixed;
    inset:74px 16px auto 16px;
    flex-direction:column;
    align-items:stretch;
    background:var(--cream);
    border:1px solid var(--cream-line);
    border-radius:20px;
    padding:10px;
    box-shadow:var(--shadow-lg);
    gap:2px;
    transform:translateY(-14px);
    opacity:0;
    pointer-events:none;
    transition:transform .3s ease, opacity .3s ease;
  }
  .nav-links.is-open{transform:translateY(0);opacity:1;pointer-events:auto;}
  .nav-links a{padding:14px 18px;}
  .nav-links .mobile-contact{display:inline-flex;justify-content:center;color:var(--honey-ink);margin-top:4px;}
  .nav-actions .btn-primary{display:none;}
  .nav-toggle{display:flex;}
}

/* ---------- Hero ---------- */
.hero{
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  position:relative;
  padding-top:120px;
  overflow:hidden;
}
.hero-media{
  position:absolute;inset:0;
  z-index:-1;
}
.hero-media img{
  width:100%;height:100%;object-fit:cover;
}
.hero-media::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(20,16,9,.15) 0%, rgba(20,16,9,.35) 55%, rgba(20,16,9,.82) 100%);
}
.hero-inner{
  padding-bottom:clamp(50px,8vw,96px);
  color:#fff;
  max-width:820px;
}
.hero .eyebrow{color:var(--honey-pale);}
.hero .eyebrow::before{background:var(--honey-pale);}
.hero h1{color:#fff;}
.hero p{color:rgba(255,255,255,.86);max-width:560px;margin-top:18px;}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:36px;}

.hero-scroll{
  position:absolute;
  right:clamp(20px,5vw,56px);
  bottom:36px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  color:rgba(255,255,255,.75);
  font-size:.8rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.hero-scroll .line{
  width:1px;height:46px;
  background:linear-gradient(180deg, rgba(255,255,255,.9), transparent);
  animation:scrollpulse 2s ease-in-out infinite;
}
@keyframes scrollpulse{
  0%,100%{transform:scaleY(1);opacity:.6;}
  50%{transform:scaleY(.6);opacity:1;}
}

/* ---------- Marquee strip ---------- */
.strip{
  background:var(--ink);
  color:var(--cream);
  overflow:hidden;
  padding:16px 0;
}
.strip-track{
  display:flex;
  justify-content:center;
  gap:48px;
  white-space:normal;
  width:100%;
}
.strip-track span{
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.1rem;
  color:var(--honey);
  display:flex;
  align-items:center;
  gap:48px;
  text-align:center;
}
.strip-track span::after{content:"✳";color:var(--sage);font-style:normal;margin-left:48px;}
.strip-track span + span{display:none;}

/* ---------- Section spacing ---------- */
section{
  padding:clamp(70px,10vw,130px) 0;
  position:relative;
}
.bg-cream-deep{background:var(--cream-deep);}
.bg-ink{background:var(--ink);color:var(--cream);}
.bg-ink p{color:rgba(250,245,232,.72);}
.bg-ink h2,.bg-ink h3{color:var(--cream);}

/* ---------- Story section ---------- */
.story-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(30px,6vw,90px);
  align-items:center;
}
.story-media{
  position:relative;
}
.story-media .frame-main{
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  aspect-ratio:4/5;
}
.story-media .frame-main img{width:100%;height:100%;object-fit:cover;}
.story-badge{
  position:absolute;
  bottom:-30px;left:-30px;
  background:var(--honey);
  color:var(--honey-ink);
  border-radius:50%;
  width:132px;height:132px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-family:var(--font-display);
  font-weight:600;
  font-size:.95rem;
  line-height:1.2;
  box-shadow:var(--shadow-lg);
  transform:rotate(-8deg);
}
.story-badge b{display:block;font-size:2rem;line-height:1;}
@media (max-width:760px){
  .story-badge{width:100px;height:100px;font-size:.78rem;bottom:-18px;left:-14px;}
  .story-badge b{font-size:1.5rem;}
}

.story-text .signature{
  margin-top:28px;
  font-family:var(--font-hand);
  font-size:1.6rem;
  color:var(--sage-deep);
}

.stat-row{
  display:flex;
  gap:clamp(24px,5vw,56px);
  margin-top:40px;
  flex-wrap:wrap;
}
.stat-row .stat b{
  display:block;
  font-family:var(--font-display);
  font-size:2.4rem;
  color:var(--honey-deep);
}
.stat-row .stat span{font-size:.9rem;color:var(--ink-soft);}

/* ---------- Products ---------- */
.honey-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}
.honey-card{
  background:var(--cream);
  border:1px solid var(--cream-line);
  border-radius:var(--radius);
  padding:30px 26px 32px;
  position:relative;
  overflow:hidden;
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.honey-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:transparent;}
.honey-card .illus{
  width:100%;
  height:150px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:18px;
}
.honey-card .illus img{
  height:100%;
  width:auto;
  filter:brightness(0) saturate(100%);
  opacity:.86;
  transition:transform .4s ease;
}
.honey-card:hover .illus img{transform:scale(1.06) rotate(-2deg);}
.honey-card .tag{
  font-family:var(--font-hand);
  font-size:1.7rem;
  color:var(--honey-deep);
  display:block;
  margin-bottom:4px;
}
.honey-card h3{font-size:1.25rem;margin-bottom:8px;}
.honey-card p{font-size:.93rem;}
.honey-card .swatch{
  position:absolute;
  top:0;left:0;right:0;
  height:6px;
}
.honey-card:nth-child(1) .swatch{background:#e2b64a;}
.honey-card:nth-child(2) .swatch{background:#f0d27b;}
.honey-card:nth-child(3) .swatch{background:#d9a441;}
.honey-card:nth-child(4) .swatch{background:#8a5a34;}

@media (max-width:980px){
  .honey-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .honey-grid{grid-template-columns:1fr;}
}

.products-showcase{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(30px,6vw,80px);
  align-items:center;
  margin-top:90px;
}
.products-showcase .frame{
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.mini-products{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:28px;
}
.mini-product{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:18px;
  background:var(--cream);
  border:1px solid var(--cream-line);
  border-radius:var(--radius-sm);
}
.mini-product .dot{
  flex:none;
  width:38px;height:38px;
  border-radius:50%;
  background:var(--sage-pale);
  color:var(--sage-deep);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);
  font-weight:600;
}
.mini-product h4{font-family:var(--font-body);font-weight:600;font-size:.98rem;margin-bottom:4px;}
.mini-product p{font-size:.85rem;margin:0;}

/* ---------- Communities section ---------- */
.community-grid{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:clamp(30px,6vw,80px);
  align-items:center;
}
.community-media{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  aspect-ratio:6/7;
}
.community-media img{width:100%;height:100%;object-fit:cover;}
.community-media .caption{
  position:absolute;left:22px;bottom:22px;right:22px;
  background:rgba(20,16,9,.55);
  backdrop-filter:blur(6px);
  color:#fff;
  padding:14px 18px;
  border-radius:var(--radius-sm);
  font-size:.85rem;
}
.check-list{margin-top:26px;display:grid;gap:14px;}
.check-list li{
  display:flex;
  gap:14px;
  align-items:flex-start;
  color:var(--ink-soft);
}
.check-list li::before{
  content:"";
  flex:none;
  width:22px;height:22px;
  margin-top:2px;
  background:var(--honey);
  clip-path:polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
}

@media (max-width:900px){
  .story-grid,.products-showcase,.community-grid{grid-template-columns:1fr;}
  .products-showcase{margin-top:60px;}
  .products-showcase .frame{order:2;}
}

/* ---------- Blog preview / grid ---------- */
.blog-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}
.blog-card{
  background:var(--cream);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform .35s ease, box-shadow .35s ease;
  display:flex;
  flex-direction:column;
}
.blog-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);}
.blog-card .thumb{aspect-ratio:4/3;overflow:hidden;}
.blog-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.blog-card:hover .thumb img{transform:scale(1.06);}
.blog-card .body{padding:24px 24px 28px;flex:1;display:flex;flex-direction:column;}
.blog-card .meta{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--sage-deep);
  font-weight:600;
  margin-bottom:10px;
}
.blog-card h3{font-size:1.2rem;margin-bottom:10px;}
.blog-card p{font-size:.92rem;flex:1;}
.blog-card .readmore{
  margin-top:16px;
  font-weight:600;
  font-size:.9rem;
  color:var(--honey-deep);
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.blog-card .readmore .arrow{transition:transform .25s ease;}
.blog-card:hover .readmore .arrow{transform:translateX(4px);}

@media (max-width:900px){
  .blog-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:600px){
  .blog-grid{grid-template-columns:1fr;}
}

.section-foot-link{
  display:flex;justify-content:center;margin-top:50px;
}

/* ---------- Contact ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:clamp(30px,6vw,80px);
}
.contact-card{
  background:var(--ink);
  color:var(--cream);
  border-radius:var(--radius);
  padding:clamp(30px,4vw,46px);
}
.contact-card h3{color:var(--cream);margin-bottom:22px;}
.contact-list{display:grid;gap:20px;margin-bottom:30px;}
.contact-list li{display:flex;gap:14px;align-items:flex-start;}
.contact-list .ico{
  flex:none;width:42px;height:42px;border-radius:50%;
  background:rgba(251,190,7,.14);
  color:var(--honey);
  display:flex;align-items:center;justify-content:center;
}
.contact-list a{font-weight:500;}
.contact-list a:hover{color:var(--honey);}
.contact-list p{color:rgba(250,245,232,.7);margin:0;font-size:.92rem;}
.social-row{display:flex;gap:12px;margin-top:8px;}
.social-row a{
  width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(250,245,232,.25);
  display:flex;align-items:center;justify-content:center;
  transition:background .25s ease, border-color .25s ease;
}
.social-row a:hover{background:var(--honey);border-color:var(--honey);color:var(--honey-ink);}

.form-card{
  background:var(--cream);
  border:1px solid var(--cream-line);
  border-radius:var(--radius);
  padding:clamp(30px,4vw,46px);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.field{margin-bottom:18px;}
.field label{
  display:block;font-size:.85rem;font-weight:600;
  margin-bottom:8px;color:var(--ink);
}
.field input,.field textarea{
  width:100%;
  padding:14px 16px;
  border-radius:12px;
  border:1.5px solid var(--cream-line);
  background:#fff;
  color:var(--ink);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.field input:focus,.field textarea:focus{
  outline:none;
  border-color:var(--honey);
  box-shadow:0 0 0 4px rgba(251,190,7,.18);
}
.field textarea{resize:vertical;min-height:130px;}
.form-note{font-size:.8rem;color:var(--ink-faint);margin-top:14px;}
.form-success{
  display:none;
  margin-top:16px;
  padding:14px 16px;
  border-radius:12px;
  background:var(--sage-pale);
  color:var(--sage-deep);
  font-size:.9rem;
  font-weight:500;
}
.form-success.is-visible{display:block;}

@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
}

/* ---------- CTA band ---------- */
.cta-band{
  text-align:center;
  padding:clamp(60px,10vw,110px) 0;
}
.cta-band h2{max-width:720px;margin:0 auto 26px;}
.cta-band .btn-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--ink);
  color:rgba(250,245,232,.7);
  padding:70px 0 30px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1.1fr;
  gap:40px;
  padding-bottom:50px;
  border-bottom:1px solid rgba(250,245,232,.14);
}
.footer-grid img{height:40px;margin-bottom:16px;}
.footer-grid p{color:rgba(250,245,232,.6);font-size:.92rem;max-width:280px;}
.footer-col h4{
  font-family:var(--font-body);
  color:var(--cream);
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:18px;
}
.footer-col ul{display:grid;gap:12px;}
.footer-col a{font-size:.92rem;color:rgba(250,245,232,.7);}
.footer-col a:hover{color:var(--honey);}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:26px;
  font-size:.82rem;
  color:rgba(250,245,232,.45);
  flex-wrap:wrap;
  gap:10px;
}
.footer-bottom .social-row a{width:36px;height:36px;}

@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr;}
}

/* ---------- Reveal-on-scroll ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s ease, transform .8s ease;
}
[data-reveal].is-visible{opacity:1;transform:translateY(0);}
[data-reveal="fade"]{transform:none;}

/* ---------- Page hero (blog / inner pages) ---------- */
.page-hero{
  padding:170px 0 70px;
  text-align:center;
}
.page-hero .eyebrow{justify-content:center;}
.page-hero p{max-width:600px;margin:18px auto 0;}

/* ---------- Blog post article ---------- */
.post-hero-media{
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  aspect-ratio:16/8;
  margin-bottom:50px;
}
.post-hero-media img{width:100%;height:100%;object-fit:cover;}
.post-body{
  max-width:760px;
  margin:0 auto;
}
.post-body .lede{color:var(--ink);font-family:var(--font-display);font-size:1.35rem;font-weight:500;}
.post-body h2{margin-top:46px;margin-bottom:16px;font-size:1.7rem;}
.post-body p{margin-bottom:20px;font-size:1.05rem;}
.post-body ul{margin:0 0 20px;padding-left:0;display:grid;gap:10px;}
.post-body ul li{
  padding-left:30px;position:relative;color:var(--ink-soft);
}
.post-body ul li::before{
  content:"";
  position:absolute;left:0;top:8px;
  width:14px;height:14px;
  background:var(--honey);
  clip-path:polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
}
.post-body blockquote{
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.3rem;
  color:var(--sage-deep);
  border-left:3px solid var(--honey);
  padding:6px 0 6px 26px;
  margin:36px 0;
}
.post-meta-row{
  display:flex;align-items:center;gap:16px;
  max-width:760px;margin:0 auto 40px;
  padding-bottom:30px;
  border-bottom:1px solid var(--cream-line);
}
.post-meta-row .avatar{
  width:48px;height:48px;border-radius:50%;
  background:var(--honey-pale);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:600;color:var(--honey-ink);
}
.post-meta-row .meta small{display:block;color:var(--ink-faint);}
.post-tags{display:flex;gap:10px;flex-wrap:wrap;max-width:760px;margin:44px auto 0;}
.post-tags span{
  padding:8px 16px;border-radius:100px;
  background:var(--sage-pale);color:var(--sage-deep);
  font-size:.82rem;font-weight:600;
}
.post-nav{
  max-width:760px;margin:60px auto 0;
  display:flex;justify-content:space-between;gap:20px;
  padding-top:36px;border-top:1px solid var(--cream-line);
}
.post-nav a{font-weight:600;color:var(--honey-deep);display:flex;align-items:center;gap:8px;}

/* ---------- Misc ---------- */
.badge-corner{
  position:absolute;top:26px;right:26px;
  background:var(--cream);
  color:var(--ink);
  font-size:.78rem;font-weight:600;
  padding:8px 14px;border-radius:100px;
  box-shadow:var(--shadow-sm);
}
::selection{background:var(--honey);color:var(--honey-ink);}

.back-link{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:600;color:var(--ink-soft);
  margin-bottom:30px;
}
.back-link:hover{color:var(--honey-deep);}


.article-share {
    position: relative;
    max-width: 880px;
    margin: 64px auto 20px;
    padding: 32px 38px;
    overflow: hidden;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.96),
        rgba(255, 253, 247, 0.92)
    );
    border: 1px solid rgba(94, 82, 55, 0.08);
    border-radius: 18px;
    box-shadow:
        0 18px 45px rgba(63, 48, 24, 0.08),
        0 3px 10px rgba(63, 48, 24, 0.04);
}

.article-share-heading {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 18px;
}

.article-share-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    flex: 0 0 68px;
    color: #e7a900;
    background: #fff7df;
    border-radius: 50%;
}

.article-share-icon svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.article-share-heading h3 {
    margin: 0 0 5px;
    color: #2b261e;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 27px;
    line-height: 1.15;
}

.article-share-heading p {
    margin: 0;
    color: #746e63;
    font-size: 15px;
    line-height: 1.5;
}

.article-share-buttons {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 24px;
}

.share-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 51px;
    padding: 0 23px;
    color: #36322d;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid #d8d1c4;
    border-radius: 13px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(49, 42, 28, 0.03);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease;
}

.share-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(49, 42, 28, 0.09);
}

.share-button:focus-visible {
    outline: 3px solid rgba(232, 169, 0, 0.25);
    outline-offset: 3px;
}

.share-button svg {
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.share-facebook {
    color: #2567cb;
    border-color: #78a9ed;
}

.share-facebook svg {
    fill: currentColor;
    stroke: none;
}

.share-facebook:hover {
    background: #f4f8ff;
    border-color: #2567cb;
}

.share-whatsapp {
    color: #28783a;
    border-color: #67c979;
}

.share-whatsapp:hover {
    background: #f3fff5;
    border-color: #35a74c;
}

.share-copy:hover,
.share-copy.is-copied {
    color: #2f5f36;
    background: #f5fbf2;
    border-color: #92aa82;
}

.article-share-decoration {
    position: absolute;
    right: 12px;
    bottom: -34px;
    width: 190px;
    height: 190px;
    color: #b9ad8b;
    opacity: 0.13;
    pointer-events: none;
}

.article-share-decoration svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.copy-status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

@media (max-width: 700px) {
    .article-share {
        margin-top: 45px;
        padding: 25px 21px;
        border-radius: 15px;
    }

    .article-share-heading {
        align-items: flex-start;
    }

    .article-share-icon {
        width: 54px;
        height: 54px;
        flex-basis: 54px;
    }

    .article-share-icon svg {
        width: 25px;
        height: 25px;
    }

    .article-share-heading h3 {
        font-size: 23px;
    }

    .article-share-heading p {
        font-size: 14px;
    }

    .article-share-buttons {
        display: grid;
        grid-template-columns: 1fr;
    }

    .share-button {
        width: 100%;
    }

    .article-share-decoration {
        right: -35px;
        bottom: -35px;
    }
}