/* Shared presentation refinements for every canonical page family. */
body[data-page-family] main{width:100%;overflow-x:clip}
body[data-page-family] :where(h1,h2){text-wrap:balance}
body[data-page-family] :where(p,li){text-wrap:pretty}

/* About and contact: keep the playful material, reduce oversized hero and card repetition. */
body[data-page-family="service"] :is(.about-hero,.contact-hero){padding-top:clamp(2.7rem,6vw,5.1rem)}
body[data-page-route="about"] .about-hero{gap:clamp(2rem,5vw,4.2rem);padding-bottom:clamp(2.8rem,5vw,4.2rem)}
body[data-page-family="service"] :is(.about-hero,.contact-hero) h1{font-size:clamp(2.7rem,6vw,4.8rem);line-height:.95}
body[data-page-route="about"] :is(.principles,.workflow){padding-block:clamp(3.2rem,6vw,5rem)}
body[data-page-route="about"] .workflow-grid{gap:clamp(2rem,5vw,4.5rem)}
body[data-page-route="about"] .steps{gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
body[data-page-route="about"] .step{
  border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;
  background:rgba(255,253,248,.68);box-shadow:none
}
body[data-page-route="about"] .independent{box-shadow:var(--shadow-sm)}
body[data-page-route="contact"] .support-grid{padding-top:.5rem}
body[data-page-route="contact"] .support-panel{box-shadow:none}

/* Privacy and terms: lighter summaries and a usable compact contents rail. */
body[data-page-family="policy"] :is(.privacy-hero,.terms-hero){padding-top:clamp(2.8rem,6vw,5.2rem);padding-bottom:2rem}
body[data-page-family="policy"] :is(.privacy-hero,.terms-hero) h1{font-size:clamp(2.7rem,6vw,4.75rem);line-height:.95}
body[data-page-family="policy"] .summary-strip{gap:0;padding-bottom:2.4rem;border-block:1px solid var(--line)}
body[data-page-family="policy"] .summary-item{
  padding:1.15rem 1.25rem;border:0;border-right:1px solid var(--line);background:transparent
}
body[data-page-family="policy"] .summary-item:last-child{border-right:0}
body[data-page-family="policy"] :is(.policy-shell,.terms-shell){gap:clamp(2rem,4vw,3.5rem)}
body[data-page-family="policy"] :is(.policy-section,.terms-section){padding-bottom:2rem;margin-bottom:2.15rem}
body[data-page-family="policy"] :is(.plain-card,.contact-block){box-shadow:var(--shadow-xs)}

/* Intent guide: stack section messages and let images, not generic cards, carry the visual rhythm. */
body[data-page-family="guide"] .hero{gap:clamp(2rem,4vw,3.2rem);padding-block:clamp(2.5rem,5vw,4rem)}
body[data-page-family="guide"] .hero h1{font-size:clamp(2.75rem,5.6vw,5rem);line-height:.98}
body[data-page-family="guide"] .section-kicker{display:none}
body[data-page-family="guide"] .section-head{display:block;margin-bottom:1.55rem}
body[data-page-family="guide"] .section-head>p{max-width:65ch;margin-top:.8rem}
body[data-page-family="guide"] :is(.band,.examples,.guide,.faq){padding-block:clamp(3.4rem,6vw,4.6rem)}
body[data-page-family="guide"] .guide{gap:clamp(2rem,4vw,3.2rem)}
body[data-page-family="guide"] .example{border-radius:10px;box-shadow:0 5px 16px rgba(44,36,28,.06)}
body[data-page-family="guide"] .related{border-radius:10px;box-shadow:0 10px 28px rgba(44,36,28,.1)}

/* Pattern collections: cards are meaningful objects here; tighten everything around them. */
body[data-page-family="collection"] .section-kicker{display:none}
body[data-page-family="collection"] .section-head{display:block;margin-bottom:1.5rem}
body[data-page-family="collection"] .section-head>p{max-width:68ch;margin-top:.8rem}
body[data-page-route="animal-bead-patterns"] .gallery-hero{gap:clamp(2rem,4vw,3.2rem);padding-block:clamp(2.4rem,5vw,4rem)}
body[data-page-route="animal-bead-patterns"] .gallery-hero h1{max-width:12ch;font-size:clamp(2.75rem,5.5vw,5rem);line-height:.98}
body[data-page-route="animal-bead-patterns"] .gallery-library{padding-block:clamp(3.4rem,6vw,4.6rem)}
body[data-page-route="animal-bead-patterns"] .pattern-link{border-radius:10px;box-shadow:0 5px 16px rgba(44,36,28,.06)}
body[data-page-route="animal-bead-patterns"] .pattern-meta span{font-size:.67rem;line-height:1.35}
body[data-page-route="animal-bead-patterns"] .edit-label{font-size:.8rem}
body[data-page-route="small-perler-bead-patterns"] .hero{border-radius:14px}
body[data-page-route="small-perler-bead-patterns"] .section-head{display:block}
body[data-page-route="small-perler-bead-patterns"] .section-head>p{max-width:68ch;margin-top:.8rem}
body[data-page-route="small-perler-bead-patterns"] .method-note{border-radius:10px;box-shadow:none}
body[data-page-route="small-perler-bead-patterns"] .how{padding-block:clamp(3.4rem,6vw,4.5rem)}
body[data-page-route="small-perler-bead-patterns"] .how .steps{gap:0;border-top:1px solid rgba(39,36,33,.14)}
body[data-page-route="small-perler-bead-patterns"] .how .step{padding:1.2rem;border-bottom:1px solid rgba(39,36,33,.14)}
body[data-page-route="small-perler-bead-patterns"] .pattern-meta span{font-size:.7rem;line-height:1.35}
body[data-page-route="small-perler-bead-patterns"] .edit-label{font-size:.84rem}
body[data-page-route="small-perler-bead-patterns"] .final{border-radius:10px;box-shadow:0 10px 28px rgba(44,36,28,.1)}

/* Alpha generator: keep the dense tool intact, simplify the marketing sections beneath it. */
body[data-page-family="generator"] .hero{gap:clamp(2rem,4vw,3.2rem);padding-block:clamp(2.4rem,5vw,3.5rem)}
body[data-page-family="generator"] .hero h1{font-size:clamp(2.7rem,5.6vw,5rem);line-height:1}
body[data-page-family="generator"] .content-section{padding-top:clamp(3.5rem,6vw,4.7rem)}
body[data-page-family="generator"] .section-heading{display:block;margin-bottom:1.4rem}
body[data-page-family="generator"] .section-heading p{max-width:65ch;margin-top:.65rem}
body[data-page-family="generator"] :is(.steps,.feature-grid){gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
body[data-page-family="generator"] :is(.step,.feature){
  padding:1.1rem;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  border-radius:0;background:rgba(255,253,247,.72);box-shadow:none
}
body[data-page-family="generator"] .faq-list{grid-template-columns:1fr;max-width:900px}
body[data-page-family="generator"] .related a{border-radius:8px;box-shadow:0 4px 0 var(--line)}
body[data-page-family="generator"] .contextual-cta{min-width:184px;min-height:50px;padding:.55rem .78rem}
body[data-page-family="generator"] .contextual-cta-action{gap:.8rem;font-size:.9rem}

/* Data methodology: turn the four summary cards into one reference strip. */
body[data-page-family="reference"] .hero{padding-block:clamp(3rem,6vw,4.5rem)}
body[data-page-family="reference"] h1{font-size:clamp(2.7rem,5.7vw,4.8rem);line-height:.98}
body[data-page-family="reference"] .summary{gap:0;margin-bottom:4rem;border-block:1px solid var(--line)}
body[data-page-family="reference"] .summary article{
  padding:1.1rem;border:0;border-right:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none
}
body[data-page-family="reference"] .summary article:last-child{border-right:0}
body[data-page-family="reference"] .content{gap:clamp(2rem,4vw,3rem)}
body[data-page-family="reference"] .method{padding-bottom:3.5rem}
body[data-page-family="reference"] .definition-grid article{border-radius:8px}
body[data-page-family="reference"] .table-wrap{border-radius:8px}

/* Large color table: prioritize search and comparison, not decorative cards. */
body[data-page-family="color-reference"] .hero{gap:clamp(2rem,4vw,3.2rem);padding-block:clamp(3rem,6vw,4.5rem)}
body[data-page-family="color-reference"] .hero h1{font-size:clamp(2.7rem,5.5vw,4.8rem);line-height:.98}
body[data-page-family="color-reference"] .hero-card{border-radius:8px;box-shadow:0 10px 28px rgba(44,36,28,.12)}
body[data-page-family="color-reference"] :is(.controls,.table-shell){border-radius:8px}
body[data-page-family="color-reference"] .explain{padding-block:clamp(3.5rem,6vw,4.8rem)}
body[data-page-family="color-reference"] .explain-grid{gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
body[data-page-family="color-reference"] .explain article{
  padding:1.25rem;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  border-radius:0;background:transparent
}

@media(max-width:940px){
  body[data-page-family="policy"] .toc{
    position:static;display:block;overflow-x:auto;padding:.8rem 0 1rem;border-left:0;border-bottom:1px solid var(--line);
    scrollbar-width:thin
  }
  body[data-page-family="policy"] .toc h2{margin-bottom:.5rem}
  body[data-page-family="policy"] .toc ol{display:flex;gap:.35rem;width:max-content}
  body[data-page-family="policy"] .toc a{padding:.42rem .6rem;border:1px solid var(--line);background:var(--card);white-space:nowrap}
}

@media(max-width:660px){
  body[data-page-family] :where(h1){overflow-wrap:anywhere}
  body[data-page-family="service"] :is(.about-hero,.contact-hero){padding-top:2rem}
  body[data-page-family="service"] :is(.about-hero,.contact-hero) h1,
  body[data-page-family="policy"] :is(.privacy-hero,.terms-hero) h1,
  body[data-page-family="guide"] .hero h1,
  body[data-page-route="animal-bead-patterns"] .gallery-hero h1,
  body[data-page-family="generator"] .hero h1,
  body[data-page-family="reference"] h1,
  body[data-page-family="color-reference"] .hero h1{font-size:clamp(2.35rem,11.5vw,3.2rem);line-height:1}
  body[data-page-route="about"] .bead-board{width:min(100%,420px)}
  body[data-page-family="policy"] .summary-strip{grid-template-columns:1fr}
  body[data-page-family="policy"] .summary-item{border-right:0;border-bottom:1px solid var(--line)}
  body[data-page-family="policy"] .summary-item:last-child{border-bottom:0}
  body[data-page-family="guide"] :is(.band,.examples,.guide,.faq){padding-block:3rem}
  body[data-page-route="small-perler-bead-patterns"] .hero{padding:1.35rem;border-radius:10px}
  body[data-page-family="generator"] :is(.steps,.feature-grid),
  body[data-page-family="color-reference"] .explain-grid{grid-template-columns:1fr}
  body[data-page-family="generator"] .contextual-cta{
    right:.75rem;bottom:max(.75rem,env(safe-area-inset-bottom));left:auto;width:auto;min-width:0;max-width:210px;
    min-height:48px;padding:.55rem .72rem
  }
  body[data-page-family="generator"] .contextual-cta-kicker{display:none}
  body[data-page-family="generator"] .contextual-cta-action{font-size:.82rem}
  body[data-page-family="reference"] .summary{grid-template-columns:1fr}
  body[data-page-family="reference"] .summary article{border-right:0;border-bottom:1px solid var(--line)}
  body[data-page-family="reference"] .summary article:last-child{border-bottom:0}
}

@media(prefers-reduced-motion:reduce){
  body[data-page-family] *,body[data-page-family] *::before,body[data-page-family] *::after{scroll-behavior:auto!important}
}