/* =========================================================
   Gui's Burger — Limited Edition article pages
   Long-form reading layout, built on the Ember palette.
   ========================================================= */

.article-body{ background:var(--char); }

/* ---- top bar ---- */
.article-nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(20px,5vw,64px);
  background:linear-gradient(var(--char-3), rgba(12,21,31,.86));
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(194,164,107,.14);
}
.article-nav .brand{ display:flex; align-items:center; gap:12px; }
.article-nav .brand-mark{ width:30px; height:auto; }
.article-nav .brand-name{ display:flex; flex-direction:column; line-height:1.1; }
.article-nav .brand-name-en{ font-family:var(--display); font-weight:500; letter-spacing:.12em; text-transform:uppercase; font-size:15px; }
.article-nav .brand-name-sub{ font-size:9px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); opacity:.85; }
.article-back{
  display:inline-flex; align-items:center; gap:9px;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--cream);
  opacity:.78; transition:color .35s var(--ease), opacity .35s var(--ease), gap .35s var(--ease);
}
.article-back:hover{ color:var(--gold); opacity:1; gap:13px; }

/* ---- hero ---- */
.article{ overflow:hidden; }
.article-hero{
  max-width:880px; margin:0 auto; padding:clamp(56px,10vh,120px) var(--pad) 0;
  text-align:center; display:flex; flex-direction:column; align-items:center;
}
.article-kicker{
  font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold);
  margin:0;
}
.article-title{
  font-family:var(--display); font-weight:200;
  font-size:clamp(48px,8vw,108px); line-height:.92; letter-spacing:-.015em;
  margin:18px 0 0;
}
.article-dek{
  max-width:46ch; font-size:clamp(17px,1.7vw,21px); line-height:1.6;
  opacity:.82; margin:24px 0 0; text-wrap:pretty;
}
.article-lead-photo{
  margin:clamp(40px,7vh,72px) auto 0; width:min(100%, 1080px);
  aspect-ratio:16/9; overflow:hidden; border-radius:4px;
  background:linear-gradient(160deg,#221a12,#140f0a);
  box-shadow:0 60px 120px -60px rgba(0,0,0,.9);
}
.article-lead-photo img{ width:100%; height:100%; object-fit:cover; }

/* ---- reading column ---- */
.article-body-wrap{
  max-width:680px; margin:0 auto;
  padding:clamp(48px,8vh,90px) var(--pad) clamp(60px,10vh,120px);
}
.article-section + .article-section{ margin-top:clamp(40px,6vh,72px); }
.article-section h2{
  font-family:var(--display); font-weight:300;
  font-size:clamp(15px,1.5vw,17px); letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold); margin:0 0 22px;
  padding-bottom:16px; border-bottom:1px solid rgba(194,164,107,.18);
}
.article-section p{
  font-size:clamp(16px,1.25vw,18px); line-height:1.78; margin:0 0 1.25em;
  color:var(--cream); opacity:.92; text-wrap:pretty;
}
.article-section p:last-child{ margin-bottom:0; }
.article-section strong{ color:var(--cream); font-weight:700; }

/* lead paragraph after a section heading */
.article-lead{ font-size:clamp(18px,1.5vw,21px) !important; line-height:1.7 !important; opacity:1 !important; }

/* pull quote */
.article-pull{
  margin:clamp(36px,5vh,56px) 0; padding:0 0 0 clamp(20px,3vw,34px);
  border-left:2px solid var(--gold);
  font-family:var(--quote); font-style:italic; font-weight:500;
  font-size:clamp(24px,3vw,34px); line-height:1.32; color:var(--cream);
}

/* the build / ingredient list */
.build{
  margin:clamp(28px,4vh,40px) 0; padding:clamp(26px,3.4vw,40px);
  background:var(--char-2); border:1px solid rgba(194,164,107,.16); border-radius:4px;
}
.build-label{
  font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold);
  margin:0 0 18px;
}
.build-list{ list-style:none; margin:0; padding:0; }
.build-list li{
  display:flex; align-items:baseline; gap:16px;
  font-family:var(--display); font-weight:300; font-size:clamp(22px,2.6vw,30px);
  letter-spacing:.005em; padding:14px 0; border-top:1px solid rgba(194,164,107,.14);
}
.build-list li:first-child{ border-top:none; padding-top:0; }
.build-list li::before{
  content:""; flex:0 0 auto; width:7px; height:7px; border-radius:50%;
  background:var(--gold); transform:translateY(-3px);
}
.build-note{ font-size:13px; letter-spacing:.04em; opacity:.6; }

/* quick facts strip */
.article-facts{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  margin:clamp(36px,5vh,56px) 0; background:rgba(194,164,107,.16);
  border:1px solid rgba(194,164,107,.16); border-radius:4px; overflow:hidden;
}
.article-fact{ background:var(--char); padding:22px 20px; text-align:center; }
.article-fact dt{ font-size:9px; letter-spacing:.26em; text-transform:uppercase; opacity:.55; margin:0; }
.article-fact dd{ margin:8px 0 0; font-family:var(--display); font-weight:300; font-size:clamp(18px,2vw,24px); color:var(--gold); }
.article-fact dd .fact-sub{ display:block; font-family:var(--body); font-size:11px; letter-spacing:.02em; color:var(--cream); opacity:.6; margin-top:4px; }

/* end CTA */
.article-cta{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:center;
  margin-top:clamp(48px,7vh,80px); padding-top:clamp(40px,6vh,64px);
  border-top:1px solid rgba(194,164,107,.16);
}

/* footer */
.article-foot{
  text-align:center; padding:clamp(40px,7vh,70px) var(--pad);
  border-top:1px solid rgba(194,164,107,.14);
}
.article-foot-word{ font-family:var(--display); font-weight:300; letter-spacing:.18em; text-transform:uppercase; font-size:18px; margin:0; }
.article-foot-sub{ font-size:10px; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); margin:8px 0 0; }
.article-foot-fine{ font-size:12px; opacity:.5; margin:24px 0 0; }

/* reveal-on-load (reuses the site's .reveal, but articles fade in on scroll) */
@media (max-width:680px){
  .article-facts{ grid-template-columns:1fr; }
  .build-list li{ font-size:clamp(20px,6vw,26px); }
}