/* ═══════════════════════════════════════════════════════════════════════════
   THE ISSUES — the newsstand (page-issues.php)

   Hayden, 2026-09-30: "a dashboard or like Kindle dashboard on our site, a
   nice grid of our LustLit magazines. I want the covers to be cursor aware, so
   they react nice with a reflective sheen and tilt when the customer hovers."

   Every cover is a .ll-mag: a magazine you could pick up. Its body leans toward
   the pointer (issues.js writes --ll-rx, --ll-ry and --ll-act, 0 at rest and 1
   under the pointer); the block of pages behind the cover shows its edge as it
   turns; over the cover sit the spine's fold, the gloss of the paper, a sheen
   that follows the light (--ll-mx, --ll-my) and a glare that crosses it
   (--ll-gp). On a touch screen the glare rides the scroll instead, and a
   press leans the cover under the finger.

   Law (Code/design-system.md): dark always; the accent is #ef4444 and blood
   #c41e3a is fill, never type; every number is white; glows are
   filter: drop-shadow(), never box-shadow; icons are drawn; Plus Jakarta Sans,
   display 800 at -0.035em. The page hero is the site's PAGE HERO SYSTEM: this
   file never styles .issues-hero; the staged style.css patch adds it to the
   four lists.

   Everything is scoped under .ll-issues. Only transform and opacity move, so
   every frame is the compositor's (no layout, no repaint).
   Source of truth: Code/issues/shelf/assets/css/issues.css.
   ═══════════════════════════════════════════════════════════════════════════ */

.ll-issues {
    --ink: #fff;
    --ink-2: rgba(255, 255, 255, 0.72);
    --ink-3: rgba(255, 255, 255, 0.5);
    --accent: #ef4444;
    --blood: #c41e3a;
    --font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --page-ar: 8.5 / 11;                      /* the magazine's trimmed page (the reader's PRINT template) */
    background: var(--ll-black, #0a0a0a);
    color: var(--ink);
    font-family: var(--font);
    font-variant-numeric: lining-nums proportional-nums;
    padding-bottom: clamp(4.5rem, 9vw, 8rem);
    overflow-x: clip;
}

.ll-issues-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- the proof's strip (the hidden test page only) --------------------- */

.ll-proofbar {
    width: fit-content;
    max-width: calc(100% - 2rem);
    margin: 1.25rem auto 0;
    border-radius: 999px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.35rem 1.1rem;
    padding: 0.6rem 1.1rem;
    background: #120a0c;
    border: 1px solid rgba(206, 14, 48, 0.3);
    font: 600 0.78rem/1.35 var(--font);
    color: var(--ink-2);
}
.ll-proofbar__tag {
    padding: 0.25rem 0.55rem;
    border-radius: 3px;
    background: var(--blood);
    color: #fff;
    font-weight: 800;
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.ll-proofbar a { color: #fff; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }

/* ═══════════════════════════════════════════════════════════════════════════
   THE MAGAZINE (.ll-mag): one component for the featured cover and the grid
   ═══════════════════════════════════════════════════════════════════════════ */

.ll-mag {
    --ll-rx: 0deg;
    --ll-ry: 0deg;
    --ll-act: 0;
    --ll-lift: 14px;
    position: relative;
    display: block;
    width: 100%;
    color: inherit;
    text-decoration: none;
    perspective: 1000px;
    perspective-origin: 50% 45%;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    touch-action: pan-y;                      /* a vertical swipe still scrolls the page; a sideways drag leans the cover */
    user-select: none;
    -webkit-user-select: none;
    outline: none;
}
a.ll-mag { cursor: pointer; }
.ll-mag.is-still { cursor: default; }

.ll-mag__body {
    position: relative;
    display: block;
    transform-style: preserve-3d;
    transform:
        rotateX(var(--ll-rx))
        rotateY(var(--ll-ry))
        translate3d(0, calc(var(--ll-act) * -4px), calc(var(--ll-act) * var(--ll-lift)));
    will-change: transform;
}

/* The block of pages behind the cover: its cream edge shows as the magazine turns. */
.ll-mag__pages {
    position: absolute;
    inset: 0.6% 0 0.6% 1%;
    border-radius: 1px 3px 3px 1px;
    background:
        repeating-linear-gradient(90deg, #e9e3da 0 1px, #cfc7bb 1px 2px),
        #ddd6cb;
    transform: translate3d(1.2%, 0.8%, -7px);
    filter: brightness(0.62);
}

.ll-mag__cover {
    position: relative;
    display: block;
    aspect-ratio: var(--page-ar);
    overflow: hidden;
    border-radius: 2px 4px 4px 2px;           /* the bound side squarer, as a real magazine */
    background: #150b0e;
    isolation: isolate;
    transform: translateZ(0.5px);
    container-type: inline-size;
}

.ll-mag__art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0;
    -webkit-user-drag: none;
}
.ll-mag__art--bare { object-position: var(--ll-focus-x, 50%) 0; }

/* The spine: the fold where the cover wraps the pages, darker at the edge with a thin catch of light beside it. */
.ll-mag__spine {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 5;
    width: 4.5%;
    pointer-events: none;
    background: linear-gradient(90deg,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.12) 22%,
        rgba(255, 255, 255, 0.16) 38%,
        rgba(255, 255, 255, 0.02) 62%,
        rgba(0, 0, 0, 0.1) 100%);
    mix-blend-mode: multiply;
}
.ll-mag__spine::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 30%, rgba(255, 255, 255, 0.22) 42%, transparent 60%);
    mix-blend-mode: screen;
}

/* The gloss: light lying on coated paper, always there. */
.ll-mag__gloss {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    background:
        linear-gradient(118deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 26%, rgba(255, 255, 255, 0) 44%,
                                rgba(255, 255, 255, 0) 78%, rgba(255, 255, 255, 0.07) 100%);
    mix-blend-mode: soft-light;
}

/* THE LIGHT. Three layers, each a box that only moves (issues.js writes --ll-sx/--ll-sy and --ll-gx, translates: the
   compositor's, never a repaint), each as strong as --ll-act says:
   - the shade: the side turning away from the light goes darker (multiply), which is most of what makes it look turned;
   - the sheen: a hot spot of light where the pointer is, with a warm halo (screen): the reflective paper under a lamp;
   - the glare: a band of reflected light that slides across the cover the other way as it turns. */
.ll-mag__shade,
.ll-mag__sheen {
    position: absolute;
    left: -70%;
    top: -70%;
    width: 140%;
    height: 140%;
    pointer-events: none;
    transform: translate3d(var(--ll-sx, 35.7%), var(--ll-sy, 21.4%), 0);
}
.ll-mag__shade {
    z-index: 7;
    opacity: calc(var(--ll-act) * 0.9);
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0.16) 42%, rgba(0, 0, 0, 0.42) 66%);
    mix-blend-mode: multiply;
}
.ll-mag__sheen {
    z-index: 8;
    opacity: var(--ll-act);
    background:
        radial-gradient(circle at center, rgba(255, 255, 255, 0.46) 0%, rgba(255, 251, 246, 0.2) 7%, rgba(255, 244, 236, 0.07) 17%, rgba(255, 255, 255, 0) 30%),
        radial-gradient(circle at center, rgba(255, 236, 226, 0.1) 0%, rgba(255, 255, 255, 0) 46%);
    mix-blend-mode: screen;
}

/* The glare: a bright band of reflected light crossing the cover as it turns. It lives in a box three covers wide, slid
   by --ll-gx. Its strength is --ll-gl: faint at rest, bright under the pointer and in the arrival sweep, and on a touch
   screen, where it rides the scroll, half lit. */
.ll-mag__glare {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -100%;
    width: 300%;
    z-index: 9;
    pointer-events: none;
    opacity: var(--ll-gl, 0.16);
    transform: translate3d(var(--ll-gx, 26.5%), 0, 0);
    background: linear-gradient(106deg,
        rgba(255, 255, 255, 0) 40.5%,
        rgba(255, 255, 255, 0.04) 44%,
        rgba(255, 255, 255, 0.2) 47.2%,
        rgba(255, 255, 255, 0.42) 48.5%,
        rgba(255, 255, 255, 0.16) 49.6%,
        rgba(255, 255, 255, 0.05) 52.5%,
        rgba(255, 255, 255, 0) 56%);
    mix-blend-mode: screen;
}

/* The shadow the magazine casts on the page below it: blurred once, then only moved. */
.ll-mag__shadow {
    position: absolute;
    left: 7%;
    right: 7%;
    top: 7%;
    bottom: -2.5%;
    z-index: -1;
    border-radius: 6%;
    background: rgba(0, 0, 0, 0.85);
    filter: blur(16px);
    opacity: calc(0.55 + var(--ll-act) * 0.35);
    transform: translate3d(calc(var(--ll-shx, 0) * 1px), calc(10px + var(--ll-act) * 12px), 0) scale(calc(0.96 + var(--ll-act) * 0.04));
    pointer-events: none;
}

/* Hover and focus: lit from the accent below, a little. */
a.ll-mag:focus-visible .ll-mag__cover { outline: 2px solid var(--accent); outline-offset: 5px; }

/* A press on a touch screen: the cover gives, a little, under the finger. */
.ll-mag.is-pressed .ll-mag__body { transition: none; }

/* SAMPLE: the proof's stand-ins for issues that do not exist yet. */
.ll-mag__sample {
    position: absolute;
    z-index: 10;
    top: 7cqw;
    left: -12cqw;
    width: 50cqw;
    transform: rotate(-45deg);
    background: var(--blood);
    color: #fff;
    text-align: center;
    font: 800 max(7px, 3.6cqw)/1 var(--font);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    padding: 1.7cqw 0;
}

/* ---- a cover set here, when the issue has no typeset cover of its own (its art and the masthead) ---- */

.ll-mag__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.22) 20%, transparent 33%),
        linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 30%);
}
.ll-mag__topline {
    position: absolute;
    z-index: 2;
    top: 3.4%;
    left: 4%;
    right: 4%;
    text-align: center;
    font: 700 max(6.5px, 3.05cqw)/1 var(--font);
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    overflow: hidden;
}
.ll-mag__topline b { color: #fff; font-weight: 800; }
.ll-mag__masthead {
    position: absolute;
    z-index: 3;
    top: 8.2%;
    left: 6%;
    width: 88%;
    height: auto;
    aspect-ratio: 3549 / 769;
    fill: #fff;
    filter: drop-shadow(0 0.3cqw 0.7cqw rgba(0, 0, 0, 0.5)) drop-shadow(0 0.8cqw 3.2cqw rgba(0, 0, 0, 0.55));
}

/* ---- COMING NEXT: the next issue's place. Black, the wordmark and the neon seam, the number, the month and the day it
   opens. Never a picture, never a woman. ---- */

.ll-mag--typeset .ll-mag__cover {
    background:
        radial-gradient(ellipse 90% 60% at 50% 112%, rgba(206, 14, 48, 0.42), transparent 70%),
        radial-gradient(ellipse 70% 45% at 50% -8%, rgba(138, 10, 34, 0.32), transparent 70%),
        #070405;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.1);         /* the edge of a black cover on a black page */
}
.ll-mag__masthead--typeset { top: 14%; left: 16%; width: 68%; filter: none; }
.ll-mag__seam {
    position: absolute;
    z-index: 3;
    left: 28%;
    right: 28%;
    top: 33%;
    height: max(2px, 0.6cqw);
    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, 0.7)) drop-shadow(0 0 14px rgba(239, 68, 68, 0.4)));
}
.ll-mag__typeset-no {
    position: absolute;
    left: 0;
    right: 0;
    top: 42%;
    text-align: center;
    font: 800 19cqw/1 var(--font);
    letter-spacing: -0.035em;
    color: #fff;
}
.ll-mag__typeset-rest {
    position: absolute;
    left: 8%;
    right: 8%;
    top: 63%;
    text-align: center;
    font: 700 7cqw/1.12 var(--font);
    letter-spacing: -0.02em;
    color: #fff;
}
.ll-mag__typeset-opens {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8%;
    text-align: center;
    font: 700 max(7px, 3.3cqw)/1 var(--font);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}
.ll-mag__typeset-opens b { color: #fff; font-weight: 800; letter-spacing: 0.14em; }   /* the date is white: numbers are */

/* ═══════════════════════════════════════════════════════════════════════════
   THE FEATURED ISSUE: the newest, big, standing at an angle in a pool of light
   ═══════════════════════════════════════════════════════════════════════════ */

.ll-feature {
    position: relative;
    max-width: 1240px;
    margin: 0 auto;
    padding: clamp(2.25rem, 5vw, 4.5rem) 1rem clamp(3rem, 7vw, 5.5rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.75rem, 5vw, 4.75rem);
    align-items: center;
}

.ll-feature__stage {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 0.75rem 0 3rem;
}

/* The red pool of light the cover stands in: the newsstand's spotlight. */
.ll-feature__pool {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: min(125%, 46rem);
    height: 52%;
    transform: translateX(-50%);
    background:
        radial-gradient(ellipse 48% 30% at 50% 80%, rgba(239, 68, 68, 0.32), transparent 70%),
        radial-gradient(ellipse 62% 62% at 50% 72%, rgba(206, 14, 48, 0.34), rgba(138, 10, 34, 0.1) 50%, transparent 74%);
    pointer-events: none;
}

.ll-mag--feature {
    --ll-lift: 26px;
    width: min(80vw, 23rem);
    perspective: 1400px;
}
/* At rest the featured cover stands turned toward its words, as on a newsstand shelf. issues.js blends from this pose
   toward the pointer. */
.ll-mag--feature { --ll-ry: -11deg; --ll-rx: 3deg; }

/* ---- its words ---- */

.ll-feature__copy { text-align: center; }

.ll-status {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    padding: 0.5rem 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    font: 700 0.72rem/1 var(--font);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #fff;
}
.ll-status.is-on-sale { border-color: var(--accent); color: var(--accent); }
.ll-status__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.9));
    animation: ll-pulse 2.4s ease-in-out infinite;
}
@keyframes ll-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.ll-feature__title {
    margin: 1.4rem 0 0;
    font-family: var(--font);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 0.96;
    color: #fff;
}
.ll-feature__brand {
    display: block;
    width: clamp(7.5rem, 15vw, 10.5rem);
    height: auto;
    aspect-ratio: 3549 / 769;
    margin: 0 auto 1rem;
    fill: #fff;
    filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.22));
}
.ll-feature__no { display: block; font-size: clamp(3.5rem, 12vw, 6.6rem); }
.ll-feature__rest { display: block; margin-top: 0.45rem; font-size: clamp(1.75rem, 5.2vw, 2.9rem); }
.ll-feature__title::after {
    content: "";
    display: block;
    width: 104px;
    height: 2px;
    margin: 1.5rem auto 0;
    background: var(--ll-neon-line, linear-gradient(90deg, transparent 0%, #ef4444 50%, transparent 100%));
    filter: var(--ll-neon-glow-lg, drop-shadow(0 0 3px rgba(239, 68, 68, 1)) drop-shadow(0 0 9px rgba(239, 68, 68, 0.7)) drop-shadow(0 0 20px rgba(239, 68, 68, 0.45)));
}

.ll-feature__kicker {
    margin: 1.5rem auto 0;
    max-width: 30rem;
    font: 700 clamp(1.1rem, 2.4vw, 1.4rem)/1.38 var(--font);
    letter-spacing: -0.01em;
    color: #fff;
}
.ll-feature__blurb {
    margin: 0.9rem auto 0;
    max-width: 32rem;
    font: 400 1.02rem/1.7 var(--font);
    color: var(--ink-2);
}

.ll-counts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0.5rem 0;
    margin: 1.6rem 0 0;
    padding: 0;
    list-style: none;
    font: 700 0.74rem/1.2 var(--font);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-2);
}
.ll-counts li + li::before { content: "\00B7"; margin: 0 0.75rem; color: var(--accent); }
.ll-counts b { margin-right: 0.4rem; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; color: #fff; }

.ll-feature__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem 1.5rem;
    margin-top: 2rem;
}

/* The one big action. */
.ll-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 3.4rem;
    padding: 0 1.6rem 0 1.9rem;
    border: 1px solid var(--accent);
    border-radius: 999px;
    background: var(--blood);
    color: #fff;
    font: 800 1.08rem/1 var(--font);
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: background-color 0.25s ease, filter 0.25s ease;
}
.ll-cta svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s ease; }
a.ll-cta:hover { background: #d42d4a; filter: drop-shadow(0 0 14px rgba(239, 68, 68, 0.5)); color: #fff; }
a.ll-cta:hover svg { transform: translateX(3px); }
a.ll-cta:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.ll-cta.is-waiting { background: transparent; border-color: rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.86); cursor: default; }

.ll-free {
    margin: 1.5rem 0 0;
    font: 500 0.92rem/1.5 var(--font);
    color: var(--ink-2);
}
.ll-free svg { display: inline-block; width: 1.2rem; height: 1.2rem; margin-right: 0.5rem; vertical-align: -0.28rem; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round; }
.ll-next {
    margin: 0.9rem 0 0;
    font: 500 0.88rem/1.5 var(--font);
    color: var(--ink-3);
}
.ll-next b { color: #fff; font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════════════
   THE LIBRARY: every issue, a grid of covers by year
   ═══════════════════════════════════════════════════════════════════════════ */

.ll-library {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 1rem;
}
.ll-library__head { text-align: center; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.ll-library__eyebrow {
    display: block;
    margin-bottom: 0.7rem;
    font: 700 0.6875rem/1 var(--font);
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--accent);
}
.ll-library__title {
    margin: 0;
    font: 800 clamp(1.6rem, 4vw, 2.4rem)/1.08 var(--font);
    letter-spacing: -0.035em;
    color: #fff;
}

.ll-year + .ll-year { margin-top: clamp(2.75rem, 6vw, 4.5rem); }
.ll-year__label {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 0 clamp(1.25rem, 3vw, 2rem);
    font: 800 1.35rem/1 var(--font);
    letter-spacing: -0.02em;
    color: #fff;
}
.ll-year__rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.7), rgba(239, 68, 68, 0.12) 40%, rgba(255, 255, 255, 0.06));
}

.ll-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.9rem, 5vw, 3.4rem) clamp(1.1rem, 3.2vw, 2.6rem);
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 600px)  { .ll-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .ll-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ll-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.ll-grid__item { position: relative; min-width: 0; }

.ll-grid__meta { position: relative; z-index: 1; padding-top: 1.05rem; }     /* above a lifted cover's shadow */
.ll-grid__no {
    margin: 0;
    font: 800 1.2rem/1.05 var(--font);
    letter-spacing: -0.03em;
    color: #fff;
}
.ll-grid__month {
    margin: 0.2rem 0 0;
    font: 600 0.92rem/1.3 var(--font);
    color: var(--ink-2);
}
.ll-grid__status {
    margin: 0.45rem 0 0;
    font: 700 0.66rem/1.3 var(--font);
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.ll-grid__status.is-on-sale,
.ll-grid__status.is-next { color: var(--accent); }

/* ---- nothing on the shelf yet ---- */

.ll-issues-empty { padding: clamp(4rem, 12vw, 8rem) 1rem; text-align: center; }
.ll-issues-empty__line { margin: 0; font: 800 clamp(1.6rem, 4vw, 2.4rem)/1.15 var(--font); letter-spacing: -0.035em; color: #fff; }
.ll-issues-empty__sub { margin: 0.8rem 0 0; font: 400 1rem/1.6 var(--font); color: var(--ink-2); }

/* ═══════════════════════════════════════════════════════════════════════════
   Larger screens
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 900px) {
    .ll-feature { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); padding-top: clamp(3rem, 5vw, 4.75rem); }
    .ll-feature__stage { padding: 1rem 0 3.5rem; }
    .ll-mag--feature { width: min(100%, 27rem); }
    .ll-feature__copy { text-align: left; }
    .ll-feature__brand,
    .ll-feature__title::after,
    .ll-feature__kicker,
    .ll-feature__blurb { margin-left: 0; }
    .ll-counts,
    .ll-feature__actions { justify-content: flex-start; }
}
@media (min-width: 1280px) {
    .ll-mag--feature { width: min(100%, 29rem); }
}

/* A phone: the counts on one line, and a little less air. */
@media (max-width: 599px) {
    .ll-counts { font-size: 0.64rem; letter-spacing: 0.1em; }
    .ll-counts b { font-size: 1.12rem; margin-right: 0.3rem; }
    .ll-counts li + li::before { margin: 0 0.45rem; }
    .ll-grid__no { font-size: 1.05rem; }
    .ll-grid__month { font-size: 0.84rem; }
    .ll-grid__status { letter-spacing: 0.12em; }
}

/* ---- reduced motion: the covers stand still, the light stays where it lies ---- */

@media (prefers-reduced-motion: reduce) {
    .ll-mag__body { transform: none !important; }
    .ll-status__dot { animation: none; }
    .ll-cta, .ll-cta svg { transition: none; }
}