/* Ring gradient adapted from aisyahnrlh's CodePen; see journal-stories-reference-LICENSE.txt. */
.journal-highlights-header { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:16px; margin-bottom:14px; }
.journal-highlights-header .journal-topics { min-width:0; margin-bottom:0; }
.journal-stories { display:flex; gap:18px; }
.journal-stories[hidden] { display:none; }
.journal-story { display:flex; flex-direction:column; align-items:center; gap:7px; padding:0; border:0; background:none; color:var(--text-1); font:500 12px/1.4 var(--font-primary); cursor:pointer; }
.journal-story-ring { display:block; width:80px; height:80px; border-radius:50%; padding:3px; background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%); transition:transform .2s ease; }
.journal-story img { display:block; width:100%; height:100%; border:3px solid var(--surface-1); border-radius:50%; object-fit:cover; }
.journal-story[data-seen='true'] .journal-story-ring { background:#85858f; }
.journal-story:hover .journal-story-ring { transform:translateY(-2px); }
.journal-story:focus-visible { outline:2px solid var(--accent-secondary); outline-offset:5px; border-radius:8px; }
html.story-open { overflow:hidden; }
.story-viewer { padding:16px 32px; border:0; margin:auto; width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; background:#151517; color:#fff; overflow:hidden; box-sizing:border-box; }
.story-viewer[open] { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:72px; }
.story-viewer::backdrop { background:rgba(0,0,0,.8); }
.story-panel { position:relative; height:min(calc(100dvh - 32px),calc((100vw - 360px) * 16 / 9)); aspect-ratio:9 / 16; max-width:100%; isolation:isolate; border:1px solid #33333c; border-radius:14px; }
.story-panel .story-media { border-radius:13px; }
.story-panel .story-top { border-radius:13px 13px 0 0; }
.story-panel .story-caption { border-radius:0 0 13px 13px; }
.story-viewer > .story-close { position:absolute; z-index:5; top:12px; right:12px; }
.story-viewer > .story-close { width:56px; height:56px; }
.story-viewer > .story-close svg { width:34px; height:34px; }
.story-panel > :is(.story-previous,.story-next) { position:absolute; z-index:3; top:calc(50% - 22px); }
.story-panel > :is(.story-previous,.story-next) { color:#a6a6b0; transition:color .18s ease,filter .18s ease,transform .18s ease; }
.story-panel > :is(.story-previous,.story-next):is(:hover,:focus-visible) { color:#fff; opacity:1; filter:drop-shadow(0 0 6px #fff9); transform:scale(1.15); }
.story-panel > .story-previous { left:-48px; }
.story-panel > .story-next { right:-48px; }
.story-preview { position:relative; justify-self:center; width:min(100%,260px); aspect-ratio:9 / 16; padding:0; border:0; border-radius:12px; overflow:hidden; background:#242427; color:#fff; cursor:pointer; transition:transform .2s ease,filter .2s ease; }
.story-preview-previous { justify-self:end; }
.story-preview-next { justify-self:start; }
.story-preview-media { display:block; width:100%; height:100%; object-fit:cover; filter:brightness(.55); }
.story-preview-label { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; font:600 14px/1.4 var(--font-primary); text-shadow:0 2px 6px #000; }
.story-preview-label img { width:60px; height:60px; border-radius:50%; padding:3px; background:linear-gradient(35deg,#fdf497,#fd5949,#d6249f,#285aeb); object-fit:cover; }
.story-preview:hover { transform:scale(1.035); filter:brightness(1.2); }
.story-preview:focus-visible { outline:2px solid #a99aff; outline-offset:5px; }
.story-top { position:absolute; inset:0 0 auto; z-index:2; padding:14px 14px 28px; background:linear-gradient(#0009,transparent); }
.story-progress { display:flex; gap:4px; height:3px; flex-shrink:0; }
.story-progress > span { flex:1; overflow:hidden; border-radius:3px; background:#55555e; }
.story-progress i { display:block; width:100%; height:100%; background:#fff; transform:scaleX(0); transform-origin:left; }
.story-heading { display:flex; align-items:center; gap:0; margin-top:7px; }
.story-author { display:flex; align-items:center; gap:8px; flex:1; min-width:0; color:#fff; font:600 12px/1.3 var(--font-primary); text-shadow:0 1px 4px #000; }
.story-author img { width:28px; height:28px; border-radius:50%; object-fit:cover; }
.story-control { flex-shrink:0; display:grid; place-items:center; width:44px; height:44px; padding:10px; border:0; border-radius:6px; color:#fff; background:transparent; cursor:pointer; transition:opacity .18s ease,transform .18s ease; filter:drop-shadow(0 1px 3px #0008); }
.story-control svg { width:22px; height:22px; }
.story-control:hover { color:#fff; transform:scale(1.08); opacity:.8; }
.story-control:active { transform:scale(.94); }
.story-control:focus-visible { outline:2px solid #a99aff; outline-offset:2px; }
.story-media { position:absolute; inset:0; display:grid; place-items:center; background:#09090c center/cover no-repeat; overflow:hidden; touch-action:pan-y; }
.story-media::before { content:''; position:absolute; inset:-18px; background:inherit; filter:blur(16px) brightness(.55); }
.story-media img,.story-media video { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
/* Wide screen recordings remain readable, with their poster filling the canvas. */
.story-media video { object-fit:contain; }
.story-viewer [hidden] { display:none !important; }
.story-media .story-control { position:absolute; z-index:1; top:calc(50% - 22px); opacity:1; }
.story-media:hover .story-control,.story-media .story-control:focus-visible { opacity:1; }
.story-previous { left:6px; }
.story-next { right:6px; }
.story-caption { position:absolute; z-index:2; inset:auto 0 0; color:#fff; font:14px/1.5 var(--font-primary); margin:0; padding:44px 20px 24px; background:linear-gradient(transparent,#000a); text-shadow:0 1px 4px #000; pointer-events:none; }
@media(max-width:900px) {
  .story-viewer { padding:12px; }
  .story-viewer[open] { display:block; }
  .story-panel { height:calc(100% - 44px); width:min(calc(100% - 48px),calc((100dvh - 68px) * 9 / 16)); margin:44px auto 0; }
  .story-panel > .story-previous { left:-36px; width:32px; padding:5px; }
  .story-panel > .story-next { right:-36px; width:32px; padding:5px; }
  .story-preview { display:none; }
  .journal-highlights-header { grid-template-columns:minmax(0,1fr); gap:12px; }
  .journal-stories { justify-content:center; }
}
@media(max-width:480px) {
  .journal-stories { gap:14px; }
  .journal-story-ring { width:72px; height:72px; }
  .journal-reader-topline { align-items:center; gap:14px; }
  .story-top { padding:10px 10px 24px; }
}
@media(prefers-reduced-motion:reduce) {
  .journal-story-ring,.story-control,.story-preview,.story-panel > :is(.story-previous,.story-next) { transition:none; }
  .story-panel > :is(.story-previous,.story-next):is(:hover,:focus-visible) { transform:none; }
}