/* ═══════════════════════════════════════════════════════════════════════════
   THE STORIES PAGE (/stories/, archive-story.php), scoped under .lls.
   Source of truth: Code/stories/. Record: Code/stories/README.md.

   Design law (Code/design-system.md, Code/neon-seam.md):
     - dark, always; the accent is #ef4444; blood red #c41e3a is fill and
       border, never type; no gold anywhere;
     - every number is white (.lls-n);
     - glows are filter: drop-shadow(), never box-shadow;
     - icons are drawn SVG (.lls-ico), never a glyph;
     - Plus Jakarta Sans; display 800 at -0.035em;
     - her colour (--her) only on her own marks.
   The hero is the PAGE HERO SYSTEM's .browse-hero (style.css): nothing here
   restyles it.

   Pictures are shown WHOLE. A card's picture box takes the picture's own
   shape (--ar), so the watermark's bottom-right corner is never cropped, and
   nothing scales a picture inside a clipping box (site-art.md).

   Four designs (site-art.md): phone, portrait tablet, landscape/desktop, wide.
   ═══════════════════════════════════════════════════════════════════════════ */

.lls {
    --lls-max: var(--container-max, 1200px);
    --lls-gut: clamp(16px, 4vw, 32px);
    --lls-gap: clamp(14px, 2vw, 26px);
    --lls-cols: 2;
    display: block;
    padding-bottom: clamp(3rem, 8vw, 6rem);
    color: var(--ll-white, #f0f0f0);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* ---- the small parts ---------------------------------------------------- */

.lls-n {
    color: #fff;
    font-weight: 700;
    font-variant-numeric: lining-nums proportional-nums;
}
.lls-dot {
    display: inline-block;
    width: 3px;
    height: 3px;
    margin: 0 .6em;
    border-radius: 50%;
    background: rgba(255, 255, 255, .34);
    vertical-align: middle;
}
.lls-ico {
    width: 1.1em;
    height: 1.1em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lls-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 46px;
    padding: 0 1.3rem;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font: 700 .8rem/1 'Plus Jakarta Sans', system-ui, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: border-color var(--transition-fast, 150ms ease), background-color var(--transition-fast, 150ms ease);
}
.lls-btn:hover { border-color: rgba(255, 255, 255, .55); color: #fff; }
.lls-btn--go { background: var(--ll-red, #c41e3a); border-color: var(--ll-red, #c41e3a); }
.lls-btn--go:hover { background: var(--ll-red-hover, #d42d4a); border-color: var(--ll-red-hover, #d42d4a); }
.lls a:focus-visible,
.lls button:focus-visible {
    outline: 2px solid #ef4444;
    outline-offset: 3px;
}

/* Her name, after a short rule in her colour: the magazine's own byline (the reader's .op-by). */
.lls-by {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin: 0;
    color: rgba(255, 255, 255, .88);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.lls-by__rule {
    flex: none;
    width: 22px;
    height: 2px;
    background: var(--her, #ef4444);
}
.lls-by a { color: inherit; text-decoration: none; }
.lls-by a:hover {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: var(--her, #ef4444);
    text-underline-offset: 4px;
}
.lls-by--big { font-size: .78rem; }
.lls-by--big .lls-by__rule { width: 30px; }

/* ---- several worlds: a row to jump between them ------------------------- */

.lls-worldnav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    max-width: var(--lls-max);
    margin: 1.5rem auto 0;
    padding: 0 var(--lls-gut);
}
.lls-worldnav__a {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 40px;
    padding: 0 1.1rem;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    color: rgba(255, 255, 255, .85);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
}
.lls-worldnav__a:hover { border-color: rgba(239, 68, 68, .7); color: #fff; }

/* ---- TONIGHT: one story, a new one every night -------------------------- */

.lls-tonight {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.6rem;
    max-width: var(--lls-max);
    margin: clamp(2rem, 6vw, 4.25rem) auto 0;
    padding: 0 var(--lls-gut);
}
.lls-tonight__art {
    position: relative;
    z-index: 0;
    display: block;
    width: min(100%, 420px);
    justify-self: center;
}
/* Her light: a pool of her colour behind the picture, as the newsstand's featured cover stands in red. */
.lls-tonight__art::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 14% -10% -8% -10%;
    border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--her, #c41e3a) 46%, transparent), transparent);
    filter: blur(34px);
    pointer-events: none;
}
.lls-tonight__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    filter: drop-shadow(0 26px 44px rgba(0, 0, 0, .6));
}
.lls-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding: .42rem .9rem .42rem .75rem;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.lls-pill .lls-ico { width: 15px; height: 15px; fill: #ef4444; stroke: none; }
.lls-tonight__title {
    margin: 1.05rem 0 .9rem;
    color: #fff;
    font-size: clamp(2.3rem, 5vw, 3.85rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1;
}
.lls-tonight__title a { color: inherit; text-decoration: none; }
.lls-tonight__title a:hover { color: #fff; }
.lls-tonight__entry {
    max-width: 56ch;
    margin: 1.2rem 0 1rem;
    color: rgba(255, 255, 255, .8);
    font-size: 1.04rem;
    line-height: 1.72;
}
.lls-meta {
    margin: 0;
    color: rgba(255, 255, 255, .6);
    font-size: .86rem;
    line-height: 1.7;
}
.lls-meta a { color: #ef4444; text-decoration: none; }
.lls-meta a:hover { color: #fff; }
.lls-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.6rem;
}

/* ---- A WORLD: its painting, its name, its stories ----------------------- */

.lls-world {
    margin-top: clamp(3.25rem, 8vw, 6rem);
    scroll-margin-top: calc(var(--header-height, 56px) + 8px);
}
.lls-world__band {
    position: relative;
    z-index: 0;
    isolation: isolate;
    overflow: hidden;
    height: clamp(300px, 44vw, 380px);
    background: #080507;
}
.lls-world__art {
    position: absolute;
    z-index: -2;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* A painting under type, at night: the light taken down, never the colour washed out. */
    filter: brightness(.66) saturate(.92) contrast(1.05);
}
/* A painting lit by day (Blackthorn's is a sunny afternoon) on a page that is always night: graded down further, so
   the city reads at dusk. The world's own data says which (lustlit_stories_world_art(), art.tone). */
.lls-world__band--day .lls-world__art { filter: brightness(.52) saturate(.8) contrast(1.1) hue-rotate(-6deg); }
.lls-world__shade {
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
        linear-gradient(to top, #0a0a0a 0%, rgba(10, 10, 10, .88) 17%, rgba(10, 10, 10, .32) 50%, rgba(10, 10, 10, 0) 72%),
        linear-gradient(to right, rgba(8, 5, 7, .86) 0%, rgba(8, 5, 7, .52) 36%, rgba(8, 5, 7, 0) 68%),
        radial-gradient(ellipse 70% 80% at 92% 110%, rgba(122, 6, 30, .44) 0%, transparent 62%),
        linear-gradient(to bottom, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 30%);
    pointer-events: none;
}
.lls-world__band--bare .lls-world__shade { background: var(--ll-hero-bg, #080507); }
.lls-world__text {
    position: absolute;
    right: 0;
    bottom: clamp(1.35rem, 4vw, 2.6rem);
    left: 0;
    max-width: var(--lls-max);
    margin: 0 auto;
    padding: 0 var(--lls-gut);
}
.lls-world__name {
    margin: 0;
    color: #fff;
    font-size: clamp(2.7rem, 8.2vw, 5.6rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: .92;
    text-shadow: 0 2px 34px rgba(0, 0, 0, .6);
}
/* The seam under the world's name (neon-seam.md: the core is #ef4444, the aura is drop-shadow; 84px takes the plain
   aura, which scales to its length). */
.lls-world__name::after {
    content: "";
    display: block;
    width: 84px;
    height: 2px;
    margin-top: .95rem;
    background: var(--ll-neon-line, linear-gradient(90deg, transparent 0%, #ef4444 50%, transparent 100%));
    filter: var(--ll-neon-glow, drop-shadow(0 0 2px rgba(239, 68, 68, 1)) drop-shadow(0 0 6px rgba(239, 68, 68, .7)) drop-shadow(0 0 14px rgba(239, 68, 68, .4)));
}
.lls-world__line {
    max-width: 44ch;
    margin: .95rem 0 0;
    color: rgba(255, 255, 255, .84);
    font-size: clamp(.98rem, 1.6vw, 1.1rem);
    line-height: 1.6;
    text-shadow: 0 1px 18px rgba(0, 0, 0, .75);
}
.lls-world__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem 0;
    margin: 1rem 0 0;
    color: rgba(255, 255, 255, .7);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.lls-world__meta .lls-n { margin-right: .15em; font-size: 1rem; letter-spacing: 0; }
.lls-world__go {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-left: 1.4rem;
    color: #ef4444;
    text-decoration: none;
}
.lls-world__go:hover { color: #fff; }

/* ---- her row: choose her (only once someone has more than one story) ---- */

.lls-women {
    display: flex;
    gap: 12px;
    max-width: var(--lls-max);
    margin: 1.6rem auto 0;
    padding: 4px var(--lls-gut) 10px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--lls-gut);         /* snap to the gutter, not the screen's edge */
    scrollbar-width: thin;
    scrollbar-color: rgba(239, 68, 68, .5) transparent;
}
.lls-women[hidden] { display: none; }
.lls-woman {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    width: 96px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    scroll-snap-align: start;
}
.lls-woman__pic {
    position: relative;
    display: block;
    overflow: hidden;
    width: 96px;
    height: 124px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    background:
        radial-gradient(ellipse 95% 70% at 50% 100%, color-mix(in srgb, var(--her, #c41e3a) 55%, transparent) 0%, transparent 72%),
        #121014;
    transition: border-color var(--transition-fast, 150ms ease);
}
/* Shown whole, standing on the tile's floor (her watermark corner is never cut). */
.lls-woman__img {
    position: absolute;
    inset: 6px 4px 0;
    width: calc(100% - 8px);
    height: calc(100% - 6px);
    object-fit: contain;
    object-position: 50% 100%;
}
.lls-woman__pic--all {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}
.lls-woman__name { color: rgba(255, 255, 255, .8); font-size: .84rem; font-weight: 700; }
.lls-woman__count { color: rgba(255, 255, 255, .5); font-size: .7rem; }
.lls-woman:hover .lls-woman__pic { border-color: rgba(255, 255, 255, .32); }
.lls-woman[aria-pressed="true"] .lls-woman__pic { border-color: var(--her, #ef4444); }
.lls-woman--all[aria-pressed="true"] .lls-woman__pic { border-color: #ef4444; }
.lls-woman[aria-pressed="true"] .lls-woman__name { color: #fff; }

/* ---- the stories ---------------------------------------------------------- */

.lls-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(22px, 3vw, 36px) var(--lls-gap);
    max-width: var(--lls-max);
    margin: clamp(1.6rem, 4vw, 2.6rem) auto 0;
    padding: 0 var(--lls-gut);
}
.lls-card {
    position: relative;
    display: flex;
    flex: 0 0 calc((100% - (var(--lls-cols) - 1) * var(--lls-gap)) / var(--lls-cols));
    flex-direction: column;
    min-width: 0;
    scroll-margin-top: calc(var(--header-height, 56px) + 16px);
}
.lls-card[hidden] { display: none; }
.lls-card__art {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: var(--ar, 1245 / 1600);
    border-radius: 10px;
    background: #121014;
    transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.lls-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* Her colour lights the edge when the card is hovered: a border, not a glow on the picture. */
.lls-card__art::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: inherit;
    pointer-events: none;
    transition: border-color var(--transition-fast, 150ms ease);
}
.lls-card:hover .lls-card__art { transform: translateY(-4px); }
.lls-card:hover .lls-card__art::after { border-color: var(--her, #ef4444); }
.lls-card__typeset {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 1rem;
    background:
        radial-gradient(ellipse 100% 70% at 50% 100%, color-mix(in srgb, var(--her, #c41e3a) 45%, transparent), transparent 70%),
        #121014;
    color: #fff;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.035em;
}
.lls-card__body { padding: .95rem .1rem 0; }
.lls-card__title {
    margin: 0 0 .5rem;
    color: #fff;
    font-size: clamp(1.04rem, 1.5vw, 1.22rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.22;
}
.lls-card__title a { color: inherit; text-decoration: none; }
.lls-card__title a:hover {
    text-decoration: underline;
    text-decoration-color: var(--her, #ef4444);
    text-underline-offset: 4px;
}
.lls-card__line {
    margin: .6rem 0 0;
    color: rgba(255, 255, 255, .68);
    font-size: .9rem;
    line-height: 1.5;
}
.lls-card__meta {
    margin: .6rem 0 0;
    color: rgba(255, 255, 255, .5);
    font-size: .78rem;
}
.lls-card__meta a { color: #ef4444; font-weight: 700; text-decoration: none; }
.lls-card__meta a:hover { color: #fff; }
.lls-sample {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: .25rem .55rem;
    border-radius: 4px;
    background: rgba(0, 0, 0, .7);
    color: #fff;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.lls-more-wrap {
    display: flex;
    justify-content: center;
    margin: 2rem 0 0;
}
.lls-more-wrap[hidden] { display: none; }

.lls-empty {
    max-width: var(--lls-max);
    margin: clamp(3rem, 8vw, 5rem) auto 0;
    padding: 0 var(--lls-gut);
    color: rgba(255, 255, 255, .6);
    font-size: 1.05rem;
    text-align: center;
}

/* ---- the coda: the next issue, and what Premium adds --------------------- */

.lls-coda {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--lls-gap);
    max-width: var(--lls-max);
    margin: clamp(3.5rem, 8vw, 6rem) auto 0;
    padding: 0 var(--lls-gut);
}
.lls-coda__cell {
    padding: clamp(1.4rem, 3vw, 2.2rem);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    background:
        radial-gradient(ellipse 120% 90% at 0% 0%, rgba(206, 14, 48, .14), transparent 62%),
        #0d090b;
}
.lls-coda__head {
    margin: 0 0 .5rem;
    color: #fff;
    font-size: clamp(1.3rem, 2.4vw, 1.7rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
}
.lls-coda__text {
    margin: 0 0 1.25rem;
    color: rgba(255, 255, 255, .72);
    font-size: 1rem;
    line-height: 1.6;
}

/* ═══ the four designs ═══════════════════════════════════════════════════ */

/* Phone: two cards across; tonight's picture on top, small enough that her title is on the first screen. */
@media (max-width: 599px) {
    .lls-tonight__art { width: min(76%, 330px); }
    .lls-card__line { font-size: .84rem; }
    .lls-card .lls-by { gap: .5rem; font-size: .64rem; letter-spacing: .1em; }
    .lls-card .lls-by__rule { width: 14px; }
    .lls-world__go { margin: .3rem 0 0; flex-basis: 100%; }
}

/* Portrait tablet: three across; tonight side by side. */
@media (min-width: 600px) {
    .lls { --lls-cols: 3; }
    .lls-tonight {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        align-items: center;
        gap: clamp(1.75rem, 5vw, 4.5rem);
    }
    .lls-tonight__art { justify-self: end; }
    .lls-coda { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Landscape tablet and desktop: four across, the world taller. */
@media (min-width: 1024px) {
    .lls { --lls-cols: 4; }
    .lls-world__band { height: clamp(380px, 36vw, 470px); }
}

/* Wide: the same four, roomier, and the world's painting taller still. */
@media (min-width: 1600px) {
    .lls { --lls-max: 1360px; }
    .lls-world__band { height: 520px; }
}

@media (prefers-reduced-motion: reduce) {
    .lls-card__art,
    .lls-card__art::after,
    .lls-btn { transition: none; }
    .lls-card:hover .lls-card__art { transform: none; }
}