/* Conspicuous consumption lesson. Everything scoped under .cc-*. */

.cc-sc { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cc-note { font-size: 12px; color: var(--faint); text-align: center; }
.cc-hero img { width: 100%; max-width: 260px; max-height: 230px; object-fit: contain; display: block; filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .5)); }

/* the street */
.cc-read { display: flex; gap: 10px; width: 100%; max-width: 340px; }
.cc-read span { flex: 1; padding: 8px 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: 12px; font-weight: 700; color: var(--dim); text-align: center; }
.cc-read b { display: block; font: 800 18px var(--mono); color: var(--text); }
.cc-street { width: 100%; max-width: 360px; height: auto; overflow: visible; }
.cc-ground { stroke: var(--line); stroke-width: 2; }
.cc-bag { opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; }
.cc-p.has .cc-bag { opacity: 1; transform: none; }
.cc-bf { fill: url(#ccLoud); stroke: #5A3A08; stroke-width: 1; }
.cc-clasp { fill: #FFE3A3; }
.cc-p.quiet .cc-bf { fill: #7A4A24; stroke: #3A2410; }
.cc-mb { fill: #3A4466; transition: fill .3s, opacity .4s; }
.cc-street.nobars .cc-mb { opacity: 0; }
.cc-street.lit .cc-p.has .cc-mb { fill: var(--gold); }

/* the spoons, and the man who priced them */
.cc-veb { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cc-spoons { width: min(100%, 220px); height: auto; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .5)); }
.cc-who { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: var(--dim); }
.cc-who img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: top; border: 2px solid var(--line-strong, rgba(234, 227, 215, .3)); }

/* loud against quiet */
.cc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 340px; }
.cc-pb { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: 14px; background: var(--surface); border: 2px solid var(--line); box-shadow: 0 4px 0 #070a14; transition: border-color .2s, opacity .3s; }
.cc-big { width: 104px; height: auto; margin-bottom: 4px; }
.cc-big.quiet .cc-bf { fill: #7A4A24; stroke: #3A2410; }
.cc-big .cc-bf { stroke-width: 2; }
.cc-pb b { font-family: var(--serif); font-size: 17px; }
.cc-pb em { font-style: normal; font-size: 13px; font-weight: 700; line-height: 1.25; text-align: center; color: var(--dim); }
.cc-pb.right { border-color: var(--mint); }
.cc-pb.right em { color: var(--mint); }
.cc-pb.off { opacity: .55; }

/* the neighbors */
.cc-houses { width: 100%; max-width: 360px; height: auto; }
.cc-car rect:first-child, .cc-car rect:nth-child(2) { fill: #4A5068; transition: fill .5s; }
.cc-car.cc-won rect:first-child, .cc-car.cc-won rect:nth-child(2) { fill: var(--gold); }
.cc-new .cc-car:not(.cc-won) rect:first-child, .cc-new .cc-car:not(.cc-won) rect:nth-child(2) { fill: var(--violet-bright); }
.cc-hl { font-size: 12px; font-weight: 700; fill: var(--dim); }

/* the unsold stock */
.cc-stock { position: relative; width: 210px; }
.cc-stock img { width: 100%; height: auto; display: block; filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .5)); transition: filter .6s; }
.cc-tag2 { position: absolute; right: -14px; top: 6px; padding: 4px 10px; border-radius: 6px; background: #f6efe2; color: #1b1b1b; font: 700 14px var(--mono); box-shadow: 0 3px 0 #b8ab92; transform: rotate(5deg); }
.cc-stamp { position: absolute; left: 50%; top: 55%; translate: -50% -50%; rotate: -12deg; padding: 4px 12px; border: 3px solid var(--red); border-radius: 8px; color: var(--red); font: 900 22px var(--sans); text-transform: uppercase; letter-spacing: .08em; opacity: 0; transition: opacity .3s .3s; }
.cc-stock.gone img { filter: grayscale(1) brightness(.4); }
.cc-stock.gone .cc-stamp { opacity: 1; }

@media (max-height: 700px) {
  .cc-hero img { max-height: 180px; }
  .cc-spoons { width: min(100%, 160px); }
  .cc-big { width: 84px; }
  .cc-stock { width: 170px; }
}