/*
 * Arzinja — Instagram style stories
 *
 * Standalone stylesheet. The theme's style.css is a webpack/Tailwind build
 * artifact and cannot be regenerated here, so this file uses its own class
 * names and plain CSS only. Written RTL first, works in LTR too.
 */

.arz-stories,
.arz-stories *,
.arz-story-viewer,
.arz-story-viewer * {
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Reset against the surrounding article styles.

   The row is normally output by a shortcode inside .entry-content, whose
   typography rules then apply to this markup. Two of them broke the circles:

     .entry-content img { margin: 1.5rem 0; border-radius: .5rem }
     .entry-content ul  { list-style: disc; padding-right: 16px; margin: 0 25px 10px 0 }

   The 24px top margin pushed each cover down inside its circle, leaving a
   white gap above and clipping the photo into a crescent below. Declaring the
   properties here is what neutralises them — leaving a property undeclared
   means the theme rule wins by default. Selectors are doubled up so this holds
   even if a minifier reorders the stylesheets.
   -------------------------------------------------------------------------- */

.arz-stories .arz-stories__track,
.arz-stories .arz-stories__item {
    margin: 0;
    padding: 0;
    list-style: none;
}

.arz-stories .arz-stories__track {
    /* restored after the reset above */
    padding: 4px 2px 6px;
}

.arz-stories .arz-stories__avatar img,
.arz-stories .arz-stories__button img {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    max-width: none;
    box-shadow: none;
    float: none;
    /* Otherwise the browser starts its own image drag mid-swipe. */
    -webkit-user-drag: none;
    user-select: none;
}

/* ==========================================================================
   1. The circle row
   ========================================================================== */

.arz-stories {
    /* The template supplies --arz-story-size-desktop / --arz-story-size-mobile;
       the resolved --arz-story-size is chosen here so the media query below can
       win. Setting it inline would outrank any stylesheet rule. */
    --arz-story-size-desktop: 96px;
    --arz-story-size-mobile: 72px;
    --arz-story-size: var(--arz-story-size-desktop, 96px);
    --arz-story-gap: 16px;
    --arz-story-ring: #e1306c;
    --arz-story-ring-seen: #d8d8d8;
    --arz-story-ring-width: 3px;
    --arz-story-ring-gap: 3px;

    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    margin-block: 8px;
    font-family: inherit;
}

.arz-stories__track {
    display: flex;
    align-items: flex-start;
    gap: var(--arz-story-gap);
    margin: 0;
    padding: 4px 2px 6px;
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.arz-stories__track::-webkit-scrollbar {
    display: none;
}

.arz-stories--align-center .arz-stories__track {
    justify-content: center;
}

.arz-stories--align-end .arz-stories__track {
    justify-content: flex-end;
}

/* When the row overflows, centring would clip the first item. */
.arz-stories--overflowing .arz-stories__track {
    justify-content: flex-start;
    cursor: grab;
}

/* Note there is deliberately no padding here to make room for the arrows. It
   would indent the circles from the container edge while every neighbouring
   section — the slider cards above, the tab box below — starts flush against
   it, and the row reads as misaligned. The arrows are moved out of the way
   instead, further down. */

.arz-stories--dragging .arz-stories__track {
    cursor: grabbing;
    scroll-behavior: auto;
    scroll-snap-type: none;
}

/* No text selection while dragging the row. */
.arz-stories--dragging,
.arz-stories--dragging * {
    user-select: none;
}

.arz-stories__item {
    flex: 0 0 auto;
    scroll-snap-align: start;
    margin: 0;
    padding: 0;
    list-style: none;
}

.arz-stories__button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: var(--arz-story-size);
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.arz-stories__button:focus-visible {
    outline: 2px solid var(--arz-story-ring);
    outline-offset: 4px;
    border-radius: 12px;
}

.arz-stories__ring {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--arz-story-size);
    height: var(--arz-story-size);
    padding: var(--arz-story-ring-width);
    border-radius: 50%;
    transition: transform 0.18s ease;
}

.arz-stories__button:hover .arz-stories__ring {
    transform: scale(1.04);
}

.arz-stories__button:active .arz-stories__ring {
    transform: scale(0.97);
}

/* Ring styles ------------------------------------------------------------ */

.arz-stories--ring-gradient .arz-stories__ring {
    background: conic-gradient(
        from 180deg,
        #f9ce34 0deg,
        #ee2a7b 120deg,
        #6228d7 240deg,
        #f9ce34 360deg
    );
}

.arz-stories--ring-solid .arz-stories__ring {
    background: var(--arz-story-ring);
}

.arz-stories--ring-none .arz-stories__ring {
    background: transparent;
    padding: 0;
}

/* A story or category with its own colour beats the gradient. */
.arz-stories__item--custom-ring .arz-stories__ring {
    background: var(--arz-story-ring);
}

/* Seen state wins over everything, including a custom colour. */
.arz-stories__item--seen .arz-stories__ring,
.arz-stories__item--seen.arz-stories__item--custom-ring .arz-stories__ring {
    background: var(--arz-story-ring-seen);
}

.arz-stories__avatar {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: var(--arz-story-ring-gap);
    border-radius: 50%;
    background: #fff;
    overflow: hidden;
}

.arz-stories--ring-none .arz-stories__avatar {
    padding: 0;
}

.arz-stories__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: #f1f1f1;
}

.arz-stories__avatar-fallback {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, #ee2a7b, #6228d7);
    color: #fff;
    font-size: calc(var(--arz-story-size) / 2.6);
    font-weight: 700;
}

.arz-stories__caption {
    display: -webkit-box;
    width: 100%;
    max-width: calc(var(--arz-story-size) + 8px);
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #262626;
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
    word-break: break-word;
}

/* Row arrows ------------------------------------------------------------- */

.arz-stories__nav {
    position: absolute;
    top: calc(var(--arz-story-size) / 2 + 4px);
    z-index: 2;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    transform: translateY(-50%);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
    color: #262626;
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.arz-stories__nav svg {
    width: 18px;
    height: 18px;
}

/* Sitting on the row's own edge, an arrow covers part of the outermost circle.
   That is the safe default: a row written into an article has no idea how much
   room is outside it. The homepage band below has measured room and opts out. */
.arz-stories__nav--prev {
    inset-inline-start: 0;
}

.arz-stories__nav--next {
    inset-inline-end: 0;
}

/* On the homepage the row spans the full container, so the circles line up with
   the cards above and the tab box below, and the arrows move into the page
   margin beside it. No ancestor clips overflow, so the only limit is the margin
   itself: the container runs nearly full bleed up to ~1024px, leaving 32px on
   the scrollbar side — a 34px button at -40px hangs off the viewport there.
   Measured, -40px first clears at 1060px with 2px to spare and at 1100px with
   22px, so 1100px is the breakpoint. Narrower than that the arrows stay on the
   row and overlap the outermost circle, as a phone carousel does anyway. */
@media (min-width: 1100px) {
    .arz-stories-band .arz-stories__nav--prev {
        inset-inline-start: -40px;
    }

    .arz-stories-band .arz-stories__nav--next {
        inset-inline-end: -40px;
    }
}

/* Both arrows stay on screen while the row scrolls, and both keep the same
   chrome throughout. The end-of-travel one used to fade to 0.35 opacity, which
   took the chevron with it — against the page background that reads as a blank
   white disc rather than a spent button. The state is now behavioural only:
   the class stops the click and marks the button for assistive tech, and the
   cursor is the one cue that does not change how the button looks. */
.arz-stories__nav--disabled {
    cursor: default;
}

.arz-stories__nav--disabled:hover {
    transform: translateY(-50%);
}

/* Both buttons carry the exact same chevron in the markup — one shape, pointing
   towards the inline start — and only its rotation differs. The two used to
   carry mirror-image paths that were then flipped again by a single
   `[dir=rtl] … { transform: scaleX(-1) }`, so which way an arrow ended up
   pointing depended on two rules agreeing with each other. Rotating one known
   glyph per button per direction leaves nothing to disagree about, and 180° of
   a chevron that is symmetric about its horizontal axis draws the same pixels
   as a mirror would. */
.arz-stories__nav--next svg {
    transform: rotate(180deg);
}

[dir='rtl'] .arz-stories__nav--prev svg {
    transform: rotate(180deg);
}

[dir='rtl'] .arz-stories__nav--next svg {
    transform: none;
}

.arz-stories__nav:hover {
    transform: translateY(-50%) scale(1.08);
}

.arz-stories__nav[hidden] {
    display: none;
}

@media (max-width: 767px) {
    .arz-stories {
        --arz-story-size: var(--arz-story-size-mobile, 72px);
    }

    /* The arrows used to be hidden here on the assumption that touch scrolling
       is enough. It is not the only input at this width — narrow desktop
       windows land in the same media query — and the row gives no hint that it
       scrolls without them. Kept, just smaller. */
    .arz-stories__nav {
        width: 28px;
        height: 28px;
    }

    .arz-stories__nav svg {
        width: 15px;
        height: 15px;
    }

    .arz-stories .arz-stories__track {
        padding-inline: 2px;
    }
}

/* ==========================================================================
   2. The viewer
   ========================================================================== */

.arz-story-viewer {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1c1c1c;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    font-family: inherit;
}

.arz-story-viewer--open {
    opacity: 1;
    visibility: visible;
}

body.arz-story-lock {
    overflow: hidden;
}

.arz-story-viewer__close {
    position: absolute;
    inset-block-start: 16px;
    inset-inline-start: 16px;
    z-index: 10;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease;
}

.arz-story-viewer__close:hover {
    background: rgba(255, 255, 255, 0.26);
}

.arz-story-viewer__close svg {
    width: 22px;
    height: 22px;
}

/* Stage ------------------------------------------------------------------ */

.arz-story-viewer__stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    gap: clamp(12px, 4vw, 64px);
}

.arz-story-card {
    position: relative;
    flex: 0 0 auto;
    aspect-ratio: 9 / 16;
    height: min(92vh, 900px);
    max-width: 92vw;
    border-radius: 10px;
    background: #000;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

/* The shrunken neighbours on both sides. */
.arz-story-card--peek {
    height: min(58vh, 560px);
    opacity: 0.55;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.arz-story-card--peek:hover {
    opacity: 0.8;
}

.arz-story-card--peek .arz-story-card__ui {
    display: none;
}

.arz-story-viewer--no-peek .arz-story-card--peek {
    display: none;
}

.arz-story-card__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Blurred copy of the slide, so a landscape image never sits on bare black. */
.arz-story-card__backdrop {
    position: absolute;
    inset: -8%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: blur(26px) brightness(0.5) saturate(1.2);
    transform: scale(1.06);
    pointer-events: none;
}

.arz-story-card__media img,
.arz-story-card__media video {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    /* contain, not cover: a 1200x630 image inside a 9:16 frame lost ~78% of its
       width to cropping. The backdrop above fills the leftover space. */
    object-fit: contain;
    background: transparent;
}

/* Peek cards are decorative thumbnails, so cropping them is fine. */
.arz-story-card--peek .arz-story-card__media img {
    object-fit: cover;
}

.arz-story-card__spinner {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.arz-story-card__spinner::after {
    content: '';
    width: 34px;
    height: 34px;
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: arz-story-spin 0.8s linear infinite;
}

.arz-story-card:not(.is-loading) .arz-story-card__spinner {
    display: none;
}

@keyframes arz-story-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Progress bars ---------------------------------------------------------- */

.arz-story-card__progress {
    position: absolute;
    inset-block-start: 10px;
    inset-inline: 10px;
    z-index: 4;
    display: flex;
    gap: 4px;
}

.arz-story-card__progress-item {
    position: relative;
    flex: 1 1 0;
    height: 3px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.35);
    overflow: hidden;
}

.arz-story-card__progress-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 3px;
    background: #fff;
}

.arz-story-card__progress-item--done .arz-story-card__progress-fill {
    width: 100%;
}

/* Header ----------------------------------------------------------------- */

.arz-story-card__header {
    position: absolute;
    inset-block-start: 24px;
    inset-inline: 12px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-block-start: 6px;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.arz-story-card__avatar {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.15);
}

.arz-story-card__title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: 14px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.arz-story-card__tools {
    display: flex;
    align-items: center;
    gap: 4px;
}

.arz-story-card__tool {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease;
}

.arz-story-card__tool:hover {
    background: rgba(255, 255, 255, 0.18);
}

.arz-story-card__tool svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Tap zones -------------------------------------------------------------- */

.arz-story-card__zones {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
}

.arz-story-card__zone {
    flex: 1 1 50%;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Caption and CTA -------------------------------------------------------- */

.arz-story-card__body {
    position: absolute;
    inset-inline: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 18px;
    color: #fff;
    pointer-events: none;
}

.arz-story-card__body > * {
    pointer-events: auto;
}

.arz-story-card__body--bottom {
    inset-block-end: 0;
    padding-block-end: 88px;
}

.arz-story-card__body--middle {
    inset-block-start: 50%;
    transform: translateY(-50%);
}

.arz-story-card__body--top {
    inset-block-start: 76px;
}

.arz-story-card__body--overlay.arz-story-card__body--bottom {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 30%, rgba(0, 0, 0, 0));
}

.arz-story-card__body--overlay.arz-story-card__body--top {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
}

.arz-story-card__body--overlay.arz-story-card__body--middle {
    background: rgba(0, 0, 0, 0.42);
    border-radius: 12px;
    margin-inline: 14px;
}

.arz-story-card__headline {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.5;
}

.arz-story-card__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.9;
    opacity: 0.94;
}

.arz-story-card__cta {
    /* Centred rather than flex-start: in RTL flex-start pinned the button to the
       right edge, which read as misaligned under the centred slide artwork. */
    align-self: center;
    margin-block-start: 8px;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.arz-story-card__cta:hover {
    transform: translateY(-1px);
    opacity: 0.92;
}

.arz-story-card__cta--primary {
    background: #21c17a;
    color: #fff;
}

.arz-story-card__cta--light {
    background: #fff;
    color: #17181a;
}

.arz-story-card__cta--ghost {
    border-color: rgba(255, 255, 255, 0.85);
    background: transparent;
    color: #fff;
}

/* Action bar ------------------------------------------------------------- */

.arz-story-card__actions {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

.arz-story-card__actions-row {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.arz-story-card__comment-form {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 4px 4px 4px 4px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
}

.arz-story-card__comment-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 12px;
    border: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 13px;
    outline: none;
}

.arz-story-card__comment-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.arz-story-card__comment-meta {
    display: flex;
    gap: 6px;
    width: 100%;
    /* Keep the identity fields visually secondary to the comment box. */
    max-width: 340px;
}

.arz-story-card__comment-meta input {
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font: inherit;
    font-size: 12px;
    outline: none;
}

.arz-story-card__comment-send {
    flex: 0 0 auto;
    padding: 8px 14px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: #17181a;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.arz-story-card__comment-send:disabled {
    opacity: 0.55;
    cursor: default;
}

.arz-story-card__like {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.arz-story-card__like svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.arz-story-card__like--active {
    color: #ff3040;
}

.arz-story-card__like--active svg {
    fill: currentColor;
}

.arz-story-card__like:active {
    transform: scale(0.86);
}

.arz-story-card__like-count {
    position: absolute;
    inset-block-end: 2px;
    inset-inline-end: 2px;
    padding: 0 4px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.55);
    font-size: 10px;
    line-height: 14px;
}

.arz-story-card__comments-toggle {
    position: relative;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
}

.arz-story-card__comments-toggle svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

/* Comment sheet ---------------------------------------------------------- */

.arz-story-card__sheet {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 6;
    max-height: 62%;
    padding: 14px 16px 16px;
    border-radius: 14px 14px 0 0;
    background: rgba(20, 20, 20, 0.96);
    color: #fff;
    transform: translateY(101%);
    transition: transform 0.25s ease;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.arz-story-card__sheet--open {
    transform: translateY(0);
}

.arz-story-card__sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end: 10px;
    font-size: 13px;
    font-weight: 700;
}

.arz-story-card__sheet-close {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.arz-story-comment {
    display: flex;
    gap: 8px;
    padding-block: 8px;
    border-block-start: 1px solid rgba(255, 255, 255, 0.08);
}

.arz-story-comment:first-of-type {
    border-block-start: 0;
}

.arz-story-comment__avatar {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.12);
}

.arz-story-comment__body {
    flex: 1 1 auto;
    min-width: 0;
}

.arz-story-comment__author {
    font-size: 12px;
    font-weight: 700;
}

.arz-story-comment__date {
    margin-inline-start: 6px;
    font-size: 11px;
    font-weight: 400;
    opacity: 0.6;
}

.arz-story-comment__text {
    margin: 2px 0 0;
    font-size: 13px;
    line-height: 1.8;
    word-break: break-word;
    opacity: 0.92;
}

.arz-story-card__sheet-empty,
.arz-story-card__notice {
    padding-block: 10px;
    font-size: 12px;
    line-height: 1.8;
    opacity: 0.75;
}

.arz-story-card__notice {
    padding-inline: 4px;
    color: #ffd479;
}

.arz-story-card__notice--ok {
    color: #7ce2b0;
}

/* Viewer arrows ---------------------------------------------------------- */

.arz-story-viewer__nav {
    position: absolute;
    /* Centred on the viewport, which is also the card's centre line. */
    inset-block-start: 50%;
    translate: 0 -50%;
    z-index: 8;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.32);
    color: #fff;
    cursor: pointer;
    /* translate is a separate property above, so transform is free for hover. */
    transition: transform 0.15s ease, background 0.15s ease;
}

.arz-story-viewer__nav:hover {
    transform: scale(1.08);
    background: rgba(255, 255, 255, 0.24);
}

.arz-story-viewer__nav svg {
    width: 20px;
    height: 20px;
}

[dir='rtl'] .arz-story-viewer__nav svg {
    transform: scaleX(-1);
}

.arz-story-viewer__nav--prev {
    inset-inline-start: max(12px, 3vw);
}

.arz-story-viewer__nav--next {
    inset-inline-end: max(12px, 3vw);
}

.arz-story-viewer__nav[hidden] {
    display: none;
}

/* Small screens ---------------------------------------------------------- */

@media (max-width: 900px) {
    .arz-story-viewer--no-peek-mobile .arz-story-card--peek,
    .arz-story-card--peek {
        display: none;
    }

    .arz-story-card {
        height: 100%;
        max-width: 100%;
        width: 100%;
        border-radius: 0;
        aspect-ratio: auto;
    }

    .arz-story-viewer__nav {
        display: none;
    }

    .arz-story-viewer__close {
        inset-block-start: 10px;
        inset-inline-start: 10px;
        width: 38px;
        height: 38px;
        background: rgba(0, 0, 0, 0.35);
    }
}

@media (prefers-reduced-motion: reduce) {
    .arz-stories__track {
        scroll-behavior: auto;
    }

    .arz-story-viewer,
    .arz-story-card__sheet,
    .arz-stories__ring {
        transition: none;
    }
}