/* ============================================================================
   SiBunbun Redesign 2026 — shared design system  (mobile-first)
   FINAL visual source of truth: the attached homepage mockup.
   ========================================================================== */
:root{
  --sbn-bg:        oklch(97% 0.014 75);
  --sbn-surface:   oklch(98% 0.013 65);
  --sbn-ink:       oklch(30% 0.04 40);
  --sbn-ink-strong:oklch(25% 0.045 40);
  --sbn-ink-soft:  oklch(46% 0.03 40);
  --sbn-taupe:     oklch(52% 0.03 40);
  --sbn-amber:     oklch(64% 0.15 47);
  --sbn-amber-ink: oklch(58% 0.13 45);
  --sbn-green:     oklch(52% 0.09 150);
  --sbn-line:      oklch(90% 0.02 60);
  --sbn-card-brd:  oklch(91% 0.02 60);
  --sbn-parch-a:   oklch(95% 0.03 68);
  --sbn-parch-b:   oklch(91% 0.045 55);
  --sbn-parch-brd: oklch(87% 0.045 55);
  --sbn-choco:     oklch(30% 0.055 45);
  --sbn-shadow:    0 12px 30px oklch(35% 0.05 40 / 0.10);
  --sbn-shadow-sm: 0 6px 16px oklch(35% 0.05 40 / 0.07);
  --sbn-serif: 'Lora', Georgia, 'Times New Roman', serif;
  --sbn-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sbn-max: 480px;
}

.sbn-app{
  max-width:var(--sbn-max); margin:0 auto; background:var(--sbn-bg);
  color:var(--sbn-ink); font-family:var(--sbn-sans); font-size:14px;
  line-height:1.55; overflow-x:hidden; -webkit-font-smoothing:antialiased;
  position:relative; container-type:inline-size; container-name:sbnapp;
}
.sbn-app *,.sbn-app *::before,.sbn-app *::after{box-sizing:border-box;}
.sbn-app img{max-width:100%; height:auto; display:block;}
.sbn-app a{color:inherit; text-decoration:none;}
body.sbn-redesign{background:var(--sbn-bg); margin:0;}
.sbn-app .sb-capital-home,.sbn-app .sb-new-home,.sbn-app .sbn-top{display:none !important;}

.sbn-app h1,.sbn-app h2,.sbn-app h3,.sbn-app h4{font-family:var(--sbn-serif); font-weight:600; margin:0; color:var(--sbn-ink-strong); letter-spacing:-.01em;}
.sbn-eyebrow{font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--sbn-amber-ink);}
.sbn-seeall{font-size:13px; font-weight:600; color:var(--sbn-amber-ink); white-space:nowrap;}
.sbn-section-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:12px;}

/* ---- ART SLOTS ---- */
.sbn-art{position:relative; overflow:hidden; border-radius:16px; background:oklch(88% 0.05 55);}
.sbn-art img{width:100%; height:100%; object-fit:cover;}
.sbn-art--bleed{border-radius:0;}
.sbn-art--placeholder .sbn-art__motif{position:absolute; inset:0; width:100%; height:100%;}
.sbn-ph{display:flex; align-items:center; justify-content:center; border-radius:16px;
  background:linear-gradient(140deg, var(--sbn-arc-tint, oklch(94% 0.035 62)), oklch(97% 0.015 72));
  color:var(--sbn-arc-deco, oklch(64% 0.06 48));}
.sbn-ph svg{width:26px; height:26px; opacity:.38;}

/* ---- BUTTONS ---- */
.sbn-btn{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14px;
  padding:12px 22px; border-radius:999px; border:0; cursor:pointer; line-height:1; white-space:nowrap;}
.sbn-btn svg{flex:none;}
.sbn-btn--amber{background:var(--sbn-amber); color:#fff; box-shadow:0 8px 20px oklch(64% 0.15 47 / 0.28);}
.sbn-btn--pill{background:#fff; color:var(--sbn-amber-ink); font-size:13.5px; padding:10px 18px; border:1px solid oklch(90% 0.04 55);}
.sbn-btn--ghost{background:transparent; border:1.5px solid oklch(75% 0.03 65); color:oklch(97% 0.014 75);}

/* ---- HEADER (overlays hero) ---- */
.sbn-header{position:absolute; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; padding:16px 18px;}
.sbn-page-plain .sbn-header{position:static; background:var(--sbn-bg);}
.sbn-brand{display:flex; align-items:center; gap:9px;}
.sbn-brand__mark{width:34px; height:34px; border-radius:50%; object-fit:cover; flex:none;
  box-shadow:0 2px 8px oklch(30% 0.04 40 / 0.15);}
.sbn-brand__mark--empty{display:flex; align-items:center; justify-content:center;
  background:oklch(97% 0.02 70); color:var(--sbn-amber-ink); font-family:var(--sbn-serif); font-weight:700; font-size:16px;}
.sbn-brand__name{font-family:var(--sbn-serif); font-weight:600; font-size:21px; color:var(--sbn-ink-strong);}
.sbn-brand__name span{color:var(--sbn-amber);}
.sbn-brand__paw{margin-left:2px; font-size:15px;}
.sbn-header__tools{display:flex; align-items:center; gap:14px;}
.sbn-icon-btn{background:none; border:0; padding:2px; color:var(--sbn-ink-strong); display:flex; cursor:pointer;}
.sbn-icon-btn svg{width:22px; height:22px;}
.sbn-menu-toggle{flex-direction:column; gap:5px; width:24px;}
.sbn-menu-toggle span{width:22px; height:2px; background:var(--sbn-ink-strong); display:block; border-radius:2px;}

/* ---- MOBILE DRAWER MENU ---- */
html.sbn-noscroll{overflow:hidden;}
.sbn-drawer{position:fixed; inset:0; z-index:200;}
.sbn-drawer__scrim{position:absolute; inset:0; background:oklch(25% 0.04 40 / 0.42); backdrop-filter:blur(1px);}
.sbn-drawer__panel{position:absolute; top:0; right:0; height:100%; width:min(88vw, 420px);
  background:linear-gradient(180deg, oklch(98% 0.015 78), oklch(96% 0.022 70));
  box-shadow:-18px 0 44px oklch(25% 0.04 40 / 0.22); display:flex; flex-direction:column;
  overflow-y:auto; -webkit-overflow-scrolling:touch; animation:sbn-drawer-in .22s ease;}
@keyframes sbn-drawer-in{from{transform:translateX(14px); opacity:.4;} to{transform:none; opacity:1;}}
.sbn-drawer__top{display:flex; align-items:center; justify-content:space-between; padding:16px 16px 12px;}
.sbn-drawer__x{background:oklch(97% 0.015 75); border:1px solid var(--sbn-line); border-radius:50%;
  width:38px; height:38px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--sbn-ink-strong);}
.sbn-drawer__x svg{width:18px; height:18px;}
.sbn-drawer__list{padding:4px 12px 8px; display:flex; flex-direction:column; flex:1;}
.sbn-drawer__group{display:flex; flex-direction:column;}
.sbn-drawer__item{display:flex; align-items:center; gap:12px; padding:12px 12px; border-radius:12px;
  font-size:14.5px; font-weight:600; color:var(--sbn-ink-strong); line-height:1.2;}
.sbn-drawer__item.is-active{background:oklch(95% 0.045 55); color:var(--sbn-amber-ink);}
.sbn-drawer__item.is-disabled{color:oklch(70% 0.02 60); cursor:default;}
.sbn-drawer__ic{flex:none; width:26px; height:26px; display:flex; align-items:center; justify-content:center; color:var(--sbn-taupe);}
.sbn-drawer__ic svg{width:20px; height:20px;}
.sbn-drawer__item.is-active .sbn-drawer__ic{color:var(--sbn-amber-ink);}
.sbn-drawer__item--nav .sbn-drawer__ic{border-radius:9px; width:30px; height:30px;}
.sbn-drawer__ic.sbn-tone-buddhis{background:oklch(93% 0.05 54); color:oklch(54% 0.14 45);}
.sbn-drawer__ic.sbn-tone-sejarah{background:oklch(92% 0.035 52); color:oklch(46% 0.06 42);}
.sbn-drawer__ic.sbn-tone-budaya{background:oklch(93% 0.05 26); color:oklch(52% 0.13 27);}
.sbn-drawer__ic.sbn-tone-catatan{background:oklch(92% 0.05 150); color:var(--sbn-green);}
.sbn-drawer__label{flex:1; min-width:0;}
.sbn-drawer__chev{flex:none; color:oklch(76% 0.02 60);}
.sbn-drawer__chev svg{width:16px; height:16px;}
.sbn-drawer__ext{flex:none; color:oklch(72% 0.03 60);}
.sbn-drawer__ext svg{width:15px; height:15px;}
.sbn-drawer__soon{font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--sbn-taupe); background:oklch(94% 0.02 70); padding:2px 7px; border-radius:999px;}
.sbn-drawer__rule{border:0; border-top:1px solid var(--sbn-line); margin:8px 12px;}
.sbn-drawer__note{margin:6px 16px 22px; padding:14px 16px; border-radius:14px;
  background:oklch(95% 0.03 145); border:1px solid oklch(90% 0.035 145);
  font-family:var(--sbn-serif); font-size:13.5px; line-height:1.5; color:oklch(38% 0.05 90);}

/* ---- HERO : compact 16:9 banner ----
   The visual container is locked to 16/9. Height comes from the ratio, never
   from the text. All content (header + label + headline + copy + button) is
   sized with responsive clamp() so it always fits inside the ratio box, with
   the artwork bleeding on the right and the text column on the left. */
.sbn-hero{position:relative; width:100%; aspect-ratio:16/9; overflow:hidden;
  background:oklch(88% 0.05 55);}
.sbn-hero__art{position:absolute; inset:0; z-index:0;}
.sbn-hero__art .sbn-art{width:100%; height:100%; border-radius:0;}
.sbn-hero__art .sbn-art img{width:100%; height:100%; object-fit:cover; object-position:80% 40%;}
.sbn-hero__scrim{position:absolute; inset:0; z-index:1;
  background:linear-gradient(94deg, var(--sbn-bg) 2%, oklch(97% 0.014 75 / 0.9) 26%, oklch(97% 0.014 75 / 0.32) 50%, transparent 70%);}
.sbn-hero .sbn-header{padding:clamp(8px,2.6cqw,13px) clamp(12px,3.4cqw,18px);}
.sbn-hero .sbn-brand__mark{width:clamp(24px,6.2cqw,30px); height:clamp(24px,6.2cqw,30px);}
.sbn-hero .sbn-brand__name{font-size:clamp(14px,4.2cqw,19px);}
.sbn-hero__inner{position:absolute; inset:0; z-index:2;
  padding:clamp(40px,11cqw,50px) clamp(12px,3.4cqw,18px) clamp(8px,2.5cqw,13px);
  display:flex; flex-direction:column; justify-content:center; gap:clamp(2px,0.9cqw,6px);
  max-width:66%;}
.sbn-hero__label{display:inline-flex; align-items:center; gap:5px; background:oklch(96% 0.03 65 / 0.9);
  border:1px solid oklch(90% 0.04 60); padding:clamp(2px,0.7cqw,4px) clamp(7px,2.2cqw,11px); border-radius:999px;
  width:fit-content; font-size:clamp(8px,2.3cqw,10.5px); font-weight:600; color:var(--sbn-green); backdrop-filter:blur(2px);}
.sbn-hero__label .leaf{color:var(--sbn-green);}
.sbn-hero__label::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--sbn-amber); flex:none;}
.sbn-hero__title{font-size:clamp(15px,4.7cqw,21px); line-height:1.08; margin:0; color:var(--sbn-ink-strong); max-width:10em;}
.sbn-hero__title .heart{color:var(--sbn-amber); font-family:var(--sbn-sans);}
.sbn-hero__lede{font-size:clamp(9px,2.6cqw,11.5px); line-height:1.34; color:var(--sbn-ink-soft); margin:0; max-width:19em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.sbn-hero__inner .sbn-btn{align-self:flex-start; margin-top:clamp(2px,0.9cqw,5px);
  padding:clamp(6px,1.9cqw,9px) clamp(12px,3.4cqw,18px); font-size:clamp(10px,2.7cqw,12.5px);}

/* ---- FEATURED STORY ---- */
.sbn-featured{padding:20px 18px 26px;}
.sbn-featured__card{background:var(--sbn-surface); border:1px solid var(--sbn-card-brd);
  border-radius:22px; padding:16px; box-shadow:var(--sbn-shadow);}
.sbn-featured__img{border-radius:16px; overflow:hidden; margin-bottom:14px;}
.sbn-featured__img .sbn-art,.sbn-featured__img .sbn-ph,.sbn-featured__img img{width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:16px;}
.sbn-featured__title{font-size:20px; line-height:1.3; margin:0 0 8px;}
.sbn-featured__excerpt{font-size:13.5px; line-height:1.55; color:var(--sbn-ink-soft); margin:0 0 14px;}
.sbn-dots{display:flex; justify-content:center; gap:6px; margin-top:14px;}
.sbn-dots i{width:7px; height:7px; border-radius:50%; background:oklch(88% 0.02 60);}
.sbn-dots i.is-active{background:var(--sbn-amber);}

/* ---- YANG BUNBUN CATAT ---- */
.sbn-ybc{background:linear-gradient(150deg, var(--sbn-parch-a), var(--sbn-parch-b));
  border:1px solid var(--sbn-parch-brd); border-radius:22px; padding:16px; margin:0 18px 30px;
  position:relative; overflow:hidden; box-shadow:var(--sbn-shadow-sm);
  display:grid; grid-template-columns:38% 1fr; gap:14px; align-items:center;}
.sbn-ybc__blob{position:absolute; top:-24px; right:-24px; width:100px; height:100px; border-radius:50%;
  background:oklch(82% 0.06 150 / 0.25);}
.sbn-ybc__art{align-self:stretch;}
.sbn-ybc__art .sbn-art{height:100%; min-height:150px; border-radius:16px;}
.sbn-ybc__body{position:relative; min-width:0;}
.sbn-ybc__title{font-size:18px; margin:0 0 10px; color:var(--sbn-ink-strong);}
.sbn-ybc__title .leaf{color:var(--sbn-green);}
.sbn-ybc__quote{font-family:var(--sbn-serif); font-style:italic; font-size:16px; line-height:1.5;
  margin:0 0 10px; color:oklch(30% 0.045 42);}
.sbn-ybc__by{font-size:12.5px; font-weight:700; color:var(--sbn-taupe); margin:0 0 8px;}
.sbn-ybc__more{font-size:12.5px; font-weight:600; color:var(--sbn-amber-ink);}

/* ---- DISCOVERY RAIL ---- */
.sbn-discovery{padding:0 0 30px;}
.sbn-discovery__head{padding:0 18px; margin-bottom:14px; display:flex; align-items:center; justify-content:space-between; gap:12px;}
.sbn-discovery__head h2{font-size:16px; font-weight:700; display:flex; align-items:center; gap:8px; color:var(--sbn-ink-strong);}
.sbn-discovery__head h2 .leaf{color:var(--sbn-green);}
.sbn-rail{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; overflow:visible; padding:2px 18px 8px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-snap-type:none;}
.sbn-rail::-webkit-scrollbar{display:none;}
.sbn-card{flex:none; width:136px; border-radius:18px; padding:16px 14px; text-align:center;
  box-shadow:var(--sbn-shadow-sm); scroll-snap-align:start;}
.sbn-card__art{width:100%; height:100%; object-fit:cover; border-radius:inherit;}
.sbn-card__icon{width:46px; height:46px; border-radius:50%; margin:0 auto 10px;
  display:flex; align-items:center; justify-content:center;}
.sbn-card__icon svg{width:24px; height:24px;}
.sbn-card__name{font-size:13.5px; font-weight:700; color:var(--sbn-ink-strong); margin-bottom:3px; line-height:1.2;}
.sbn-card__sub{font-size:11px; color:var(--sbn-taupe); line-height:1.3;}
.sbn-card--buddhis{background:oklch(95% 0.045 55); border:1px solid oklch(90% 0.05 55);}
.sbn-card--buddhis .sbn-card__icon{background:oklch(91% 0.06 52); color:oklch(56% 0.15 45);}
.sbn-card--sejarah{background:oklch(93% 0.028 55); border:1px solid oklch(88% 0.03 55);}
.sbn-card--sejarah .sbn-card__icon{background:oklch(89% 0.035 50); color:oklch(44% 0.055 42);}
.sbn-card--budaya{background:oklch(93% 0.045 28); border:1px solid oklch(88% 0.055 28);}
.sbn-card--budaya .sbn-card__icon{background:oklch(89% 0.06 25); color:oklch(52% 0.15 27);}
.sbn-card--catatan{background:oklch(93% 0.033 350); border:1px solid oklch(88% 0.04 350);}
.sbn-card--catatan .sbn-card__icon{background:oklch(89% 0.045 348); color:oklch(52% 0.1 345);}
.sbn-card--kehidupan{background:oklch(93% 0.04 150); border:1px solid oklch(88% 0.05 150);}
.sbn-card--kehidupan .sbn-card__icon{background:oklch(89% 0.055 150); color:var(--sbn-green);}

.sbn-discovery .sbn-card--art{
  width:100%; aspect-ratio:423 / 849; padding:0; overflow:hidden;
  border:0; background:transparent; box-shadow:none;
}

@media (max-width:599px){
  .sbn-discovery{padding-bottom:22px;}
  .sbn-discovery__head{padding:0 10px; margin-bottom:10px; gap:8px;}
  .sbn-discovery__head h2{font-size:14px; line-height:1.15; gap:5px;}
  .sbn-discovery__head .sbn-seeall{font-size:11.5px;}
  .sbn-discovery .sbn-rail{
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:6px; padding:0 8px 4px; overflow:visible;
  }
  .sbn-discovery .sbn-card--art{border-radius:10px;}
}

@media (min-width:900px){
  body.home.sbn-redesign .sbn-app{--sbn-max:1120px;}
  body.home.sbn-redesign .sbn-app > section:not(.sbn-discovery){
    max-width:480px; margin-left:auto; margin-right:auto;
  }
  body.home.sbn-redesign .sbn-discovery{
    width:min(100%, 1040px); margin-left:auto; margin-right:auto; padding:0 18px 30px;
  }
  body.home.sbn-redesign .sbn-discovery__head{padding-left:0; padding-right:0;}
  body.home.sbn-redesign .sbn-discovery .sbn-rail{
    display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px;
    overflow:visible; padding:2px 0 8px; scroll-snap-type:none;
  }
  body.home.sbn-redesign .sbn-discovery .sbn-card--art{
    width:100%;
  }
}

/* ---- LIST ROWS ---- */
.sbn-list{padding:0 18px 30px;}
.sbn-list__title{font-size:19px; font-family:var(--sbn-serif); font-weight:600; color:var(--sbn-ink-strong);}
.sbn-list__title .leaf{color:var(--sbn-green);}
.sbn-row{display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--sbn-line); align-items:flex-start;}
.sbn-row:last-child{border-bottom:0;}
.sbn-row__thumb,.sbn-row__thumb img,.sbn-row__thumb .sbn-ph{width:100px; height:100px; border-radius:14px; object-fit:cover; flex:none;}
.sbn-row__thumb{box-shadow:0 4px 12px oklch(30% 0.04 40 / 0.10);}
.sbn-row--sm .sbn-row__thumb,.sbn-row--sm .sbn-row__thumb img,.sbn-row--sm .sbn-row__thumb .sbn-ph{width:92px; height:92px;}
.sbn-row__body{flex:1; min-width:0;}
.sbn-row__h,.sbn-row__meta,.sbn-row__excerpt{display:block;}
.sbn-row__h{font-family:var(--sbn-serif); font-weight:600; font-size:15px; line-height:1.32; margin:0 0 5px; color:var(--sbn-ink-strong);}
.sbn-row__meta{font-size:11.5px; font-weight:600; color:var(--sbn-green);}
.sbn-row__meta .sbn-dot{color:var(--sbn-taupe); margin:0 4px;}
.sbn-row__meta time{color:var(--sbn-taupe); font-weight:500;}
.sbn-row__excerpt{font-size:12px; line-height:1.45; color:var(--sbn-taupe); margin:4px 0 0;}
.sbn-row__save{flex:none; color:var(--sbn-amber-ink); margin-top:2px;}

/* ---- CLOSING SECTION + MINI FOOTER (one cohesive ending over the artwork) ---- */
.sbn-close{position:relative; margin:10px 0 0; background:var(--sbn-choco);
  border-radius:24px 24px 0 0; overflow:hidden; isolation:isolate;}
.sbn-close__art{position:absolute; inset:0; z-index:0;}
.sbn-close__art .sbn-art{width:100%; height:100%; border-radius:0;}
.sbn-close__art .sbn-art img{width:100%; height:100%; object-fit:cover; object-position:90% 58%;}
/* keep the ending dark/legible even before the real night artwork is uploaded */
.sbn-close__art .sbn-art--placeholder{background:var(--sbn-choco);}
.sbn-close__art .sbn-art--placeholder .sbn-art__motif{opacity:.14;}
/* two-way veil: dark on the left (copy) + dark at the base (footer), image breathes on the right */
.sbn-close__veil{position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, oklch(20% 0.045 45 / 0.55) 0%, oklch(19% 0.045 45 / 0.15) 34%, oklch(18% 0.04 45 / 0.55) 74%, oklch(15% 0.035 45 / 0.92) 100%),
    linear-gradient(100deg, oklch(16% 0.038 45 / 0.97) 0%, oklch(17% 0.04 45 / 0.82) 40%, oklch(20% 0.045 48 / 0.28) 70%, transparent 90%);}
.sbn-close__inner{position:relative; z-index:2; display:flex; flex-direction:column;
  min-height:clamp(380px, 104cqw, 470px);
  padding:clamp(30px,8cqw,46px) clamp(18px,5cqw,30px) clamp(16px,4cqw,22px);}
.sbn-close__copy{max-width:74%;}
@media (min-width:600px){.sbn-close__copy{max-width:56%;}}
.sbn-close__chip{display:inline-flex; align-items:center; gap:6px; font-size:clamp(10px,2.6cqw,12px);
  font-weight:600; color:oklch(88% 0.04 70); background:oklch(96% 0.02 70 / 0.14);
  border:1px solid oklch(90% 0.03 70 / 0.28); padding:5px 12px; border-radius:999px; margin-bottom:clamp(10px,3cqw,16px);
  backdrop-filter:blur(2px);}
.sbn-app .sbn-close__title{font-family:var(--sbn-serif); font-weight:600; font-size:clamp(18px,5.4cqw,25px); line-height:1.24;
  color:oklch(98% 0.012 75); margin:0; letter-spacing:-.01em; text-shadow:0 2px 16px oklch(14% 0.03 45 / 0.85), 0 1px 3px oklch(14% 0.03 45 / 0.7);}
.sbn-close__text{font-size:clamp(12px,3.1cqw,14px); line-height:1.55; color:oklch(90% 0.02 65);
  margin:clamp(9px,2.6cqw,14px) 0 0; max-width:22em; text-shadow:0 1px 10px oklch(16% 0.03 45 / 0.55);}
.sbn-close__cta{margin-top:clamp(14px,4cqw,20px); font-size:clamp(12.5px,3.2cqw,14px); padding:clamp(10px,2.8cqw,13px) clamp(16px,4.4cqw,22px);}
.sbn-close__micro{font-size:clamp(11px,2.8cqw,12.5px); color:oklch(84% 0.03 70); margin:clamp(9px,2.6cqw,12px) 0 0;
  text-shadow:0 1px 8px oklch(16% 0.03 45 / 0.5);}
.sbn-close__spacer{flex:1 1 auto; min-height:clamp(40px,16cqw,90px);}
/* mini footer — quiet, ivory, low opacity, part of the same block */
.sbn-foot{border-top:1px solid oklch(92% 0.02 75 / 0.16); padding-top:clamp(14px,3.6cqw,18px);}
.sbn-foot__links{display:flex; flex-wrap:wrap; gap:6px 16px; margin-bottom:9px;}
.sbn-foot__links a{font-size:12px; font-weight:500; color:oklch(94% 0.014 75 / 0.72);}
.sbn-foot__links a:hover{color:oklch(96% 0.014 75 / 0.95);}
.sbn-foot__brand{font-family:var(--sbn-serif); font-weight:600; color:oklch(95% 0.014 75 / 0.9) !important;}
.sbn-foot__copy{font-size:11px; color:oklch(90% 0.014 75 / 0.45); margin:0;}

/* ============================================================================
   ARTICLE PAGE
   ========================================================================== */
.sbn-page-plain{padding-top:2px;}
.sbn-crumb{display:flex; align-items:center; gap:6px; padding:6px 18px 14px; font-size:12px;
  color:var(--sbn-taupe); flex-wrap:wrap;}
.sbn-crumb a{color:var(--sbn-taupe);}
.sbn-crumb .sbn-crumb__cur{color:oklch(38% 0.04 40); font-weight:600;}
/* --- new article header order: pills -> title -> dek -> figure -> sub -> TOC --- */
.sbn-article__head{padding:2px 18px 0;}
.sbn-pills{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px;}
.sbn-pill{display:inline-flex; align-items:center; font-size:11px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; padding:6px 12px; border-radius:999px; line-height:1; white-space:nowrap;}
.sbn-pill--cat{background:oklch(94% 0.045 55); color:oklch(52% 0.13 45); border:1px solid oklch(90% 0.05 55);}
.sbn-pill--tag{background:oklch(95% 0.028 145); color:oklch(46% 0.07 150); border:1px solid oklch(90% 0.035 145);}
.sbn-article__title{font-size:clamp(22px,6.4cqw,29px); line-height:1.22; margin:0; color:var(--sbn-ink-strong);
  letter-spacing:-.015em;}
.sbn-article__dek{font-size:clamp(13.5px,3.8cqw,15.5px); line-height:1.55; color:var(--sbn-ink-soft);
  margin:12px 0 0; max-width:34em;}
.sbn-article__figure{margin:18px 0 0; padding:0 18px;}
.sbn-article__figure .sbn-art,.sbn-article__figure .sbn-ph,.sbn-article__figure img{
  width:100%; height:auto; border-radius:18px; display:block;}
.sbn-article__figure .sbn-ph{aspect-ratio:16/10; object-fit:cover;}
.sbn-article__sub{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 18px 0;}
.sbn-article__sub .m{display:flex; align-items:center; gap:14px; font-size:12px; color:var(--sbn-taupe); flex-wrap:wrap; row-gap:5px;}
.sbn-article__sub .m span{display:inline-flex; align-items:center; gap:5px;}

/* --- Daftar Isi (collapsible; open = simple numbered editorial list) --- */
.sbn-toc{margin:16px 18px 0; background:var(--sbn-surface); border:1px solid var(--sbn-card-brd);
  border-radius:16px; overflow:hidden;}
.sbn-toc__bar{list-style:none; display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; cursor:pointer; font-family:var(--sbn-serif); font-weight:600; font-size:15px;
  color:var(--sbn-ink-strong);}
.sbn-toc__bar::-webkit-details-marker{display:none;}
.sbn-toc__toggle{position:relative; width:18px; height:18px; flex:none;}
.sbn-toc__toggle span{position:absolute; inset:0; margin:auto; background:var(--sbn-amber-ink); border-radius:2px;}
.sbn-toc__toggle span:first-child{width:14px; height:2px;}
.sbn-toc__toggle span:last-child{width:2px; height:14px; transition:opacity .18s;}
.sbn-toc[open] .sbn-toc__toggle span:last-child{opacity:0;}
.sbn-toc__nav{padding:2px 16px 12px;}
.sbn-toc__nav ul{list-style:none; margin:0; padding:0;}
.sbn-toc__it{display:flex; align-items:flex-start; gap:11px; padding:9px 0; border-top:1px solid var(--sbn-line);}
.sbn-toc__it:first-child{border-top:0;}
.sbn-toc__num{flex:none; width:22px; height:22px; border-radius:6px; background:var(--sbn-choco); color:#fff;
  font:700 11px/1 var(--sbn-sans); display:flex; align-items:center; justify-content:center; margin-top:1px;}
.sbn-toc__dash{flex:none; width:22px; height:22px; display:flex; align-items:center; justify-content:center;}
.sbn-toc__dash::before{content:""; width:8px; height:2px; border-radius:2px; background:oklch(80% 0.03 60);}
.sbn-toc__it a{font-size:13.5px; line-height:1.42; color:var(--sbn-ink-strong);}
.sbn-toc__lv3{padding-left:14px;}
.sbn-toc__lv3 a{font-size:13px; color:var(--sbn-ink-soft);}

.sbn-article__body{padding:22px 18px 0;}
.sbn-article__body :target{scroll-margin-top:16px;}
.sbn-article__body > *{margin:0 0 18px;}
.sbn-article__body p{font-size:14.5px; line-height:1.72; color:oklch(38% 0.035 40);}
.sbn-article__body > p:first-of-type{font-size:15px; color:oklch(34% 0.035 40);}
.sbn-article__body h2{font-family:var(--sbn-serif); font-weight:600; font-size:19px; color:var(--sbn-ink-strong);
  margin-top:28px; line-height:1.3;}
.sbn-article__body h3{font-family:var(--sbn-serif); font-size:16.5px; color:var(--sbn-ink-strong); margin-top:22px;}
.sbn-article__body a{color:var(--sbn-amber-ink); text-decoration:underline; text-underline-offset:2px;}
.sbn-article__body ul,.sbn-article__body ol{padding-left:1.2em; font-size:14.5px; line-height:1.7; color:oklch(38% 0.035 40);}
.sbn-article__body img{border-radius:16px;}
.sbn-article__body figure{margin:0 0 22px;}
.sbn-article__body figure img{width:100%; aspect-ratio:16/10; object-fit:cover;}
.sbn-article__body figcaption{display:flex; align-items:flex-start; gap:8px; font-size:12px; line-height:1.5;
  color:var(--sbn-taupe); margin-top:10px;}
.sbn-article__body figcaption::before{content:"\1F338"; flex:none; width:24px; height:24px; border-radius:50%;
  background:oklch(94% 0.035 55); display:flex; align-items:center; justify-content:center; font-size:12px;}

/* Global warm blockquote — all posts, old and new. */
.sbn-app blockquote,.sbn-article__body blockquote,blockquote.sbn-quote{
  background:linear-gradient(150deg, var(--sbn-parch-a), var(--sbn-parch-b));
  border:1px solid var(--sbn-parch-brd); border-radius:18px; padding:26px 20px 18px;
  position:relative; overflow:hidden; margin:0 0 24px; color:oklch(30% 0.045 40);
}
.sbn-app blockquote::before,.sbn-article__body blockquote::before,blockquote.sbn-quote::before{
  content:"\201C"; font-family:var(--sbn-serif); font-size:40px; line-height:1;
  color:oklch(70% 0.10 45); position:absolute; top:6px; left:16px;
}
.sbn-app blockquote p,.sbn-article__body blockquote p,blockquote.sbn-quote p{
  font-family:var(--sbn-serif); font-style:italic; font-size:16.5px; line-height:1.55; margin:0 0 8px; color:oklch(30% 0.045 40);
}
.sbn-app blockquote cite,.sbn-article__body blockquote cite{font-size:12.5px; font-weight:600; font-style:normal; color:oklch(46% 0.03 40);}

.sbn-rule{border:0; border-top:1px solid var(--sbn-line); margin:0 18px 22px;}
.sbn-leafrule{display:flex; align-items:center; gap:12px; padding:0 18px 26px;}
.sbn-leafrule::before,.sbn-leafrule::after{content:""; flex:1; border-top:1px solid oklch(88% 0.02 55);}
.sbn-leafrule span{color:var(--sbn-green); font-size:13px;}

/* --- Referensi & Bacaan Lanjutan — editorial apparatus, not body copy --- */
.sbn-i{width:16px; height:16px; flex:none;}
.sbn-refs,.sbn-refs-inline{margin:10px 18px 26px; background:var(--sbn-parch-a);
  border:1px solid var(--sbn-parch-brd); border-radius:16px; padding:18px 18px 14px;}
.sbn-article__body > .sbn-refs-inline{margin:24px 0 6px;}   /* lives inside body's 18px padding */
.sbn-refs__h,.sbn-refs-inline__h{font-family:var(--sbn-serif); font-weight:600; font-size:15.5px;
  color:var(--sbn-ink-strong); margin:0 0 14px; padding-bottom:12px; display:flex; align-items:center; gap:8px;
  border-bottom:1px solid var(--sbn-parch-brd);}
.sbn-refs__h .sbn-i,.sbn-refs-inline__h .sbn-i{color:var(--sbn-taupe);}
.sbn-refs__body,.sbn-refs-inline__wrap{font-size:12px; line-height:1.5; color:var(--sbn-ink-soft);}
.sbn-refs-inline__wrap[style]{background:transparent !important; border:0 !important; padding:0 !important;
  border-radius:0 !important; line-height:1.5 !important;}
.sbn-refs__body ul{list-style:none; margin:0; padding:0;}
.sbn-refs__body li{font-size:12px; line-height:1.5; margin:0 0 12px;}
.sbn-refs__body li:last-child{margin-bottom:0;}
.sbn-refs-inline p{margin:0 0 15px; font-size:12px; line-height:1.5;}
.sbn-refs-inline p:last-child{margin-bottom:0;}
.sbn-refs-inline strong,.sbn-refs__body strong{font-weight:600; color:oklch(34% 0.04 42); font-size:12.5px;}
.sbn-refs-inline a,.sbn-refs__body a{color:var(--sbn-amber-ink); text-decoration:underline; text-underline-offset:2px;}
.sbn-refs-inline ol,.sbn-refs-inline ul{margin:0; padding-left:1.3em; font-size:12px; line-height:1.55; color:var(--sbn-ink-soft);}
.sbn-refs-inline li{margin:0 0 10px;}

/* --- Legacy "Referensi & Bacaan Lanjutan" DE-NESTING (all old articles) ---
   Some pre-redesign posts wrapped the References <h2> in an author Gutenberg
   group (.wp-block-group.has-background). sbn_toc_process() lifts the section
   into <aside class="sbn-refs-inline">, but that outer author group stays as an
   ancestor of the aside -> a box-in-a-box (outer pale panel + inner parchment
   card, big vertical gaps, mascot far below the text).
   .sbn-refs-inline is a redesign-only class (never written into post_content),
   so a .has-background group that has it as a direct grandchild via
   .wp-block-group__inner-container IS, unambiguously, the References wrapper —
   always safe to flatten. Verified against every legacy post that renders this
   shape (17 posts, audit 2026-09-03) and confirmed to match nothing else
   (quotes, Catatan Bunbun cards, featured images, ordinary callout groups).
   :has() is supported by all current browsers; where it is not, the rule is
   simply ignored and the old double-box shows unchanged (no breakage). */
.sbn-article__body .wp-block-group.has-background:has(> .wp-block-group__inner-container > .sbn-refs-inline){
  background:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
  padding:0 !important; margin:26px 0 0 !important;
  font-size:inherit !important; line-height:inherit !important; color:inherit !important;
}
.sbn-article__body .wp-block-group.has-background:has(> .wp-block-group__inner-container > .sbn-refs-inline)
  > .wp-block-group__inner-container{ padding:0 !important; margin:0 !important; }
/* aside becomes the ONLY card — drop the horizontal inset it would inherit from
   the generic .sbn-refs-inline rule now that it is nested, not a body child */
.wp-block-group__inner-container > .sbn-refs-inline{ margin:0 !important; }

/* Pattern A: the author placed a 2-column "Jejak bacaan" intro + a small
   Bunbun/Aces cutout inside the card. Unstack on mobile, shrink the cutout to
   ~90-110px, keep it right under the intro. (No-op on Pattern B / no-mascot
   posts — nothing to match — and never invents an intro or an image.) */
.sbn-refs-inline__wrap .wp-block-columns{ display:block !important; gap:10px !important; margin:0 !important; }
.sbn-refs-inline__wrap .wp-block-column{ display:block !important; flex-basis:auto !important; width:auto !important; margin:0 !important; }
.sbn-refs-inline__wrap .wp-block-column:first-child{ margin-bottom:4px !important; }
.sbn-refs-inline__wrap .wp-block-column:last-child{ max-width:120px !important; margin:2px auto 0 !important; }
.sbn-refs-inline__wrap > .wp-block-group__inner-container{ padding:0 !important; }
.sbn-refs-inline__wrap p{ font-size:13px !important; line-height:1.55 !important; margin:0 0 6px !important; }
.sbn-refs-inline__wrap p strong{ font-size:13px !important; }
.sbn-refs-inline__wrap figure{ margin:0 !important; }
.sbn-refs-inline__wrap figure img{ width:96px !important; height:auto !important; display:block !important; margin:0 auto !important; }
.sbn-refs-inline__wrap + ul, .sbn-refs-inline__wrap + ol{ margin-top:6px !important; }

/* --- Share block — WhatsApp / Facebook / Salin tautan / Simpan --- */
.sbn-share{margin:22px 18px 28px; background:var(--sbn-surface); border:1px solid var(--sbn-card-brd);
  border-radius:18px; padding:20px 16px 16px; text-align:center;}
.sbn-share__h{font-family:var(--sbn-serif); font-weight:600; font-size:17px; color:var(--sbn-ink-strong); margin:0;}
.sbn-share__copy{font-family:var(--sbn-serif); font-size:13px; line-height:1.45; color:var(--sbn-ink-soft);
  margin:6px 0 16px;}
.sbn-share__copy .leaf{color:var(--sbn-green);}
.sbn-share__grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:6px;}
.sbn-share__act{display:flex; flex-direction:column; align-items:center; gap:7px; padding:6px 2px;
  background:none; border:0; cursor:pointer; color:var(--sbn-ink-soft); min-width:0;}
.sbn-share__ic{width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff;}
.sbn-share__ic svg{width:20px; height:20px;}
.sbn-share__act--wa .sbn-share__ic{background:oklch(62% 0.13 150);}
.sbn-share__act--fb .sbn-share__ic{background:oklch(50% 0.11 258);}
.sbn-share__act--copy .sbn-share__ic{background:oklch(93% 0.02 60); color:var(--sbn-ink-strong);}
.sbn-share__act--copy.is-copied .sbn-share__ic{background:var(--sbn-green); color:#fff;}
.sbn-share__act.sbn-bookmark .sbn-share__ic{background:oklch(96% 0.03 55); color:var(--sbn-amber-ink);
  border:1px solid oklch(90% 0.04 55);}
.sbn-share__act.sbn-bookmark[aria-pressed="true"] .sbn-share__ic{background:var(--sbn-amber); color:#fff; border-color:transparent;}
.sbn-share__act.sbn-bookmark[aria-pressed="true"] .sbn-share__ic svg{fill:#fff;}
.sbn-share__lb{font-size:11px; font-weight:600; line-height:1.2; color:var(--sbn-ink);}
.sbn-share__act--copy.is-copied .sbn-share__lb{color:var(--sbn-green);}
@media (max-width:360px){ .sbn-share__lb{font-size:10px;} .sbn-share__ic{width:40px; height:40px;} }

/* Mood picker (snippet #5) — restyled to fit */
.sbn-app .sb-feelings,.sbn-article__body .sb-feelings{
  margin:24px 18px 30px !important; background:linear-gradient(150deg, oklch(95% 0.03 62), oklch(93% 0.038 48)) !important;
  border:1px solid var(--sbn-parch-brd) !important; border-radius:22px !important; padding:18px !important;
  box-shadow:var(--sbn-shadow-sm) !important; position:relative; overflow:hidden;}
.sb-feelings h2{font-family:var(--sbn-serif) !important; font-size:16px !important; color:var(--sbn-ink-strong) !important;}
.sb-feelings p{font-size:12px !important; color:var(--sbn-ink-soft) !important;}
.sb-feelings-grid{display:grid !important; grid-template-columns:1fr 1fr !important; gap:8px !important; margin-top:12px !important;}
.sb-feeling-card{display:flex !important; align-items:center !important; gap:8px !important; padding:10px 12px !important;
  background:#fff !important; border:1px solid oklch(90% 0.03 55) !important; border-radius:12px !important;
  font-size:12px !important; font-weight:700 !important; color:var(--sbn-ink) !important; text-decoration:none !important;}
.sb-feelings-mascot{max-width:120px !important;}

/* ============================================================================
   CATEGORY ARCHIVE — one master layout, per-category tint only
   ========================================================================== */
.sbn-archive{--sbn-arc-tint:oklch(96% 0.03 60); --sbn-arc-accent:var(--sbn-amber-ink); --sbn-arc-deco:oklch(70% 0.09 45);}
.sbn-tone-buddhis{--sbn-arc-tint:oklch(96% 0.04 62); --sbn-arc-accent:oklch(56% 0.15 45);  --sbn-arc-deco:oklch(66% 0.11 60);}
.sbn-tone-sejarah{--sbn-arc-tint:oklch(95% 0.033 55); --sbn-arc-accent:oklch(48% 0.09 42);  --sbn-arc-deco:oklch(58% 0.08 40);}
.sbn-tone-budaya {--sbn-arc-tint:oklch(95% 0.04 28);  --sbn-arc-accent:oklch(52% 0.13 27);  --sbn-arc-deco:oklch(62% 0.11 25);}
.sbn-tone-catatan{--sbn-arc-tint:oklch(95% 0.035 150); --sbn-arc-accent:oklch(46% 0.09 150); --sbn-arc-deco:var(--sbn-green);}

.sbn-archive .sbn-header{position:static; background:var(--sbn-bg);}
.sbn-archive__intro{position:relative; overflow:hidden; padding:22px 18px 22px;
  background:linear-gradient(170deg, var(--sbn-arc-tint), oklch(98% 0.012 75) 78%);
  border-bottom:1px solid var(--sbn-line);}
.sbn-archive__deco{position:absolute; top:-6px; right:-6px; width:150px; height:110px; color:var(--sbn-arc-deco);
  pointer-events:none;}
.sbn-archive__deco svg{width:100%; height:100%;}
.sbn-archive__label{position:relative; display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--sbn-arc-accent); background:oklch(99% 0.01 75 / 0.7); border:1px solid oklch(90% 0.03 60 / 0.7);
  padding:5px 12px; border-radius:999px;}
.sbn-archive__label .leaf{color:var(--sbn-arc-accent);}
.sbn-archive__title{position:relative; font-family:var(--sbn-serif); font-weight:600;
  font-size:clamp(30px,9cqw,42px); line-height:1.08; letter-spacing:-.02em; margin:12px 0 0;
  color:var(--sbn-ink-strong);}
.sbn-archive__desc{position:relative; font-size:clamp(13.5px,3.8cqw,15px); line-height:1.55;
  color:var(--sbn-ink-soft); margin:10px 0 0; max-width:30em;}
.sbn-archive__count{position:relative; display:flex; align-items:center; gap:6px; margin:16px 0 0;
  font-size:12.5px; font-weight:600; color:var(--sbn-taupe);}

.sbn-archive__featured{padding:20px 18px 6px;}
.sbn-featured__card--row{display:flex; gap:14px; align-items:stretch; padding:14px;}
.sbn-featured__card--row .sbn-featured__img{display:block; flex:none; width:118px; align-self:stretch; margin:0;
  border-radius:14px; overflow:hidden; background:oklch(93% 0.03 60);}
.sbn-featured__card--row .sbn-featured__img .sbn-art,
.sbn-featured__card--row .sbn-featured__img img{display:block; width:100%; height:100%; min-height:118px;
  aspect-ratio:auto; object-fit:cover; border-radius:14px;}
.sbn-featured__card--row .sbn-featured__img .sbn-ph{width:100%; height:100%; min-height:118px; border-radius:14px;}
.sbn-featured__meta{display:flex; flex-direction:column; min-width:0; flex:1;}
.sbn-featured__cat{font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--sbn-arc-accent); margin-bottom:5px;}
.sbn-featured__card--row .sbn-featured__title{font-family:var(--sbn-serif); font-weight:600; font-size:16px;
  line-height:1.28; color:var(--sbn-ink-strong); margin:0 0 5px;}
.sbn-featured__card--row .sbn-featured__excerpt{font-size:12px; line-height:1.45; color:var(--sbn-taupe);
  margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.sbn-featured__foot{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; padding-top:8px;
  font-size:11.5px; font-weight:600; color:var(--sbn-taupe);}
.sbn-featured__arrow{color:var(--sbn-arc-accent); font-size:15px;}

.sbn-filter{display:flex; gap:8px; overflow-x:auto; padding:14px 18px 4px; scrollbar-width:none;
  -webkit-overflow-scrolling:touch;}
.sbn-filter::-webkit-scrollbar{display:none;}
.sbn-filter__pill{flex:none; font-size:12.5px; font-weight:600; padding:8px 15px; border-radius:999px;
  border:1px solid oklch(88% 0.03 60); background:oklch(99% 0.008 75); color:var(--sbn-ink-soft); white-space:nowrap;}
.sbn-filter__pill.is-active{background:var(--sbn-arc-tint); border-color:var(--sbn-arc-accent);
  color:var(--sbn-arc-accent);}

.sbn-archive__list{padding:14px 18px 4px;}
.sbn-archive__list .sbn-row__h{font-size:16.5px; line-height:1.3;}
.sbn-archive__list .sbn-row__meta{color:var(--sbn-arc-accent);}
.sbn-archive__list .sbn-row__save{color:var(--sbn-arc-accent); align-self:center; margin-top:0;}
.sbn-archive__empty{padding:30px 4px; text-align:center; color:var(--sbn-taupe); font-size:13.5px;}

/* Pagination — server-side, compact on mobile */
.sbn-pager{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:18px 18px 26px; margin-top:6px;}
.sbn-pager__btn{font-size:12.5px; font-weight:600; color:var(--sbn-arc-accent); white-space:nowrap;
  display:inline-flex; align-items:center; gap:5px;}
.sbn-pager__btn.is-off{color:oklch(80% 0.02 60); pointer-events:none;}
.sbn-pager__at{font-size:12px; color:var(--sbn-taupe); text-align:center; flex:1;}

/* ============================================================================
   GLOBAL FOOTER — "Opsi 1: Hangat & Berkarakter" (article + category archive)
   ========================================================================== */
.sbn-gf{position:relative; margin-top:14px; padding:24px 18px 0; overflow:hidden;
  background:linear-gradient(180deg, oklch(98% 0.014 78), oklch(96% 0.022 66) 60%, oklch(95% 0.03 58));
  border-top:1px solid var(--sbn-line);}
.sbn-gf__brand{display:flex; gap:14px; align-items:center;}
.sbn-gf__mark{width:46px; height:46px; border-radius:50%; object-fit:cover; flex:none;
  box-shadow:0 3px 10px oklch(30% 0.04 40 / 0.16);}
.sbn-gf__mark--empty{display:flex; align-items:center; justify-content:center; background:oklch(96% 0.02 70);
  color:var(--sbn-amber-ink); font-family:var(--sbn-serif); font-weight:700; font-size:20px;}
.sbn-gf__name{font-family:var(--sbn-serif); font-weight:600; font-size:22px; color:var(--sbn-ink-strong); line-height:1;}
.sbn-gf__name span{color:var(--sbn-amber);}
.sbn-gf__tag{font-size:13px; line-height:1.5; color:var(--sbn-ink-soft); margin:6px 0 0;}

.sbn-gf__primary{display:flex; gap:2px; overflow-x:auto; margin:18px -18px 0; padding:0 18px 4px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;}
.sbn-gf__primary::-webkit-scrollbar{display:none;}
.sbn-gf__nav{flex:none; display:flex; flex-direction:column; align-items:center; gap:7px; width:88px; padding:8px 4px;
  text-align:center; color:var(--sbn-ink-soft);}
.sbn-gf__navic{width:30px; height:30px; display:flex; align-items:center; justify-content:center; color:var(--sbn-taupe);}
.sbn-gf__navic svg{width:24px; height:24px;}
.sbn-gf__nav.is-root{color:var(--sbn-amber-ink);}
.sbn-gf__nav.is-root .sbn-gf__navic{color:var(--sbn-amber);}
.sbn-gf__navlb{font-size:11px; font-weight:600; line-height:1.25;}

.sbn-gf__rule{border:0; border-top:1px solid oklch(90% 0.025 60); margin:6px 0 14px;}
.sbn-gf__secondary{display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center;}
.sbn-gf__slink{font-size:12.5px; font-weight:600; color:var(--sbn-ink-strong); display:inline-flex; align-items:center; gap:4px;}
.sbn-gf__slink.is-disabled{color:oklch(72% 0.02 60); cursor:default;}
.sbn-gf__ext{display:inline-flex; color:var(--sbn-taupe);}
.sbn-gf__ext svg{width:13px; height:13px;}

.sbn-gf__social{display:flex; gap:11px; margin:16px 0 22px;}
.sbn-gf__soc{width:38px; height:38px; border-radius:50%; border:1px solid oklch(89% 0.025 60);
  background:oklch(99% 0.008 78); display:flex; align-items:center; justify-content:center; color:var(--sbn-ink-strong);}
.sbn-gf__soc svg{width:18px; height:18px;}
.sbn-gf__soc.is-disabled{color:oklch(78% 0.02 60); border-style:dashed; cursor:default;}

.sbn-gf__wave{position:relative; margin:0 -18px; color:oklch(93% 0.045 58); line-height:0;}
.sbn-gf__wave svg{width:100%; height:38px; display:block;}
.sbn-gf__deco{position:absolute; right:6px; bottom:96px; width:92px; height:82px; color:var(--sbn-green);
  pointer-events:none; opacity:1;}
.sbn-gf__deco svg{width:100%; height:100%;}

.sbn-gf__end{position:relative; background:oklch(93% 0.045 58); margin:0 -18px; padding:2px 18px 22px; color:var(--sbn-ink-soft);}
.sbn-gf__copy{font-size:12.5px; font-weight:600; color:var(--sbn-ink-strong); margin:0; display:flex; align-items:center; gap:6px;}
.sbn-gf__paw{color:var(--sbn-amber-ink);}
.sbn-gf__line{font-family:var(--sbn-serif); font-style:italic; font-size:13.5px; line-height:1.5; color:oklch(38% 0.05 55); margin:8px 0 0; max-width:26em;}
.sbn-gf__by{font-family:var(--sbn-serif); font-style:italic; font-size:12.5px; color:var(--sbn-taupe); margin:4px 0 0;}

/* wider layout only when the app column itself is wide (desktop — later phase).
   container query so a wide viewport never re-flows the 480px mobile column. */
@container sbnapp (min-width:560px){
  .sbn-gf{padding-left:26px; padding-right:26px;}
  .sbn-gf__primary{flex-wrap:wrap; justify-content:flex-start; gap:8px 14px; overflow:visible; margin:18px 0 0; padding:0;}
  .sbn-gf__nav{width:auto; min-width:0; flex-direction:row; gap:8px; text-align:left; align-items:center; padding:6px 0;}
  .sbn-gf__navlb{font-size:12.5px;}
  .sbn-gf__wave,.sbn-gf__end{margin-left:-26px; margin-right:-26px;}
  .sbn-gf__deco{width:128px; height:110px; bottom:108px;}
}

/* ============================================================================
   ARTICLE BRIDGE — Tiga Keranjang + Segenggam Daun (one block, two choices)
   ========================================================================== */
.sbn-bridge{margin:26px 18px 0; text-align:center;}
.sbn-bridge__h{font-family:var(--sbn-serif); font-weight:600; font-size:clamp(19px,5.4cqw,24px);
  line-height:1.22; color:var(--sbn-ink-strong); margin:0;}
.sbn-bridge__h .leaf{color:var(--sbn-amber-ink);}
.sbn-bridge__lede{font-size:clamp(12.5px,3.3cqw,14px); line-height:1.5; color:var(--sbn-ink-soft);
  margin:9px auto 16px; max-width:26em;}
.sbn-bridge__box{display:grid; grid-template-columns:1fr; text-align:left;
  border:1px solid var(--sbn-card-brd); border-radius:20px; overflow:hidden; box-shadow:var(--sbn-shadow-sm);}
.sbn-bridge__half{display:flex; gap:14px; padding:18px 16px; align-items:flex-start; min-width:0;}
.sbn-bridge__half + .sbn-bridge__half{border-top:1px solid oklch(90% 0.03 60 / 0.55);}
.sbn-bridge__half--tk{background:linear-gradient(155deg, oklch(96% 0.038 60), oklch(98% 0.018 72));}
.sbn-bridge__half--sd{background:linear-gradient(155deg, oklch(96% 0.03 150), oklch(98% 0.014 90));}
.sbn-bridge__icon{flex:none; width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center;}
.sbn-bridge__icon svg{width:30px; height:30px;}
.sbn-bridge__half--tk .sbn-bridge__icon{background:oklch(92% 0.055 54); color:oklch(52% 0.14 45);}
.sbn-bridge__half--sd .sbn-bridge__icon{background:oklch(91% 0.05 150); color:var(--sbn-green);}
.sbn-bridge__body{min-width:0; display:flex; flex-direction:column;}
.sbn-bridge__title{font-family:var(--sbn-serif); font-weight:600; font-size:17px; line-height:1.2; color:var(--sbn-ink-strong);}
.sbn-bridge__accent{font-size:12px; font-weight:700; margin-top:3px;}
.sbn-bridge__desc{font-size:12.5px; line-height:1.5; color:var(--sbn-ink-soft); margin-top:6px;}
.sbn-bridge__cta{display:inline-flex; align-items:center; gap:6px; align-self:flex-start; margin-top:13px;
  font-size:12.5px; font-weight:600; padding:8px 14px; border-radius:999px; border:1px solid currentColor;
  white-space:nowrap;}
.sbn-bridge__half--tk .sbn-bridge__accent,.sbn-bridge__half--tk .sbn-bridge__cta{color:var(--sbn-amber-ink);}
.sbn-bridge__half--sd .sbn-bridge__accent,.sbn-bridge__half--sd .sbn-bridge__cta{color:oklch(44% 0.09 150);}
/* two-up only when the app column itself is wide enough (desktop, later) —
   container query so a wide viewport never squeezes a 480px column into 2. */
@container sbnapp (min-width:600px){
  .sbn-bridge__box{grid-template-columns:1fr 1fr;}
  .sbn-bridge__half + .sbn-bridge__half{border-top:0; border-left:1px solid oklch(90% 0.03 60 / 0.55);}
  .sbn-bridge__half{padding:22px 20px;}
}

.sbn-more{margin-top:26px;}

/* ---- Shanti Devi PROTOTYPE only (post 4769) ----
   The author's in-body "Yang Bunbun Catat" card carries a peeking Bunbun+Aces
   cutout from sibunbun-catatan-card.php (.sb-bunbun-note__mascot, ~230px). Trim
   it to ~66% and close the empty band above the card. Scoped to this one post —
   not yet rolled out to other articles. Nothing else in that section changes. */
body.postid-4769 .sb-bunbun-note{ margin-top:74px !important; }
body.postid-4769 .sb-bunbun-note__mascot{ width:152px !important; max-width:44% !important; }
body.postid-4769 .sb-bunbun-note__inner{ padding-top:54px !important; }

/* Staging marker */
.sbn-staging-flag{position:fixed; left:0; bottom:0; z-index:99999; background:#b3261e; color:#fff;
  font:600 11px/1.6 system-ui; padding:2px 10px; border-top-right-radius:6px;}

/* ============================================================================
   SEARCH PAGE
   ========================================================================== */
.sbn-search-page .sbn-brand__name::after{content:" 🐾"; font-family:var(--sbn-sans); font-size:14px;}
.sbn-search{padding-bottom:8px;}
.sbn-search-hero{position:relative; min-height:210px; margin:4px 0 0; padding:34px 18px 18px;
  overflow:hidden; background:linear-gradient(150deg, oklch(98% 0.014 78), oklch(95% 0.025 65));}
.sbn-search-hero::before{content:""; position:absolute; top:-42px; right:-34px; width:190px; height:190px;
  border-radius:50%; background:oklch(92% 0.035 60 / .48);}
.sbn-search-hero__copy{position:relative; z-index:2; max-width:58%; min-height:145px;
  display:flex; flex-direction:column; justify-content:center;}
.sbn-search-hero__eyebrow{font-family:var(--sbn-serif); font-weight:600; font-size:18px;
  line-height:1.15; color:var(--sbn-ink-strong); margin:0 0 4px;}
.sbn-search-hero__title{font-size:clamp(28px,8.2cqw,40px); line-height:1.08; margin:0;
  color:var(--sbn-ink-strong); overflow-wrap:anywhere;}
.sbn-search-hero__count,.sbn-search-hero__emptycopy{font-size:13px; font-weight:600; color:var(--sbn-ink-soft);
  margin:16px 0 0;}
.sbn-search-hero__count span{color:var(--sbn-amber);}
.sbn-search-hero__art{position:absolute; right:-46px; bottom:-2px; z-index:1; width:min(58%, 260px);
  height:auto; object-fit:contain; object-position:right bottom; pointer-events:none;}

.sbn-search-panel{margin:-10px 18px 0; position:relative; z-index:3; padding:12px;
  background:oklch(99% 0.008 75 / .92); border:1px solid var(--sbn-card-brd); border-radius:18px;
  box-shadow:var(--sbn-shadow-sm); backdrop-filter:blur(4px);}
.sbn-search-form{display:flex; align-items:center; gap:9px; min-height:48px; padding:0 12px;
  background:#fff; border:1px solid oklch(88% 0.025 60); border-radius:14px;}
.sbn-search-form__icon{display:flex; color:var(--sbn-ink-strong); flex:none;}
.sbn-search-form__icon svg{width:19px; height:19px;}
.sbn-search-form__input{appearance:none; flex:1; min-width:0; border:0; outline:0; background:transparent;
  color:var(--sbn-ink-strong); font:600 13.5px/1.2 var(--sbn-sans);}
.sbn-search-form__input::placeholder{color:oklch(62% 0.025 60);}
.sbn-search-form__clear{display:flex; align-items:center; justify-content:center; width:30px; height:30px;
  border-radius:50%; color:var(--sbn-amber-ink); flex:none;}
.sbn-search-form__clear svg{width:17px; height:17px;}
.sbn-search-filter{display:flex; gap:8px; overflow-x:auto; padding:11px 0 0; scrollbar-width:none;
  -webkit-overflow-scrolling:touch;}
.sbn-search-filter::-webkit-scrollbar{display:none;}
.sbn-search-filter__pill{flex:none; display:inline-flex; align-items:center; min-height:34px; padding:8px 13px;
  border-radius:999px; border:1px solid oklch(88% 0.025 60); background:oklch(99% 0.008 75);
  color:var(--sbn-ink-soft); font-size:12px; font-weight:700; white-space:nowrap;}
.sbn-search-filter__pill.is-active{background:var(--sbn-green); border-color:var(--sbn-green); color:#fff;}

.sbn-search-results{padding:16px 18px 6px;}
.sbn-search-row{display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--sbn-line);}
.sbn-search-row:first-child{padding-top:8px;}
.sbn-search-row:last-child{border-bottom:0;}
.sbn-search-row__thumb,.sbn-search-row__thumb img,.sbn-search-row__thumb .sbn-ph{width:82px; height:72px;
  border-radius:12px; object-fit:cover; flex:none;}
.sbn-search-row__body{display:flex; flex-direction:column; min-width:0; flex:1;}
.sbn-search-row__title{font-family:var(--sbn-serif); font-weight:600; font-size:15.5px; line-height:1.28;
  color:var(--sbn-ink-strong); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.sbn-search-row__meta{font-size:11.5px; font-weight:700; color:var(--sbn-green); margin-top:5px;}
.sbn-search-row__meta time{font-weight:600; color:var(--sbn-taupe);}
.sbn-search-empty,.sbn-search-start{text-align:center; margin:6px 0 8px; padding:28px 18px;
  background:var(--sbn-surface); border:1px solid var(--sbn-card-brd); border-radius:18px;}
.sbn-search-empty h2{font-size:20px; line-height:1.25;}
.sbn-search-empty p,.sbn-search-start{font-size:13px; line-height:1.55; color:var(--sbn-ink-soft);}
.sbn-search-empty p{margin:8px 0 0;}
.sbn-search-empty__cta{display:inline-flex; align-items:center; gap:6px; margin-top:16px; padding:10px 16px;
  border-radius:999px; background:var(--sbn-green); color:#fff; font-weight:700; font-size:13px;}
.sbn-search-pager{padding-top:8px;}

.sbn-search-explore{padding:18px 18px 28px;}
.sbn-search-explore h2{font-size:20px; line-height:1.2; margin-bottom:12px;}
.sbn-search-explore__grid{display:grid; grid-template-columns:1fr 1fr; gap:9px;}
.sbn-search-explore__card{display:flex; align-items:center; gap:10px; min-height:64px; padding:12px;
  border-radius:16px; border:1px solid var(--sbn-card-brd); background:var(--sbn-surface);
  box-shadow:0 4px 12px oklch(35% 0.05 40 / .05);}
.sbn-search-explore__icon{width:34px; height:34px; border-radius:11px; display:flex; align-items:center;
  justify-content:center; color:var(--sbn-arc-accent); background:var(--sbn-arc-tint); flex:none;}
.sbn-search-explore__icon svg{width:20px; height:20px;}
.sbn-search-explore__name{font-size:12.5px; font-weight:800; line-height:1.2; color:var(--sbn-ink-strong);}

@media (min-width:700px){
  body.search.sbn-redesign .sbn-app{--sbn-max:1040px;}
  .sbn-search-hero{min-height:270px; padding:48px 44px 28px; border-bottom:1px solid var(--sbn-line);}
  .sbn-search-hero__copy{max-width:48%; min-height:190px;}
  .sbn-search-hero__title{font-size:48px;}
  .sbn-search-hero__art{right:30px; width:min(45%, 520px);}
  .sbn-search-panel{max-width:720px; margin:-30px auto 0; padding:14px;}
  .sbn-search-results{max-width:720px; margin:0 auto; padding-top:20px;}
  .sbn-search-row__thumb,.sbn-search-row__thumb img,.sbn-search-row__thumb .sbn-ph{width:124px; height:86px;}
  .sbn-search-row__title{font-size:17px; -webkit-line-clamp:2;}
  .sbn-search-pager{max-width:720px; margin-left:auto; margin-right:auto;}
  .sbn-search-explore{max-width:720px; margin:0 auto;}
  .sbn-search-explore__grid{grid-template-columns:repeat(4, minmax(0, 1fr));}
  .sbn-search-explore__card{flex-direction:column; align-items:flex-start; min-height:108px;}
}


/* === 2026-09-03 ARTICLE AUDIT: normalize legacy Bunbun note cards globally === */
body.sbn-redesign.single-post .sb-bunbun-note{
  margin:74px 0 36px;
}
body.sbn-redesign.single-post .sb-bunbun-note__mascot{
  width:152px;
  max-width:44%;
  transform:translate(-50%,-52%);
}
body.sbn-redesign.single-post .sb-bunbun-note__inner{
  padding-top:54px;
}
@media(max-width:767px){
  body.sbn-redesign.single-post .sb-bunbun-note{
    margin:68px 0 30px;
  }
  body.sbn-redesign.single-post .sb-bunbun-note__mascot{
    width:138px;
    max-width:42%;
  }
  body.sbn-redesign.single-post .sb-bunbun-note__inner{
    padding:50px 18px 21px;
  }
}

/* Article batch-10 polish — 2026-09-03 */
/* Legacy/native TOCs that survive inside post_content are hidden; canonical .sbn-toc above body remains. */
.sbn-article__body .ez-toc-container,
.sbn-article__body #ez-toc-container,
.sbn-article__body .lwptoc,
.sbn-article__body .toc_container,
.sbn-article__body .rank-math-list-of-contents,
.sbn-article__body .wp-block-rank-math-toc-block,
.sbn-article__body [class*="table-of-contents"],
.sbn-article__body [class*="table_of_contents"] { display:none !important; }

/* References: the redesign owns the one outer card; neutralize old inline inner boxes. */
.sbn-refs-inline .sbn-refs-inline__wrap {
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;
  margin:0 !important;
  box-shadow:none !important;
}

/* Yang Bunbun Catat: make the key sentence feel editorial, not like another paragraph. */
.sbn-article__body .sb-bunbun-note p strong,
.sbn-article__body .sb-bunbun-note p em:last-child,
.sbn-article__body h2[id*="yang-bunbun-catat"] ~ p strong,
.sbn-article__body h2[id*="catatan-bunbun"] ~ p strong {
  font-family:"Lora", Georgia, serif;
  font-size:1.12em;
  line-height:1.55;
  color:#9a4f32;
  font-weight:600;
}

/* DOM-fix presentation — batch 10 */
.sbn-refs-inline--domfix,
.sbn-refs-inline {
  background:#fff4e8;
  border:1px solid #ead8c4;
  border-radius:18px;
  padding:22px 20px;
  margin:30px 0;
  box-shadow:none;
}
.sbn-refs-inline--domfix > *:first-child,
.sbn-refs-inline > *:first-child { margin-top:0; }
.sbn-refs-inline--domfix > *:last-child,
.sbn-refs-inline > *:last-child { margin-bottom:0; }
.sbn-refs-inline__h {
  margin:0 0 16px !important;
  display:flex;
  align-items:center;
  gap:10px;
  font-family:"Lora", Georgia, serif;
  font-size:1.28rem;
  line-height:1.25;
  color:#4e2f23;
}
.sbn-refs-inline__icon { font-family:Arial,sans-serif; font-size:1.05em; opacity:.65; }
.sbn-refs-inline--domfix div,
.sbn-refs-inline div {
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;
  margin:0 !important;
  box-shadow:none !important;
}
.sbn-ybc-keyline {
  margin:18px 0 4px !important;
  padding:14px 16px;
  border-left:3px solid #c67752;
  background:rgba(198,119,82,.07);
  border-radius:0 12px 12px 0;
  font-family:"Lora", Georgia, serif !important;
  font-size:1.14em !important;
  line-height:1.6 !important;
  color:#9a4f32 !important;
  font-weight:600 !important;
}


/* Article polish v1.6.8 — single references + handwritten Bunbun keyline */
.sbn-ref-clean{margin:30px 0;padding:22px 20px;background:#fff8ed;border:1px solid #eadbc7;border-radius:18px;box-shadow:none}
.sbn-ref-clean__title{margin:0 0 14px!important;font-family:Lora,Georgia,serif!important;font-size:1.18rem!important;line-height:1.25!important;color:#4a2d22!important}
.sbn-ref-clean p{margin:0 0 14px!important}.sbn-ref-clean p:last-child{margin-bottom:0!important}
.sbn-ybc-keyline{font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive!important;font-size:1.18em!important;line-height:1.65!important;color:#a55235!important;font-weight:500!important;letter-spacing:.01em;margin-top:18px!important;padding:4px 4px 4px 16px!important;border-left:2px solid #d89b78!important}
@media(max-width:600px){.sbn-ybc-keyline{font-size:1.12em!important;line-height:1.62!important}.sbn-ref-clean{padding:20px 18px}}


/* v1.6.9 — Bunbun note: readable, warm, lightly artistic (not handwriting). */
.sbn-ybc-keyline.sbn-ybc-keyline--soft{
  font-family:"Lora", Georgia, serif!important;
  font-size:1.08em!important;
  line-height:1.65!important;
  color:#7b4938!important;
  font-weight:600!important;
  font-style:italic!important;
  letter-spacing:0!important;
  margin-top:18px!important;
  padding:10px 14px 10px 18px!important;
  border-left:3px solid #cf9a74!important;
  background:linear-gradient(90deg,rgba(224,185,151,.16),rgba(255,255,255,0))!important;
  border-radius:0 12px 12px 0!important;
  box-shadow:none!important;
}
.sbn-ybc-keyline.sbn-ybc-keyline--soft::after{
  content:"  ✦";
  color:#c7865f;
  font-style:normal;
  font-size:.9em;
}

/* Batch-10 refs fix — legacy reference card can wrap its own heading, so it may not receive __wrap. Neutralize the first legacy div inside the canonical reference aside. */
.sbn-refs-inline > div,
.sbn-refs-inline > div[style] {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}


/* ==========================================================================
   HOMEPAGE POLISH — v1.7.0 (2026-09-03)
   Appended block. Overrides only; does not touch the 4 discovery cards,
   single article, search or archive. Hero carousel + compact Catatan Bunbun
   + compact Terbaru + "Pilihan untuk dibaca santai" + subtle brand paw.
   ========================================================================== */

/* ---- HERO CAROUSEL ---- */
.sbn-hero-wrap{ position:relative; }
.sbn-hero-wrap > .sbn-header{ padding:clamp(8px,2.6cqw,13px) clamp(12px,3.4cqw,18px); }
.sbn-hero-wrap .sbn-brand__mark{ width:clamp(24px,6.2cqw,30px); height:clamp(24px,6.2cqw,30px); }
.sbn-hero-wrap .sbn-brand__name{ font-size:clamp(14px,4.2cqw,19px); }

.sbn-hero-track{
  display:flex; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; overscroll-behavior-x:contain;
}
.sbn-hero-track::-webkit-scrollbar{ display:none; }
.sbn-hero-track > .sbn-hero{
  flex:0 0 100%; width:100%; scroll-snap-align:start; scroll-snap-stop:always;
}
/* each slide already carries .sbn-hero (aspect-ratio:16/9 etc.) */
.sbn-hero--cat .sbn-hero__title{ font-size:clamp(15px,4.9cqw,22px); }

.sbn-hero-dots{
  position:absolute; left:0; right:0; bottom:7px; z-index:22;
  display:flex; justify-content:center; gap:6px; pointer-events:none;
}
.sbn-hero-dot{
  pointer-events:auto; width:7px; height:7px; padding:0; border:0; cursor:pointer;
  border-radius:50%; background:oklch(100% 0 0 / 0.55);
  box-shadow:0 1px 3px oklch(0% 0 0 / 0.28); transition:width .2s, background .2s;
}
.sbn-hero-dot.is-active{ width:18px; border-radius:4px; background:var(--sbn-amber); }
@media (prefers-reduced-motion:reduce){ .sbn-hero-track{ scroll-behavior:auto; } }

/* ---- CATATAN BUNBUN — compact quote card ---- */
.sbn-ybc.sbn-ybc--quote{
  grid-template-columns:40% 1fr; gap:14px; align-items:center;
  padding:14px; border-radius:20px; min-height:0; overflow:hidden;
}
.sbn-ybc--quote .sbn-ybc__art{ align-self:center; }
.sbn-ybc--quote .sbn-ybc__art .sbn-art{
  min-height:0; aspect-ratio:1/1; border-radius:16px; background:transparent;
}
.sbn-ybc--quote .sbn-ybc__art .sbn-art img{ object-fit:contain; object-position:center bottom; }
.sbn-ybc--quote .sbn-ybc__body{ padding-right:2px; }
.sbn-ybc--quote .sbn-ybc__quote{
  font-family:var(--sbn-serif); font-style:italic;
  font-size:clamp(13.5px,3.7cqw,15.5px); line-height:1.5;
  margin:0 0 8px; color:oklch(32% 0.045 42);
}
.sbn-ybc--quote .sbn-ybc__by{
  font-size:12px; font-weight:700; color:var(--sbn-taupe); margin:0;
  display:flex; align-items:center; gap:5px;
}
.sbn-ybc--quote .sbn-ybc__paw{ font-size:11px; opacity:.7; }
@media (max-width:430px){
  .sbn-ybc.sbn-ybc--quote{ padding:12px; gap:12px; }
  .sbn-ybc--quote .sbn-ybc__quote{
    font-size:13px; line-height:1.46;
    display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden;
  }
}

/* ---- TERBARU — compact rows, no excerpt ---- */
.sbn-list--latest{ padding-bottom:24px; }
.sbn-row--compact{ gap:12px; padding:11px 0; align-items:center; }
.sbn-row--compact .sbn-row__thumb,
.sbn-row--compact .sbn-row__thumb img,
.sbn-row--compact .sbn-row__thumb .sbn-ph{ width:88px; height:88px; border-radius:12px; }
.sbn-row--compact .sbn-row__h{
  font-size:14.5px; line-height:1.3; margin:0 0 4px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.sbn-row--compact .sbn-row__meta{ font-size:11px; }
.sbn-row--compact .sbn-row__excerpt{ display:none; }

/* ---- PILIHAN UNTUK DIBACA SANTAI ---- */
.sbn-picks{ padding:2px 0 26px; }
.sbn-picks__head{ padding:0 18px; margin-bottom:3px; }
.sbn-picks__sub{ margin:0 18px 13px; font-size:12.5px; color:var(--sbn-ink-soft); }
.sbn-picks__rail{
  display:flex; gap:12px; overflow-x:auto; padding:2px 18px 6px;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.sbn-picks__rail::-webkit-scrollbar{ display:none; }
.sbn-pick{
  flex:0 0 62%; max-width:230px; scroll-snap-align:start;
  background:var(--sbn-surface); border:1px solid var(--sbn-card-brd);
  border-radius:16px; overflow:hidden; box-shadow:var(--sbn-shadow-sm);
}
.sbn-pick__img,
.sbn-pick__img img,
.sbn-pick__img .sbn-ph{ display:block; width:100%; aspect-ratio:16/10; object-fit:cover; }
.sbn-pick__body{ display:block; padding:10px 12px 13px; }
.sbn-pick__cat{
  display:block; font-size:10px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--sbn-green); margin-bottom:4px;
}
.sbn-pick__h{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  font-family:var(--sbn-serif); font-weight:600; font-size:13.5px; line-height:1.32;
  color:var(--sbn-ink-strong);
}
@container sbnapp (min-width:560px){
  .sbn-picks__rail{ display:grid; grid-template-columns:repeat(3,1fr); overflow:visible; }
  .sbn-pick{ flex:none; max-width:none; }
}

/* ---- BRAND PAW (header + drawer) ---- */
.sbn-brand__paw{
  font-size:.62em; margin-left:5px; opacity:.55;
  display:inline-block; transform:translateY(-1px);
}

/* Reference renderer fix — 2026-09-03. The outer .sbn-refs-inline is canonical; legacy article wrapper becomes layout-transparent. */
.sbn-article__body .sbn-refs-inline > div,
.sbn-article__body .sbn-refs-inline > div[style],
.sbn-article__body .sbn-refs-inline .sbn-refs-inline__wrap,
.sbn-article__body .sbn-refs-inline .sbn-refs-inline__wrap[style] {
  display: contents !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* --- HERO CAROUSEL geometry fix v1.7.2 (aspect-ratio on wrap, not flex item) --- */
.sbn-hero-wrap{ aspect-ratio:16 / 9; overflow:hidden; }
.sbn-hero-wrap > .sbn-hero-track{ position:absolute; inset:0; height:100%; }
.sbn-hero-track > .sbn-hero{
  flex:0 0 100% !important; width:100% !important; height:100% !important;
  aspect-ratio:auto !important; min-height:0 !important;
}
.sbn-hero-wrap > .sbn-header{ z-index:25; }
.sbn-hero-dots{ z-index:24; }

/* --- v1.7.3: hero track back to NORMAL FLOW so touch-swipe works on mobile --- */
.sbn-hero-wrap{ aspect-ratio:auto; overflow:visible; }
.sbn-hero-wrap > .sbn-hero-track{ position:static; aspect-ratio:16 / 9; height:auto; }
.sbn-hero-track > .sbn-hero{
  flex:0 0 100% !important; width:100% !important; height:100% !important;
  aspect-ratio:auto !important; min-height:0 !important;
}

/* --- v1.7.4: "Cerita Pilihan Hari Ini" carousel + boxed "Pilihan untuk dibaca santai" --- */
.sbn-featured{ padding:20px 0 22px; }
.sbn-featured > .sbn-section-head{ padding:0 18px; }
.sbn-featured__track{
  display:flex; gap:14px; overflow-x:auto; padding:0 18px 2px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.sbn-featured__track::-webkit-scrollbar{ display:none; }
.sbn-featured__track > .sbn-featured__card{
  flex:0 0 calc(100% - 36px); scroll-snap-align:center; margin:0;
}
.sbn-featured__cat{
  display:block; font-size:10.5px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--sbn-green); margin:0 0 5px;
}
.sbn-featured__dots{ margin:14px 0 0; }
.sbn-featured-dot{
  width:7px; height:7px; padding:0; border:0; border-radius:50%;
  background:oklch(88% 0.02 60); cursor:pointer; transition:width .2s, background .2s;
}
.sbn-featured-dot.is-active{ width:18px; border-radius:4px; background:var(--sbn-amber); }

.sbn-picks{ padding:2px 0 26px; }
.sbn-picks__head{ padding:0 18px; margin-bottom:3px; }
.sbn-picks__sub{ margin:0 18px 12px; font-size:12.5px; color:var(--sbn-ink-soft); }
.sbn-picks__box{
  position:relative; margin:0 18px; padding:12px;
  background:var(--sbn-parch-a); border:1px solid var(--sbn-parch-brd); border-radius:20px;
}
.sbn-picks__box .sbn-picks__rail{
  display:flex; gap:10px; overflow-x:auto; padding-right:42px; margin:0;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.sbn-picks__box .sbn-picks__rail::-webkit-scrollbar{ display:none; }
.sbn-picks__box .sbn-pick{
  flex:0 0 47%; max-width:none; scroll-snap-align:start;
  background:var(--sbn-surface); border:1px solid var(--sbn-card-brd);
  border-radius:14px; overflow:hidden; box-shadow:var(--sbn-shadow-sm);
}
.sbn-picks__box .sbn-pick__body{ padding:9px 10px 12px; }
.sbn-picks__box .sbn-pick__h{ font-size:12.5px; -webkit-line-clamp:3; }
.sbn-picks__arrow{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:var(--sbn-choco); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px oklch(30% 0.05 40 / 0.28); z-index:3;
}
.sbn-picks__arrow svg{ display:block; }
@container sbnapp (min-width:560px){
  .sbn-picks__box .sbn-picks__rail{ display:grid; grid-template-columns:repeat(3,1fr); overflow:visible; padding-right:0; }
  .sbn-picks__box .sbn-pick{ flex:none; }
  .sbn-picks__arrow{ display:none; }
  .sbn-featured__track > .sbn-featured__card{ flex:0 0 calc(50% - 7px); }
}

/* --- v1.7.5: CERITA PILIHAN HARI INI = one full card per swipe (mobile-first) --- */
.sbn-featured__track{
  align-items:flex-start;
  gap:14px;
  scroll-padding-left:18px; scroll-padding-right:18px;
  overscroll-behavior-x:contain;
}
.sbn-featured__track > .sbn-featured__card{
  flex:0 0 100% !important;          /* 100% of the track content box (already minus the 18px+18px gutter) */
  width:100% !important;
  margin:0 !important;
  scroll-snap-align:start !important;
  scroll-snap-stop:always;
}
/* keep it one-per-view on wider screens too — mobile is the spec, desktop just follows */
@container sbnapp (min-width:560px){
  .sbn-featured__track > .sbn-featured__card{ flex:0 0 100% !important; }
}

/* --- v1.7.6: CERITA PILIHAN HARI INI = ONE FIXED FRAME, inner content swaps on swipe --- */
.sbn-featured{ padding:20px 18px 24px; }
.sbn-featured > .sbn-section-head{ padding:0; }
.sbn-featured__card{
  position:relative; overflow:hidden;
  touch-action:pan-y;               /* vertical page scroll passes through */
}
.sbn-featured__track{ display:block !important; overflow:visible !important; padding:0 !important; }  /* old track element is gone; belt-and-braces */
.sbn-featured__slides{ display:grid; }
.sbn-featured__slide{
  grid-area:1 / 1; min-width:0;
  opacity:0; visibility:hidden; transform:translateX(10px);
  transition:opacity .28s ease, transform .28s ease, visibility 0s linear .28s;
}
.sbn-featured__slide.is-active{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .28s ease, transform .28s ease, visibility 0s;
}
.sbn-featured__slide a{ -webkit-tap-highlight-color:transparent; }
.sbn-featured__img{ margin-bottom:12px; }
.sbn-featured__img img,
.sbn-featured__img .sbn-art,
.sbn-featured__img .sbn-ph{ width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:16px; }
.sbn-featured__cat{
  display:block; font-size:10.5px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--sbn-green); margin:0 0 5px;
}
.sbn-featured__title{ font-size:19px; line-height:1.28; margin:0 0 7px; }
.sbn-featured__excerpt{
  font-size:13px; line-height:1.5; color:var(--sbn-ink-soft); margin:0 0 13px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.sbn-featured__dots{ display:flex; justify-content:center; gap:6px; margin:14px 0 0; }
.sbn-featured-dot{
  width:7px; height:7px; padding:0; border:0; border-radius:50%;
  background:oklch(88% 0.02 60); cursor:pointer; transition:width .2s, background .2s;
}
.sbn-featured-dot.is-active{ width:18px; border-radius:4px; background:var(--sbn-amber); }

/* --- v1.8.0: HERO SLIDES 2–5 (Tiga Keranjang / Segenggam Daun / Tentang Bunbun / Cari di SiBunbun) ---
   Same hero component as slide 1. Images are 16:9 with the subject on the right and
   deliberate empty space on the left for the CSS copy — anchor right so Bunbun/Aces
   never get cropped and the left stays clear behind the scrim. */
.sbn-hero--cat .sbn-hero__art .sbn-art img{ object-position:82% center; }
/* "Kenalan dengan Bunbun" has no destination yet — render the CTA as waiting, not a dead link. */
.sbn-btn--soon{ opacity:.62; cursor:default; pointer-events:none; box-shadow:none; }

/* ============================================================================
 * v1.8.1 — "SEMUA CERITA" (browse-all page at the WP posts index /blog/)
 * Browsing/discovery surface. Distinct from search. Mobile-first, one column.
 * ========================================================================== */
.sbn-stories{ padding-bottom:0; }
.sbn-stories__intro{
  position:relative; overflow:hidden; padding:20px 18px 20px;
  background:linear-gradient(170deg, var(--sbn-parch-a), oklch(98% 0.012 75) 80%);
  border-bottom:1px solid var(--sbn-line);
}
.sbn-stories__deco{
  position:absolute; top:-8px; right:-10px; width:150px; height:104px;
  color:var(--sbn-green); pointer-events:none;
}
.sbn-stories__deco svg{ width:100%; height:100%; }
.sbn-stories__art{
  position:absolute; right:8px; bottom:0; width:clamp(96px,34cqw,150px); height:auto;
  border-radius:0; pointer-events:none; opacity:.96;
}
.sbn-stories__title{
  position:relative; font-family:var(--sbn-serif); font-weight:600;
  font-size:clamp(28px,8.4cqw,38px); line-height:1.08; letter-spacing:-.02em;
  margin:0; color:var(--sbn-ink-strong);
}
.sbn-stories__desc{
  position:relative; font-size:clamp(13px,3.7cqw,14.5px); line-height:1.55;
  color:var(--sbn-ink-soft); margin:8px 0 0; max-width:26em;
}
/* FILTER pills — horizontal scroll, never a page-level overflow */
.sbn-stories__filter{
  display:flex; gap:8px; overflow-x:auto; padding:14px 18px 4px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.sbn-stories__filter::-webkit-scrollbar{ display:none; }
.sbn-stories__pill{
  flex:none; font-size:12.5px; font-weight:600; padding:8px 15px; border-radius:999px;
  border:1px solid oklch(88% 0.03 60); background:oklch(99% 0.008 75);
  color:var(--sbn-ink-soft); white-space:nowrap; transition:background .15s,border-color .15s,color .15s;
}
.sbn-stories__pill.is-active{
  background:var(--sbn-amber); border-color:var(--sbn-amber); color:#fff;
}
/* COUNT + SORT bar */
.sbn-stories__bar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 18px 4px;
}
.sbn-stories__count{ font-size:12.5px; font-weight:600; color:var(--sbn-taupe); }
.sbn-sort{ position:relative; flex:none; }
.sbn-sort__cur{
  list-style:none; cursor:pointer; font-size:12.5px; font-weight:600; color:var(--sbn-ink-soft);
  display:inline-flex; align-items:center; gap:5px; padding:7px 12px; border-radius:10px;
  border:1px solid var(--sbn-line); background:oklch(99% 0.008 75);
}
.sbn-sort__cur::-webkit-details-marker{ display:none; }
.sbn-sort[open] .sbn-sort__cur{ border-color:var(--sbn-amber); color:var(--sbn-amber-ink); }
.sbn-sort__menu{
  position:absolute; right:0; top:calc(100% + 6px); z-index:6; min-width:150px;
  background:#fff; border:1px solid var(--sbn-card-brd); border-radius:12px;
  box-shadow:var(--sbn-shadow); padding:5px; display:flex; flex-direction:column;
}
.sbn-sort__opt{
  font-size:13px; font-weight:600; color:var(--sbn-ink-soft);
  padding:9px 11px; border-radius:8px;
}
.sbn-sort__opt.is-active{ background:oklch(95% 0.045 55); color:var(--sbn-amber-ink); }
/* FEED */
.sbn-stories__feed{ padding:12px 18px 6px; }
.sbn-stories__back{
  display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600;
  color:var(--sbn-taupe); margin:0 0 12px;
}
.sbn-stories__grid{ display:grid; grid-template-columns:1fr; gap:18px; }
.sbn-scard{
  background:var(--sbn-surface); border:1px solid var(--sbn-card-brd);
  border-radius:18px; overflow:hidden; box-shadow:var(--sbn-shadow-sm);
}
.sbn-scard__media{ display:block; background:oklch(93% 0.03 60); }
.sbn-scard__media img,
.sbn-scard__media .sbn-art,
.sbn-scard__media .sbn-ph{
  display:block; width:100%; aspect-ratio:16/9; object-fit:cover;
}
.sbn-scard__media .sbn-ph{ display:flex; align-items:center; justify-content:center; color:oklch(72% 0.03 60); }
.sbn-scard__body{ padding:12px 14px 11px; }
.sbn-scard__cat{
  display:block; font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--sbn-amber-ink); margin:0 0 5px;
}
.sbn-scard__title{
  font-family:var(--sbn-serif); font-weight:600; font-size:clamp(16px,4.5cqw,18.5px);
  line-height:1.3; letter-spacing:-.01em; color:var(--sbn-ink-strong); margin:0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.sbn-scard__foot{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:9px;
}
.sbn-scard__meta{ font-size:11.5px; font-weight:600; color:var(--sbn-taupe); }
.sbn-scard__meta .sbn-dot{ color:oklch(80% 0.02 60); margin:0 5px; }
.sbn-scard__save{
  flex:none; width:32px; height:32px; margin:-6px -6px -6px 0; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:none; border:0; cursor:pointer; color:var(--sbn-taupe);
  border-radius:8px; transition:color .15s, background .15s;
}
.sbn-scard__save:hover{ background:oklch(96% 0.02 60); color:var(--sbn-amber-ink); }
.sbn-bookmark[aria-pressed="true"]{ color:var(--sbn-amber); }
.sbn-bookmark[aria-pressed="true"] svg{ fill:var(--sbn-amber); }
/* LOAD MORE */
.sbn-stories__more{ display:flex; justify-content:center; padding:22px 0 4px; }
.sbn-stories__morebtn{
  display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600;
  color:var(--sbn-amber-ink); background:#fff; border:1px solid oklch(90% 0.04 55);
  padding:11px 22px; border-radius:999px; box-shadow:var(--sbn-shadow-sm);
}
.sbn-stories__morebtn[aria-disabled="true"]{ opacity:.6; pointer-events:none; }
.sbn-stories__empty{
  padding:40px 8px; text-align:center; color:var(--sbn-taupe);
  font-family:var(--sbn-serif); font-size:15px; line-height:1.6;
}
/* DESKTOP — mobile stays the priority; at most 2 columns, only when the
   .sbn-app container is actually widened (site-wide 480px cap lifted later). */
@container sbnapp (min-width:720px){
  .sbn-stories__grid{ grid-template-columns:1fr 1fr; gap:22px; }
  .sbn-stories__intro{ padding:30px 26px; }
  .sbn-stories__filter,
  .sbn-stories__bar,
  .sbn-stories__feed{ padding-left:26px; padding-right:26px; }
}




/* ==========================================================================
 * ARTICLE BOTTOM — v1.9.12 (2026-09-04)
 * Reaction · Share · "Kalau masih ingin membaca" · Journey closing · Footer.
 * Premium editorial reading experience — not a plugin/dashboard. Replaces the
 * earlier body.single-post override pile. Mobile-first inside .sbn-app (<=480px).
 * ========================================================================== */

/* --- 1. Reaction ---------------------------------------------------------- */
.sbn-react--premium{
  margin:30px 18px 22px; padding:0; background:none; border:0;
}
.sbn-react--premium .sbn-react__head{ text-align:left; margin:0 0 16px; }
.sbn-react--premium .sbn-react__title{
  font-family:var(--sbn-serif); font-weight:600;
  font-size:clamp(18px,5cqw,21px); line-height:1.2; color:var(--sbn-ink-strong); margin:0;
}
.sbn-react--premium .sbn-react__sub{
  margin:5px 0 0; font-size:13px; line-height:1.45; color:var(--sbn-taupe);
}
.sbn-react--premium .sbn-react__row{
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px; align-items:start;
}
.sbn-react--premium .sbn-react__item{
  appearance:none; -webkit-appearance:none; background:none; border:0; padding:2px 0;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  cursor:pointer; color:var(--sbn-ink-soft); min-width:0;
}
.sbn-react--premium .sbn-react__icon{
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--sbn-surface); border:1px solid var(--sbn-card-brd);
  color:var(--sbn-ink-strong); transition:background .16s, border-color .16s, color .16s, transform .16s;
}
.sbn-react--premium .sbn-react__icon svg{ width:26px; height:26px; }
.sbn-react--premium .sbn-react__label{
  font-size:11.5px; font-weight:600; line-height:1.15; text-align:center; color:var(--sbn-ink);
}
.sbn-react--premium .sbn-react__choice-count{
  font-size:13px; font-weight:700; line-height:1; color:var(--sbn-taupe);
}
.sbn-react--premium .sbn-react__item:hover .sbn-react__icon{ transform:translateY(-1px); }
.sbn-react--premium .sbn-react__item[aria-pressed="true"] .sbn-react__icon{
  background:oklch(95% 0.035 150); border-color:var(--sbn-green); color:var(--sbn-green);
}
.sbn-react--premium .sbn-react__item[aria-pressed="true"] .sbn-react__label,
.sbn-react--premium .sbn-react__item[aria-pressed="true"] .sbn-react__choice-count{ color:var(--sbn-green); }
.sbn-react--premium .sbn-react__total{
  display:flex; align-items:center; gap:8px; margin:16px 0 0;
  font-size:12.5px; color:var(--sbn-taupe);
}
.sbn-react--premium .sbn-react__total svg{ width:16px; height:16px; flex:none; }
@media (max-width:360px){
  .sbn-react--premium .sbn-react__icon{ width:50px; height:50px; }
  .sbn-react--premium .sbn-react__label{ font-size:10.5px; }
}

/* --- 2. Share : compact, keep base .sbn-share (light) -------------------- */
.sbn-share{ margin:6px 18px 26px; padding:16px 14px 12px; }
.sbn-share__h{ font-size:15.5px; }
.sbn-share__copy{ margin:5px 0 13px; font-size:12.5px; }
.sbn-share__ic{ width:42px; height:42px; }
.sbn-share__act--fb .sbn-share__ic{ background:oklch(56% 0.08 250); }
.sbn-share__act.sbn-bookmark .sbn-share__ic{
  background:oklch(95% 0.035 45); color:oklch(52% 0.13 40); border:1px solid oklch(88% 0.05 45);
}
.sbn-share__act.sbn-bookmark[aria-pressed="true"] .sbn-share__ic{ background:oklch(56% 0.14 40); color:#fff; border-color:transparent; }

/* --- 3. Serendipity — "Mungkin cerita ini sedang mencarimu" ------------ */
.sbn-serendipity{ margin:24px 18px 8px; }
.sbn-serendipity__head h2{
  font-family:var(--sbn-serif); font-weight:600; font-size:clamp(19px,5.4cqw,23px);
  line-height:1.18; margin:0 0 6px; color:var(--sbn-ink-strong);
}
.sbn-serendipity__head h2 span{ color:var(--sbn-amber-ink); font-size:.82em; }
.sbn-serendipity__head > p{
  margin:0 0 12px; font-size:12.5px; line-height:1.55; color:var(--sbn-taupe); max-width:340px;
}
.sbn-serendipity__reroll{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--sbn-sans); font-size:12.5px; font-weight:600; color:var(--sbn-amber-ink);
  background:#fff; border:1px solid oklch(90% 0.04 55); border-radius:999px;
  padding:8px 15px; box-shadow:var(--sbn-shadow-sm); transition:transform .15s, background .15s;
}
.sbn-serendipity__reroll svg{ width:14px; height:14px; transition:transform .5s ease; }
.sbn-serendipity__reroll:hover{ background:oklch(97% 0.02 60); }
.sbn-serendipity__reroll.is-busy{ pointer-events:none; opacity:.7; }
.sbn-serendipity__reroll.is-busy svg{ transform:rotate(360deg); }
.sbn-serendipity__list{
  margin:14px 0 0; display:flex; flex-direction:column; gap:10px;
  transition:opacity .28s ease;
}
.sbn-serendipity__list.is-swapping{ opacity:0; }
.sbn-scard{
  position:relative; display:grid; align-items:center;
  grid-template-columns:64px 1fr 18px; gap:12px;
  padding:10px; border-radius:14px; background:var(--sbn-surface);
  border:1px solid var(--sbn-card-brd); color:var(--sbn-ink-strong);
}
.sbn-scard__no{
  position:absolute; top:8px; left:10px; z-index:2;
  font-family:var(--sbn-serif); font-size:11px; font-weight:700; letter-spacing:.04em;
  color:#fff; background:var(--sbn-taupe); border-radius:6px; padding:1px 5px; opacity:.9;
}
.sbn-scard__thumb,
.sbn-scard__thumb img,
.sbn-scard__thumb .sbn-ph{
  width:64px; height:64px; border-radius:11px; object-fit:cover; display:block; flex:none;
}
.sbn-scard__thumb .sbn-ph{ display:flex; align-items:center; justify-content:center; background:oklch(93% 0.02 70); color:var(--sbn-taupe); }
.sbn-scard__body{ min-width:0; }
.sbn-scard__cat{ display:block; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--sbn-green); margin-bottom:3px; }
.sbn-scard__h{
  font-family:var(--sbn-serif); font-weight:600; font-size:14px; line-height:1.3;
  color:var(--sbn-ink-strong);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.sbn-scard__go{ color:var(--sbn-taupe); display:flex; }
.sbn-scard__go svg{ width:18px; height:18px; }
/* featured — bigger thumb + title, warm apricot accent */
.sbn-scard--feature{
  grid-template-columns:100px 1fr 20px; gap:14px; padding:12px;
  background:linear-gradient(180deg, oklch(97% 0.03 60), oklch(98% 0.015 65));
  border-color:oklch(88% 0.05 55);
}
.sbn-scard--feature .sbn-scard__thumb,
.sbn-scard--feature .sbn-scard__thumb img,
.sbn-scard--feature .sbn-scard__thumb .sbn-ph{ width:100px; height:100px; border-radius:13px; }
.sbn-scard--feature .sbn-scard__h{ font-size:16px; -webkit-line-clamp:3; }
.sbn-scard--feature .sbn-scard__cat{ color:oklch(54% 0.13 45); }
.sbn-scard--feature .sbn-scard__no{ background:oklch(58% 0.14 45); }
/* #2 sage-green accent */
.sbn-scard--b{ border-left:3px solid oklch(70% 0.07 150); }
.sbn-scard--b .sbn-scard__no{ background:oklch(48% 0.08 150); }
/* #3 muted gold / sand accent */
.sbn-scard--c{ border-left:3px solid oklch(78% 0.08 80); }
.sbn-scard--c .sbn-scard__cat{ color:oklch(52% 0.09 70); }
.sbn-scard--c .sbn-scard__no{ background:oklch(56% 0.08 75); }
.sbn-serendipity__foot{
  margin:12px 0 0; font-size:11px; color:var(--sbn-taupe); display:flex; align-items:center; gap:5px;
}
.sbn-serendipity__foot span{ color:var(--sbn-amber-ink); }
.sbn-serendipity__empty{ margin:14px 0 0; font-size:13px; color:var(--sbn-taupe); font-style:italic; }
@media (max-width:360px){
  .sbn-scard{ grid-template-columns:56px 1fr 16px; gap:10px; }
  .sbn-scard__thumb,.sbn-scard__thumb img,.sbn-scard__thumb .sbn-ph{ width:56px; height:56px; }
  .sbn-scard--feature{ grid-template-columns:84px 1fr 18px; }
  .sbn-scard--feature .sbn-scard__thumb,
  .sbn-scard--feature .sbn-scard__thumb img,
  .sbn-scard--feature .sbn-scard__thumb .sbn-ph{ width:84px; height:84px; }
}

/* --- 4. Journey — ONE ~16:9 field, artwork right, CTAs stacked left ---- */
.sbn-bridge--premium{
  position:relative; margin:24px 0 0; overflow:hidden; border:0; border-radius:0; text-align:left;
  min-height:clamp(200px, 56cqw, 300px); display:flex; align-items:center;
  padding:18px 16px 34px; background:#f3e4cc;
}
.sbn-bridge--premium .sbn-bridge__art{ position:absolute; inset:0; z-index:0; margin:0; pointer-events:none; }
.sbn-bridge--premium .sbn-bridge__art img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:94% 22%;
}
/* left scrim so copy stays legible; artwork subject stays clear on the right */
.sbn-bridge--premium .sbn-bridge__art::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, #f3e4cc 0%, rgba(243,228,204,.95) 34%, rgba(243,228,204,.5) 56%, rgba(243,228,204,0) 82%);
}
/* bottom fade → welds into the dark footer, no cream gap */
.sbn-bridge--premium .sbn-bridge__art::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:44%;
  background:linear-gradient(180deg, rgba(21,37,29,0) 0%, rgba(21,37,29,.5) 55%, #15251d 100%);
}
.sbn-bridge--premium .sbn-bridge__copy{ position:relative; z-index:1; max-width:60%; }
.sbn-bridge--premium .sbn-bridge__copy h2{
  font-family:var(--sbn-serif); font-weight:600; font-size:clamp(17px,5cqw,21px);
  line-height:1.15; margin:0 0 5px; color:oklch(27% 0.05 45);
}
.sbn-bridge--premium .sbn-bridge__copy h2 span{ color:var(--sbn-amber-ink); font-size:.8em; }
.sbn-bridge--premium .sbn-bridge__copy > p{
  margin:0 0 11px; font-size:11px; line-height:1.42; color:oklch(40% 0.035 45); max-width:200px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.sbn-bridge__links{ display:flex; flex-direction:column; gap:7px; max-width:202px; }
.sbn-bridge__link{
  display:grid; grid-template-columns:20px 1fr 13px; align-items:center; gap:8px;
  padding:7px 10px; border-radius:10px;
  background:rgba(255,255,255,.85); border:1px solid rgba(90,58,38,.12);
  color:oklch(28% 0.045 40); box-shadow:0 3px 10px rgba(56,35,20,.06);
}
.sbn-bridge__icon{ width:20px; height:20px; flex:none; display:flex; align-items:center; justify-content:center; color:var(--sbn-amber-ink); }
.sbn-bridge__icon svg{ width:18px; height:18px; }
.sbn-bridge__link--sd .sbn-bridge__icon{ color:var(--sbn-green); }
.sbn-bridge__link strong{
  font-family:var(--sbn-serif); font-weight:600; font-size:11px; line-height:1.18;
  color:oklch(25% 0.05 40); min-width:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.sbn-bridge__link em{ font-style:normal; color:var(--sbn-taupe); display:flex; }
.sbn-bridge__link em svg{ width:13px; height:13px; }
@media (max-width:360px){
  .sbn-bridge--premium .sbn-bridge__copy{ max-width:66%; }
}

/* --- 5. Dark premium footer — compact "back cover" -------------------- */
.sbn-mini-footer--dark{
  margin:0; padding:0; border-radius:0; overflow:hidden;
  background:#15251d; color:#f4ecdd;
}
.sbn-mini-footer--dark .sbn-mini-footer__inner{
  padding:18px 20px calc(16px + env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 86% 4%, rgba(207,142,73,.10), transparent 32%),
    linear-gradient(160deg, #1b2c23 0%, #101d17 100%);
}
.sbn-mini-footer--dark .sbn-mini-footer__brand{
  display:flex; align-items:center; gap:12px; margin:0 0 14px;
}
.sbn-mfoot__avatar{
  width:40px; height:40px; border-radius:50%; flex:none; object-fit:cover;
  border:1px solid rgba(207,142,73,.4); background:#24382c;
}
.sbn-mfoot__avatar--empty{ display:flex; align-items:center; justify-content:center; font-family:var(--sbn-serif); color:#cf8e49; font-weight:700; }
.sbn-mfoot__id strong{
  display:block; font-family:var(--sbn-serif); font-weight:600; font-size:20px; line-height:1; color:#fbf3e2;
}
.sbn-mfoot__id strong span{ color:#cf8e49; }
.sbn-mfoot__id p{
  margin:4px 0 0; font-size:11px; line-height:1.4; color:#cbbda6;
}
.sbn-mini-footer--dark .sbn-mini-footer__links{
  display:grid; grid-template-columns:1fr 1fr; gap:9px 14px; margin:0 0 14px;
}
.sbn-mini-footer--dark .sbn-mini-footer__links a{
  display:flex; align-items:center; gap:7px; font-size:12px; color:#e9dcc8; min-width:0;
}
.sbn-mfoot__ico{ flex:none; display:flex; color:#cf8e49; opacity:.85; }
.sbn-mfoot__ico svg{ width:14px; height:14px; }
.sbn-mini-footer--dark .sbn-mini-footer__base{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-top:12px; border-top:1px solid rgba(207,142,73,.22);
}
.sbn-mini-footer--dark .sbn-mini-footer__social{ display:flex; gap:14px; }
.sbn-mini-footer--dark .sbn-mini-footer__social a{
  width:20px; height:20px; display:flex; align-items:center; justify-content:center; color:#cdbfa9;
}
.sbn-mini-footer--dark .sbn-mini-footer__social a svg{ width:18px; height:18px; }
.sbn-mini-footer--dark .sbn-mini-footer__social a:hover{ color:#cf8e49; }
.sbn-mini-footer--dark .sbn-mini-footer__base p{ margin:0; font-size:11px; color:#b7a68f; white-space:nowrap; }

/* --- 6. Floating back-to-top ---------------------------------------- */
.sbn-totop{
  position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom));
  width:46px; height:46px; border-radius:50%; z-index:70;
  display:flex; align-items:center; justify-content:center;
  background:#15251d; color:#f4ecdd;
  border:1px solid rgba(207,142,73,.55);
  box-shadow:0 6px 18px rgba(0,0,0,.28);
  cursor:pointer; opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.sbn-totop svg{ width:20px; height:20px; }
.sbn-totop.is-visible{ opacity:1; transform:none; pointer-events:auto; }
.sbn-totop:hover{ border-color:#cf8e49; color:#fff; }
@media (max-width:360px){ .sbn-totop{ width:44px; height:44px; right:12px; } }