.content-page { background: #fffaf3; }

.page-hero {
  position: relative;
  display: grid;
  min-height: 58vh;
  align-items: end;
  overflow: hidden;
  padding: 150px max(24px, calc((100% - var(--max-width)) / 2)) 76px;
  color: #fff;
  background:
    linear-gradient(105deg, rgba(36, 17, 15, .86), rgba(127, 37, 31, .58)),
    url("/src/assets/as.jpg") center / cover;
}

.page-hero::after {
  content: "MAPLE";
  position: absolute;
  right: -2vw;
  bottom: -4vw;
  color: rgba(255, 255, 255, .08);
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(8rem, 22vw, 22rem);
  font-weight: 900;
  letter-spacing: -.1em;
  line-height: .7;
}

.page-hero > div { position: relative; z-index: 1; max-width: 900px; }
.page-hero h1 { max-width: 900px; margin-bottom: 18px; color: #fff; }
.page-hero p { max-width: 700px; margin: 0; color: rgba(255, 255, 255, .82); font-size: 1.1rem; }

.blog-shell,
.article-shell,
.club-shell {
  width: min(var(--max-width), calc(100% - 48px));
  margin: 0 auto;
  padding: 90px 0;
}

.blog-layout { display: grid; grid-template-columns: 240px 1fr; gap: 52px; }
.blog-categories { position: sticky; top: 110px; align-self: start; }
.blog-categories h2 { font-size: 1.45rem; }
.blog-categories button { width: 100%; display: block; border: 0; border-bottom: 1px solid rgba(23, 32, 36, .12); padding: 13px 0; color: var(--color-muted); background: transparent; text-align: left; font-weight: 700; cursor: pointer; }
.blog-categories button.is-active { color: var(--color-maple); }
.article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.article-card { overflow: hidden; border: 1px solid rgba(23, 32, 36, .08); border-radius: 24px; background: #fff; box-shadow: var(--shadow-card); }
.article-visual { min-height: 210px; display: grid; place-items: center; padding: 24px; color: #fff; background: linear-gradient(135deg, var(--color-maple-dark), var(--color-maple) 55%, var(--color-gold)); }
.article-visual span { max-width: 260px; font-family: "Space Grotesk", sans-serif; font-size: 1.7rem; font-weight: 800; line-height: 1; text-align: center; }
.article-card-body { padding: 24px; }
.article-card-body small { color: var(--color-maple); font-weight: 900; text-transform: uppercase; }
.article-card h2 { margin: 10px 0 12px; font-size: 1.35rem; line-height: 1.1; }
.article-card p { margin-bottom: 22px; }
.article-card strong { color: var(--color-maple); }
.blog-empty-state { margin: 0; border: 1px dashed rgba(23, 32, 36, .16); border-radius: 20px; padding: 28px; color: var(--color-muted); background: rgba(255, 255, 255, .55); text-align: center; }
.blog-related { margin-top: 76px; padding-top: 48px; border-top: 1px solid rgba(23, 32, 36, .1); }
.blog-related > h2 { margin-bottom: 30px; font-size: clamp(2rem, 3.5vw, 3.5rem); }

.article-hero { grid-template-columns: 1fr .7fr; align-items: center; gap: 60px; background: #f6eadb; }
.article-hero::after { color: rgba(178, 58, 47, .05); }
.article-hero h1 { color: var(--color-ink); font-size: clamp(2.8rem, 6vw, 6rem); }
.article-hero p { color: var(--color-muted); }
.article-hero-card { min-height: 320px; display: grid; place-items: center; padding: 35px; border-radius: 30px; color: #fff; background: linear-gradient(145deg, var(--color-maple-dark), var(--color-maple), var(--color-gold)); font-family: "Space Grotesk", sans-serif; font-size: clamp(2rem, 4vw, 4rem); font-weight: 900; line-height: .95; text-align: center; }
.article-layout { display: grid; grid-template-columns: 270px minmax(0, 760px); justify-content: center; gap: 60px; }
.article-toc { position: sticky; top: 110px; align-self: start; padding: 22px; border: 1px solid rgba(23, 32, 36, .12); border-radius: 18px; background: #fff; }
.article-toc strong { display: block; margin-bottom: 14px; color: var(--color-maple); }
.article-toc a { display: block; padding: 8px 0; color: var(--color-muted); font-size: .9rem; }
.article-content { font-size: 1.05rem; }
.article-content h2 { margin-top: 46px; scroll-margin-top: 110px; font-size: clamp(1.8rem, 3vw, 2.8rem); }
.article-content h2:first-child { margin-top: 0; }
.article-content li { margin-bottom: 10px; color: var(--color-muted); }

.club-hero { min-height: 68vh; align-items: center; background: radial-gradient(circle at 75% 15%, rgba(232, 169, 79, .4), transparent 28%), linear-gradient(135deg, #172024, #7f251f 58%, #b23a2f); }
.club-card { position: relative; z-index: 2; width: min(1050px, calc(100% - 48px)); margin: -90px auto 0; padding: 54px; border-radius: 38px; background: #fff; box-shadow: 0 28px 70px rgba(23, 32, 36, .2); text-align: center; }
.club-card::before { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(178, 58, 47, .12); border-radius: 28px; pointer-events: none; }
.club-leaf { width: 76px; height: 76px; display: grid; place-items: center; margin: -92px auto 22px; border-radius: 24px; color: #fff; background: var(--color-maple); font-size: 2rem; transform: rotate(45deg); }
.club-leaf span { transform: rotate(-45deg); }
.club-card h2 { font-size: clamp(2.2rem, 4vw, 4rem); }
.club-card p { max-width: 660px; margin: 0 auto 28px; }
.club-benefits { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; margin-top: 56px; }
.club-benefit { min-height: 210px; display: grid; align-content: center; gap: 12px; padding: 25px 18px; border: 1px solid rgba(178, 58, 47, .12); border-radius: 22px; background: #fff; box-shadow: var(--shadow-card); transition: transform .25s ease; }
.club-benefit:hover { transform: translateY(-6px); }
.club-benefit span { color: var(--color-maple); font-size: 2rem; }
.club-benefit strong { font-family: "Space Grotesk", sans-serif; }

@media (max-width: 900px) {
  .blog-layout,
  .article-layout,
  .article-hero { grid-template-columns: 1fr; }
  .blog-categories,
  .article-toc { position: static; }
  .blog-categories { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }
  .blog-categories h2 { display: none; }
  .blog-categories button { width: auto; min-height: 44px; flex: 0 0 auto; border: 1px solid rgba(23, 32, 36, .1); border-radius: 999px; padding: 9px 15px; background: #fff; }
  .blog-categories button.is-active { border-color: rgba(178, 58, 47, .24); background: rgba(178, 58, 47, .08); }
  .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .club-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .page-hero { min-height: 520px; padding: 130px 16px 62px; }
  .blog-shell, .article-shell, .club-shell { width: calc(100% - 32px); padding: 70px 0; }
  .article-grid, .club-benefits { grid-template-columns: 1fr; }
  .article-hero-card { min-height: 230px; }
  .club-card { width: calc(100% - 32px); padding: 42px 24px; }
}