/* The Squish Family page (page-squish-family.php / cbco-squish.php), 2026-09-17.
 * Brand vocabulary as the rest of the site: navy #01207f, ember #fa7500, gold #dd9933,
 * Oswald uppercase headings, Open Sans body. Per-beer colours arrive as --acc / --tint /
 * --acc-text inline on each card (from the beer's "Family page card" fields or the
 * built-in defaults in cbco-squish.php). */

.cbco-sq { --sq-navy: #01207f; --sq-deep: #010f52; --sq-ember: #fa7500; --sq-ember-deep: #b85600; --sq-gold: #dd9933; --sq-cream: #efe8d6; --sq-paper: #f8f5ee; --sq-ink: #1c1f2a; --sq-muted: #5f6472; --sq-line: #dcd7c9; font-family: 'Open Sans', Arial, sans-serif; font-size: 16px; line-height: 1.55; color: var(--sq-ink); background: var(--sq-paper); }
body div.container-wrap.cbco-sq { padding-top: 0 !important; padding-bottom: 0 !important; }
.cbco-sq .container { position: relative; z-index: 1; }
.cbco-sq h1, .cbco-sq h2, .cbco-sq h3 { font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif; text-transform: uppercase; letter-spacing: .01em; line-height: 1.05; margin: 0; padding: 0; color: inherit; text-wrap: balance; }
.cbco-sq h2 { font-size: clamp(30px, 3.6vw, 46px); font-weight: 700; }
.cbco-sq h3 { font-size: 22px; font-weight: 600; }
.cbco-sq p { margin: 0; padding: 0; }
.cbco-sq img { max-width: 100%; height: auto; display: block; }
.cbco-sq section { padding: clamp(56px, 7vw, 96px) 0; }
.cbco-sq__eyebrow { display: block; font-family: 'Oswald', Arial, sans-serif; text-transform: uppercase; letter-spacing: .14em; font-size: 13px; font-weight: 500; color: var(--sq-ember); }
.cbco-sq__head { display: flex; flex-direction: column; gap: 10px; max-width: 62ch; margin-bottom: 36px; }
.cbco-sq__head p { color: var(--sq-muted); font-size: 17px; }
.cbco-sq__btn, .cbco-sq a.cbco-sq__btn { display: inline-flex; align-items: center; gap: .5em; background: var(--sq-navy); color: #fff; border: 2px solid var(--sq-navy); border-radius: 999px; padding: .7em 1.5em; font-family: 'Oswald', Arial, sans-serif; text-transform: uppercase; letter-spacing: .08em; font-size: 14px; font-weight: 500; line-height: 1.2; text-decoration: none; transition: transform .15s ease, background .15s ease, color .15s ease; }
.cbco-sq a.cbco-sq__btn:hover { transform: translateY(-1px); background: var(--sq-deep); border-color: var(--sq-deep); color: #fff; }
.cbco-sq a.cbco-sq__btn--ember { background: var(--sq-ember); border-color: var(--sq-ember); }
.cbco-sq a.cbco-sq__btn--ember:hover { background: var(--sq-ember-deep); border-color: var(--sq-ember-deep); }
.cbco-sq a.cbco-sq__btn--ghost { background: transparent; color: inherit; border-color: currentColor; }
.cbco-sq a.cbco-sq__btn--ghost:hover { background: var(--sq-ink); border-color: var(--sq-ink); color: #fff; }
.cbco-sq a.cbco-sq__btn--white { background: #fff; border-color: #fff; color: var(--sq-navy); }
.cbco-sq a.cbco-sq__btn--white:hover { background: var(--sq-ember); border-color: var(--sq-ember); color: #fff; }
.cbco-sq :focus-visible { outline: 3px solid var(--sq-ember); outline-offset: 3px; }
.cbco-sq__acts { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- hero ---------- */
.cbco-sq__hero { position: relative; background: var(--sq-deep); color: #fff; overflow: hidden; padding: 0 !important; }
.cbco-sq img.cbco-sq__hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; opacity: .92; }
.cbco-sq__hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(1, 15, 82, .92) 0%, rgba(1, 15, 82, .75) 38%, rgba(1, 15, 82, .15) 70%, rgba(1, 15, 82, 0) 100%); }
.cbco-sq__hero-in { min-height: 540px; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding-top: 72px; padding-bottom: 72px; }
.cbco-sq h1.cbco-sq__h1 { font-size: clamp(40px, 6vw, 76px); font-weight: 700; color: #fff; max-width: 12ch; }
.cbco-sq p.cbco-sq__lede { max-width: 44ch; font-size: 18px; color: #e6e9f5; }
.cbco-sq__hero .cbco-sq__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.cbco-sq__hero a.cbco-sq__btn--ghost { color: #fff; }
.cbco-sq__hero a.cbco-sq__btn--ghost:hover { background: #fff; border-color: #fff; color: var(--sq-navy); }
@media (max-width: 760px) {
	.cbco-sq__hero-shade { background: linear-gradient(180deg, rgba(1, 15, 82, .35) 0%, rgba(1, 15, 82, .92) 55%); }
	.cbco-sq__hero-in { min-height: 560px; justify-content: flex-end; }
}

/* ---------- family cards ---------- */
.cbco-sq__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; }
.cbco-sq a.cbco-sq__card { position: relative; background: #fff; border: 1px solid var(--sq-line); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: var(--sq-ink); transition: transform .2s ease, box-shadow .2s ease; }
.cbco-sq a.cbco-sq__card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(1, 32, 127, .12); color: var(--sq-ink); }
.cbco-sq__bar { display: block; height: 8px; background: var(--acc, var(--sq-navy)); }
.cbco-sq__can { background: var(--tint, #f0f1f5); padding: 22px 18px 10px; display: flex; justify-content: center; }
.cbco-sq__can img, .cbco-sq .cbco-sq__can img { width: 100%; max-width: 220px; height: 190px; object-fit: contain; mix-blend-mode: multiply; transition: transform .25s ease; }
.cbco-sq a.cbco-sq__card:hover .cbco-sq__can img { transform: scale(1.05) rotate(-2deg); }
.cbco-sq__body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.cbco-sq__card h3 { font-size: 21px; }
.cbco-sq__style { font-family: 'Oswald', Arial, sans-serif; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; color: var(--sq-muted); }
.cbco-sq__abv { font-family: 'Oswald', Arial, sans-serif; font-weight: 600; font-size: 18px; color: var(--acc-text, var(--sq-navy)); font-variant-numeric: tabular-nums; }
.cbco-sq__desc { font-size: 14px; color: var(--sq-muted); flex: 1; }
.cbco-sq__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.cbco-sq__tags i { font-style: normal; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-family: 'Oswald', Arial, sans-serif; border: 1px solid var(--sq-line); border-radius: 999px; padding: 2px 8px; color: var(--sq-muted); }
.cbco-sq__more { font-family: 'Oswald', Arial, sans-serif; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; color: var(--sq-navy); margin-top: 10px; }
.cbco-sq__season { position: absolute; top: 18px; left: -34px; transform: rotate(-35deg); background: var(--acc, var(--sq-ember)); color: #fff; font-family: 'Oswald', Arial, sans-serif; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 4px 40px; z-index: 2; }

/* ---------- story ---------- */
.cbco-sq__story { background: #fff; border-top: 1px solid var(--sq-line); border-bottom: 1px solid var(--sq-line); }
.cbco-sq__cols { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: start; }
.cbco-sq ol.cbco-sq__timeline { list-style: none; margin: 0; padding: 0 0 0 26px; position: relative; border-left: 3px solid var(--sq-ember); display: flex; flex-direction: column; gap: 26px; }
.cbco-sq ol.cbco-sq__timeline li { position: relative; margin: 0; padding: 0; list-style: none; }
.cbco-sq ol.cbco-sq__timeline li::before { content: ""; position: absolute; left: -35px; top: 6px; width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 3px solid var(--sq-ember); box-sizing: border-box; }
.cbco-sq__when { display: block; font-family: 'Oswald', Arial, sans-serif; text-transform: uppercase; letter-spacing: .12em; font-size: 13px; color: var(--sq-ember); }
.cbco-sq__timeline h3 { margin-top: 4px; }
.cbco-sq__timeline h3 a { color: inherit; text-decoration: none; }
.cbco-sq__timeline h3 a:hover { color: var(--sq-navy); text-decoration: underline; text-underline-offset: 3px; }
.cbco-sq__timeline p { color: var(--sq-muted); font-size: 15px; margin-top: 4px; max-width: 54ch; }
.cbco-sq__aside { display: flex; flex-direction: column; gap: 22px; }
.cbco-sq__quote { background: var(--sq-navy); color: #fff; border-radius: 12px; padding: 32px 30px; display: flex; flex-direction: column; gap: 16px; position: relative; overflow: hidden; }
.cbco-sq__quote::after { content: "\201C"; position: absolute; right: 14px; top: -30px; font-family: 'Oswald', Arial, sans-serif; font-size: 176px; color: rgba(255, 255, 255, .08); line-height: 1; }
.cbco-sq__quote blockquote { margin: 0; padding: 0; border: 0; background: none; font-family: 'Oswald', Arial, sans-serif; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.2; font-weight: 500; color: #fff; }
.cbco-sq__quote blockquote::before { content: none; }
.cbco-sq__who { font-size: 14px; color: #c9d0f0; }
.cbco-sq p.cbco-sq__def { border-top: 1px solid rgba(255, 255, 255, .2); padding-top: 16px; font-size: 15px; color: #e6e9f5; }
.cbco-sq__def b { font-family: 'Oswald', Arial, sans-serif; text-transform: uppercase; letter-spacing: .1em; font-weight: 500; color: #ffb469; }
.cbco-sq__photo { border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; max-width: 100%; }
.cbco-sq__photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .cbco-sq__cols { grid-template-columns: 1fr; gap: 36px; } }

/* ---------- picker ---------- */
.cbco-sq__moods { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.cbco-sq__moods button { background: #fff; border: 2px solid var(--sq-line); color: var(--sq-ink); border-radius: 999px; padding: .55em 1.1em; font-family: 'Oswald', Arial, sans-serif; text-transform: uppercase; letter-spacing: .08em; font-size: 14px; line-height: 1.2; cursor: pointer; transition: all .15s; }
.cbco-sq__moods button:hover { border-color: var(--sq-navy); }
.cbco-sq__moods button[aria-pressed="true"] { background: var(--sq-navy); border-color: var(--sq-navy); color: #fff; }
.cbco-sq__plot { position: relative; background: #fff; border: 1px solid var(--sq-line); border-radius: 12px; padding: 56px 56px 64px 84px; }
.cbco-sq__axis-x { position: absolute; left: 84px; right: 56px; bottom: 26px; display: flex; justify-content: space-between; font-family: 'Oswald', Arial, sans-serif; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; color: var(--sq-muted); }
.cbco-sq__axis-x::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; border-top: 2px solid var(--sq-line); }
.cbco-sq__axis-y { position: absolute; top: 56px; bottom: 64px; left: 26px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; font-family: 'Oswald', Arial, sans-serif; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; color: var(--sq-muted); }
.cbco-sq__axis-y span { writing-mode: vertical-rl; transform: rotate(180deg); }
.cbco-sq__axis-y::after { content: ""; position: absolute; left: 52px; top: 0; bottom: 0; border-left: 2px solid var(--sq-line); }
.cbco-sq__field { position: relative; height: 460px; margin-top: 10px; }
.cbco-sq__tick { position: absolute; bottom: -46px; transform: translateX(-50%); font-family: 'Oswald', Arial, sans-serif; font-size: 12px; color: var(--sq-muted); font-variant-numeric: tabular-nums; }
.cbco-sq__tick::before { content: ""; position: absolute; left: 50%; top: -8px; height: 6px; border-left: 2px solid var(--sq-line); }
.cbco-sq button.cbco-sq__dot { position: absolute; transform: translate(-50%, -50%); width: 150px; text-align: center; transition: opacity .25s, filter .25s; cursor: pointer; background: none; border: 0; padding: 0; color: inherit; font: inherit; }
/* the can images are squares with the can in the middle third: crop to the can so the marker reads */
.cbco-sq__dot img, .cbco-sq .cbco-sq__dot img { width: 150px; max-width: 100%; height: 150px; object-fit: contain; margin: 0 auto; mix-blend-mode: multiply; transition: transform .2s; }
.cbco-sq__dot:hover img, .cbco-sq__dot:focus-visible img { transform: scale(1.08); }
.cbco-sq__lbl { display: block; font-family: 'Oswald', Arial, sans-serif; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; line-height: 1.1; margin: -6px auto 0; max-width: 96px; background: #fff; padding: 2px 4px; border-radius: 3px; }
.cbco-sq__dot.is-dim { opacity: .18; filter: grayscale(1); }
.cbco-sq__result { margin-top: 20px; display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; background: var(--sq-cream); border-radius: 10px; padding: 18px 22px; border-left: 6px solid var(--acc, var(--sq-ember)); }
.cbco-sq__result:empty { display: none; }
.cbco-sq__result h3 { margin-bottom: 4px; }
.cbco-sq__result p { color: var(--sq-muted); font-size: 15px; }
.cbco-sq__result-list { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 760px) { .cbco-sq__result { grid-template-columns: 1fr; } .cbco-sq__result-list { justify-content: flex-start; } }
@media (max-width: 640px) {
	.cbco-sq__plot { padding: 40px 16px 56px 52px; }
	.cbco-sq__axis-x { left: 52px; right: 16px; }
	.cbco-sq__axis-y { left: 8px; }
	.cbco-sq__axis-y::after { left: 38px; }
	.cbco-sq button.cbco-sq__dot { width: 84px; }
	.cbco-sq__dot img, .cbco-sq .cbco-sq__dot img { width: 84px; height: 84px; }
	.cbco-sq__lbl { font-size: 10px; max-width: 84px; }
	.cbco-sq__lbl { font-size: 10px; }
	.cbco-sq__field { height: 500px; }
}

/* ---------- pouring now ---------- */
.cbco-sq__pouring { background: var(--sq-navy); color: #fff; }
.cbco-sq__pouring .cbco-sq__eyebrow { color: #ffb469; }
.cbco-sq__pouring .cbco-sq__head p { color: #c9d0f0; }
.cbco-sq__locs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.cbco-sq__loc { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.cbco-sq__loc h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; color: #fff; }
.cbco-sq__loc h3 small { font-family: 'Open Sans', Arial, sans-serif; text-transform: none; letter-spacing: 0; font-size: 13px; color: #c9d0f0; font-weight: 400; }
.cbco-sq__status { display: inline-flex; align-items: center; gap: 8px; font-family: 'Oswald', Arial, sans-serif; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; }
.cbco-sq__status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #9aa0b8; flex: 0 0 auto; }
.cbco-sq__status--open::before { background: #59d38a; box-shadow: 0 0 0 4px rgba(89, 211, 138, .2); }
.cbco-sq__hours { font-size: 14px; color: #c9d0f0; }
.cbco-sq ul.cbco-sq__taps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.cbco-sq ul.cbco-sq__taps li { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dashed rgba(255, 255, 255, .15); padding: 0 0 6px; margin: 0; list-style: none; }
.cbco-sq__taps a { color: #fff; text-decoration: none; }
.cbco-sq__taps a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cbco-sq__taps li span { color: #c9d0f0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cbco-sq__taps b { color: #fff; font-weight: 600; }
.cbco-sq__taps-src { font-family: 'Oswald', Arial, sans-serif; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; color: #9aa5d6; }
.cbco-sq p.cbco-sq__taps-empty { font-size: 14px; color: #c9d0f0; }
.cbco-sq__taps-empty a { color: #fff; }
.cbco-sq__loc .cbco-sq__acts { margin-top: auto; padding-top: 6px; gap: 8px; }
.cbco-sq__loc a.cbco-sq__btn { font-size: 12px; padding: .55em 1.1em; }
.cbco-sq__loc a.cbco-sq__btn--ghost { color: #fff; }
.cbco-sq__loc a.cbco-sq__btn--ghost:hover { background: #fff; border-color: #fff; color: var(--sq-navy); }

/* ---------- awards + finder ---------- */
.cbco-sq__awards { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: stretch; }
.cbco-sq__awards--finder-only { grid-template-columns: 1fr; }
.cbco-sq a.cbco-sq__award { background: #fff; border: 1px solid var(--sq-line); border-radius: 12px; padding: 28px; display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; text-decoration: none; color: var(--sq-ink); }
.cbco-sq a.cbco-sq__award:hover { border-color: var(--sq-gold); color: var(--sq-ink); }
.cbco-sq__score { font-family: 'Oswald', Arial, sans-serif; font-weight: 700; font-size: 70px; line-height: 1; color: var(--sq-gold); font-variant-numeric: tabular-nums; }
.cbco-sq__medal { color: var(--sq-gold); }
.cbco-sq__award-txt .cbco-sq__eyebrow { color: var(--sq-gold); }
.cbco-sq__award-txt p { color: var(--sq-muted); font-size: 15px; margin-top: 4px; }
.cbco-sq__finder { background: var(--sq-ember); color: #fff; border-radius: 12px; padding: 28px; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.cbco-sq__finder h2 { color: #fff; }
.cbco-sq__finder p { color: #fff3e6; }
.cbco-sq__finder a.cbco-sq__btn--white { color: var(--sq-ember-deep); }
.cbco-sq__finder a.cbco-sq__btn--white:hover { background: var(--sq-navy); border-color: var(--sq-navy); color: #fff; }
.cbco-sq__finder a.cbco-sq__btn--ghost { color: #fff; }
.cbco-sq__finder a.cbco-sq__btn--ghost:hover { background: #fff; border-color: #fff; color: var(--sq-ember-deep); }
@media (max-width: 860px) { .cbco-sq__awards { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .cbco-sq a.cbco-sq__award { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) { .cbco-sq * { transition: none !important; } }