/* Full-width responsive preview. Loaded after style.css. */
body{font-size:18px}
.wrap{max-width:1200px;padding:0 24px}
main{padding-top:8px}
/* header */
.sh{position:sticky;top:0;z-index:60;background:#fffaf2;border-bottom:3px solid var(--teal)}
.sh-in{max-width:1200px;margin:0 auto;padding:10px 24px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.sh .logo{font-size:22px;margin-right:auto}
.sh-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sh-nav a{font-weight:bold;font-size:16px;text-decoration:none;color:var(--teal-ink);padding:8px 12px;border-radius:999px}
.sh-nav a:hover{background:#e8f6f5}
.sh-nav a.on{background:var(--teal);color:#fff}
.sh-nav a.cta{flex:none;min-height:0;font-size:16px;padding:9px 16px;margin-left:4px;border-bottom-width:3px}
.sh-nav a.cta-news{color:#0d3b57;background:#8fd3f4;border-bottom-color:#5fb4dd}.sh-nav a.cta-news:hover{background:#a6dcf7}.sh-nav a.cta-group{color:#fff}.sh-nav a.cta-shop{color:#1d1d1d}
.sh .cta-invite-m{display:none}
.sh-nav a.cta-invite{background:#d92d3a;color:#fff;border-bottom-color:#a81e2a}.sh-nav a.cta-invite:hover{background:#e5404c}
.sh-nav a.cta-invite.on{box-shadow:0 0 0 2px #fff,0 0 0 4px #d92d3a;background:#d92d3a;color:#fff}
.mt,.burger{display:none}
@media (max-width:980px){
  .sh-in{flex-wrap:wrap}
  .burger{display:flex;flex-direction:column;gap:5px;padding:10px;cursor:pointer;border:2px solid var(--teal);border-radius:10px;background:#fff}
  .burger span{display:block;width:24px;height:3px;background:var(--teal-ink);border-radius:2px}
  .sh-nav{display:none;width:100%;flex-direction:column;align-items:stretch;gap:4px;padding:6px 0 8px}
  .mt:checked ~ .sh-nav{display:flex}
  .sh-nav a{padding:12px 14px;font-size:18px;background:#fff;border:2px solid var(--teal)}
  .sh-nav a.cta{margin:0;text-align:center;border:0;border-bottom:3px solid;justify-content:center}
  .sh-nav a.cta-invite{display:none}
  .sh .cta-invite-m{display:flex;flex:none;align-items:center;justify-content:center;min-height:0;font-size:15px;padding:9px 12px;border-bottom-width:3px;white-space:nowrap}
  .sh-in{gap:8px}.sh-nav{flex:0 0 100%}
  .sh-nav a.cta-news{background:#8fd3f4;color:#0d3b57;border-bottom-color:#5fb4dd}.sh-nav a.cta-group{background:#6b3fa0;border-bottom-color:#4e2c78}.sh-nav a.cta-shop{background:#1f9e9a;border-bottom-color:#17807c}
}
/* cards use the whole width */
.card{margin:22px 0}
.pad{padding:28px 34px}
@media (max-width:620px){.pad{padding:18px}}
h1{font-size:40px} h2{font-size:30px}
@media (max-width:980px){h1{font-size:32px} h2{font-size:26px}}
@media (max-width:620px){h1{font-size:27px} h2{font-size:22px}}
/* readable text lines */
.pad p,.pad li{max-width:75ch}
.joke p,.tiles p{max-width:none}
/* home: hero = picture left, sign-up right */
.hero{display:grid;grid-template-columns:1.15fr 1fr;align-items:center}
.hero{background:linear-gradient(90deg,#fde9b9 0,#fde9b9 53.49%,var(--card) 53.49%)}
.hero>img{width:100%;height:auto;align-self:center}
.heropic{display:block;align-self:stretch;min-height:100%}.heropic img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
@media (max-width:900px){.heropic img{height:auto}}
@media (max-width:900px){.hero{grid-template-columns:1fr;background:var(--card)}}
/* home: Today in three columns */
.today{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.today>*:nth-child(1),.today>*:nth-child(2){grid-column:1/-1}
.today>*:nth-child(3){grid-column:1;grid-row:3}.today>*:nth-child(4){grid-column:1;grid-row:4}
.today>*:nth-child(5){grid-column:2;grid-row:3}.today>*:nth-child(6){grid-column:2;grid-row:4}
.today>*:nth-child(7){grid-column:3;grid-row:3}.today>*:nth-child(8){grid-column:3;grid-row:4}
.today .section-banner{width:100%;height:auto;border-top:3px solid var(--teal)}
.today .pad.joke{display:flex;flex-direction:column;justify-content:center}
.today>.pad:nth-child(6),.today>.pad:nth-child(8){border-left:2px dashed var(--peach)}
@media (max-width:980px){
  .today{display:block}
}
/* grids */
.tiles{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){.tiles{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.tiles{grid-template-columns:1fr}}
.monsters{grid-template-columns:1fr 1fr;gap:28px;max-width:900px;margin:0 auto}
@media (max-width:620px){.monsters{grid-template-columns:1fr}}
.howgrid{grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:980px){.howgrid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.howgrid{grid-template-columns:1fr}}
.jokewall{grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:980px){.jokewall{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.jokewall{grid-template-columns:1fr}}
.signup{max-width:560px}
.hero .signup{max-width:none}
.btn{width:auto;min-width:240px}
.signup .btn{width:100%}
footer{font-size:15px;padding:24px 10px 50px}
.previewtag{position:fixed;right:10px;bottom:10px;background:#272e44;color:#fff;font:bold 13px/1 var(--font);padding:8px 12px;border-radius:999px;opacity:.85;z-index:99;pointer-events:none}

/* ---- gap fillers ---- */
.artimg{width:100%;height:auto;border-radius:16px;border:3px solid var(--teal);background:#fde9b9}
.card.two{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:start}
.card.two>img:first-child{grid-column:1/-1;width:100%;max-height:360px;object-fit:cover;object-position:center 22%}
.card.two>.pad{grid-column:1}
.aside{grid-column:2;padding:28px 34px 28px 0;display:flex;flex-direction:column;gap:16px}
.sidepanel{background:#fff;border:2px solid var(--teal);border-radius:14px;padding:14px 16px}
.sidepanel h3{margin:0 0 8px;font-size:19px;color:var(--teal-ink)}
.ticks{list-style:none;margin:0 0 12px;padding:0}.ticks li{padding-left:26px;position:relative;margin:0 0 6px;font-size:16px}
.ticks li:before{content:"\2713";position:absolute;left:0;color:var(--orange-ink);font-weight:bold}
.sidelink{display:block;text-decoration:none;color:var(--text);padding:8px 0;border-top:1px dashed var(--peach)}
.sidelink:first-of-type{border-top:0}
.sidelink b{display:block;color:var(--ink);font-size:16px}.sidelink span{display:block;font-size:14px;color:var(--muted)}
.sidelink:hover b{color:var(--orange-ink)}
.sidepanel .btn{margin-top:4px}
@media (max-width:900px){.card.two{display:block}.aside{padding:0 18px 22px}.card.two>img:first-child{max-height:240px}}
/* home */
.jokeart{max-width:320px;margin:0 auto 14px}
.card.why{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:center}
.card.why .whyart{width:min(100%,340px);margin:20px 34px 20px auto}
.card.band{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center;background:var(--cream-art)}
.card.band .bandart{margin:20px 34px 20px 0;width:calc(100% - 34px)}
@media (max-width:900px){.card.why,.card.band{display:block}.card.why .whyart,.card.band .bandart{margin:0 18px 18px;width:calc(100% - 36px)}}
.monsters{max-width:none}

.today .pad.joke{justify-content:flex-start;padding-top:20px}
.card.two>img:first-child{max-height:400px;object-position:center 8%}

/* positioning 2026-10-24 */
.legendwrap{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;align-items:center;margin:0 0 12px}
.legendwrap .legend{margin:0}
.legendwrap .legendart{width:100%;max-width:340px;justify-self:end}
@media (max-width:900px){.legendwrap{display:block}.legendwrap .legendart{display:block;margin:12px auto 0;max-width:300px}}
.topart{display:block;width:100%;max-width:560px;height:auto;margin:0 auto 18px;border-radius:16px;border:3px solid var(--teal)}

.jokeart2{max-width:300px;margin:14px auto 8px;border-radius:14px;border:3px solid var(--teal);display:block;width:100%;height:auto}
.smallnote{text-align:center;font-size:15px;margin:6px 0 0}
.goDeeper{margin-top:14px;padding:14px;border-radius:14px;background:#e8f6f5;border:2px dashed var(--teal)}
.goDeeper span{display:block;font-size:14px;margin-top:4px}

@media (max-width:480px){.sh-in{padding:8px 12px;gap:6px}.sh .logo{font-size:17px;gap:6px}.sh .logo img{width:32px;height:32px}.sh .cta-invite-m{font-size:14px;padding:8px 10px}.burger{padding:8px}.burger span{width:22px}}
@media (max-width:360px){.sh .logo{font-size:15px}.sh .logo img{width:28px;height:28px}.sh .cta-invite-m{font-size:13px;padding:8px}}
/* keep the nav on one row beside the new Invite button (desktop) */
@media (min-width:981px){.sh-nav{gap:3px}.sh-nav a{font-size:15px;padding:8px 9px}.sh-nav a.cta{font-size:15px;padding:9px 13px;margin-left:2px}}
@media (min-width:981px){.sh-nav a.cta-invite{margin-right:12px;position:relative}.sh-nav a.cta-invite::after{content:'';position:absolute;right:-9px;top:15%;height:70%;width:2px;background:var(--peach,#f5cfa8);border-radius:2px}}