:root {
  --guide-ink: #253126;
  --guide-muted: #59665a;
  --guide-paper: #fbf8f0;
  --guide-lime: #a8d53c;
  --guide-green: #385f2b;
  --guide-line: #dce3d5;
}

main {
  color: var(--guide-ink);
  background: var(--guide-paper);
  font-family: "Onest", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
}
main *, main *::before, main *::after { box-sizing: border-box; }
main h1, main h2, main h3, main p, main figure { margin-top: 0; }
main h1, main h2, main h3 { font-family: "Inter Tight", Arial, sans-serif; letter-spacing: -.025em; }
main h1 { max-width: 760px; margin-bottom: 22px; font-size: clamp(2.7rem, 5.2vw, 5.4rem); font-weight: 600; line-height: .99; }
main h2 { margin-bottom: 17px; font-size: clamp(2rem, 3.5vw, 3.5rem); font-weight: 600; line-height: 1.06; }
main h3 { margin-bottom: 10px; font-size: 1.45rem; font-weight: 600; line-height: 1.16; }
main p { color: var(--guide-muted); }
main a { color: var(--guide-green); text-underline-offset: 4px; }
main a:focus-visible, main button:focus-visible { outline: 3px solid #315c22; outline-offset: 3px; }
main section { padding: clamp(64px, 8vw, 118px) 0; }
.category-shell { width: min(1240px, calc(100% - 64px)); margin-inline: auto; }
.category-hero { padding: clamp(58px, 7vw, 104px) 0 76px; background: #f2f6e8; }
.category-hero .category-shell { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(320px, .96fr); align-items: center; gap: clamp(34px, 6vw, 92px); }
.category-hero-copy { max-width: 720px; }
.eyebrow { margin-bottom: 17px; color: #4c762e; font-size: .78rem; font-weight: 800; letter-spacing: .13em; line-height: 1.35; text-transform: uppercase; }
.hero-summary { max-width: 600px; margin-bottom: 30px; font-size: clamp(1.05rem, 1.5vw, 1.25rem); }
.category-button { display: inline-flex; min-height: 54px; align-items: center; justify-content: center; gap: 14px; padding: 13px 22px; border: 2px solid #315a28; border-radius: 999px; background-color: #315a28; color: #fff; font-weight: 750; text-decoration: none; transition: background-color .2s ease, transform .2s ease; }
.category-button:hover { transform: translateY(-2px); background-color: #24431e; }
.hero-art { position: relative; }
.hero-art img { display: block; width: 100%; height: clamp(280px, 35vw, 470px); border-radius: 32px 110px 32px 32px; object-fit: cover; object-position: center 36%; }
.hero-art figcaption { padding: 12px 8px 0; color: var(--guide-muted); font-size: .83rem; }
.guide-intro { background: #fff; }
.intro-grid { display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: clamp(36px, 8vw, 130px); }
.section-copy { max-width: 720px; }
.section-copy > p:last-child { margin-bottom: 0; }
.principle-card { background: #e9f2d7; }
.step-mark { display: inline-grid; width: 44px; height: 44px; place-items: center; margin-bottom: 24px; border-radius: 50%; background: #315a28; color: #fff; font-weight: 800; }
.principle-card p { margin-bottom: 0; color: var(--guide-ink); font-family: "Inter Tight", Arial, sans-serif; font-size: clamp(1.35rem, 2vw, 1.8rem); font-weight: 550; line-height: 1.3; }
.category-browser { background: #f2f6e8; }
.section-heading { max-width: 760px; margin-bottom: 32px; }
.section-heading > p:last-child { margin-bottom: 0; }
.genre-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.filter-button { min-height: 44px; padding: 9px 16px; border: 1px solid #aebba4; border-radius: 999px; background-color: #fff; color: var(--guide-ink); font: inherit; font-size: .91rem; font-weight: 700; cursor: pointer; transition: color .2s ease, background-color .2s ease, border-color .2s ease; }
.filter-button:hover, .filter-button.is-active { border-color: #315a28; background-color: #315a28; color: #fff; }
.genre-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.genre-card { display: grid; grid-template-columns: minmax(145px, .82fr) minmax(0, 1.18fr); overflow: hidden; border: 1px solid #e0e5da; border-radius: 22px; background: #fff; box-shadow: 0 12px 35px rgba(38, 55, 31, .06); }
.genre-card[hidden] { display: none; }
.genre-card > img { display: block; width: 100%; height: 100%; min-height: 280px; object-fit: cover; }
.genre-card-copy { display: flex; flex-direction: column; align-items: flex-start; padding: 25px 22px; }
.genre-card-copy p { margin-bottom: 20px; font-size: .93rem; line-height: 1.55; }
.genre-card-copy a { margin-top: auto; font-size: .9rem; font-weight: 750; }
.card-kicker { margin-bottom: 8px; color: #557d36; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.filter-status { min-height: 1.6em; margin: 17px 0 0; color: var(--guide-muted); font-size: .88rem; }
.play-style { background: #fff; }
.style-layout { display: grid; grid-template-columns: minmax(300px, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(42px, 8vw, 120px); }
.style-art img { display: block; width: 100%; max-height: 550px; border-radius: 150px 26px 26px 26px; object-fit: cover; }
.style-list { display: grid; gap: 15px; margin: 27px 0 0; padding: 0; list-style: none; }
.style-list li { display: grid; gap: 3px; padding: 0 0 15px; border-bottom: 1px solid var(--guide-line); }
.style-list strong { color: var(--guide-ink); }
.style-list span { color: var(--guide-muted); font-size: .94rem; }
.platform-fit { background: #eaf0e2; }
.detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.detail-card { min-height: 225px; padding: 25px; border: 1px solid #d7e0ce; border-radius: 20px; background: #fff; }
.detail-card p { margin-bottom: 0; font-size: .95rem; }
.detail-number { display: inline-block; margin-bottom: 26px; color: #5e873b; font-size: .78rem; font-weight: 850; letter-spacing: .1em; }
.discovery-steps { background: #fff; }
.steps-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .82fr); align-items: start; gap: clamp(40px, 8vw, 120px); }
.step-list { display: grid; gap: 18px; margin: 30px 0 0; padding: 0; list-style: none; }
.step-list li { display: grid; grid-template-columns: 42px 1fr; gap: 16px; }
.step-list li > span { color: #557d36; font-size: .8rem; font-weight: 850; }
.step-list h3 { margin-bottom: 5px; font-size: 1.2rem; }
.step-list p { margin-bottom: 0; font-size: .94rem; }
.tip-card { overflow: hidden; border-radius: 26px; background: #f2f6e8; }
.tip-card img { display: block; width: 100%; height: 240px; object-fit: cover; }
.tip-card > div { padding: 25px 28px 29px; }
.tip-card > div > p:not(.eyebrow) { color: var(--guide-ink); font-size: 1.15rem; line-height: 1.45; }
.tip-card a { font-weight: 750; }
.next-step { padding-top: 24px; background: #fff; }
.next-card { display: flex; align-items: center; justify-content: space-between; gap: 36px; padding: clamp(30px, 5vw, 62px); border-radius: 28px; background: #315a28; }
.next-card > div { max-width: 700px; }
.next-card .eyebrow { color: #d5eea7; }
.next-card h2 { color: #fff; }
.next-card p:not(.eyebrow) { margin-bottom: 0; color: #e8efdf; }
.category-button--light { flex: 0 0 auto; border-color: #fff; background-color: #fff; color: #263a20; }
.category-button--light:hover { background-color: #e8f0dd; }
.reveal-pending { opacity: 0; transform: translateY(18px); }
.reveal-visible { opacity: 1; transform: translateY(0); transition: opacity .55s ease, transform .55s ease; }
@media (prefers-reduced-motion: reduce) {
  .reveal-pending, .reveal-visible { opacity: 1; transform: none; transition: none; }
  .category-button, .filter-button { transition: none; }
}
@media (max-width: 900px) {
  .category-hero .category-shell, .intro-grid, .style-layout, .steps-layout { grid-template-columns: minmax(0, 1fr); }
  .category-hero .category-shell { gap: 34px; }
  .hero-art img { height: min(64vw, 420px); }
  .genre-grid { grid-template-columns: minmax(0, 1fr); }
  .style-art { max-width: 560px; }
  .style-art img { max-height: 390px; }
  .steps-layout { gap: 34px; }
  .tip-card { display: grid; grid-template-columns: .8fr 1fr; }
  .tip-card img { height: 100%; min-height: 260px; }
}
@media (max-width: 600px) {
  main section { padding: 62px 0; }
  .category-shell { width: min(100% - 40px, 1240px); }
  .category-hero { padding-top: 48px; }
  .category-hero .category-shell { gap: 28px; }
  main h1 { font-size: clamp(2.65rem, 12vw, 4rem); }
  main h2 { font-size: clamp(2rem, 9vw, 3rem); }
  .hero-art img { height: 290px; border-top-right-radius: 78px; }
  .genre-card { grid-template-columns: minmax(0, 1fr); }
  .genre-card > img { height: 215px; min-height: 0; }
  .genre-card-copy { padding: 22px; }
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
  .detail-card { min-height: 0; }
  .detail-number { margin-bottom: 17px; }
  .tip-card { grid-template-columns: minmax(0, 1fr); }
  .tip-card img { height: 210px; min-height: 0; }
  .next-card { align-items: flex-start; flex-direction: column; }
  .category-button { width: 100%; }
}
.genre-finder { display: flex; flex-wrap: wrap; align-items: end; gap: 14px; margin: 0 0 24px; padding: 19px; border: 1px solid #d9e2d0; border-radius: 18px; background: #fff; }
.finder-field { display: grid; flex: 1 1 280px; gap: 7px; }
.finder-field label { color: var(--guide-ink); font-size: .9rem; font-weight: 750; }
.finder-field select { width: 100%; min-height: 48px; padding: 10px 13px; border: 1px solid #aebba4; border-radius: 10px; background-color: #fff; color: var(--guide-ink); font: inherit; }
.finder-field select[aria-invalid="true"] { border-color: #9b3429; }
.finder-submit { min-height: 48px; padding: 11px 17px; border: 2px solid #315a28; border-radius: 10px; background-color: #315a28; color: #fff; font: inherit; font-weight: 750; cursor: pointer; }
.finder-submit:hover { background-color: #24431e; }
.finder-error { flex: 1 0 100%; min-height: 1.3em; margin: 0; color: #8a281f !important; font-size: .86rem; }
@media (max-width: 600px) { .genre-finder { align-items: stretch; flex-direction: column; } .finder-submit { width: 100%; } }

/* Keep the guide's main action comfortably tappable on narrow screens. */
@media (max-width: 600px) {
  .category-button {
    width: 100%;
    min-height: 56px;
  }
}