/* The shared brand palette, with a restrained paper-and-tape gallery treatment. */
.page-community [hidden] { display:none !important; }
.community-main { padding-bottom:64px; }
.community-breadcrumbs { display:flex; align-items:center; gap:12px; padding-top:19px; color:var(--muted); font-size:12px; }
.community-breadcrumbs a { min-height:32px; display:inline-flex; align-items:center; }
.community-intro { display:flex; align-items:center; justify-content:space-between; gap:45px; padding:25px 0 32px; }
.community-intro-copy { max-width:740px; }
.community-intro .eyebrow { font-size:10px; margin:0 0 10px; }
.community-intro h1 { font:600 clamp(44px,5.1vw,68px)/1.08 var(--display); letter-spacing:-1.8px; margin:0 0 17px; color:var(--berry); }
.community-flower { display:inline-block; vertical-align:middle; font:400 42px var(--body); color:var(--strawberry); margin-left:18px; transform:rotate(12deg); }
.community-tagline { font:500 28px/1.3 var(--display); margin:0 0 12px; color:var(--cocoa); }
.community-tagline > span { position:relative; display:inline-block; }
.community-tagline > span:after { content:''; position:absolute; left:0; bottom:-6px; width:100%; height:8px; border:2px solid var(--strawberry); border-color:var(--strawberry) transparent transparent; border-radius:50%; transform:rotate(-2deg); }
.community-description { margin:0; font-size:13px; color:var(--muted); max-width:530px; }
.community-intro-side { display:flex; align-items:center; flex-direction:column; gap:20px; padding-right:22px; flex-shrink:0; }
.community-intro-side .button { min-height:48px; font-size:12px; padding:13px 24px; }
.community-sticker { position:relative; width:180px; height:112px; }
.community-sticker > img:first-child { position:absolute; top:0; left:21px; transform:rotate(-5deg); }
.community-sticker > img:nth-child(2) { position:absolute; top:49px; right:16px; transform:rotate(14deg); }
.community-sticker > span { position:absolute; bottom:0; left:0; width:100%; text-align:center; font:400 14px var(--display); color:var(--berry); transform:rotate(-5deg); }
.community-preview-note { display:flex; align-items:center; gap:12px; font-size:12px; color:var(--berry); background:var(--lavender); padding:13px 18px; margin:0 0 29px; border-radius:var(--radius-sm); }
.community-preview-note > span:first-child { font-size:24px; line-height:1; flex-shrink:0; }
.community-gallery-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.community-gallery-heading h2 { font:500 29px/1.3 var(--display); margin:0; max-width:800px; overflow-wrap:anywhere; scroll-margin-top:150px; }
.community-filter-clear { display:flex; align-items:center; gap:12px; min-height:44px; color:var(--berry); font-size:12px; white-space:nowrap; }
.community-filter-clear > span { font-size:22px; }
.community-toolbar { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:16px 0 31px; }
.community-filters { display:flex; gap:7px; }
.community-filters button { min-height:44px; min-width:70px; border:1px solid var(--line); border-radius:var(--pill); color:var(--muted); background:var(--white); padding:10px 21px; font-size:12px; font-weight:700; }
.community-filters [aria-pressed="true"] { background:var(--berry); border-color:var(--berry); color:var(--white); }
.community-filters button:hover { border-color:var(--berry); }
#community-status { font-size:11px; color:var(--muted); margin:0; }
.community-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:25px; margin:0; padding:0; list-style:none; align-items:start; }
.community-card { min-width:0; }
.community-print { position:relative; background:var(--white); border:1px solid var(--line); padding:10px; border-radius:8px 8px 18px 8px; box-shadow:3px 4px 0 #E7CCD13D; }
.community-card:nth-child(4n+1) .community-print:before, .community-card:nth-child(4n) .community-print:before { content:''; position:absolute; top:-11px; left:calc(50% - 30px); height:22px; width:60px; background:var(--butter); opacity:.88; transform:rotate(-7deg); clip-path:polygon(3% 0,98% 0,96% 20%,100% 43%,97% 70%,99% 100%,1% 100%,4% 75%,0 50%,4% 26%); z-index:1; pointer-events:none; }
.community-card:nth-child(4n) .community-print:before { background:var(--soft-pink); transform:rotate(8deg); }
.community-open { display:block; position:relative; width:100%; aspect-ratio:3/4; overflow:hidden; border-radius:4px; background:var(--soft-pink); padding:0; }
.community-open > img { display:block; width:100%; height:100%; object-fit:cover; }
.community-card-video .community-open { aspect-ratio:9/16; }
.community-open .image-failed { object-fit:contain; background:var(--cream); }
.community-media-label { display:inline-flex; align-items:center; gap:5px; position:absolute; left:9px; top:10px; max-width:calc(100% - 18px); padding:5px 9px; border-radius:var(--pill); color:var(--berry); background:var(--cream); font-size:10px; line-height:1.4; }
.community-media-label .icon { width:13px; height:13px; }
.community-open-icon { position:absolute; bottom:10px; right:10px; display:grid; place-items:center; width:33px; height:33px; border-radius:50%; background:var(--cream); color:var(--berry); }
.community-open-icon .icon { width:16px; height:16px; }
.community-card-copy { padding:16px 7px 9px; }
.community-card .community-source { color:var(--muted); font-size:10px; line-height:1.65; margin:0 0 9px; }
.community-card h3 { font:500 24px/1.2 var(--display); color:var(--berry); margin:0 0 10px; overflow-wrap:anywhere; }
.community-card-product { font-size:11px; line-height:1.65; color:var(--muted); margin:0; padding-top:11px; border-top:1px dashed var(--line); overflow-wrap:anywhere; }
.community-thumbnail-unavailable { width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:20px; gap:16px; font-size:13px; color:var(--berry); }
.community-thumbnail-unavailable .icon { width:35px; height:35px; }
.community-empty { display:flex; align-items:center; gap:42px; padding:35px 48px; min-height:300px; border:1px dashed var(--line); border-radius:var(--radius); background:var(--white); }
.community-empty-art { position:relative; width:200px; height:180px; border:9px solid var(--white); outline:1px solid var(--line); border-radius:10px; background:var(--lavender); display:grid; place-items:center; flex-shrink:0; transform:rotate(-3deg); }
.community-empty-art > span { position:absolute; bottom:15px; right:24px; font-size:32px; color:var(--berry); }
.community-empty .eyebrow { font-size:10px; margin:0 0 14px; }
.community-empty h3 { font:500 34px/1.2 var(--display); margin:0 0 15px; }
.community-empty p:not(.eyebrow) { font-size:13px; color:var(--muted); max-width:520px; margin:0 0 24px; overflow-wrap:anywhere; }
.community-empty .button { font-size:12px; min-height:48px; }
.community-empty-video .community-empty-art { background:var(--butter); border-radius:18px; }
.community-invitation { display:flex; align-items:center; gap:30px; margin-top:57px; padding:31px 38px; border:1px solid var(--line); border-radius:var(--radius); background:var(--soft-pink); }
.community-invitation-art { width:110px; height:106px; position:relative; flex-shrink:0; }
.community-invitation-art > span { position:absolute; left:2px; top:-8px; font:400 92px var(--display); color:var(--berry); transform:rotate(-13deg); }
.community-invitation-art > img { position:absolute; right:-2px; bottom:0; transform:rotate(14deg); }
.community-invitation > div:nth-child(2) { flex:1; }
.community-invitation .eyebrow { font-size:9px; margin:0 0 10px; }
.community-invitation h2 { font:500 31px/1.2 var(--display); margin:0 0 12px; }
.community-invitation p:not(.eyebrow) { font-size:12px; color:var(--muted); margin:0; }
.community-invitation .button { font-size:12px; flex-shrink:0; padding:16px 24px; }
.monthly-club { display:flex; align-items:center; justify-content:space-between; gap:35px; margin-top:20px; padding:25px 31px; border:1px dashed var(--strawberry); border-radius:18px; background:var(--butter); }
.monthly-club .eyebrow { font-size:9px; margin:0 0 7px; }
.monthly-club h2 { color:var(--berry); font:500 27px/1.2 var(--display); margin:0 0 8px; }
.monthly-club p:not(.eyebrow) { color:var(--muted); font-size:11px; line-height:1.65; max-width:700px; margin:0; }
.monthly-club p a { color:var(--berry); font-weight:800; text-decoration:underline; text-underline-offset:3px; }
.monthly-club .button { flex:none; min-height:46px; font-size:12px; }
@media(max-width:1199px) { .community-grid { gap:18px; } .community-card h3 { font-size:22px; } .community-card-copy { padding-inline:3px; } .community-intro-side { padding-right:0; } .community-invitation { gap:22px; padding:28px; } .community-invitation-art { width:83px; } .community-invitation h2 { font-size:27px; } }
@media(max-width:899px) { .community-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 24px; } .community-card h3 { font-size:26px; } .community-card-copy { padding:18px 9px 11px; } .community-intro { gap:22px; } .community-intro h1 { font-size:54px; } .community-tagline { font-size:25px; } .community-invitation { flex-wrap:wrap; } .community-invitation .button { margin-left:105px; } .community-empty { gap:30px; padding:30px; } .community-empty-art { width:150px; } }
@media(max-width:599px) {
  .community-main { padding-bottom:40px; }
  .community-breadcrumbs { font-size:11px; padding-top:11px; }
  .community-intro { position:relative; display:block; padding:20px 0 25px; }
  .community-intro .eyebrow { font-size:9px; margin-bottom:12px; }
  .community-intro h1 { font-size:46px; letter-spacing:-1.3px; margin-bottom:16px; }
  .community-flower { font-size:27px; margin-left:10px; }
  .community-tagline { font-size:25px; margin-bottom:14px; }
  .community-description { font-size:12px; max-width:290px; }
  .community-intro-side { align-items:flex-start; margin-top:20px; }
  .community-sticker { display:none; }
  .community-intro-side .button { min-height:44px; padding:12px 19px; font-size:11px; }
  .community-preview-note { font-size:11px; gap:10px; padding:12px 14px; margin-bottom:24px; }
  .community-gallery-heading { align-items:flex-start; flex-direction:column; gap:8px; }
  .community-gallery-heading h2 { font-size:27px; }
  .community-filter-clear { min-height:38px; font-size:11px; }
  .community-toolbar { flex-wrap:wrap; gap:12px; margin:16px 0 28px; }
  .community-filters { gap:6px; }
  .community-filters button { padding:10px 20px; min-width:68px; }
  #community-status { flex-basis:100%; font-size:10px; }
  .community-grid { gap:27px 14px; }
  .community-print { padding:6px; border-radius:6px 6px 12px 6px; box-shadow:2px 3px 0 #E7CCD13D; }
  .community-card:nth-child(4n+1) .community-print:before,.community-card:nth-child(4n) .community-print:before { width:42px; height:17px; top:-8px; left:calc(50% - 21px); }
  .community-media-label { font-size:9px; padding:4px 6px; left:6px; top:8px; }
  .community-media-label .icon { display:none; }
  .community-open-icon { width:27px; height:27px; bottom:7px; right:7px; }
  .community-open-icon .icon { width:14px; height:14px; }
  .community-card-copy { padding:12px 4px 8px; }
  .community-card .community-source { font-size:9px; margin-bottom:8px; }
  .community-card h3 { font-size:21px; line-height:1.15; margin-bottom:10px; }
  .community-card-product { font-size:10px; padding-top:9px; }
  .community-empty { display:block; text-align:center; padding:30px 20px; }
  .community-empty-art { width:140px; height:143px; margin:0 auto 30px; }
  .community-empty-art img { width:96px; height:auto; }
  .community-empty-art > span { font-size:25px; bottom:8px; right:13px; }
  .community-empty .eyebrow { font-size:9px; }
  .community-empty h3 { font-size:30px; }
  .community-empty p:not(.eyebrow) { font-size:12px; }
  .community-invitation { position:relative; gap:20px; padding:26px 24px; margin-top:37px; }
  .community-invitation-art { display:none; }
  .community-invitation h2 { font-size:28px; }
  .community-invitation p:not(.eyebrow) { font-size:12px; }
  .community-invitation .button { margin:0; font-size:11px; min-height:48px; width:100%; }
}
@media(max-width:599px) { .monthly-club { display:block; padding:24px 20px; } .monthly-club .button { width:100%; margin-top:19px; } }
