/* Homepage story rail; the viewer has its own isolated stylesheet. */
.sirbal-stories { --rail-accent:var(--story-accent,var(--sirbal-color-petrol,#0b3f50)); --rail-ink:var(--story-ink,var(--sirbal-color-ink,#10222b)); --rail-line:var(--sirbal-color-line,#10222b1f); margin-block:clamp(28px,4vw,48px); padding:clamp(16px,2.5vw,28px); color:var(--rail-ink); background:var(--story-surface,var(--sirbal-color-surface,#fff)); border:1px solid var(--rail-line); border-radius:var(--sirbal-radius-lg,22px); box-shadow:var(--sirbal-shadow-sm,0 6px 20px #10222b12); }
.sirbal-stories__header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; padding-inline-start:16px; border-inline-start:3px solid var(--rail-accent); }
.sirbal-stories__eyebrow { display:block; color:var(--rail-accent); font-size:11px; font-weight:600; line-height:1.8; }
.sirbal-stories__header h2 { margin:4px 0 0; color:var(--rail-ink); font-size:clamp(22px,2.5vw,28px); line-height:1.6; font-weight:800; }
.sirbal-stories__header p { margin:0; color:var(--rail-ink); font-size:12px; line-height:1.9; }
.sirbal-stories__rail { display:flex; gap:20px; overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:x proximity; padding:6px 4px 12px; margin:0; list-style:none; scrollbar-width:thin; scrollbar-color:var(--sirbal-color-gold,#c9a96e) transparent; }
.sirbal-stories__item { display:flex; flex-direction:column; flex:0 0 var(--story-card-size,180px); min-width:0; scroll-snap-align:start; }
.sirbal-stories__cover { display:grid; gap:12px; text-decoration:none; color:var(--rail-ink); }
.sirbal-stories__portrait { position:relative; display:block; overflow:hidden; aspect-ratio:3/4; border:1px solid var(--rail-line); border-radius:var(--sirbal-radius-md,16px); padding:4px; background:var(--sirbal-color-canvas,#f7f8f7); transition:transform 180ms var(--sirbal-ease-out),border-color 180ms; }
.sirbal-stories--circle .sirbal-stories__portrait { aspect-ratio:1; border-radius:50%; border-color:var(--rail-accent); }
.sirbal-stories--circle .sirbal-stories__portrait img { border-radius:50%; }
.sirbal-stories--circle .sirbal-stories__badge { inset:auto 50% 10px auto; transform:translateX(50%); }
.sirbal-stories__portrait img { display:block; width:100%; height:100%; object-fit:cover; border-radius:12px; background:var(--sirbal-color-canvas,#f7f8f7); }
.sirbal-stories__portrait img:not([src]) { visibility:hidden; }
.sirbal-stories__portrait noscript img { position:absolute; inset:4px; width:calc(100% - 8px); height:calc(100% - 8px); }
.sirbal-stories__badge { position:absolute; inset:auto 12px 12px auto; display:grid; place-items:center; width:32px; height:32px; background:var(--rail-accent); color:#fff; border:1px solid var(--sirbal-color-gold,#c9a96e); border-radius:50%; box-shadow:0 2px 8px #10222b26; }
.sirbal-stories__badge svg { display:block; }
.sirbal-stories__cover > strong { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:42px; color:var(--rail-ink); font-size:12px; font-weight:650; line-height:1.75; text-align:center; }
.sirbal-stories__direct { display:flex; align-items:center; justify-content:center; gap:8px; align-self:center; min-height:44px; margin-top:4px; padding:6px 12px; border:1px solid var(--rail-line); border-radius:var(--sirbal-radius-sm,10px); color:var(--rail-accent)!important; font-size:11px; font-weight:650; line-height:1.7; text-decoration:none; transition:border-color 180ms; }
.sirbal-stories__direct::after { content:''; width:6px; height:6px; border:solid currentColor; border-width:0 0 1.5px 1.5px; transform:rotate(45deg); }
.sirbal-stories :is(a,button):focus-visible { outline:3px solid var(--sirbal-color-gold,#c9a96e); outline-offset:3px; }
.sirbal-stories button { touch-action:manipulation; user-select:none; -webkit-tap-highlight-color:transparent; }
.sirbal-stories__sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
html.sirbal-story-open { overflow:hidden; }
html.sirbal-story-open .sirbal-home-v2__leaves i { animation-play-state:paused; }
@media (hover:hover) and (pointer:fine) { .sirbal-stories__cover:hover .sirbal-stories__portrait { transform:translateY(-3px); border-color:var(--rail-accent); } .sirbal-stories__direct:hover { border-color:var(--rail-accent); } }
@media (max-width:600px) {
	.sirbal-stories__header { align-items:start; flex-direction:column; gap:8px; margin-bottom:16px; padding-inline-start:12px; }
	.sirbal-stories__item { flex-basis:min(128px,var(--story-card-size,180px)); }
	.sirbal-stories__rail { gap:12px; }
	.sirbal-stories__cover { gap:8px; }
	.sirbal-stories__cover > strong { font-size:11px; }
}
/* Minimal story strip: retain the expanded preset for editor customization. */
.sirbal-stories--compact { margin-block:24px 32px; padding:0; border:0; border-radius:0; box-shadow:none; background:var(--story-surface,transparent); }
.sirbal-stories--compact .sirbal-stories__header { margin-bottom:12px; padding:0; border:0; }
.sirbal-stories--compact .sirbal-stories__header h2 { margin:0; font-size:15px; font-weight:650; }
.sirbal-stories--compact :is(.sirbal-stories__eyebrow,.sirbal-stories__header p,.sirbal-stories__badge,.sirbal-stories__direct) { display:none; }
.sirbal-stories--compact .sirbal-stories__rail { gap:20px; padding:4px 4px 8px; scrollbar-width:none; }
.sirbal-stories--compact .sirbal-stories__rail::-webkit-scrollbar { display:none; }
.sirbal-stories--compact .sirbal-stories__item { flex-basis:80px; }
.sirbal-stories--compact .sirbal-stories__cover { gap:6px; }
.sirbal-stories--compact .sirbal-stories__portrait { aspect-ratio:1; padding:3px; border:1.5px solid var(--rail-accent); border-radius:50%; background:transparent; }
.sirbal-stories--compact .sirbal-stories__portrait img { border-radius:50%; }
.sirbal-stories--compact .sirbal-stories__cover > strong { display:block; min-height:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:11px; font-weight:500; line-height:1.8; }
@media (max-width:600px) {
	.sirbal-stories--compact .sirbal-stories__rail { gap:12px; }
	.sirbal-stories--compact .sirbal-stories__item { flex-basis:68px; }
	.sirbal-stories--compact .sirbal-stories__cover > strong { font-size:10px; }
}
@media (prefers-reduced-motion:reduce) { .sirbal-stories *, .sirbal-stories *::before, .sirbal-stories *::after { transition:none!important; animation:none!important; scroll-behavior:auto!important; } }