.category-page {
  background:
    radial-gradient(circle at 8% 10%, color-mix(in srgb, var(--pop-yellow) 14%, transparent), transparent 24rem),
    radial-gradient(circle at 92% 28%, color-mix(in srgb, var(--pop-blue) 12%, transparent), transparent 26rem),
    var(--bg);
}

.category-shell { width:min(1120px, calc(100% - 48px)); margin:0 auto; padding:132px 0 96px; }
.category-crumbs { display:flex; gap:10px; align-items:center; margin-bottom:44px; color:var(--text-2); font-size:13px; }
.category-crumbs a { font-weight:700; text-decoration:underline; text-underline-offset:4px; }
.category-hero { max-width:860px; margin-bottom:92px; }
.category-kicker { color:var(--pop-pink); font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; }
.category-hero h1 {
  max-width:850px; margin:14px 0 24px; font-family:'Astalamet', serif; font-size:clamp(48px, 8vw, 96px);
  line-height:.93; letter-spacing:-3px; text-transform:lowercase;
}
.category-hero h1 span { color:var(--pop-blue); }
.category-hero > p:not(.category-kicker) { max-width:720px; color:var(--text-2); font-size:clamp(17px, 2vw, 21px); }
.category-start {
  display:inline-flex; margin-top:28px; padding:13px 24px; border-radius:99px; color:#151515;
  background:var(--pop-yellow); font-weight:700; box-shadow:0 4px 0 color-mix(in srgb, var(--text) 75%, transparent);
}
.category-start:focus-visible, .category-card a:focus-visible, .category-explore a:focus-visible { outline:3px solid var(--pop-blue); outline-offset:4px; }
.category-heading { display:flex; justify-content:space-between; align-items:end; gap:24px; padding-bottom:22px; border-bottom:1px solid var(--border); }
.category-heading p { color:var(--pop-green); font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; }
.category-heading h2, .category-guides h2, .category-about h2, .category-faq h2, .category-explore h2 {
  margin-top:6px; font-family:'Astalamet', serif; font-size:clamp(34px, 5vw, 54px); line-height:1; text-transform:lowercase;
}
.category-heading > span { color:var(--text-2); font-size:13px; white-space:nowrap; }
.category-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px; margin-top:30px; }
.category-card { overflow:hidden; border:1px solid var(--border); border-radius:20px; background:var(--card); box-shadow:var(--shadow); }
.category-card-image { position:relative; display:block; aspect-ratio:16/10; overflow:hidden; background:var(--bg-alt); }
.category-card-image img { width:100%; height:100%; object-fit:cover; transition:transform .35s var(--ease); }
.category-card-image span { position:absolute; right:14px; bottom:14px; padding:7px 13px; border-radius:99px; color:#151515; background:var(--pop-yellow); font-size:12px; font-weight:700; }
.category-card:hover .category-card-image img { transform:scale(1.04); }
.category-card > div { padding:20px; }
.category-card > div > p { color:var(--pop-pink); font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; }
.category-card h2 { margin:6px 0 10px; font-size:20px; line-height:1.2; }
.category-card h2 a { text-decoration:underline; text-decoration-color:transparent; text-underline-offset:4px; }
.category-card h2 a:hover { text-decoration-color:var(--pop-pink); }
.category-card > div > div { color:var(--text-2); font-size:14px; line-height:1.6; }
.category-guides { margin-top:110px; }
.category-guide-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; margin-top:24px; }
.category-guide-card { padding:26px; border:1px solid var(--border); border-radius:20px; background:var(--card); box-shadow:var(--shadow); }
.category-guide-card > p { color:var(--pop-pink); font-size:11px; font-weight:700; letter-spacing:1.3px; text-transform:uppercase; }
.category-guide-card h3 { margin:8px 0 12px; font-size:24px; line-height:1.2; }
.category-guide-card h3 a { color:var(--text); text-decoration:none; }
.category-guide-card > div { color:var(--text-2); font-size:14px; line-height:1.6; }
.category-guide-card > a { display:inline-block; margin-top:18px; color:var(--text); font-size:13px; font-weight:700; text-decoration:underline; text-decoration-color:var(--pop-pink); text-underline-offset:4px; }
.category-about, .category-faq { max-width:850px; margin:110px auto 0; padding:48px; border:1px solid var(--border); border-radius:24px; background:var(--bg-alt); }
.category-about > p:not(.category-kicker) { margin-top:18px; color:var(--text-2); font-size:17px; }
.category-faq > div { margin-top:24px; border-top:1px solid var(--border); }
.category-faq details { padding:18px 0; border-bottom:1px solid var(--border); }
.category-faq summary { cursor:pointer; font-weight:700; }
.category-faq details p { margin-top:10px; color:var(--text-2); }
.category-explore { margin-top:110px; }
.category-explore > div { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin-top:24px; }
.category-explore a { display:flex; justify-content:space-between; padding:17px 18px; border:1px solid var(--border); border-radius:14px; background:var(--card); font-weight:700; }
.category-explore a:hover { border-color:var(--pop-blue); transform:translateY(-2px); }

@media (max-width:860px) {
  .category-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .category-explore > div { grid-template-columns:repeat(2, minmax(0,1fr)); }
}

@media (max-width:600px) {
  .category-shell { width:min(100% - 28px, 1120px); padding:108px 0 68px; }
  .category-crumbs { margin-bottom:32px; }
  .category-hero { margin-bottom:64px; }
  .category-hero h1 { letter-spacing:-1.5px; }
  .category-heading { align-items:start; }
  .category-grid, .category-guide-grid, .category-explore > div { grid-template-columns:1fr; }
  .category-guides { margin-top:72px; }
  .category-about, .category-faq { margin-top:72px; padding:30px 22px; }
  .category-explore { margin-top:72px; }
}

@media (prefers-reduced-motion:reduce) {
  .category-card-image img, .category-explore a { transition:none; }
}