/* ============ TRASHY SISTER, zero-waste warm theme ============ */
:root{
  /* warm shades of orange, brown & yellow, poppy and pretty */
  --leaf:#E07B2F; --leaf-dark:#B85E1B; --sage:#F2C48D; --sage-light:#FBEBD3;
  --brown:#7A4E2D; --terra:#8A5A33; --terra-dark:#6E4526;
  --cream:#FDF4E3; --off:#FFFBF2; --yellow:#F2B93B;
  --ink:#42342A; --muted:#937f6b;
  --radius:18px; --shadow:0 4px 14px rgba(140,90,40,.14);
}

/* speech bubbles, the Instagram theme */
.bubble{position:relative;background:var(--off);border:3px solid var(--leaf);border-radius:22px;
  padding:16px 22px;box-shadow:var(--shadow);display:inline-block;max-width:400px;text-align:left}
.bubble.tight{max-width:330px}
.bubble.wide{max-width:520px}
.bubble p{margin-bottom:8px}.bubble p:last-child{margin-bottom:0}
.bubble::after{content:"";position:absolute;bottom:-16px;left:44px;border-width:16px 16px 0 4px;
  border-style:solid;border-color:var(--leaf) transparent transparent transparent}
.bubble::before{content:"";position:absolute;bottom:-10px;left:48px;border-width:11px 11px 0 3px;
  border-style:solid;border-color:var(--off) transparent transparent transparent;z-index:1}
.bubble.brown{border-color:var(--terra)}
.bubble.brown::after{border-color:var(--terra) transparent transparent transparent}
.bubble.right::after{left:auto;right:44px}
.bubble.right::before{left:auto;right:48px}
.bubble-row{display:flex;align-items:flex-end;gap:14px;margin:18px 0}
.bubble-row .avatar{flex-shrink:0}

/* animated avatar */
@keyframes ts-bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-7px) rotate(2deg)}}
.avatar-float{animation:ts-bob 3.2s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){.avatar-float{animation:none}}

/* ILLUSTRATED AVATAR (transparent PNGs), never cropped, sized to space */
.ts-av{display:block;height:auto;flex-shrink:0;filter:drop-shadow(0 6px 12px rgba(120,80,40,.18))}
.ts-av.xl{width:300px}
.ts-av.lg{width:220px}
.ts-av.md{width:150px}
.ts-av.sm{width:104px}
.ts-av.xs{width:74px}
.ts-av.flip{transform:scaleX(-1)}
@keyframes ts-sway{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-9px) rotate(1.2deg)}}
.ts-av.floaty{animation:ts-sway 4s ease-in-out infinite}
.ts-av.flip.floaty{animation:none}
@media (prefers-reduced-motion: reduce){.ts-av.floaty{animation:none}}
@media(max-width:840px){
  .ts-av.xl{width:190px}.ts-av.lg{width:150px}.ts-av.md{width:110px}
  .ts-av.sm{width:84px}.ts-av.xs{width:62px}
}
@media(max-width:520px){.ts-av.hide-mob{display:none}}

/* avatar tucked into a section's negative space */
.av-corner{position:relative}
.av-corner .ts-av{position:absolute;right:-10px;bottom:-18px;z-index:2;pointer-events:none}
@media(max-width:900px){.av-corner .ts-av{display:none}}

/* avatar + bubble rows sized for the illustrations */
.bubble-row .ts-av{margin-bottom:-6px}
.bubble-row{align-items:center}
.bubble-row .bubble{flex:0 1 auto}
.bubble-row.top{align-items:flex-start}
.bubble-row.snug{gap:2px;margin:6px 0}

/* the DON'T highlight */
.dont{background:#FDECEA;border-left:5px solid #C0392B;border-radius:8px;padding:8px 12px;color:#7B241C}
.dont b{color:#C0392B}

/* social icon buttons */
.social-icons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.social-icons a{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;
  background:var(--leaf);color:#fff;transition:.15s;box-shadow:var(--shadow)}
.social-icons a:nth-child(2n){background:var(--terra)}
.social-icons a:nth-child(3n){background:var(--yellow);color:var(--ink)}
.social-icons a:hover{transform:translateY(-4px) scale(1.08);text-decoration:none}
.social-icons svg{width:26px;height:26px}

/* polaroid frames + staggered fade-in for the Khandaan collage */
.polaroid{background:#fff;padding:8px 8px 26px;border-radius:6px;box-shadow:0 6px 16px rgba(110,70,30,.22);
  transform:rotate(-1.5deg);opacity:0;animation:ts-fadein .7s ease forwards}
.polaroid:nth-child(even){transform:rotate(1.8deg)}
.polaroid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:3px;transform:none !important}
@keyframes ts-fadein{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}

/* text-left / media-right split inside items & guides */
.media-cols{display:grid;grid-template-columns:3fr 2fr;gap:18px;align-items:start}
.media-cols .media-side{max-width:280px;justify-self:end;width:100%}
.media-cols .media-side .instagram-media{max-width:260px !important;min-width:0 !important}
@media(max-width:720px){.media-cols{grid-template-columns:1fr}.media-cols .media-side{justify-self:stretch;max-width:100%}}

/* icon grid for Iska Kya Karein */
.item-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
.item-ico{background:var(--off);border-radius:16px;padding:14px 6px;text-align:center;cursor:pointer;
  box-shadow:var(--shadow);border:3px solid transparent;font-weight:800;font-size:.78rem}
.item-ico .emoji{font-size:1.8rem;display:block;margin-bottom:4px}
.item-ico:hover,.item-ico.on{border-color:var(--leaf);transform:translateY(-3px)}
.item-detail{background:var(--off);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-top:14px}

/* category sidebar for Tried & Tested */
.side-layout{display:grid;grid-template-columns:230px 1fr;gap:22px;align-items:start}
.side-panel{background:var(--off);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px;position:sticky;top:80px;
  max-height:75vh;overflow:auto}
.side-panel h4{color:var(--terra-dark);margin:10px 0 4px;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em}
.side-panel button{display:block;width:100%;text-align:left;background:none;border:none;font-family:inherit;font-size:.9rem;
  padding:6px 10px;border-radius:999px;cursor:pointer;color:var(--ink);font-weight:700}
.side-panel button:hover,.side-panel button.on{background:var(--sage-light);color:var(--leaf-dark)}
@media(max-width:840px){.side-layout{grid-template-columns:1fr}.side-panel{position:static;max-height:none;display:flex;flex-wrap:wrap;gap:4px}.side-panel h4{width:100%}}

/* product thumbs + tidy embeds */
.brand-thumb{width:100%;height:130px;object-fit:cover;border-radius:12px;margin-bottom:8px}
.card .instagram-media{max-width:100% !important;min-width:0 !important;margin:0 !important}
.rotator{position:relative;width:100%;height:140px;border-radius:12px;overflow:hidden;margin-bottom:8px}
.rotator img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s}
.rotator img.show{opacity:1}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Nunito',system-ui,sans-serif;background:var(--cream);color:var(--ink);line-height:1.65;font-size:16px}
h1,h2,h3,h4{font-family:'Quicksand','Nunito',sans-serif;color:var(--leaf-dark);line-height:1.25}
a{color:var(--leaf);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* header */
header{background:var(--off);border-bottom:3px solid var(--sage-light);position:sticky;top:0;z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;max-width:1240px;margin:0 auto;flex-wrap:nowrap;gap:14px}
.logo{font-family:'Quicksand',sans-serif;font-weight:700;font-size:1.45rem;color:var(--leaf-dark);display:flex;align-items:center;gap:10px}
.logo .logo-text span{color:var(--terra)}
.logo small{display:block;font-size:.62rem;font-weight:600;color:var(--muted);letter-spacing:.04em}
.avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;border:3px solid var(--yellow);background:var(--sage-light)}
.avatar.big{width:110px;height:110px;border-width:4px}
.collage{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.collage img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px;box-shadow:var(--shadow);transform:rotate(-1.2deg)}
.collage img:nth-child(even){transform:rotate(1.4deg)}
.collage .slot{aspect-ratio:1;border:3px dashed var(--sage);border-radius:14px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--muted);font-size:.8rem;font-weight:700;padding:10px}
.ach-img{width:100%;border-radius:14px;box-shadow:var(--shadow);margin-bottom:10px}
nav ul{list-style:none;display:flex;gap:1px;flex-wrap:nowrap}
nav a{padding:5px 7px;border-radius:999px;font-weight:700;font-size:.78rem;color:var(--brown);white-space:nowrap}
nav a:hover,nav a.active{background:var(--sage-light);color:var(--leaf-dark);text-decoration:none}
.menu-btn{display:none;background:var(--leaf);color:#fff;border:none;border-radius:10px;padding:8px 14px;font-size:1.05rem;font-weight:700;cursor:pointer}
/* phone: the menu slides in from the right, page stays where it is */
.drawer-close{display:none}
.drawer-scrim{display:none}
@media(max-width:1150px){
  .menu-btn{display:block;margin-left:auto;flex:0 0 auto}
  header .nav > nav#main-nav{
    display:block;position:fixed;top:0;right:0;bottom:0;width:min(78vw,300px);
    background:var(--off);box-shadow:-8px 0 26px rgba(90,55,20,.28);
    padding:64px 16px 28px;overflow-y:auto;z-index:120;
    transform:translateX(102%);transition:transform .26s ease;
    justify-content:flex-start;flex:none;min-width:0}
  header .nav > nav#main-nav.open{transform:translateX(0)}
  nav#main-nav ul{display:block;padding:0}
  nav#main-nav li + li{margin-top:6px}
  nav#main-nav a{display:block;text-align:left;padding:12px 14px;font-size:1rem;
    white-space:normal;background:var(--sage-light);border:2px solid transparent;line-height:1.3}
  nav#main-nav a.active{background:var(--leaf);color:#fff}
  .drawer-close{display:block;position:absolute;top:14px;right:14px;width:38px;height:38px;
    border:none;border-radius:50%;background:var(--sage-light);color:var(--leaf-dark);
    font-size:1.1rem;font-weight:800;cursor:pointer;line-height:1}
  .drawer-scrim{display:block;position:fixed;inset:0;background:rgba(60,40,20,.42);z-index:110}
  .drawer-scrim[hidden]{display:none}
  body.drawer-open{overflow:hidden}
}

/* hero */
.hero{background:linear-gradient(160deg,var(--sage-light),var(--cream) 70%);padding:56px 0 48px;text-align:center;border-bottom-left-radius:60px;border-bottom-right-radius:60px}
.hero h1{font-size:clamp(2.05rem,5.4vw,3.1rem);max-width:820px;margin:0 auto 14px}
.hero p{max-width:640px;margin:0 auto 24px;color:var(--brown);font-size:1.08rem}
.tag{display:inline-block;background:var(--yellow);color:#5b4413;font-weight:800;font-size:.8rem;padding:4px 14px;border-radius:999px;margin-bottom:16px;letter-spacing:.03em}

/* buttons */
.btn{display:inline-block;padding:12px 24px;border-radius:999px;font-weight:800;font-size:1rem;margin:4px;transition:.15s;border:2px solid transparent}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn-green{background:var(--leaf);color:#fff}
.btn-green:hover{background:var(--leaf-dark)}
.btn-terra{background:var(--terra);color:#fff}
.btn-terra:hover{background:var(--terra-dark)}
.btn-line{border-color:var(--leaf);color:var(--leaf-dark);background:transparent}
.btn-line:hover{background:var(--sage-light)}

/* sections & cards */
section{padding:44px 0}
.sec-title{text-align:center;font-size:1.6rem;margin-bottom:8px}
.sec-sub{text-align:center;color:var(--muted);max-width:600px;margin:0 auto 30px}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.split{grid-template-columns:2fr 1fr;align-items:start}
.half{grid-template-columns:1fr 1fr;align-items:start}
@media(max-width:780px){.split,.half{grid-template-columns:1fr}}
.card{background:var(--off);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.card h3{margin-bottom:8px;font-size:1.08rem}
.card.center{text-align:center}
.card .emoji{font-size:2rem;display:block;margin-bottom:8px}
a.card{color:var(--ink);display:block}
a.card:hover{text-decoration:none;outline:3px solid var(--sage)}
.chip{display:inline-block;background:var(--sage-light);color:var(--leaf-dark);font-size:.75rem;font-weight:800;padding:3px 10px;border-radius:999px;margin:2px}
.chip.warn{background:#fdeee2;color:var(--terra-dark)}
.chip.gold{background:#faf0d6;color:#8a6d1d}

/* search + filters */
.searchbar{display:flex;max-width:620px;margin:0 auto;background:#fff;border-radius:999px;box-shadow:var(--shadow);overflow:hidden;border:2px solid var(--sage)}
.searchbar input{flex:1;border:none;padding:14px 20px;font-size:1rem;outline:none;font-family:inherit}
.searchbar button{background:var(--leaf);border:none;color:#fff;padding:0 24px;font-size:1.1rem;cursor:pointer}
.filters{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:18px 0}
.filters select,.filters input{padding:10px 14px;border-radius:12px;border:2px solid var(--sage);background:#fff;font-family:inherit;font-size:.95rem;min-width:160px}
.count{text-align:center;color:var(--muted);font-size:.9rem;margin-bottom:14px}

/* recycler / product cards */
.r-card{background:var(--off);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow);border-left:6px solid var(--sage)}
.r-card h3{font-size:1.05rem}
.r-card .loc{color:var(--terra-dark);font-weight:700;font-size:.85rem}
.r-card p{font-size:.9rem;margin:6px 0}
.r-card .links{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap}
.r-card .links a{font-size:.85rem;font-weight:800;background:var(--sage-light);padding:5px 12px;border-radius:999px}
.r-card .links a:hover{background:var(--sage);color:#fff;text-decoration:none}

/* notice boxes */
.notice{background:#fdf6e3;border:2px dashed var(--yellow);border-radius:var(--radius);padding:18px 22px;margin:20px 0;font-size:.93rem}
.notice.green{background:var(--sage-light);border-color:var(--sage)}
.notice h3{margin-bottom:6px;font-size:1rem}
.notice ul{margin-left:20px}

/* accordions (guides / what-to-do) */
details{background:var(--off);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:14px;overflow:hidden}
summary{cursor:pointer;padding:16px 20px;font-weight:800;font-family:'Quicksand',sans-serif;color:var(--leaf-dark);font-size:1.05rem;list-style:none;display:flex;justify-content:space-between;align-items:center}
summary::after{content:"+";font-size:1.4rem;color:var(--terra)}
details[open] summary::after{content:"–"}
details .body{padding:0 20px 18px;font-size:.95rem}
details .body p{margin-bottom:8px}
details .body ol,details .body ul{margin:0 0 10px 22px}
.meta{font-size:.8rem;color:var(--muted);font-weight:700;margin-bottom:8px}

/* tables */
table{width:100%;border-collapse:collapse;background:var(--off);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);font-size:.92rem}
th{background:var(--sage-light);text-align:left;padding:10px 12px;color:var(--leaf-dark)}
td{padding:10px 12px;border-top:1px solid #eee7d8;vertical-align:top}
@media(max-width:640px){table{font-size:.82rem}th,td{padding:8px 8px}}

/* flowchart */
.flow{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;margin:18px 0}
.flow .step{background:var(--off);border:2px solid var(--sage);border-radius:12px;padding:8px 14px;font-weight:700;font-size:.85rem}
.flow .arr{color:var(--terra);font-weight:800}

/* footer */
footer{background:var(--leaf-dark);color:#e9f0e4;margin-top:40px;padding:36px 0 24px;border-top-left-radius:50px;border-top-right-radius:50px}
footer a{color:#f5efac}
footer .cols{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-bottom:20px}
footer h4{color:#fff;margin-bottom:8px}
footer ul{list-style:none}
footer .fine{font-size:.78rem;opacity:.8;border-top:1px solid rgba(255,255,255,.2);padding-top:14px}
.hidden{display:none}


/* ---------- v8 layout fixes ---------- */

/* tighter heroes: no dead space under the page title */
.hero{padding:34px 0 26px}
.hero h1{margin-bottom:10px}
.hero .bubble-row{margin-top:10px;margin-bottom:4px}
.sec-title + .bubble-row{margin-top:4px}
.sec-sub + .bubble-row{margin-top:0}

/* header lockup for THE TRASH SITE */
.logo .logo-title{white-space:nowrap;line-height:1.1;font-size:1.34rem;letter-spacing:-.01em}
.logo .by{font-size:.8rem;font-weight:700;color:var(--terra);margin-left:9px;
  font-family:'Quicksand',sans-serif;letter-spacing:0}
@media(max-width:1230px) and (min-width:1151px){.logo .by{display:none}}
@media(max-width:1150px){
  .logo .logo-title{display:block;font-size:1.15rem;white-space:nowrap}
  .logo .logo-name{display:block;white-space:nowrap}
  .logo .by{display:block;margin-left:0;font-size:.66rem;line-height:1.15}
}
@media(max-width:400px){.logo .logo-title{font-size:1.02rem}.avatar{width:38px;height:38px}}
.logo{flex:0 0 auto}
nav{flex:1 1 auto;display:flex;justify-content:flex-end;min-width:0}
.logo small{line-height:1.25}

/* BRICK WALL: cards of natural height stack without leaving gaps */
.masonry{columns:3 280px;column-gap:18px}
.masonry > *{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  display:inline-block;width:100%;margin:0 0 18px}
@media(max-width:860px){.masonry{columns:2 240px}}
@media(max-width:560px){.masonry{columns:1}}

/* instagram embeds: never squeeze below their 326px minimum */
.ig-wrap{width:100%;display:flex;justify-content:center}
.ig-wrap .instagram-media{min-width:326px !important}
.media-cols .media-side{max-width:360px}
.media-cols .media-side .instagram-media{max-width:326px !important;min-width:326px !important}
@media(max-width:400px){.ig-wrap{justify-content:flex-start;overflow-x:auto}}
/* the feed row must be wide enough for a 326px embed, or it scrolls */
.feed-wrap{max-width:1180px}
.feed-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.feed-grid .card{padding:10px;overflow:visible}
.feed-grid .instagram-media{min-width:0 !important}

/* category side panel: colour-coded groups */
.side-panel .grp{border-radius:14px;padding:8px 8px 10px;margin-bottom:10px}
.side-panel .grp h4{margin:2px 0 6px;font-size:.8rem}
.side-panel .grp button{font-size:.86rem;padding:5px 10px}
.grp.c1{background:#FDEBD8}.grp.c1 h4{color:#B85E1B}.grp.c1 button.on{background:#F6C99A;color:#7A3E06}
.grp.c2{background:#EAF3DC}.grp.c2 h4{color:#5B7A22}.grp.c2 button.on{background:#CFE3A8;color:#3F5714}
.grp.c3{background:#FBE7E2}.grp.c3 h4{color:#B4552F}.grp.c3 button.on{background:#F5C3B3;color:#7E3316}
.grp.c4{background:#F3EADC}.grp.c4 h4{color:#7A5A2E}.grp.c4 button.on{background:#E1CDA8;color:#553B14}
.grp.c5{background:#E9EEF6}.grp.c5 h4{color:#4A648C}.grp.c5 button.on{background:#C6D4E8;color:#2F4666}
.side-panel .allbtn{background:var(--leaf);color:#fff;margin-bottom:10px;text-align:center}
.side-panel .allbtn.on{background:var(--leaf-dark);color:#fff}

/* guides: bigger, clearer blog headings */
details > summary{font-size:1.28rem;padding:18px 22px}
details .body{font-size:.97rem;line-height:1.7}
details .body ol > li,details .body ul > li{margin-bottom:6px}

/* product / org cards */
.card.compact{padding:16px}
.review{background:var(--sage-light);border-radius:12px;padding:10px 12px;font-size:.88rem;margin-top:8px}
.review b{color:var(--leaf-dark)}
.waste-tags{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0}
.waste-tags span{background:var(--sage-light);border-radius:999px;padding:3px 9px;font-size:.78rem;font-weight:700}
.r-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.r-links a{display:inline-flex;align-items:center;gap:5px;font-size:.82rem;font-weight:800;
  background:var(--sage-light);padding:6px 12px;border-radius:999px}
.r-links a:hover{background:var(--sage);color:#fff;text-decoration:none}
.r-links svg{width:14px;height:14px}

/* flashcards for Learn From Others */
.flashcard{background:var(--off);border-radius:20px;box-shadow:var(--shadow);overflow:hidden;
  border:2px solid var(--sage-light);transition:.16s;display:block;color:var(--ink)}
.flashcard:hover{transform:translateY(-5px);border-color:var(--leaf);text-decoration:none}
.flashcard .top{padding:22px 16px;text-align:center;font-size:2.1rem;
  background:linear-gradient(150deg,var(--sage-light),var(--cream))}
.flashcard .btm{padding:12px 16px 16px}
.flashcard h3{font-size:1rem;margin-bottom:4px}
.flashcard p{font-size:.84rem;color:var(--muted)}
.flashcard .handle{font-size:.8rem;font-weight:800;color:var(--terra)}

/* petitions */
.petition{border-left:6px solid var(--yellow)}


/* ---------- v10 ---------- */

/* one clean row of Khandaan photos on the home page */
.strip{display:flex;gap:10px;overflow:hidden;justify-content:center}
.strip img{width:130px;height:130px;object-fit:cover;border-radius:14px;flex:0 0 auto;
  box-shadow:var(--shadow)}
/* the strip now scrolls sideways instead of dropping photos (see v15) */

/* a speech bubble that is also a button */
.bubble-btn{display:inline-block;background:var(--terra);color:#fff;border:none;
  font-weight:800;padding:12px 22px;border-radius:999px;box-shadow:var(--shadow);
  font-family:'Quicksand',sans-serif;font-size:1rem;text-decoration:none}
.bubble-btn:hover{background:var(--terra-dark);color:#fff;text-decoration:none;transform:translateY(-2px)}

/* jump links */
.jump{display:inline-flex;align-items:center;gap:6px;background:var(--yellow);color:#5b4413;
  font-weight:800;padding:9px 18px;border-radius:999px;font-size:.92rem;box-shadow:var(--shadow)}
.jump:hover{text-decoration:none;transform:translateY(-2px);color:#5b4413}

/* product card: thumbnail floated to the right, text keeps its place */
.p-thumb{float:right;width:86px;height:86px;object-fit:cover;border-radius:12px;
  margin:0 0 8px 12px;box-shadow:var(--shadow)}
.card::after{content:"";display:block;clear:both}
.reel-link{display:inline-block;margin-top:8px;font-size:.84rem;font-weight:700}

/* recycler page: reel column tight against the text */
.rec-top{display:grid;grid-template-columns:1fr 348px;gap:18px;align-items:start}
@media(max-width:900px){.rec-top{grid-template-columns:1fr}}

/* bigger, bolder 30-second summary */
.tldr{background:var(--sage-light);border-radius:12px;padding:12px 14px;font-weight:400;
  font-size:1.02rem;margin-bottom:10px}
.tldr b{font-weight:800;color:var(--leaf-dark)}


/* ---------- v12: text never clips ---------- */
.item-ico{word-break:break-word;overflow-wrap:anywhere;line-height:1.25;
  min-height:104px;display:flex;flex-direction:column;justify-content:center;align-items:center}
.item-ico .emoji{margin-bottom:2px}
.item-detail, .item-detail p, .item-detail li{overflow-wrap:anywhere}
.item-detail h3{overflow-wrap:anywhere;line-height:1.3}
.flow{row-gap:10px}
.flow .step{white-space:normal}
.bubble{overflow-wrap:anywhere}
.card h3, .r-card h3{overflow-wrap:anywhere}

/* ---------- v12: recycler reel scaled down to match the text column ---------- */
.reel-shrink{height:372px;overflow:hidden;position:relative}
.reel-shrink > div{transform:scale(.62);transform-origin:top left;width:161.3%}
@media(max-width:900px){.reel-shrink{height:auto}.reel-shrink > div{transform:none;width:100%}}

/* ---------- v12: About video card fills its column ---------- */
.vidcard{display:flex;flex-direction:column}
.vidcard .spacer{margin-top:auto}

/* recycler logo, tucked to the right of the card */
.r-logo-slot{float:right;margin:0 0 8px 10px}
.r-logo{display:block;width:64px;height:64px;object-fit:contain;background:#fff;border-radius:12px;
  padding:5px;box-shadow:var(--shadow)}
.r-mono{display:flex;align-items:center;justify-content:center;font-family:'Quicksand',sans-serif;
  font-weight:800;font-size:1.25rem;color:var(--terra-dark);border:2px solid var(--sage)}
.r-card::after{content:"";display:block;clear:both}

/* small picture inside each featured guide card */
.guide-card{overflow:hidden}
.g-thumb{float:right;width:74px;height:74px;object-fit:cover;border-radius:12px;
  margin:0 0 6px 12px;box-shadow:var(--shadow)}
.guide-card::after{content:"";display:block;clear:both}

/* feature post embeds stay inside their card */
.post-embed{overflow:hidden;display:flex;justify-content:center}
.post-embed .ig-wrap{max-width:100%}
.post-embed .instagram-media{max-width:100% !important;min-width:0 !important}
.masonry .card{overflow:hidden}
#reel-strip img{width:calc(50% - 4px);height:96px}

/* ---------- horizontal rails on What's More? ---------- */
.rail-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.rail-nav{display:flex;gap:8px}
.rail-btn{width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;
  background:var(--leaf);color:#fff;font-size:1.3rem;line-height:1;box-shadow:var(--shadow);
  font-family:'Quicksand',sans-serif}
.rail-btn:hover{background:var(--leaf-dark)}
.rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;
  padding:4px 2px 14px;scrollbar-width:thin}
.rail > *{flex:0 0 236px;scroll-snap-align:start}
.rail::-webkit-scrollbar{height:8px}
.rail::-webkit-scrollbar-thumb{background:var(--sage);border-radius:99px}
.rail .flashcard .top{min-height:132px;display:flex;align-items:center;justify-content:center}
@media(max-width:520px){.rail > *{flex:0 0 78%}}

/* ================================================================
   v15  —  Khandaan board, tidier cards, and a proper phone layout
   ================================================================ */

/* ---------- THE TRASHY KHANDAAN: photos flow around the reel ------- */
.kh-board{margin-top:4px}
.kh-board::after{content:"";display:block;clear:both}
.kh-side{float:right;width:372px;margin:0 0 16px 16px}
.kh-tile{display:inline-block;vertical-align:top;width:120px;height:120px;object-fit:cover;
  border-radius:12px;margin:0 8px 8px 0;box-shadow:var(--shadow);background:var(--sage-light)}
.kh-tile:nth-child(3n){transform:rotate(-1.1deg)}
.kh-tile:nth-child(4n){transform:rotate(1.2deg)}
@media(max-width:900px){
  .kh-side{float:none;width:100%;max-width:372px;margin:0 auto 18px}
  .kh-board{text-align:center}
}
/* 4 per row on a phone, so you see the whole family without endless scrolling */
@media(max-width:640px){
  .kh-tile{width:calc(25% - 7px);height:auto;aspect-ratio:1;margin:0 7px 7px 0}
  .kh-tile:nth-child(4n+4){margin-right:0}
}
@media(max-width:360px){.kh-tile{width:calc(33.333% - 7px)}}

/* ---------- CAN YOU HELP: heading left, small picture right -------- */
.org-card{text-align:left}
.org-card .emoji{font-size:1.5rem;display:inline-block;margin-right:6px}
.org-thumb{float:right;width:88px;height:88px;border-radius:12px;overflow:hidden;
  background:var(--sage-light);margin:0 0 8px 14px;box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center}
.org-thumb img{width:100%;height:100%;object-fit:contain;padding:7px;border-radius:12px}
.org-thumb.rotator{position:relative;width:88px;height:88px;margin:0 0 8px 14px}
.org-thumb.rotator img{position:absolute;inset:0;object-fit:cover;padding:0}
.org-card::after{content:"";display:block;clear:both}

/* ---------- arrows always sit at the right of their heading -------- */
.rail-nav{margin-left:auto}

/* ---------- nothing ever pushes the page sideways ------------------ */
body{overflow-x:hidden;overflow-x:clip}
img,iframe,video,svg{max-width:100%}
.wrap{width:100%}

/* ---------- ABOUT: video column behaves on a phone ----------------- */
@media(max-width:820px){
  .about-cols{grid-template-columns:1fr !important}
  .vidcard{max-width:520px;margin:0 auto}
}

/* ---------- brick wall: at least two per row on a phone ------------ */
@media(max-width:560px){
  /* Product cards need the full width; short cards (features, orgs) are
     marked .two-up and stack two to a row as a proper brick wall. */
  .masonry{columns:1}
  .masonry.two-up{columns:2 auto;column-gap:10px}
  .masonry.two-up > *{margin:0 0 10px;padding:14px}
  .masonry.two-up .card h3{font-size:.98rem}
  .masonry.two-up .org-thumb{width:58px;height:58px;margin:0 0 6px 8px}
}

/* ---------- any grid that reads better as a swipe on a phone ------- */
@media(max-width:760px){
  .mob-rail{display:flex !important;grid-template-columns:none;overflow-x:auto;
    gap:10px;padding-bottom:12px;scroll-snap-type:x proximity}
  .mob-rail > *{flex:0 0 46%;scroll-snap-align:start}
  .mob-rail .card{height:100%}
  .feed-grid{display:flex;overflow-x:auto;gap:12px;padding-bottom:12px;
    scroll-snap-type:x proximity}
  .feed-grid > *{flex:0 0 332px;scroll-snap-align:start}
}
@media(max-width:420px){.mob-rail > *{flex:0 0 58%}}

/* ---------- the photo strip scrolls instead of hiding photos ------- */
.strip{overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:6px}
.strip img{scroll-snap-align:start}
@media(max-width:1000px){.strip{justify-content:flex-start}}
@media(max-width:760px){.strip img{width:112px;height:112px}}

/* ---------- avatar sits above its speech bubble on a phone --------- */
@media(max-width:640px){
  .bubble-row{flex-direction:column;align-items:center;gap:0}
  .bubble-row .ts-av{margin-bottom:-12px;position:relative;z-index:2}
  .bubble-row .bubble{width:100%}
}

/* ---------- ISKA KYA KAREIN: the flow stays one line --------------- */
@media(max-width:760px){
  .flow{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    padding-bottom:8px;gap:6px}
  .flow .step,.flow .arr{flex:0 0 auto;white-space:nowrap}
  .flow .step{padding:7px 11px;font-size:.8rem}
}

/* (the swipeable category row was replaced by the fold-out panel below) */

/* ---------- a little more room on small screens ------------------- */
@media(max-width:560px){
  .wrap{padding:0 14px}
  .card{padding:18px}
  section{padding:32px 0}
  .rail > *{flex:0 0 76%}
}

/* ================================================================
   v16  —  phone polish (none of this touches the desktop layout)
   ================================================================ */

/* page titles a touch bolder everywhere */
h1{font-weight:800}
.hero h1{font-weight:800;letter-spacing:-.01em}

/* ---------- nothing can push a speech bubble past the margin ------ */
.bubble-row > *{min-width:0;max-width:100%}
.bubble{max-width:100%}
@media(max-width:760px){
  .flow{max-width:100%;-webkit-overflow-scrolling:touch}
  .flow::-webkit-scrollbar{height:6px}
  .flow::-webkit-scrollbar-thumb{background:var(--sage);border-radius:99px}
}

/* ---------- ABOUT: the intro bubble stays beside the avatar ------- */
@media(max-width:640px){
  .bubble-row.keep-row{flex-direction:row;align-items:center;gap:10px}
  .bubble-row.keep-row .ts-av{margin-bottom:-6px;flex:0 0 34%;max-width:130px}
  .bubble-row.keep-row .bubble{width:auto;flex:1 1 auto}
}

/* ---------- CAN YOU HELP: bigger, cleaner org names --------------- */
.org-card h3{font-size:1.12rem;line-height:1.3}
.org-card .emoji{display:none}
@media(max-width:560px){.org-card h3{font-size:1.02rem}}

/* ---------- things worth reading, but not before the list --------- */
.foldout{margin:0 0 14px}
.foldout > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  background:var(--sage-light);color:var(--leaf-dark);font-weight:800;font-size:.9rem;
  padding:10px 18px;border-radius:999px;border:2px solid var(--sage)}
.foldout > summary::-webkit-details-marker{display:none}
.foldout > summary::after{content:"▾";font-size:.85rem}
.foldout[open] > summary::after{content:"▴"}
.foldout > summary:hover{background:var(--sage)}
.foldout .notice{margin:12px 0 0}

/* ---------- TRIED & TESTED: tidy card, picture always in line -----
   The card is a picture and a block of text. On a phone they sit side
   by side as a proper row instead of the text wrapping raggedly around
   a floated image. */
@media(max-width:560px){
  #list .card{display:flex;flex-direction:row-reverse;align-items:flex-start;gap:12px}
  #list .card > .p-thumb{float:none;margin:0;width:74px;height:74px;flex:0 0 74px}
  #list .card > div{flex:1 1 auto;min-width:0}
  #list .card h3{margin:0 0 5px;font-size:1rem}
  #list .card::after{display:none}
}

/* ---------- HOME: avatars sit under their heading on a phone ------ */
@media(max-width:520px){
  .ts-av.show-mob{display:block}
}



/* ================================================================
   v17
   ================================================================ */

/* a fold-out note is a button, not a white strip with a pill in it */
details.foldout{background:none;box-shadow:none;border-radius:0;overflow:visible;
  margin:0 0 14px;padding:0}
details.foldout > summary{width:auto}

/* KAISE KAREIN: small picture beside each guide heading */
.s-thumb{width:58px;height:58px;object-fit:cover;border-radius:10px;margin-left:auto;
  flex:0 0 58px;box-shadow:var(--shadow)}
details > summary{display:flex;align-items:center;gap:10px}
details.foldout > summary{display:inline-flex}
@media(max-width:560px){.s-thumb{width:46px;height:46px;flex-basis:46px}}

/* CAN YOU HELP: lighter description text so the page reads less dense */
.org-card p{color:var(--muted);font-weight:400}
.org-card h3{color:var(--leaf-dark)}
.org-card .chip{color:var(--terra-dark)}

/* WHAT'S MORE: narrower cards, since most artwork is portrait */
.rail > *{flex:0 0 182px}
.rail .flashcard .top{min-height:150px}
.rail .flashcard .top img{max-height:142px}
@media(max-width:560px){.rail > *{flex:0 0 158px}}

/* ---------------- phone only from here ------------------------- */
@media(max-width:640px){
  /* the three hero buttons side by side, soft-cornered */
  .hero .btn-row{display:flex;gap:8px;margin-top:12px}
  .hero .btn-row .btn{flex:1 1 0;margin:0;padding:10px 4px;border-radius:16px;
    font-size:.88rem;line-height:1.15;letter-spacing:-.01em;display:flex;
    align-items:center;justify-content:center;text-align:center;min-height:62px;
    overflow-wrap:anywhere}
}

@media(max-width:900px){
  /* TRIED & TESTED: categories fold open as a panel instead of a long row */
  .cat-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;
    width:100%;background:var(--leaf);color:#fff;border:none;border-radius:14px;
    padding:12px 16px;font-family:'Quicksand',sans-serif;font-weight:800;font-size:.95rem;
    cursor:pointer;box-shadow:var(--shadow)}
  .cat-toggle::after{content:"▾";font-size:.8rem}
  .cat-toggle[aria-expanded="true"]::after{content:"▴"}
  .side-panel{display:none;flex-wrap:wrap;overflow:visible;margin-top:10px;
    max-height:60vh;overflow-y:auto;gap:6px;padding:12px}
  .side-panel.open{display:flex}
  .side-panel .grp{display:block;width:100%;border-radius:12px;padding:8px 10px;margin-bottom:6px}
  .side-panel .grp h4{display:block;margin:0 0 6px}
  .side-panel button{flex:0 0 auto;width:auto;white-space:normal;text-align:left;
    padding:7px 13px;font-size:.85rem;border:2px solid transparent;display:inline-block}
  .side-panel .grp > button{margin:0 4px 4px 0}
  .side-panel .allbtn{width:100%;text-align:center;margin-bottom:8px}
}
@media(min-width:901px){.cat-toggle{display:none}}

/* show-on-phone / hide-on-phone helpers */
.mob-only{display:none}
@media(max-width:640px){
  .mob-hide{display:none !important}
  .mob-only{display:block}

}

/* the affiliate note is fine print, not a headline */
details.finelink{background:none;box-shadow:none;border-radius:0;overflow:visible;
  margin:2px 0 16px;padding:0;text-align:center}
details.finelink > summary{list-style:none;cursor:pointer;display:inline;font-size:.78rem;
  color:var(--muted);text-decoration:underline;text-underline-offset:3px;font-weight:700}
details.finelink > summary::-webkit-details-marker{display:none}
details.finelink > summary:hover{color:var(--terra-dark)}
details.finelink .notice{margin-top:10px;text-align:left}

.cat-col{min-width:0}
@media(min-width:901px){.cat-col{position:sticky;top:80px}.cat-col .side-panel{position:static;top:auto}}

@media(max-width:900px){
  .side-panel button.on{border-color:var(--terra);font-weight:800}
  .side-panel .grp.c1 button.on{background:#F6C99A}
  .side-panel .grp.c2 button.on{background:#CFE3A8}
  .side-panel .grp.c3 button.on{background:#F5C3B3}
  .side-panel .grp.c4 button.on{background:#E1CDA8}
  .side-panel .grp.c5 button.on{background:#C6D4E8}
}

/* a collage photo that is taller than it is wide still fills its square */
.kh-tile{object-position:center}

/* narrower cards mean taller text, so trim the blurb to four lines */
.rail .flashcard .btm p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;
  overflow:hidden;font-size:.84rem}
.rail .flashcard h3{font-size:.98rem}

/* ================================================================
   v18
   ================================================================ */

/* two small notes side by side, so the list starts straight away */
.note-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;
  gap:10px;margin:8px 0 16px}
.note-btn,.note-fold > summary{display:inline-flex;align-items:center;gap:6px;
  background:var(--sage-light);color:var(--leaf-dark);border:2px solid var(--sage);
  border-radius:999px;padding:9px 16px;font-weight:800;font-size:.85rem;
  font-family:'Quicksand',sans-serif;cursor:pointer;list-style:none;white-space:nowrap}
.note-btn:hover,.note-fold > summary:hover{background:var(--sage);text-decoration:none}
.note-fold{background:none;box-shadow:none;border-radius:0;overflow:visible;margin:0;padding:0}
.note-fold > summary::-webkit-details-marker{display:none}
.note-fold > summary::after{content:"▾";font-size:.75rem}
.note-fold[open] > summary::after{content:"▴"}
.note-row .note-fold[open]{flex:1 1 100%;text-align:center}
.note-fold.wide{margin:0 0 12px}
.note-fold.wide > summary{font-size:.84rem;padding:8px 15px}

/* the join-in tile sits in the wall like any other photo */

.kh-join:hover{background:#e9ad2c;color:#5b4413;text-decoration:none}
.kh-join span{font-size:1.5rem;line-height:1}
.kh-join b{font-size:.68rem;line-height:1.15}
@media(max-width:640px){.kh-join b{font-size:.62rem}}

/* ---------------- phone only ---------------- */
@media(max-width:640px){
  /* a long heading fits on one line rather than orphaning its emoji */
  .hero h1.oneline{font-size:min(5.6vw,1.9rem);white-space:nowrap;letter-spacing:-.02em}
}

/* on a narrow screen the two notes need to be trim enough to share a line */
@media(max-width:640px){
  .note-row{gap:8px;margin:6px 0 14px}
  .note-btn,.note-fold > summary{font-size:.76rem;padding:8px 12px;gap:4px}
  .note-fold.wide > summary{font-size:.78rem;padding:7px 13px}
}

/* ================================================================
   v19  —  one-line scrolling rows, shared by several sections
   ================================================================ */
.rail-wrap{position:relative}
.hrail{display:flex !important;grid-template-columns:none;overflow-x:auto;gap:14px;
  padding:4px 2px 14px;scroll-snap-type:x proximity;scrollbar-width:thin;
  scrollbar-color:var(--sage) transparent}
.hrail > *{flex:0 0 auto;scroll-snap-align:start}
.hrail::-webkit-scrollbar{height:7px}
.hrail::-webkit-scrollbar-track{background:transparent}
.hrail::-webkit-scrollbar-thumb{background:var(--sage);border-radius:99px}
.hrail::-webkit-scrollbar-thumb:hover{background:var(--leaf)}

.rail-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;
  background:var(--leaf);color:#fff;font-size:1.4rem;line-height:1;
  font-family:'Quicksand',sans-serif;box-shadow:0 3px 12px rgba(120,70,25,.32);
  display:flex;align-items:center;justify-content:center;transition:opacity .18s}
.rail-arrow:hover{background:var(--leaf-dark)}
.rail-arrow.left{left:-6px}
.rail-arrow.right{right:-6px}
.rail-wrap.at-start .rail-arrow.left,
.rail-wrap.at-end .rail-arrow.right,
.rail-wrap.no-scroll .rail-arrow{opacity:0;pointer-events:none}
/* on a phone you swipe, so the arrows stay out of the way */
@media(max-width:760px){.rail-arrow{display:none}}

/* card sizes inside a scrolling row */
.hrail.quick > *{width:172px}
.hrail.cats > *{width:150px}
.hrail.guides > *{width:264px}
.hrail.photos > *{flex:0 0 auto}

/* speech bubbles that were too wide and left dead air below them */
.bubble.narrow{max-width:430px}
.bubble.narrower{max-width:360px}

/* a small text link rather than a card, on every screen */
.more-guides,.tiny-link{display:inline-block;font-size:.85rem;font-weight:800;
  color:var(--leaf-dark);text-decoration:underline;text-underline-offset:3px;
  padding:2px 0;background:none;border:none;box-shadow:none}
.more-guides:hover,.tiny-link:hover{color:var(--terra-dark)}

/* ---------- KHANDAAN on a phone: a packed grid, message inside it -------
   A grid with dense flow lets the message sit two columns wide in the
   middle of the wall while photos fill every remaining square, so there
   is no gap beside it. The desktop float layout is untouched. */
@media(max-width:900px){
  .kh-board.kh-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;
    grid-auto-flow:dense;text-align:left}
  .kh-board.kh-grid .kh-tile{width:100%;height:100%;aspect-ratio:1;margin:0;transform:none;
    align-self:stretch}
  .kh-msg{grid-column:1 / span 2;grid-row:span 3;margin:0 !important;padding:10px 8px !important;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;overflow:hidden}
  .kh-msg .emoji{font-size:1.5rem;line-height:1;margin-bottom:2px}
  .kh-msg h3{font-size:.78rem;line-height:1.2;margin:0 0 4px}
  .kh-msg p{font-size:.66rem !important;line-height:1.3;margin:0}
  .kh-msg p:last-child{margin-top:6px !important}
  .kh-msg .btn{padding:7px 12px;font-size:.7rem;margin:0}
  .kh-reel-bottom{margin-top:22px}
}
@media(max-width:360px){
  .kh-board.kh-grid{grid-template-columns:repeat(3,1fr)}
  .kh-msg{grid-column:1 / span 2}
}

/* ---------- ABOUT: the video sits under the message, not above it ------ */
@media(max-width:820px){
  .about-cols .vidcard{max-width:100%;margin:0}
  .about-cols .vidcard .spacer{margin-top:14px}
}

/* ---------- TRIED & TESTED ---------- */
/* desktop: a narrower bubble gains height, and the two notes tuck under it */
@media(min-width:761px){
  /* a narrower bubble grows taller beside the avatar, filling the gap that
     used to sit under it, and the two notes tuck in right below */
  .swap-row .bubble{max-width:330px}
  .swap-row{margin-bottom:2px !important}
  .swap-row + .note-row{margin-top:2px;margin-bottom:18px}
}
@media(max-width:640px){
  /* a bigger, bolder heading that still holds one line */
  .hero h1.oneline{font-size:min(6.4vw,2.1rem);font-weight:800}
  /* breathing room between the notes and the category bar */
  .cat-col{margin-top:20px}
  .side-layout{gap:12px}
}

/* a fold-out note reduced to a plain small link */
.tinyfold > summary{background:none;border:none;padding:2px 0;font-size:.85rem;
  color:var(--leaf-dark);text-decoration:underline;text-underline-offset:3px;
  border-radius:0;font-weight:800}
.tinyfold > summary:hover{background:none;color:var(--terra-dark)}