/* Roni Gozali – journal + article. Same language as the site: Bricolage display, DM Sans body, sage actions,
   sun details, stone surfaces. */

.rgb{ display:block; padding-top:var(--rgc-nav, 5.4rem); }
.rgb .rgb-i{ display:inline-block; flex:none; vertical-align:middle; }
.rgb .kicker{ color:var(--sun-deep); }
.rgb-k{ font:500 .74rem/1 var(--body); letter-spacing:.22em; text-transform:uppercase; color:var(--sun-deep); }
.rgb-lead{ color:var(--mute); font-size:clamp(1.08rem,1.5vw,1.3rem); line-height:1.55; max-width:36em; }
.rgb-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:.35rem 1rem; color:var(--mute); font-size:.88rem; }
.rgb-meta > * + *::before{ content:""; display:inline-block; width:4px; height:4px; margin-right:1rem; border-radius:50%; background:var(--line); vertical-align:middle; }
.rgb-cat{ color:var(--sage-deep); font-weight:500; text-decoration:none; }
.rgb-read{ display:inline-flex; align-items:center; gap:.35rem; }

/* reading progress */
.rgb-progress{ position:fixed; z-index:31; left:0; right:0; top:0; height:3px; pointer-events:none; }
.admin-bar .rgb-progress{ top:32px; }
@media screen and (max-width:782px){ .admin-bar .rgb-progress{ top:46px; } }
.rgb-progress i{ display:block; height:100%; width:100%; background:linear-gradient(90deg,var(--sage),var(--sun)); transform:scaleX(var(--read,0)); transform-origin:left; }

/* ── article hero ── */
.rgb-hero{ display:grid; justify-items:start; gap:1.3rem; padding-top:clamp(2rem,6vw,4.5rem); padding-bottom:clamp(2rem,4vw,3rem); }
.rgb-back{ display:inline-flex; align-items:center; gap:.45rem; padding:.45rem .9rem .45rem .7rem; border:1px solid var(--line); border-radius:999px; color:var(--mute); font-size:.88rem; text-decoration:none; transition:border-color .2s, color .2s; }
.rgb-back:hover{ border-color:var(--ink); color:var(--ink); }
.rgb-meta.is-hero{ font-size:.92rem; }
.rgb-title{ font-size:clamp(2.6rem,6.4vw,5.6rem); max-width:15ch; }
.rgb-byline{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem; margin-top:.4rem; }
.rgb-author{ display:inline-flex; align-items:center; gap:.75rem; }
.rgb-author img{ width:3rem; height:3rem; border-radius:50%; object-fit:cover; object-position:50% 20%; }
.rgb-author span{ display:grid; line-height:1.25; }
.rgb-author b{ font-weight:500; }
.rgb-author small{ color:var(--mute); font-size:.85rem; }
.rgb-share-btn{ display:inline-flex; align-items:center; gap:.5rem; height:2.75rem; padding:0 1.15rem; border:1px solid var(--line); border-radius:999px; background:var(--paper); color:var(--ink); font:500 .92rem var(--body); cursor:pointer; transition:border-color .2s, background-color .2s; }
.rgb-share-btn:hover{ border-color:var(--ink); }

/* cover */
.rgb-cover{ margin:0 auto; max-width:1320px; }
.rgb-cover-in{ position:relative; aspect-ratio:16/8.5; border-radius:2rem; overflow:hidden; background:var(--stone); }
.rgb-cover-in img{ position:absolute; inset:-6% 0; width:100%; height:112%; max-width:none; object-fit:cover; transform:translate3d(0,var(--par,0px),0) scale(1.02); will-change:transform; }

/* ── layout: share rail · article · contents ── */
.rgb-layout{ display:grid; grid-template-columns:4rem minmax(0,42rem) minmax(0,15rem); justify-content:space-between; gap:clamp(1.5rem,4vw,4.5rem); padding-top:clamp(2.5rem,6vw,4.5rem); padding-bottom:clamp(3rem,6vw,5rem); }
.rgb-rail{ position:sticky; top:calc(var(--rgc-nav,5.4rem) + 2rem); align-self:start; display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.rgb-rail-k{ font:500 .66rem/1 var(--body); letter-spacing:.2em; text-transform:uppercase; color:var(--mute-2); margin-bottom:.3rem; }
.rgb-sh{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; width:2.75rem; height:2.75rem; border:1px solid var(--line); border-radius:999px; background:var(--paper); color:var(--ink); text-decoration:none; cursor:pointer; font:500 .9rem var(--body); transition:transform .25s var(--ease), background-color .2s, border-color .2s, color .2s; }
.rgb-sh:hover{ transform:translateY(-2px); border-color:transparent; color:#fff; background:var(--ink); }
.rgb-sh.is-whatsapp:hover{ background:#25D366; } .rgb-sh.is-facebook:hover{ background:#1877F2; } .rgb-sh.is-linkedin:hover{ background:#0A66C2; } .rgb-sh.is-email:hover{ background:var(--sage); }
.rgb-sh.is-done{ background:var(--sage); border-color:transparent; color:#fff; }

.rgb-toc{ position:sticky; top:calc(var(--rgc-nav,5.4rem) + 2rem); align-self:start; display:grid; gap:1rem; padding-left:1.25rem; border-left:1px solid var(--line); }
.rgb-toc[hidden]{ display:none; }
.rgb-toc ol{ list-style:none; margin:0; padding:0; display:grid; gap:.15rem; }
.rgb-toc a{ display:block; padding:.35rem 0; color:var(--mute); font-size:.9rem; line-height:1.35; text-decoration:none; transition:color .2s; }
.rgb-toc a.is-sub{ padding-left:.9rem; font-size:.85rem; }
.rgb-toc a:hover{ color:var(--ink); }
.rgb-toc a.is-on{ color:var(--ink); font-weight:500; }
.rgb-toc a.is-on::before{ content:""; float:left; width:1.25rem; height:2px; margin:.55rem 0 0 -1.9rem; background:var(--sun); }
.rgb-left{ display:inline-flex; align-items:center; gap:.4rem; color:var(--mute-2); font-size:.82rem; }

/* ── article text ── */
.rgb-body{ min-width:0; }
.rgb-prose{ font-size:clamp(1.08rem,1.25vw,1.18rem); line-height:1.78; color:#2E3432; }
.rgb-prose > *{ margin:0; }
.rgb-prose > * + *{ margin-top:1.3em; }
.rgb-prose > p.rgb-sub{ font:400 clamp(1.5rem,2.6vw,2rem)/1.2 var(--display); letter-spacing:-.025em; color:var(--ink); }
.rgb-prose > p.rgb-drop{ font-size:1.16em; line-height:1.62; color:var(--ink); }
.rgb-prose > p.rgb-drop::first-letter{ float:left; font:600 4.2em/.8 var(--display); letter-spacing:-.04em; margin:.1em .12em 0 0; color:var(--sun-deep); }
.rgb-prose h2, .rgb-prose h3, .rgb-prose h4{ font-family:var(--display); color:var(--ink); letter-spacing:-.035em; line-height:1.05; scroll-margin-top:calc(var(--rgc-nav,5.4rem) + 1.5rem); }
.rgb-prose h2{ font-size:clamp(1.9rem,3vw,2.5rem); font-weight:500; margin-top:2em; }
.rgb-prose > p.rgb-ph{ font:500 clamp(1.6rem,2.6vw,2.1rem)/1.1 var(--display); letter-spacing:-.035em; color:var(--ink); margin-top:2em; scroll-margin-top:calc(var(--rgc-nav,5.4rem) + 1.5rem); }
.rgb-prose h3{ font-size:clamp(1.4rem,2.2vw,1.75rem); font-weight:500; margin-top:1.8em; }
.rgb-prose h4{ font-size:1.2rem; font-weight:600; margin-top:1.6em; }
.rgb-prose a{ color:var(--sage-deep); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em; }
.rgb-prose strong{ color:var(--ink); font-weight:600; }
.rgb-prose ul, .rgb-prose ol{ padding-left:1.4em; }
.rgb-prose ul{ list-style:none; padding-left:0; }
.rgb-prose ul > li{ position:relative; padding-left:1.6em; }
.rgb-prose ul > li::before{ content:""; position:absolute; left:.35em; top:.72em; width:.42em; height:.42em; border-radius:50%; background:var(--sage); }
.rgb-prose li + li{ margin-top:.5em; }
.rgb-prose blockquote, .rgb-prose .wp-block-quote, .rgb-prose .wp-block-pullquote{ margin:2em 0; padding:.2em 0 .2em 1.4em; border:0; border-left:3px solid var(--sun); font:400 clamp(1.45rem,2.4vw,1.9rem)/1.3 var(--display); letter-spacing:-.025em; color:var(--ink); }
.rgb-prose blockquote p{ margin:0; }
.rgb-prose blockquote cite{ display:block; margin-top:.8rem; font:500 .85rem var(--body); letter-spacing:.14em; text-transform:uppercase; font-style:normal; color:var(--mute); }
.rgb-prose img, .rgb-prose video, .rgb-prose iframe{ max-width:100%; height:auto; border-radius:1.4rem; }
.rgb-prose figure{ margin:2.2em 0; }
.rgb-prose figcaption{ margin-top:.7rem; color:var(--mute); font-size:.88rem; text-align:center; }
.rgb-prose hr{ border:0; height:1px; background:var(--line); margin:2.6em 0; }
.rgb-prose .is-reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.rgb-prose .is-reveal.is-in{ opacity:1; transform:none; }

.rgb-tags{ list-style:none; margin:2.5rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.rgb-tags a{ display:inline-block; padding:.4rem .9rem; border:1px solid var(--line); border-radius:999px; font-size:.86rem; color:var(--mute); text-decoration:none; }
.rgb-tags a:hover{ border-color:var(--ink); color:var(--ink); }

.rgb-share-end{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.2rem 2rem; margin-top:3.5rem; padding:1.6rem 1.8rem; border-radius:1.6rem; background:var(--sage-tint); }
.rgb-share-end-t{ margin-top:.45rem; font:500 1.25rem/1.2 var(--display); letter-spacing:-.02em; color:var(--ink); }
.rgb-share-row{ display:flex; flex-wrap:wrap; gap:.45rem; }
.rgb-share-row .rgb-sh{ border-color:transparent; }
.rgb-sh.is-copy{ width:auto; padding:0 1.1rem 0 .95rem; }

.rgb-author-card{ display:grid; grid-template-columns:8.5rem minmax(0,1fr); gap:1.8rem; align-items:center; margin-top:1.4rem; padding:1.6rem; border-radius:1.6rem; background:var(--stone); }
.rgb-author-card img{ width:8.5rem; height:8.5rem; border-radius:1.2rem; object-fit:cover; }
.rgb-author-card h2{ margin-top:.4rem; font:500 1.9rem/1 var(--display); letter-spacing:-.035em; }
.rgb-author-card p:not(.rgb-k){ margin-top:.7rem; color:var(--mute); font-size:.98rem; line-height:1.6; }
.rgb-author-card .cta-row{ margin-top:1.1rem; }

.rgb-pn{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1.4rem; }
.rgb-pn-i{ display:grid; gap:.35rem; padding:1.1rem 1.3rem; border:1px solid var(--line); border-radius:1.2rem; text-decoration:none; transition:border-color .2s; }
.rgb-pn-i:hover{ border-color:var(--ink); }
.rgb-pn-i small{ display:inline-flex; align-items:center; gap:.35rem; color:var(--mute-2); font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; }
.rgb-pn-i b{ font-weight:500; line-height:1.3; }
.rgb-pn-i.is-next{ grid-column:2; text-align:right; justify-items:end; }

/* ── cards (related + journal) ── */
.rgb-more{ padding:clamp(3.5rem,7vw,6rem) 0; background:var(--stone); }
.rgb-more-h{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:clamp(1.8rem,3vw,2.6rem); }
.rgb-more-h h2.disp{ font-size:clamp(2.2rem,5vw,3.8rem); }
.rgb-all{ display:inline-flex; align-items:center; gap:.45rem; color:var(--sage-deep); font-weight:500; text-decoration:none; }
.rgb-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr)); gap:clamp(1rem,2.2vw,1.8rem); }
.rgb-card{ display:flex; flex-direction:column; border-radius:1.6rem; background:var(--paper); overflow:hidden; text-decoration:none; transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.rgb-grid.is-list .rgb-card{ border:1px solid var(--line); }
@media (hover:hover){ .rgb-card:hover{ transform:translateY(-5px); box-shadow:0 30px 60px -36px rgba(31,37,35,.45); } .rgb-card:hover .rgb-card-ph img{ transform:scale(1.05); } .rgb-card:hover .rgb-go .rgb-i{ transform:translateX(4px); } }
.rgb-card-ph{ margin:0; aspect-ratio:16/10; background:linear-gradient(160deg,var(--stone),#E8DDCF); overflow:hidden; }
.rgb-card-ph img{ width:100%; height:100%; max-width:none; object-fit:cover; transition:transform .9s var(--ease); }
.rgb-card-b{ flex:1; display:flex; flex-direction:column; gap:.7rem; padding:1.3rem 1.4rem 1.5rem; }
.rgb-card-b .rgb-meta{ font-size:.8rem; }
.rgb-card-b h3{ font:500 1.45rem/1.08 var(--display); letter-spacing:-.03em; color:var(--ink); }
.rgb-card-x{ color:var(--mute); font-size:.95rem; line-height:1.55; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.rgb-go{ display:inline-flex; align-items:center; gap:.4rem; margin-top:auto; padding-top:.4rem; color:var(--sage-deep); font-weight:500; font-size:.92rem; }
.rgb-go .rgb-i{ transition:transform .3s var(--ease); }

/* journal */
.rgb-jhero{ display:grid; justify-items:start; gap:1.1rem; padding-top:clamp(2.5rem,7vw,5.5rem); padding-bottom:clamp(2rem,4vw,3rem); }
.rgb-jhero h1.disp{ font-size:clamp(3rem,9vw,7.2rem); }
.rgb-chips{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.6rem; }
.rgb-chips a{ padding:.5rem 1.05rem; border:1px solid var(--line); border-radius:999px; font-size:.9rem; text-decoration:none; color:var(--mute); transition:border-color .2s, color .2s, background-color .2s; }
.rgb-chips a:hover{ border-color:var(--ink); color:var(--ink); }
.rgb-chips a[aria-current]{ background:var(--sage); border-color:var(--sage); color:#fff; }
.rgb-feature{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:stretch; margin-bottom:clamp(1.5rem,3vw,2.4rem); border-radius:2rem; overflow:hidden; background:var(--stone); text-decoration:none; transition:box-shadow .4s var(--ease); }
@media (hover:hover){ .rgb-feature:hover{ box-shadow:0 40px 80px -50px rgba(31,37,35,.55); } .rgb-feature:hover .rgb-feature-ph img{ transform:scale(1.04); } }
.rgb-feature-ph{ position:relative; margin:0; min-height:26rem; background:linear-gradient(160deg,var(--stone),#E8DDCF); overflow:hidden; }
.rgb-feature-ph img{ position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; transition:transform 1s var(--ease); }
.rgb-badge{ position:absolute; top:1.2rem; left:1.2rem; padding:.42rem .85rem; border-radius:999px; background:var(--sun); color:var(--night); font:600 .72rem/1 var(--body); letter-spacing:.16em; text-transform:uppercase; }
.rgb-feature-b{ display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:1.1rem; padding:clamp(1.6rem,4vw,3.5rem); }
.rgb-feature-b h2.disp{ font-size:clamp(2.2rem,4.2vw,3.6rem); color:var(--ink); }
.rgb-feature-x{ color:var(--mute); font-size:1.05rem; line-height:1.6; }
.rgb-feature-b .btn{ margin-top:.4rem; }
.rgb-grid.is-list{ padding-bottom:clamp(2rem,5vw,4rem); }
.rgb-pages{ display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem; padding-bottom:clamp(4rem,8vw,6rem); }
.rgb-pages .page-numbers{ display:inline-flex; align-items:center; justify-content:center; min-width:2.8rem; height:2.8rem; padding:0 1rem; border:1px solid var(--line); border-radius:999px; text-decoration:none; color:var(--ink); font-size:.92rem; }
.rgb-pages .page-numbers.current{ background:var(--ink); border-color:var(--ink); color:#fff; }
.rgb-pages a.page-numbers:hover{ border-color:var(--ink); }
.rgb-empty{ display:grid; justify-items:center; gap:1rem; padding:4rem 1.5rem 6rem; text-align:center; }
.rgb-empty h2{ font:500 2.2rem/1 var(--display); letter-spacing:-.035em; }
.rgb-empty p{ color:var(--mute); }

/* mobile share button + sheet + toast */
.rgb-fab{ display:none; }
.rgb-sheet{ position:fixed; inset:0; z-index:60; display:grid; align-items:end; background:rgba(14,13,12,.45); }
.rgb-sheet[hidden]{ display:none; }
.rgb-sheet-box{ display:grid; gap:1rem; width:min(32rem,100%); margin:0 auto; padding:1.6rem 1.4rem calc(env(safe-area-inset-bottom,0px) + 1.4rem); border-radius:1.8rem 1.8rem 0 0; background:var(--paper); animation:rgb-up .35s var(--ease); }
@keyframes rgb-up{ from{ transform:translateY(40px); opacity:0; } }
.rgb-sheet-t{ font:500 1.25rem/1.2 var(--display); letter-spacing:-.02em; }
.rgb-sheet-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem; }
.rgb-sheet-i{ display:grid; justify-items:center; gap:.45rem; padding:.9rem .4rem; border:0; border-radius:1.1rem; background:var(--stone); color:var(--ink); font:500 .82rem var(--body); text-decoration:none; cursor:pointer; }
.rgb-sheet-i span{ display:grid; place-items:center; width:2.8rem; height:2.8rem; border-radius:50%; background:var(--paper); }
.rgb-sheet-i.is-whatsapp span{ color:#25D366; } .rgb-sheet-i.is-facebook span{ color:#1877F2; } .rgb-sheet-i.is-linkedin span{ color:#0A66C2; }
.rgb-sheet-x{ width:100%; }
.rgb-toast{ position:fixed; z-index:70; left:50%; bottom:1.6rem; transform:translate(-50%,20px); padding:.8rem 1.3rem; border-radius:999px; background:var(--ink); color:#fff; font-size:.92rem; opacity:0; pointer-events:none; transition:opacity .25s, transform .3s var(--ease); }
.rgb-toast.is-on{ opacity:1; transform:translate(-50%,0); }

@media (max-width:1100px){
  .rgb-layout{ grid-template-columns:3.5rem minmax(0,42rem); justify-content:start; }
  .rgb-toc{ display:none !important; }
}
@media (max-width:860px){
  .rgb-feature{ grid-template-columns:minmax(0,1fr); }
  .rgb-feature-ph{ min-height:0; aspect-ratio:16/10; }
}
@media (max-width:760px){
  .rgb-layout{ grid-template-columns:minmax(0,1fr); padding-top:2rem; }
  .rgb-rail{ display:none; }
  .rgb-cover-in{ aspect-ratio:4/3.4; border-radius:1.4rem; }
  .rgb-author-card{ grid-template-columns:minmax(0,1fr); }
  .rgb-author-card img{ width:5rem; height:5rem; border-radius:50%; }
  .rgb-pn{ grid-template-columns:minmax(0,1fr); }
  .rgb-pn-i.is-next{ grid-column:1; }
  .rgb-share-end{ padding:1.4rem; }
  .rgb-fab{ position:fixed; z-index:35; right:1rem; bottom:calc(env(safe-area-inset-bottom,0px) + 1rem); display:grid; place-items:center; width:3.4rem; height:3.4rem; border:0; border-radius:50%; background:var(--ink); color:#fff; box-shadow:0 14px 30px -12px rgba(0,0,0,.45); cursor:pointer; transform:translateY(140%); transition:transform .45s var(--ease); }
  .rgb-fab.is-on{ transform:none; }
  .rgb-fab .rgb-i{ position:relative; }
  .rgb-fab-ring{ position:absolute; inset:-3px; width:calc(100% + 6px); height:calc(100% + 6px); transform:rotate(-90deg); fill:none; stroke-width:3; }
  .rgb-fab-ring circle:first-child{ stroke:rgba(255,255,255,.12); }
  .rgb-fab-ring circle:last-child{ stroke:var(--sun); stroke-linecap:round; stroke-dasharray:125.7; stroke-dashoffset:calc(125.7 * (1 - var(--read,0))); }
}
@media (prefers-reduced-motion:reduce){
  .rgb-cover-in img{ transform:none !important; }
  .rgb-prose .is-reveal{ opacity:1; transform:none; }
}