/* Oddcravin coming-soon look (lib/hosts.js CS_DIR): the cabang previews' approved _base.css (Kevin, 12 Nov: "sementara
   yang coming soon semua pake yang meriah dulu, pake color code yang sesuai sama masing2 logonya ya"), trimmed for the
   real sites. The app's MERIAH look: a lively 3-blob mesh, ink outlines with a small solid offset shadow (the stamp /
   roulette reel style), stickers, chips and cards tilted up to 2 degrees, a bold "coming soon" stamp. Every colour that
   says "this site" comes from that site's own logo (the [data-site] blocks below; previews/cabang/COLORS.md says where
   each hex came from). Fonts: Baloo 2 (display) + Plus Jakarta Sans (body). Logos are always the kit's images (v2.1).
   Pages: the cabang sites (coming-soon/<id>.html, built by cs.js) and the partner and creator landings at / (static,
   their own lang.js). No inline styles: the pages' CSP has no 'unsafe-inline'. */

:root {
  --f-display: "Baloo 2", ui-rounded, system-ui, sans-serif;
  --f-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-cjk: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --bg: #F5F5F5; --surface: #FFFFFF; --surface-2: #F4F5F3;
  --ink: #0D2125; --ink-soft: #3E5257; --line: rgba(13, 33, 37, .12); --line-strong: rgba(13, 33, 37, .3);
  --ol: #0D2125;
  --pop: inset 0 0 0 2px var(--ol), 0 4px 0 var(--ol);
  --pop-s: inset 0 0 0 2px var(--ol), 0 3px 0 var(--ol);
  --ok-bg: #DCEBE0; --ok-ink: #1F4A30; --err: #A1260F;

  /* per site (set by the [data-site] blocks below; defaults = the oddcravin mint logo):
     --logo the logo's own colour · --logo-2 its second colour · --on-logo text on --logo · --logo-ink accent text on
     light (kit "deep", darkened where needed for AA) · --logo-ink-d accent text on dark · --m1/--m2/--m3 mesh blobs */
  --logo: #99C6A8; --logo-2: #E8D9AE; --on-logo: #0D2125; --logo-ink: #3F5B52; --logo-ink-d: #B2D3BC;
  --m1: 204 226 212; --m2: 166 205 179; --m3: 232 217 174;

  /* The logo box (Kevin, 13 Nov: "aturan icon logo ukurannya jangan belang"; kit brand-usage.md "Space and size"): one
     height on every site. The kit draws every stacked lockup on a 1024 px canvas with the stamp at the same share of its
     height, so one height gives every site the same stamp and the same letters (only the width follows the name), and at
     125 px the shortest name (pets, homes, peduli) is still 241 px wide, over the kit's 240 px minimum. */
  --logo-h: 140px;

  --ic-1: var(--logo); --ic-2: var(--logo-2); --ic-3: rgb(var(--m1));
  --wash: color-mix(in srgb, var(--logo) 35%, #FFFFFF);
  --acc-ink: var(--logo-ink);
  /* --logo-solid: the logo colour where words sit on it; the brown sites set a deeper shade with light --on-logo
     (Kevin, 14 Nov: never dark text on brown) */
  --logo-solid: var(--logo);
  --stamp: var(--logo-solid); --stamp-ink: var(--on-logo);
  --btn-bg: var(--logo-solid); --btn-ink: var(--on-logo);
  --t1: var(--ic-1); --t2: var(--ic-2); --t3: var(--ic-3); --t4: var(--ic-2); --t5: var(--ic-1); --t6: var(--ic-3); --ti: #0D2125;
  --k: 1; --logo-l: block; --logo-d: none;
  color-scheme: light;
}
/* Each site from its own logo (v2.1 kit palette.json / palette.css; the mesh and dark values by previews/cabang/COLORS.md).
   Before the dark blocks on purpose: those come later at the same weight, so dark mode still mixes its own washes. */
:root[data-site="pets"] { --logo: #F2DFA1; --logo-2: #C6D9C7; --on-logo: #0D2125; --logo-ink: #7A4E05; --logo-ink-d: #F2E5B7; --m1: 248 239 208; --m2: 242 223 161; --m3: 198 217 199; }
:root[data-site="home"] { --logo: #D8D0BE; --logo-2: #B9CBB9; --on-logo: #0D2125; --logo-ink: #5C4130; --logo-ink-d: #DFDACB; --m1: 236 232 222; --m2: 216 208 190; --m3: 185 203 185; }
:root[data-site="bareng"] { --logo: #EBCFAE; --logo-2: #B7D1BD; --on-logo: #0D2125; --logo-ink: #56574E; --logo-ink-d: #EDD9C0; --m1: 245 231 214; --m2: 235 207 174; --m3: 183 209 189; }
:root[data-site="ngobrol"] { --logo: #CDC3E0; --logo-2: #BCD4CB; --on-logo: #0D2125; --logo-ink: #4B3D7D; --logo-ink-d: #D7D0E4; --m1: 230 225 240; --m2: 205 195 224; --m3: 188 212 203; }
:root[data-site="cerita"] { --logo: #CEDFEA; --logo-2: #E8DAAD; --on-logo: #0D2125; --logo-ink: #53646B; --logo-ink-d: #D8E5EB; --m1: 230 239 244; --m2: 206 223 234; --m3: 232 218 173; }
:root[data-site="bolobolo"] { --logo: #5954F6; --logo-2: #D4CDF4; --on-logo: #F2F3EE; --logo-ink: #2B3579; --logo-ink-d: #ADABF8; --m1: 220 219 253; --m2: 192 190 252; --m3: 212 205 244;
  --ic-1: #AEABFB; --wash: #DCDBFD;
  /* Bolo-bolo keeps its own near-square artwork (kit: "its own original artwork"): its box is as tall as it takes to be
     240 px wide, the kit's minimum, on every screen. */
  --logo-h: 254px; }
:root[data-site="jalan"] { --logo: #D3A365; --logo-solid: #8A5A24; --logo-2: #AFC8B9; --on-logo: #FFFDF8; --logo-ink: #5C553F; --logo-ink-d: #DCB98B; --m1: 237 218 193; --m2: 224 191 147; --m3: 177 202 187; }
:root[data-site="peduli"] { --logo: #A9CDDF; --logo-2: #DAD6BB; --on-logo: #0D2125; --logo-ink: #455E66; --logo-ink-d: #BDD8E3; --m1: 212 230 239; --m2: 169 205 223; --m3: 218 214 187; }
/* Postcard Rose and Coffee (v2.1 palette.json "creator", "partner"): --logo-ink is the kit's deep darkened one 8% step
   (#695C5C → #615555, #5E5D53 → #56574C) so it keeps 4.5:1 on the strongest blob; --m2 partner at 90% to reach 0.55. */
:root[data-site="creator"] { --logo: #F2B5AE; --logo-2: #C5D7C6; --on-logo: #0D2125; --logo-ink: #615555; --logo-ink-d: #F2C6C0; --m1: 248 218 214; --m2: 242 182 175; --m3: 197 215 198; }
:root[data-site="partner"] { --logo: #D8B898; --logo-solid: #7A5A3A; --logo-2: #C7D4BE; --on-logo: #FFFDF8; --logo-ink: #56564C; --logo-ink-d: #DFC9B0; --m1: 236 220 204; --m2: 220 191 162; --m3: 199 212 190; }

/* dark: once for the phone's setting (works without JS), once for the theme button. Deep ink base, the same blobs at
   about a quarter, light outlines, washes mixed into the card. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0D2125; --surface: #15303A; --surface-2: #1C3A43;
    --ink: #E6E9E4; --ink-soft: #B3C2BE; --line: rgba(242, 243, 238, .14); --line-strong: rgba(242, 243, 238, .32);
    --ol: #B3C2BE; --ok-bg: #1F4038; --ok-ink: #CFE8D7; --err: #FFB4A6;
    --wash: color-mix(in srgb, var(--logo) 16%, #15303A); --acc-ink: var(--logo-ink-d);
    --k: .24; --logo-l: none; --logo-d: block; color-scheme: dark;
    --stamp-paper: #E6E9E4;
  }
}
:root[data-theme="dark"] {
  --bg: #0D2125; --surface: #15303A; --surface-2: #1C3A43;
  --ink: #E6E9E4; --ink-soft: #B3C2BE; --line: rgba(242, 243, 238, .14); --line-strong: rgba(242, 243, 238, .32);
  --ol: #B3C2BE; --ok-bg: #1F4038; --ok-ink: #CFE8D7; --err: #FFB4A6;
  --wash: color-mix(in srgb, var(--logo) 16%, #15303A); --acc-ink: var(--logo-ink-d);
  --k: .24; --logo-l: none; --logo-d: block; color-scheme: dark;
  --stamp-paper: #E6E9E4;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; background: transparent; color: var(--ink);
  font: 400 16px/1.5 var(--f-body); -webkit-tap-highlight-color: transparent; overflow-x: hidden;
}
/* the mesh: one fixed layer, radial gradients only (no blur filter, so scrolling costs a phone nothing) */
body::before {
  content: ""; position: fixed; inset: -6%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(114% 114% at 10% 105%, rgb(var(--m3) / calc(.76 * var(--k))) 0%, rgb(var(--m3) / calc(.635 * var(--k))) 20%,
      rgb(var(--m3) / calc(.37 * var(--k))) 40%, rgb(var(--m3) / calc(.15 * var(--k))) 60%, rgb(var(--m3) / calc(.043 * var(--k))) 80%, rgb(var(--m3) / 0) 100%),
    radial-gradient(126% 126% at 105% 55%, rgb(var(--m2) / calc(.76 * var(--k))) 0%, rgb(var(--m2) / calc(.635 * var(--k))) 20%,
      rgb(var(--m2) / calc(.37 * var(--k))) 40%, rgb(var(--m2) / calc(.15 * var(--k))) 60%, rgb(var(--m2) / calc(.043 * var(--k))) 80%, rgb(var(--m2) / 0) 100%),
    radial-gradient(141% 141% at -10% 10%, rgb(var(--m1) / calc(.76 * var(--k))) 0%, rgb(var(--m1) / calc(.635 * var(--k))) 20%,
      rgb(var(--m1) / calc(.37 * var(--k))) 40%, rgb(var(--m1) / calc(.15 * var(--k))) 60%, rgb(var(--m1) / calc(.043 * var(--k))) 80%, rgb(var(--m1) / 0) 100%),
    var(--bg);
}
img { display: block; max-width: 100%; height: auto; }
button, input { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 3px; }
.cb-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cb-l { display: var(--logo-l); } .cb-d { display: var(--logo-d); }
.cb-svg { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cb-svg.fill { fill: currentColor; stroke: none; }

.cb-wrap { width: min(100% - 32px, 1080px); margin-inline: auto; }
main.cb-wrap { padding-bottom: 8px; }

/* ── top bar: back (left, /oc-back.js), theme + language (right) ── */
.cb-top { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: calc(12px + env(safe-area-inset-top)) 0 0; }
.cb-top .cb-sp { flex: 1; }
.cb-top .oc-back-slot { display: flex; }
/* the shared back button, in this look (it sets its own colours inline, hence !important) */
.cb-top .oc-back { background: var(--surface) !important; color: var(--ink) !important; box-shadow: var(--pop-s) !important; }
.cb-round { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; padding: 0;
  background: var(--surface); color: var(--ink); box-shadow: var(--pop-s); cursor: pointer; text-decoration: none; }
.cb-round .cb-svg { width: 22px; height: 22px; }
.cb-lang { display: inline-flex; align-items: center; padding: 3px; border-radius: 999px; background: var(--surface); box-shadow: var(--pop-s); }
.cb-lang button { min-width: 44px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 999px; background: none;
  color: var(--ink-soft); font: 700 13px/1 var(--f-body); cursor: pointer; }
.cb-lang button[aria-pressed="true"] { background: var(--logo-solid); color: var(--on-logo); box-shadow: inset 0 0 0 2px var(--ol); }
.cb-lang button:disabled { display: grid; align-content: center; justify-items: center; gap: 2px; padding: 0 8px; cursor: not-allowed; color: var(--ink-soft); }
.cb-lang .zh { font: 700 13px/1 var(--f-cjk); }
.cb-lang small { font: 700 9.5px/1 var(--f-body); letter-spacing: .01em; }

/* ── hero: the postcard (logo + the "coming soon" stamp) and the words ── */
/* minmax(0, 1fr): a long name (ngobrol di oddcravin) may run into the postcard's padding, never widen the page */
.cb-hero { display: grid; gap: 30px; padding: 22px 0 8px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "card" "text"; }
.cb-hero > .cb-post { grid-area: card; }
.cb-hero > .cb-copy { grid-area: text; text-align: center; }
.cb-post { position: relative; margin: 6px 4px 0; padding: 26px 18px 18px; background: var(--surface); border-radius: 14px;
  box-shadow: inset 0 0 0 2px var(--ol), 0 5px 0 var(--ol); transform: rotate(-1.5deg); }
.cb-post::after { content: ""; position: absolute; inset: 9px; border: 2px dashed var(--line-strong); border-radius: 8px; pointer-events: none; }
/* the logo box: the same height on every site (--logo-h above); the image keeps its own width, centred */
.cb-logo-box { display: flex; justify-content: center; height: var(--logo-h); margin: 0 auto; }
.cb-logo-box .cb-logo { width: auto; height: 100%; max-width: none; }
.cb-post a.cb-logo-box { width: fit-content; border-radius: 10px; }
.cb-post .cb-row { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 14px 0 0; }
.cb-domain { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 6px 12px; border-radius: 999px; background: var(--wash);
  box-shadow: var(--pop-s); font: 700 13px/1.2 var(--f-body); color: var(--ink); margin-bottom: 3px; }
.cb-domain > span { min-width: 0; }
.cb-domain::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }

/* a sticker of the site's own motif slapped on the postcard's corner, bobbing a little */
.cb-sticker { position: absolute; z-index: 2; top: -18px; left: -10px; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%;
  background: var(--logo-2); color: #0D2125; box-shadow: inset 0 0 0 2px var(--ol), 0 3px 0 var(--ol); transform: rotate(-10deg); pointer-events: none; }
.cb-sticker .cb-svg { width: 26px; height: 26px; }

/* the stamp: perforated paper traced in ink with a solid drop, the logo colour on its face, the site's end icon (kit
   image) + bold words in Baloo, a postmark over its corner. Same size on every site. */
.cb-stamp { position: relative; flex: none; transform: rotate(6deg); }
.cb-stamp .paper { display: grid; width: 120px; height: 140px; padding: 7px;
  background: radial-gradient(circle, transparent 2.6px, var(--stamp-paper, var(--surface)) 3px) -5px -5px / 10px 10px;
  filter: drop-shadow(1.5px 0 0 var(--ol)) drop-shadow(-1.5px 0 0 var(--ol)) drop-shadow(0 1.5px 0 var(--ol)) drop-shadow(0 -1.5px 0 var(--ol))
          drop-shadow(0 4px 0 var(--ol)); }
.cb-stamp .face { display: grid; align-content: center; justify-items: center; gap: 2px; padding: 8px 6px; background: var(--stamp); color: var(--stamp-ink);
  text-align: center; box-shadow: inset 0 0 0 2px #0D2125; }
.cb-stamp .face img { width: 54px; height: 54px; margin: -4px 0 0; object-fit: contain; }
.cb-stamp b { font: 800 21px/.92 var(--f-display); letter-spacing: -.01em; text-transform: lowercase; }
.cb-stamp .pm { position: absolute; left: -48px; top: 22px; width: 92px; height: 60px; color: var(--ink); opacity: .8; pointer-events: none; }

.cb-copy h1, .cb-h1 { margin: 0; font: 800 clamp(30px, 8.6vw, 40px)/1.06 var(--f-display); letter-spacing: -.01em; text-wrap: balance; transform: rotate(-1.5deg); }
.cb-copy .cb-lead { margin: 14px auto 0; max-width: 36ch; font: 500 16.5px/1.5 var(--f-body); color: var(--ink-soft); text-wrap: pretty; }
.cb-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 12px; margin: 22px 0 0; }
.cb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 2px 22px 0; border: 0; border-radius: 16px;
  background: var(--btn-bg); color: var(--btn-ink); font: 800 18.5px/1.1 var(--f-display); text-decoration: none; cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--ol), 0 4px 0 var(--ol); margin-bottom: 4px; }
.cb-btn .cb-svg { width: 21px; height: 21px; margin-top: -2px; stroke-width: 2.2; }
.cb-btn.alt { background: var(--surface); color: var(--ink); }
.cb-btn[aria-busy="true"] { opacity: .7; cursor: progress; }

/* the partner and creator landings: one big box into the form (Kevin, 31 Oct), now a meriah button in the logo colour */
.join { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; max-width: 440px; margin: 0 0 5px; padding: 16px 16px 16px 22px;
  border-radius: 22px; background: var(--logo-solid); color: var(--on-logo); text-decoration: none; text-align: left; box-shadow: inset 0 0 0 2px var(--ol), 0 5px 0 var(--ol); }
.join .txt { display: grid; gap: 2px; }
.join b { font: 800 24px/1.12 var(--f-display); }
.join .txt span { font: 600 15px/1.35 var(--f-body); }
.join .go { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--on-logo); color: var(--logo-solid); }
.join .go svg { display: block; }

/* ── sections ── */
.cb-sec { margin: 56px 0 0; }
.cb-h2 { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 22px; font: 800 26px/1.1 var(--f-display); text-align: center;
  text-wrap: balance; transform: rotate(-1.5deg); }
.cb-h2 .cb-ic { width: 42px; height: 42px; }
.cb-h2 .cb-ic .cb-svg { width: 21px; height: 21px; }
.cb-sec.cb-tight { margin-top: 20px; }
.cb-sub { margin: -10px auto 20px; max-width: 40ch; text-align: center; color: var(--ink-soft); font-weight: 500; }

.cb-ic { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 50%; background: var(--tint, var(--t1)); color: var(--ti);
  box-shadow: inset 0 0 0 2px var(--ol); }
.cb-ic .cb-svg { width: 26px; height: 26px; }
[data-tint="1"] { --tint: var(--t1); } [data-tint="2"] { --tint: var(--t2); } [data-tint="3"] { --tint: var(--t3); }
[data-tint="4"] { --tint: var(--t4); } [data-tint="5"] { --tint: var(--t5); } [data-tint="6"] { --tint: var(--t6); }
[data-tint="accent"] { --tint: var(--logo-solid); --ti: var(--on-logo); }

.cb-blocks { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; margin: 0; padding: 0; }
.cb-blocks > li { display: grid; align-content: start; justify-items: start; gap: 10px; padding: 16px 14px 16px; border-radius: 20px;
  background: var(--surface); box-shadow: var(--pop); }
.cb-blocks > li:nth-child(4n+1) { transform: rotate(-1.5deg); } .cb-blocks > li:nth-child(4n+2) { transform: rotate(1.2deg); }
.cb-blocks > li:nth-child(4n+3) { transform: rotate(1deg); }    .cb-blocks > li:nth-child(4n+4) { transform: rotate(-1.2deg); }
.cb-blocks > li:nth-child(6n+1) { --tint: var(--t1); } .cb-blocks > li:nth-child(6n+2) { --tint: var(--t2); }
.cb-blocks > li:nth-child(6n+3) { --tint: var(--t3); } .cb-blocks > li:nth-child(6n+4) { --tint: var(--t4); }
.cb-blocks > li:nth-child(6n+5) { --tint: var(--t5); } .cb-blocks > li:nth-child(6n+6) { --tint: var(--t6); }
.cb-blocks > li[data-tint="1"] { --tint: var(--t1); } .cb-blocks > li[data-tint="2"] { --tint: var(--t2); } .cb-blocks > li[data-tint="3"] { --tint: var(--t3); }
.cb-blocks > li[data-tint="4"] { --tint: var(--t4); } .cb-blocks > li[data-tint="5"] { --tint: var(--t5); } .cb-blocks > li[data-tint="6"] { --tint: var(--t6); }
.cb-blocks > li:last-child:nth-child(odd) { grid-column: 1 / -1; transform: rotate(-.8deg); }
.cb-blocks b { font: 700 18px/1.15 var(--f-display); color: var(--acc-ink); }
.cb-blocks span:not(.cb-ic) { margin-top: -6px; font-size: 14px; line-height: 1.4; color: var(--ink-soft); font-weight: 500; }

.cb-list { list-style: none; display: grid; gap: 0; margin: 0; padding: 6px 16px; border-radius: 20px; background: var(--surface); box-shadow: var(--pop); }
.cb-list > li { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.cb-list > li + li { border-top: 2px dashed var(--line-strong); }
.cb-list .cb-ic { width: 46px; height: 46px; }
.cb-list .cb-ic .cb-svg { width: 23px; height: 23px; }
.cb-list > li:nth-child(3n+1) .cb-ic:not([data-tint]) { --tint: var(--t1); } .cb-list > li:nth-child(3n+2) .cb-ic:not([data-tint]) { --tint: var(--t2); }
.cb-list > li:nth-child(3n+3) .cb-ic:not([data-tint]) { --tint: var(--t3); }
.cb-list .tx { display: grid; gap: 1px; min-width: 0; }
.cb-list b { font: 700 16px/1.25 var(--f-body); }
.cb-list span:not(.cb-ic):not(.tx) { font-size: 14px; line-height: 1.4; color: var(--ink-soft); font-weight: 500; }

/* icon chips (static) and link stickers (the landings' socials): tilted in turn */
.cb-chips, .cb-links { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 10px; margin: 0; padding: 0; }
.cb-chips > li, .cb-links a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 5px; border-radius: 999px;
  background: var(--surface); box-shadow: var(--pop-s); font-weight: 700; font-size: 14px; }
.cb-links a { min-height: 50px; padding: 0 18px 0 6px; font-size: 15px; text-decoration: none; }
.cb-chips > li:nth-child(odd), .cb-links > li:nth-child(odd) a { transform: rotate(-2deg); }
.cb-chips > li:nth-child(even), .cb-links > li:nth-child(even) a { transform: rotate(1.5deg); }
.cb-chips > li:nth-child(3n), .cb-links > li:nth-child(3n) a { transform: rotate(-1deg); }
.cb-chips .cb-ic, .cb-links .cb-ic { width: 34px; height: 34px; }
.cb-links .cb-ic { width: 38px; height: 38px; }
.cb-chips .cb-ic .cb-svg, .cb-links .cb-ic .cb-svg { width: 18px; height: 18px; }
.cb-chips > li:nth-child(6n+1), .cb-links > li:nth-child(3n+1) { --tint: var(--t1); } .cb-chips > li:nth-child(6n+2), .cb-links > li:nth-child(3n+2) { --tint: var(--t2); }
.cb-chips > li:nth-child(6n+3), .cb-links > li:nth-child(3n+3) { --tint: var(--t3); }
.cb-chips > li:nth-child(6n+4) { --tint: var(--t4); } .cb-chips > li:nth-child(6n+5) { --tint: var(--t5); } .cb-chips > li:nth-child(6n+6) { --tint: var(--t6); }

.cb-quote { position: relative; margin: 0; padding: 28px 22px 22px 22px; border-radius: 22px; background: var(--wash); box-shadow: var(--pop); transform: rotate(1deg); }
.cb-quote::before { content: ""; position: absolute; top: -16px; left: 20px; width: 36px; height: 36px; border-radius: 50%; background-color: var(--logo);
  box-shadow: inset 0 0 0 2px var(--ol), 0 3px 0 var(--ol);
  background-image: url("/coming-soon/quote.svg"); background-size: 22px; background-position: center; background-repeat: no-repeat; }
.cb-quote p { margin: 0; font: 700 21px/1.3 var(--f-display); text-wrap: pretty; }
.cb-quote footer { margin: 10px 0 0; font-size: 13px; font-weight: 700; color: var(--acc-ink); }

.cb-note { display: flex; gap: 12px; margin: 0; padding: 14px 16px; border-radius: 18px; background: var(--surface); box-shadow: var(--pop);
  font-size: 14px; line-height: 1.45; transform: rotate(-.8deg); }
.cb-note .cb-ic { width: 40px; height: 40px; --tint: var(--t2); }
.cb-note .cb-ic .cb-svg { width: 20px; height: 20px; }
.cb-note b { display: block; margin: 0 0 4px; font: 700 15px/1.25 var(--f-body); }
.cb-note ul { margin: 0; padding: 0 0 0 18px; color: var(--ink-soft); font-weight: 500; }
.cb-note li + li { margin-top: 3px; }

/* ── the interest form (built by cs.js inside [data-cb-form]); straight, so it's calm to fill in ── */
.cb-join { position: relative; display: grid; gap: 22px; margin: 60px 0 0; padding: 22px 16px 20px; border-radius: 26px; background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--ol), 0 5px 0 var(--ol); scroll-margin-top: 16px; }
.cb-join .cb-intro h2 { margin: 0; font: 800 28px/1.08 var(--f-display); text-wrap: balance; transform: rotate(-1.5deg); transform-origin: 0 50%; }
.cb-join .cb-intro p { margin: 10px 0 0; color: var(--ink-soft); font-weight: 500; }
.cb-say { display: flex; flex-wrap: wrap; gap: 12px 8px; margin: 14px 0 0; }
.cb-say a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 10px; border-radius: 999px; background: var(--surface);
  box-shadow: var(--pop-s); text-decoration: none; font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.cb-say .cb-svg { width: 20px; height: 20px; }
.cb-form { position: relative; display: grid; gap: 18px; margin: 0; }
.cb-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.cb-form legend, .cb-form .cb-lab { display: block; margin: 0 0 8px; padding: 0; font: 700 15px/1.3 var(--f-body); }
.cb-choices { display: grid; gap: 10px; }
.cb-choice { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 12px; border-radius: 16px;
  background: var(--surface); box-shadow: inset 0 0 0 2px var(--ol); cursor: pointer; }
.cb-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cb-choice .cb-ic { width: 44px; height: 44px; }
.cb-choice .cb-ic .cb-svg { width: 22px; height: 22px; }
.cb-choice:nth-child(3n+1) { --tint: var(--t1); } .cb-choice:nth-child(3n+2) { --tint: var(--t2); } .cb-choice:nth-child(3n+3) { --tint: var(--t3); }
.cb-choice .tx { display: grid; gap: 1px; flex: 1; min-width: 0; }
.cb-choice b { font: 700 16px/1.25 var(--f-body); }
.cb-choice small { font-size: 13px; line-height: 1.35; color: var(--ink-soft); font-weight: 500; }
.cb-choice .tick { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line-strong); color: transparent; }
.cb-choice .tick .cb-svg { width: 18px; height: 18px; stroke-width: 3; }
.cb-choice:has(input:checked) { background: var(--wash); box-shadow: inset 0 0 0 2.5px var(--ol), 0 3px 0 var(--ol); }
.cb-choice:has(input:checked) .tick { background: var(--ink); box-shadow: none; color: var(--bg); }
.cb-choice:has(input:focus-visible) { outline: 2.5px solid var(--ink); outline-offset: 3px; }
.cb-field input[type="email"], .cb-field input[type="text"] { width: 100%; min-height: 52px; padding: 0 16px; border: 0; border-radius: 14px;
  background: var(--surface); box-shadow: inset 0 0 0 2px var(--ol); font-size: 16px; color: var(--ink); }
.cb-field input::placeholder { color: var(--ink-soft); opacity: .85; }
.cb-field input:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 2px; }
.cb-field[hidden] { display: none; }
/* the trap field for bots: off screen, out of the tab order, hidden from screen readers */
.cb-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.cb-consent { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; padding: 12px; border-radius: 14px; background: var(--surface-2);
  box-shadow: inset 0 0 0 2px var(--line-strong); cursor: pointer; font-size: 14px; line-height: 1.45; }
.cb-consent input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cb-consent .box { display: grid; place-items: center; width: 26px; height: 26px; flex: none; margin-top: 1px; border-radius: 8px; background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--ol); color: transparent; }
.cb-consent .box .cb-svg { width: 18px; height: 18px; stroke-width: 3; }
.cb-consent:has(input:checked) { box-shadow: inset 0 0 0 2px var(--ol); }
.cb-consent:has(input:checked) .box { background: var(--ink); box-shadow: none; color: var(--bg); }
.cb-consent:has(input:focus-visible) { outline: 2.5px solid var(--ink); outline-offset: 3px; }
.cb-consent .tx { display: grid; gap: 4px; }
.cb-consent .tx > span:first-child { font-weight: 600; }
.cb-consent .tx > span + span { color: var(--ink-soft); font-size: 13px; font-weight: 500; }
.cb-send { width: 100%; min-height: 58px; font-size: 20px; }
.cb-status { margin: 0; }
.cb-status:empty { display: none; }
.cb-status:focus { outline: none; }
.cb-choices[data-err] .cb-choice, .cb-consent[data-err], .cb-field input[aria-invalid="true"] { box-shadow: inset 0 0 0 2.5px var(--err), 0 3px 0 var(--err); }
.cb-status .ok { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--ok-bg); color: var(--ok-ink);
  box-shadow: inset 0 0 0 2px var(--ok-ink); font-weight: 700; font-size: 15px; transform: rotate(-1deg); }
.cb-status .ok .cb-ic { width: 44px; height: 44px; --tint: var(--logo-solid); --ti: var(--on-logo); }
.cb-status .err { margin: 0; padding: 0; list-style: none; color: var(--err); font-weight: 700; font-size: 14px; }
.cb-status .err li::before { content: "• "; }
/* the burst on a sign-up: the site's own motif and logo-coloured dots fly out of the button (cs.js; motion only) */
.cb-burst { position: absolute; left: 50%; bottom: 60px; width: 0; height: 0; pointer-events: none; z-index: 5; }
.cb-burst i { position: absolute; left: -14px; top: -14px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--c, var(--logo)); color: #0D2125; box-shadow: inset 0 0 0 2px #0D2125; opacity: 0; }
.cb-burst i .cb-svg { width: 16px; height: 16px; }
.cb-burst i.dot { width: 12px; height: 12px; left: -6px; top: -6px; }

/* ── footer ── */
.cb-foot { display: grid; justify-items: center; gap: 16px; margin: 48px 0 0; padding: 24px 0 calc(28px + env(safe-area-inset-bottom)); text-align: center; }
.cb-foot .cb-fam-t { margin: 0; font: 700 14px/1.2 var(--f-body); color: var(--acc-ink); }
.cb-fam { list-style: none; display: grid; grid-template-columns: repeat(4, 52px); gap: 8px 14px; margin: -8px 0 0; padding: 0; }
.cb-fam a { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; }
.cb-fam img { width: 52px; height: 52px; }
@media (min-width: 600px) { .cb-fam { grid-template-columns: repeat(8, 52px); gap: 10px; } }
.cb-fam a[aria-current="page"] { box-shadow: 0 0 0 2.5px var(--ol), 0 4px 0 1px var(--ol); }
.cb-soc { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.cb-soc a { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--surface); color: var(--ink); box-shadow: var(--pop-s); }
.cb-soc .cb-svg { width: 22px; height: 22px; }
.cb-mail { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px; background: var(--surface);
  box-shadow: var(--pop-s); font-weight: 700; text-decoration: none; }
.cb-mail .cb-svg { width: 20px; height: 20px; }
.cb-fine { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
@media (hover: hover) {
  .cb-soc a:hover, .cb-mail:hover, .cb-say a:hover, .cb-links a:hover { background: var(--logo-solid); color: var(--on-logo); }
}

/* ── motion: only for those who don't ask for less, and never in screenshots (?shot=1) ── */
@keyframes cb-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-3%, 2%, 0) scale(1.05); } }
@keyframes cb-press { 0% { transform: scale(1.35) rotate(-4deg); opacity: 0; } 60% { transform: scale(.96) rotate(7deg); opacity: 1; } 100% { transform: scale(1) rotate(6deg); } }
@keyframes cb-float { from { transform: translateY(1px) rotate(-3deg); } to { transform: translateY(-4px) rotate(4deg); } }
@keyframes cb-bob { from { transform: rotate(-10deg) translateY(0); } to { transform: rotate(-4deg) translateY(-5px); } }
@keyframes cb-wiggle { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-3deg); } 70% { transform: rotate(2deg); } }
@keyframes cb-fly { 0% { opacity: 0; transform: translate(0, 0) scale(.4) rotate(0); } 15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1) rotate(var(--r)); } }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-shot]) body::before { animation: cb-drift 40s ease-in-out infinite alternate; will-change: transform; }
  html:not([data-shot]) .cb-stamp { animation: cb-press .7s cubic-bezier(.2, .8, .3, 1.1) .15s both; }
  html:not([data-shot]) .cb-stamp .face img { animation: cb-float 2.6s ease-in-out 1s infinite alternate; }
  html:not([data-shot]) .cb-sticker { animation: cb-bob 3.2s ease-in-out infinite alternate; }
  .cb-burst i { animation: cb-fly 1.1s cubic-bezier(.15, .7, .3, 1) var(--d, 0s) both; }
  .cb-round, .cb-btn, .join, .cb-links a, .cb-chips > li { transition: transform .12s ease, box-shadow .12s ease; }
  .cb-round:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px var(--ol), 0 1px 0 var(--ol); }
  .cb-btn:active, .join:active { transform: translateY(3px); box-shadow: inset 0 0 0 2px var(--ol), 0 1px 0 var(--ol); }
  .cb-links a:active { transform: translateY(2px) rotate(0); box-shadow: inset 0 0 0 2px var(--ol), 0 1px 0 var(--ol); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .cb-btn:hover .cb-svg, .join:hover .go, .cb-blocks > li:hover .cb-ic, .cb-chips > li:hover .cb-ic { animation: cb-wiggle .45s ease-in-out; }
}

/* ── laptop ── */
@media (min-width: 900px) {
  :root { --logo-h: 176px; }
  :root[data-site="bolobolo"] { --logo-h: 254px; }
  .cb-top { padding-top: 22px; }
  .cb-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); grid-template-areas: "text card"; align-items: center; gap: 48px; padding: 48px 0 16px; }
  .cb-hero > .cb-copy { text-align: left; }
  .cb-copy h1 { font-size: 54px; transform-origin: 0 50%; }
  .cb-copy .cb-lead { margin-left: 0; font-size: 18px; }
  .cb-cta { justify-content: flex-start; }
  .cb-post { padding: 34px 28px 24px; }
  .cb-stamp .paper { width: 140px; height: 160px; }
  .cb-stamp .face img { width: 66px; height: 66px; }
  .cb-stamp b { font-size: 24px; }
  .cb-sticker { width: 58px; height: 58px; top: -22px; left: -14px; }
  .cb-sticker .cb-svg { width: 30px; height: 30px; }
  .cb-sec { margin-top: 88px; }
  .cb-h2 { font-size: 32px; margin-bottom: 28px; }
  .cb-blocks { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
  .cb-blocks > li:last-child:nth-child(odd) { grid-column: auto; transform: rotate(1deg); }
  .cb-blocks > li { padding: 20px 18px; }
  .cb-list { padding: 8px 24px; }
  .cb-join { grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: start; margin-top: 88px; padding: 36px; }
  .cb-join .cb-intro h2 { font-size: 36px; }
  .cb-quote { padding: 34px 36px 28px; transform: rotate(.6deg); }
  .cb-quote p { font-size: 28px; }
  .join b { font-size: 27px; }
}
/* small phones: the logo box at the kit's floor (125 px: the shortest name stays 241 px wide), a smaller stamp so the
   address still fits beside it */
@media (max-width: 379px) {
  :root { --logo-h: 125px; }
  :root[data-site="bolobolo"] { --logo-h: 254px; }
  .cb-post { padding: 22px 14px 16px; }
  .cb-stamp .paper { width: 100px; height: 120px; padding: 6px; }
  .cb-stamp .face { padding: 6px 4px; }
  .cb-stamp .face img { width: 42px; height: 42px; }
  .cb-stamp b { font-size: 17px; }
  .cb-stamp .pm { left: -40px; top: 16px; width: 76px; height: 50px; }
  .cb-domain { gap: 0; padding: 6px 10px; font-size: 12px; }
  .cb-domain::before { display: none; }
  .join b { font-size: 21px; }
  .join { padding-left: 18px; }
}
@media (max-width: 359px) {
  /* the longest names (ngobrol di oddcravin) run into the postcard's dashed frame here: the frame steps aside */
  .cb-post::after { display: none; }
  .cb-lang button { padding: 0 8px; }
  .cb-blocks { gap: 14px 10px; }
  .cb-blocks > li { padding: 14px 12px; }
  .cb-blocks b { font-size: 17px; }
  .cb-btn { padding-inline: 18px; font-size: 17.5px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
[data-shot] *, [data-shot] *::before, [data-shot] *::after { animation: none !important; transition: none !important; }