.lyu-guide-wrap{
  --cream:#f8f3ec;
  --ivory:#fffaf5;
  --champagne:#e7d6c2;
  --sage:#8f9b87;
  --olive:#4e5a48;
  --gold:#c9a86a;
  --ink:#2f2b28;
  --muted:#756c65;
  --soft:#fbf7f1;
  --white:#ffffff;
  --line:rgba(78,90,72,.13);
}

.lyu-guide-wrap, .lyu-guide-wrap *{box-sizing:border-box}
.lyu-guide-wrap{
  margin:0;
  width:100%;
  font-family:Arial,sans-serif;
  color:var(--ink);
  background:var(--soft);
}
.lyu-guide-inner{
  max-width:1180px;
  margin:0 auto;
  padding:56px 24px 96px;
}
.lyu-guide-wrap a{text-decoration:none;color:inherit}
.lyu-guide-wrap h1, .lyu-guide-wrap h2, .lyu-guide-wrap h3{
  font-family:Georgia,serif;
  font-weight:400;
  color:var(--olive);
  margin:0 0 12px;
}

.lyu-guide-wrap .eyebrow{
  letter-spacing:.2em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--gold);
  font-weight:700;
  display:block;
  margin-bottom:14px;
}

.lyu-guide-wrap .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:15px 28px;
  font-weight:800;
  font-size:15px;
  transition:.25s;
  cursor:pointer;
  white-space:nowrap;
}
.lyu-guide-wrap .btn-primary{background:var(--olive);color:var(--white)}
.lyu-guide-wrap .btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(78,90,72,.28)}
.lyu-guide-wrap .btn-ghost{border:1px solid var(--olive);color:var(--olive)}
.lyu-guide-wrap .btn-ghost:hover{background:rgba(78,90,72,.08)}

/* Breadcrumb */
.lyu-guide-breadcrumb{
  display:flex;
  gap:8px;
  align-items:center;
  font-size:13px;
  color:var(--muted);
  margin-bottom:28px;
}
.lyu-guide-breadcrumb a:hover{color:var(--olive)}
.lyu-guide-breadcrumb [aria-current="page"]{color:var(--ink);font-weight:700}

/* Intro */
.lyu-guide-intro{max-width:720px;margin-bottom:44px}
.lyu-guide-intro h1{font-size:clamp(30px,4.4vw,46px);line-height:1.15}
.lyu-guide-intro p{font-size:17px;line-height:1.7;color:var(--muted)}

/* Featured guide */
.lyu-guide-featured{
  position:relative;
  border-radius:24px;
  overflow:hidden;
  margin-bottom:56px;
  background:var(--olive);
  min-height:280px;
}
.lyu-guide-featured__link{display:grid;grid-template-columns:38% 1fr;min-height:280px}
.lyu-guide-featured__media{
  /* Kept for the placeholder <span>; harmless no-ops on the real <img>. */
  background-size:cover;
  background-position:center;
  background-color:var(--champagne);
  /* Makes an <img> here render identically to the old background-image
     span: same crop/fill behaviour, full width/height of its grid cell. */
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.lyu-guide-featured__media--placeholder{
  background:linear-gradient(135deg,var(--champagne),var(--sage));
}
.lyu-guide-featured__body{
  padding:40px 44px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  color:var(--white);
}
.lyu-guide-featured__eyebrow{
  letter-spacing:.2em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--champagne);
  font-weight:700;
  margin-bottom:14px;
}
.lyu-guide-featured__body h2{color:var(--white);font-size:clamp(24px,3vw,34px);line-height:1.2}
.lyu-guide-featured__body p{font-size:15px;line-height:1.7;color:rgba(255,255,255,.85);max-width:520px;margin:0 0 18px}
.lyu-guide-featured__cta{font-weight:800;color:var(--white)}
.lyu-guide-featured__link:hover .lyu-guide-featured__cta{text-decoration:underline}

.lyu-guide-featured--empty{
  padding:44px;
  background:linear-gradient(135deg,var(--ivory),var(--champagne));
}
.lyu-guide-featured--empty p{font-size:15px;line-height:1.7;color:var(--muted);max-width:560px;margin:0 0 22px}

/* Categories */
.lyu-guide-categories{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:32px;
}
.lyu-guide-chip{
  border:1px solid var(--line);
  background:var(--white);
  color:var(--olive);
  border-radius:999px;
  padding:10px 18px;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  transition:.2s;
}
.lyu-guide-chip:hover{border-color:var(--olive)}
.lyu-guide-chip.is-active{background:var(--olive);border-color:var(--olive);color:var(--white)}

/* Grid */
.lyu-guide-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-bottom:16px;
}
.lyu-guide-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  transition:.2s;
}
.lyu-guide-card:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(47,43,40,.1)}
.lyu-guide-card__link{display:flex;flex-direction:column;height:100%}
.lyu-guide-card__media{
  display:block;
  aspect-ratio:16/10;
  width:100%;
  /* Kept for the placeholder <span>; harmless no-ops on the real <img>. */
  background-size:cover;
  background-position:center;
  background-color:var(--champagne);
  /* Makes an <img> here render identically to the old background-image
     span: same crop/fill behaviour within the card's 16:10 box. */
  object-fit:cover;
  object-position:center;
}
.lyu-guide-card__media--placeholder{background:linear-gradient(135deg,var(--champagne),var(--sage))}
.lyu-guide-card__body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.lyu-guide-card__tag{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:800;
}
.lyu-guide-card__title{font-size:19px;line-height:1.3;margin:0}
.lyu-guide-card__excerpt{font-size:14px;line-height:1.6;color:var(--muted);margin:0;flex:1}
.lyu-guide-card__date{font-size:12px;color:var(--muted);margin-top:6px}

.lyu-guide-card[hidden]{display:none}

/* Empty states */
.lyu-guide-empty{
  text-align:center;
  padding:48px 24px;
  border:1px dashed var(--line);
  border-radius:18px;
  color:var(--muted);
  margin-bottom:56px;
}
.lyu-guide-empty p{margin:0 0 18px;font-size:15px}
.lyu-guide-empty--filtered{display:none;padding:24px;margin-bottom:0}
.lyu-guide-empty--filtered.is-visible{display:block}

/* Samples */
.lyu-guide-samples{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:48px;
  align-items:center;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:24px;
  padding:48px;
  margin:56px 0;
}
.lyu-guide-samples__copy h2{font-size:clamp(22px,2.8vw,30px);line-height:1.25}
.lyu-guide-samples__copy p{font-size:15px;line-height:1.7;color:var(--muted);margin:0 0 22px}
.lyu-guide-samples__media{
  width:100%;
  height:auto;
  border-radius:16px;
  object-fit:cover;
  box-shadow:0 20px 40px rgba(47,43,40,.14);
}

/* CTA */
.lyu-guide-cta{
  text-align:center;
  background:var(--olive);
  color:var(--white);
  border-radius:24px;
  padding:56px 32px;
  margin-bottom:56px;
}
.lyu-guide-cta h2{color:var(--white);font-size:clamp(24px,3vw,32px)}
.lyu-guide-cta p{font-size:15px;line-height:1.7;color:rgba(255,255,255,.85);max-width:520px;margin:0 auto 26px}
.lyu-guide-cta .btn-primary{background:var(--white);color:var(--olive)}
.lyu-guide-cta .btn-primary:hover{box-shadow:0 14px 30px rgba(0,0,0,.25)}

/* FAQ */
.lyu-guide-faq h2{font-size:clamp(22px,2.8vw,30px);margin-bottom:22px}
.lyu-guide-faq__list{display:flex;flex-direction:column;gap:12px}
.lyu-guide-faq__item{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px 22px;
}
.lyu-guide-faq__item summary{
  cursor:pointer;
  font-weight:700;
  font-size:15px;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.lyu-guide-faq__item summary::-webkit-details-marker{display:none}
.lyu-guide-faq__item summary::after{
  content:"+";
  font-size:20px;
  color:var(--gold);
  flex-shrink:0;
}
.lyu-guide-faq__item[open] summary::after{content:"–"}
.lyu-guide-faq__item p{font-size:14px;line-height:1.7;color:var(--muted);margin:14px 0 0}

@media (max-width:900px){
  .lyu-guide-inner{padding:40px 18px 72px}
  .lyu-guide-featured__link{grid-template-columns:1fr}
  .lyu-guide-featured__media{aspect-ratio:16/9}
  .lyu-guide-featured__body{padding:28px 24px}
  .lyu-guide-grid{grid-template-columns:1fr}
  .lyu-guide-categories{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin-left:-18px;
    margin-right:-18px;
    padding-left:18px;
    padding-right:18px;
  }
  .lyu-guide-categories::-webkit-scrollbar{display:none}
  .lyu-guide-chip{flex-shrink:0}
  .lyu-guide-samples{grid-template-columns:1fr;padding:28px}
  .lyu-guide-samples__media{max-width:260px;margin:0 auto}
  .lyu-guide-cta{padding:40px 24px}
}