/* The zine's editorial look: an art-and-photo magazine.
 *
 * Loaded after newsletter.css on issue pages that set data-look="editorial".
 * The work is the art: pictures run big with no frames, and the type gets out
 * of their way. A condensed display face (Anton) for heads, a serif for
 * reading, an italic serif for the voices, and a mono for plate captions.
 *
 * The page is printed on its own paper and ink rather than the site theme's
 * colours: a magazine is art-directed, and the theme still dresses the site
 * header and footer around it. */

.nl-page[data-look="editorial"] {
    --zx-paper: #f2efe6;
    --zx-ink: #141414;
    --zx-red: #d93a17;
    --zx-gutter: clamp(16px, 4vw, 64px);
    --zx-display: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
    --zx-serif: 'Source Serif 4', Georgia, serif;
    --zx-italic: 'Instrument Serif', Georgia, serif;
    --zx-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
    --text-color: var(--zx-ink);
    --accent-color: var(--zx-red);

    padding: 0 var(--zx-gutter) 6rem;
    background: var(--zx-paper);
    color: var(--zx-ink);
    font-family: var(--zx-serif);
}
.nl-page[data-look="editorial"] a:focus-visible { outline: 3px solid var(--zx-red); outline-offset: 3px; }

/* Small mono label, used for every caption-ish thing. */
.nl-page[data-look="editorial"] .nl-back,
.nl-page[data-look="editorial"] .nl-ship__kicker,
.nl-page[data-look="editorial"] .nl-ship__who,
.nl-page[data-look="editorial"] .nl-ship__go,
.nl-page[data-look="editorial"] .nl-quote footer,
.nl-page[data-look="editorial"] .nl-card__byline {
    font-family: var(--zx-mono);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.nl-page[data-look="editorial"] .nl-back {
    position: relative; z-index: 2;
    margin: 0; padding: 0.9rem 0; border: 0; background: none; color: var(--zx-ink);
}
.nl-page[data-look="editorial"] .nl-back:hover { background: none; color: var(--zx-red); }

/* ---- Cover ---- */
.zx-cover {
    position: relative;
    display: flex; flex-direction: column; justify-content: space-between;
    min-height: min(94vh, 64rem);
    margin: 0 calc(-1 * var(--zx-gutter)) 5rem;
    padding: 1.5rem var(--zx-gutter) 2.5rem;
    overflow: hidden;
    color: var(--zx-ink);
    border-bottom: 1px solid var(--zx-ink);
}
.zx-cover--art { color: var(--zx-paper); background: var(--zx-ink); border: 0; }
.zx-cover__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Dark at the top and bottom so the type reads on any picture. */
.zx-cover--art::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgb(0 0 0 / 0.45), transparent 30%, transparent 50%, rgb(0 0 0 / 0.7));
}
.zx-cover__top, .zx-cover__bottom { position: relative; z-index: 2; }
.zx-cover--art::before { z-index: 1; }
.zx-cover__credit { z-index: 2; }
.zx-cover--art .zx-cover__top, .zx-cover--art .zx-cover__bottom { text-shadow: 0 1px 12px rgb(0 0 0 / 0.35); }
.zx-cover__masthead {
    margin: 0;
    font-family: var(--zx-display);
    font-size: clamp(4.5rem, 19vw, 21rem);
    line-height: 0.8;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    text-align: center;
}
.zx-cover__meta {
    display: flex; justify-content: space-between; gap: 1rem;
    margin: 0.9rem 0 0; padding-top: 0.5rem;
    border-top: 1px solid currentColor;
    font-family: var(--zx-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.zx-cover__bottom { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-top: 3rem; }
.zx-cover__story { max-width: 62rem; }
.zx-cover__headline {
    margin: 0 0 1rem;
    font-family: var(--zx-italic);
    font-weight: 400;
    font-size: clamp(3.2rem, 9vw, 8.5rem);
    line-height: 0.88;
    letter-spacing: -0.02em;
    text-wrap: balance;
}
.zx-cover__dek { margin: 0 0 1.6rem; max-width: 32rem; font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.4; }
.zx-cover__lines { margin: 0; padding: 0; list-style: none; max-width: 22rem; text-align: right; }
.zx-cover__lines li {
    padding: 0.55rem 0; border-top: 1px solid currentColor;
    font-family: var(--zx-display); font-size: 1.35rem; line-height: 1; text-transform: uppercase;
}
.zx-cover__lines span { display: block; margin-bottom: 0.25rem; font-family: var(--zx-mono); font-size: 0.68rem; letter-spacing: 0.1em; }
.zx-cover__credit {
    position: absolute; right: 0.6rem; bottom: 2.5rem;
    margin: 0;
    writing-mode: vertical-rl; transform: rotate(180deg);
    font-family: var(--zx-mono); font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase;
    opacity: 0.85;
}

/* Buttons: flat ink slabs. */
.nl-page[data-look="editorial"] .nl-button {
    padding: 0.85rem 1.3rem; border: 1px solid currentColor; border-radius: 0;
    background: var(--zx-ink); color: var(--zx-paper); box-shadow: none;
    font-family: var(--zx-mono); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
}
.nl-page[data-look="editorial"] .nl-button:hover { transform: none; box-shadow: none; background: var(--zx-red); color: #fff; border-color: var(--zx-red); }
.zx-cover--art .nl-button { background: var(--zx-paper); color: var(--zx-ink); }

/* ---- Editor's letter ---- */
.nl-page[data-look="editorial"] .nl-lead {
    max-width: 42rem; margin: 0 auto 6rem;
    font-size: 1.12rem; line-height: 1.7;
}
.nl-page[data-look="editorial"] .nl-lead::before {
    content: 'From the editor';
    display: block; margin-bottom: 1.2rem; padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--zx-ink);
    font-family: var(--zx-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.nl-page[data-look="editorial"] .nl-lead > p:first-of-type { font-size: 1.45rem; line-height: 1.45; font-weight: 400; }
.nl-page[data-look="editorial"] .nl-lead > p:first-of-type::first-letter {
    float: left; margin: 0.06em 0.12em 0 0;
    font-family: var(--zx-display); font-size: 4.6em; line-height: 0.82; color: var(--zx-red);
}
.nl-page[data-look="editorial"] .nl-lead a { color: inherit; text-decoration-color: var(--zx-red); text-decoration-thickness: 2px; }

/* ---- Section heads: a heavy rule and a condensed head ---- */
.nl-page[data-look="editorial"] .nl-section { margin: 6rem 0; }
.nl-page[data-look="editorial"] .nl-section__title {
    display: block; margin: 0 0 2.5rem; padding: 0.6rem 0 0;
    border: 0; border-top: 8px solid var(--zx-ink);
    background: none; color: var(--zx-ink); box-shadow: none; transform: none;
    font-family: var(--zx-display); font-weight: 400;
    font-size: clamp(2.6rem, 8vw, 7rem); line-height: 0.9; letter-spacing: -0.005em; text-transform: uppercase;
}
.nl-page[data-look="editorial"] .nl-ship__dek { font-family: var(--zx-italic); font-size: 1.6rem; }

/* ---- Plates: the shipped wall as a photo spread ---- */
.nl-page[data-look="editorial"] .nl-ship {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(20px, 2.5vw, 40px);
    row-gap: 0;
    padding: 0;
}
.nl-page[data-look="editorial"] .nl-ship__tile {
    grid-column: span 4;
    padding-bottom: 4rem;
    border: 0; background: none; color: var(--zx-ink); box-shadow: none; transform: none;
}
.nl-page[data-look="editorial"] .nl-ship__tile--wide { grid-column: span 8; }
.nl-page[data-look="editorial"] .nl-ship__tile--hero { grid-column: 1 / -1; box-shadow: none; }

.nl-page[data-look="editorial"] .nl-ship__media { border: 0; background: none; }
.nl-page[data-look="editorial"] .nl-ship__media img { max-height: 46rem; object-fit: cover; object-position: center; }
.nl-page[data-look="editorial"] .nl-ship__tile--hero .nl-ship__media img { max-height: 82vh; }

.nl-page[data-look="editorial"] .nl-ship__body { padding: 0.9rem 0 0; gap: 0.6rem; }
.nl-page[data-look="editorial"] .nl-ship__kicker { gap: 0.9rem; padding-bottom: 0.45rem; border-bottom: 1px solid var(--zx-ink); }
.nl-page[data-look="editorial"] .nl-ship__plate { color: var(--zx-red); }
.nl-page[data-look="editorial"] .nl-ship__kicker .nl-chip,
.nl-page[data-look="editorial"] .nl-ship__source {
    padding: 0; border: 0; background: none; color: inherit; box-shadow: none; transform: none;
    font: inherit; letter-spacing: inherit; opacity: 1;
}
.nl-page[data-look="editorial"] .nl-ship__source::before { content: '/ '; }
.nl-page[data-look="editorial"] .nl-ship__title {
    font-family: var(--zx-display); font-weight: 400;
    font-size: clamp(1.7rem, 2.4vw, 2.3rem); line-height: 0.95; letter-spacing: 0; text-transform: uppercase;
}
.nl-page[data-look="editorial"] .nl-ship__title a { color: inherit; text-decoration: none; }
.nl-page[data-look="editorial"] .nl-ship__title a:hover { color: var(--zx-red); }
.nl-page[data-look="editorial"] .nl-ship__blurb,
.nl-page[data-look="editorial"] .nl-ship__excerpt { font-family: var(--zx-serif); font-size: 1rem; line-height: 1.55; max-width: 38rem; }
.nl-page[data-look="editorial"] .nl-ship__quote {
    margin: 0.3rem 0 0; padding: 0; border: 0;
    font-family: var(--zx-italic); font-style: italic; font-size: 1.45rem; line-height: 1.15; font-weight: 400;
}
.nl-page[data-look="editorial"] .nl-ship__foot { padding-top: 0.6rem; font-weight: 400; }
.nl-page[data-look="editorial"] .nl-ship__who { padding: 0; background: none; color: inherit; }
.nl-page[data-look="editorial"] .nl-ship__who::before { content: '— '; }
.nl-page[data-look="editorial"] .nl-ship__go {
    padding: 0; border: 0; background: none; box-shadow: none; color: var(--zx-red);
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.nl-page[data-look="editorial"] .nl-ship__go:hover { color: var(--zx-ink); background: none; }
.nl-page[data-look="editorial"] .nl-ship__specs { gap: 0; }
.nl-page[data-look="editorial"] .nl-ship__specs li {
    padding: 0; border: 0; background: none;
    font-family: var(--zx-mono); font-size: 0.75rem; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase;
}
.nl-page[data-look="editorial"] .nl-ship__specs li + li::before { content: ' / '; white-space: pre; color: var(--zx-red); }

/* The lead plate: picture across the page, caption in two columns under it. */
.nl-page[data-look="editorial"] .nl-ship__tile--hero .nl-ship__body {
    display: grid; grid-template-columns: 5fr 7fr; grid-auto-flow: row dense;
    column-gap: clamp(20px, 2.5vw, 40px); row-gap: 0.7rem; padding-top: 1.1rem;
}
.nl-page[data-look="editorial"] .nl-ship__tile--hero .nl-ship__body > * { grid-column: 2; }
.nl-page[data-look="editorial"] .nl-ship__tile--hero .nl-ship__kicker { grid-column: 1 / -1; }
.nl-page[data-look="editorial"] .nl-ship__tile--hero .nl-ship__title {
    grid-column: 1; grid-row: span 4;
    font-size: clamp(3rem, 7vw, 7rem); line-height: 0.86;
}
.nl-page[data-look="editorial"] .nl-ship__tile--hero .nl-ship__quote { font-size: clamp(1.6rem, 2.6vw, 2.4rem); }

/* Pictures with no frame of their own get a hairline so pale ones hold the page. */
.nl-page[data-look="editorial"] .nl-ship--guide .nl-ship__media img,
.nl-page[data-look="editorial"] .nl-ship--hardware .nl-ship__media img { outline: 1px solid rgb(0 0 0 / 0.15); outline-offset: -1px; }

/* Render: a small play mark in the corner. */
.nl-page[data-look="editorial"] .nl-ship__play {
    width: 3.4rem; height: 3.4rem; left: 1.2rem; bottom: 1.2rem;
    border: 1px solid var(--zx-paper); border-radius: 50%;
    background: rgb(0 0 0 / 0.35); color: var(--zx-paper); box-shadow: none; font-size: 1.1rem;
    backdrop-filter: blur(6px);
}

/* Essay: set like the opening of a feature. */
.nl-page[data-look="editorial"] .nl-ship--essay { background: none; }
.nl-page[data-look="editorial"] .nl-ship--essay .nl-ship__body { padding: 0.9rem 0 0; }
.nl-page[data-look="editorial"] .nl-ship--essay .nl-ship__title {
    font-family: var(--zx-italic); text-transform: none; font-size: clamp(2.4rem, 4.4vw, 4.2rem); line-height: 0.95;
}
.nl-page[data-look="editorial"] .nl-ship--essay .nl-ship__excerpt {
    columns: 2 16rem; column-gap: 2rem; max-width: none; font-size: 1.05rem; line-height: 1.6;
}
.nl-page[data-look="editorial"] .nl-ship--essay .nl-ship__excerpt::first-letter {
    font-family: var(--zx-display); font-weight: 400; font-size: 3.6em; line-height: 0.82; color: var(--zx-red);
}

/* Site: a hairline browser bar. */
.nl-page[data-look="editorial"] .nl-ship__chrome { height: 1.8rem; border: 1px solid var(--zx-ink); border-bottom: 0; background: var(--zx-paper); color: var(--zx-ink); }
.nl-page[data-look="editorial"] .nl-ship__chrome i { width: 8px; height: 8px; border: 1px solid var(--zx-ink); }
.nl-page[data-look="editorial"] .nl-ship__chrome span { border: 0; font-family: var(--zx-mono); font-weight: 400; font-size: 0.7rem; letter-spacing: 0.06em; }

/* Sketch: a print laid on the page. */
.nl-page[data-look="editorial"] .nl-ship--sketch { background: none; }
.nl-page[data-look="editorial"] .nl-ship--sketch .nl-ship__media { padding: 0; }
.nl-page[data-look="editorial"] .nl-ship--sketch .nl-ship__media img {
    border: 10px solid #fff; transform: rotate(-1.2deg);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.15), 0 22px 30px -18px rgb(0 0 0 / 0.55);
}
.nl-page[data-look="editorial"] .nl-ship--sketch:nth-of-type(even) .nl-ship__media img { transform: rotate(1.4deg); }

/* Guide: the plain plate, the title in red. */
.nl-page[data-look="editorial"] .nl-ship--guide { background: none; color: var(--zx-ink); }
.nl-page[data-look="editorial"] .nl-ship--guide .nl-ship__title { color: var(--zx-red); font-size: clamp(2.2rem, 3.4vw, 3.2rem); text-transform: uppercase; }

/* Plates with no picture are set as type: a heavy rule and a big head. */
.nl-page[data-look="editorial"] .nl-ship__tile:not(:has(.nl-ship__media, .nl-ship__term)) { border-top: 8px solid var(--zx-ink); }
.nl-page[data-look="editorial"] .nl-ship__tile:not(:has(.nl-ship__media, .nl-ship__term)) .nl-ship__title { font-size: clamp(2.4rem, 3.6vw, 3.6rem); line-height: 0.9; }
.nl-page[data-look="editorial"] .nl-ship--status { background: none; }
.nl-page[data-look="editorial"] .nl-ship__status {
    margin: 0; padding: 0; border: 0; background: none; box-shadow: none; transform: none;
    color: var(--zx-red); font-family: var(--zx-mono); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.nl-page[data-look="editorial"] .nl-ship__status::before { content: '\25CF  '; white-space: pre; }

/* Repo: the terminal is the picture. */
.nl-page[data-look="editorial"] .nl-ship--repo { background: none; color: var(--zx-ink); box-shadow: none; }
.nl-page[data-look="editorial"] .nl-ship__term {
    padding: 2.2rem 1.4rem; border: 0; background: var(--zx-ink); color: var(--zx-paper);
    font-family: var(--zx-mono); font-weight: 400; font-size: 0.95rem; line-height: 1.5;
}
.nl-page[data-look="editorial"] .nl-ship__term span { color: var(--zx-red); }
.nl-page[data-look="editorial"] .nl-ship--repo .nl-ship__title a,
.nl-page[data-look="editorial"] .nl-ship--repo .nl-ship__who { color: inherit; opacity: 1; }
.nl-page[data-look="editorial"] .nl-ship--repo .nl-ship__go { color: var(--zx-red); }

/* ---- Pull quote: the voice, big and italic, no box ---- */
.nl-page[data-look="editorial"] .nl-quote {
    position: relative;
    max-width: 62rem; margin: 3rem auto 7rem; padding: 3.5rem 0 0;
    border: 0; border-top: 1px solid var(--zx-ink);
    background: none; color: var(--zx-ink); box-shadow: none; transform: none;
    text-align: center;
}
.nl-page[data-look="editorial"] .nl-quote::before {
    content: '\201C'; position: absolute; left: 50%; top: -0.1rem; transform: translateX(-50%);
    font-family: var(--zx-display); font-size: 7rem; line-height: 1; color: var(--zx-red);
}
.nl-page[data-look="editorial"] .nl-quote p {
    font-family: var(--zx-italic); font-weight: 400;
    font-size: clamp(2.1rem, 5vw, 4.4rem); line-height: 1.02; letter-spacing: -0.01em;
}
.nl-page[data-look="editorial"] .nl-quote footer { margin-top: 1.5rem; color: var(--zx-ink); }

/* ---- Departments (card rows), classes, membership ---- */
.nl-page[data-look="editorial"] .nl-cards { gap: 0 clamp(20px, 2.5vw, 40px); border: 0; padding: 0; }
.nl-page[data-look="editorial"] .nl-cards__col { gap: 0; }
.nl-page[data-look="editorial"] .nl-card,
.nl-page[data-look="editorial"] .nl-cards__col:first-child > .nl-card:first-child,
.nl-page[data-look="editorial"] .nl-section--sell .nl-cards__col:first-child > .nl-card:first-child {
    padding: 0.8rem 0 2.5rem; border: 0; border-top: 1px solid currentColor;
    background: none; color: inherit; box-shadow: none; transform: none;
}
.nl-page[data-look="editorial"] .nl-card:has(a):hover { background: none; color: inherit; }
.nl-page[data-look="editorial"] .nl-card:has(a):hover .nl-card__title { color: var(--zx-red); }
.nl-page[data-look="editorial"] .nl-card .nl-chip {
    margin: 0 0 0.6rem; padding: 0; border: 0; background: none; box-shadow: none; transform: none;
    color: var(--zx-red); font-family: var(--zx-mono); font-size: 0.72rem; font-weight: 400; letter-spacing: 0.1em;
}
.nl-page[data-look="editorial"] .nl-card__title,
.nl-page[data-look="editorial"] .nl-cards__col:first-child > .nl-card:first-child .nl-card__title,
.nl-page[data-look="editorial"] .nl-section--sell .nl-cards__col:first-child > .nl-card:first-child .nl-card__title {
    font-family: var(--zx-display); font-weight: 400; font-size: clamp(1.8rem, 2.6vw, 2.6rem); line-height: 0.95; text-transform: uppercase;
}
.nl-page[data-look="editorial"] .nl-card__title a { color: inherit; text-decoration: none; }
.nl-page[data-look="editorial"] .nl-card__blurb { font-size: 1.02rem; line-height: 1.55; }
.nl-page[data-look="editorial"] .nl-card__byline { color: inherit; opacity: 0.75; }
.nl-page[data-look="editorial"] .nl-card__image { border: 0; margin-bottom: 0.9rem; }

.nl-page[data-look="editorial"] .nl-section--sell { padding: 0; border: 0; box-shadow: none; background: none; color: var(--zx-ink); }
.nl-page[data-look="editorial"] .nl-section--member {
    margin-left: calc(-1 * var(--zx-gutter)); margin-right: calc(-1 * var(--zx-gutter));
    padding: 4rem var(--zx-gutter) 4.5rem;
    background: var(--zx-ink); color: var(--zx-paper);
}
.nl-page[data-look="editorial"] .nl-section--member .nl-section__title { background: none; color: var(--zx-paper); border-top-color: var(--zx-paper); }
.nl-page[data-look="editorial"] .nl-section--member > p { font-size: 1.2rem; font-weight: 400; }
.nl-page[data-look="editorial"] .nl-section--member .nl-button { background: var(--zx-paper); color: var(--zx-ink); margin: 0 0.5rem 0.5rem 0; }

.nl-page[data-look="editorial"] .nl-subscribe {
    margin-top: 0; padding: 2rem 0; border: 0; border-top: 1px solid var(--zx-ink);
    background: none; color: var(--zx-ink); box-shadow: none;
}
.nl-page[data-look="editorial"] .nl-subscribe h3 { font-family: var(--zx-display); font-weight: 400; font-size: 2rem; text-transform: uppercase; }

/* ---- Narrow screens: one column of plates ---- */
@media (max-width: 48rem) {
    .nl-page[data-look="editorial"] .nl-ship { grid-template-columns: minmax(0, 1fr); }
    .nl-page[data-look="editorial"] .nl-ship__tile,
    .nl-page[data-look="editorial"] .nl-ship__tile--wide,
    .nl-page[data-look="editorial"] .nl-ship__tile--hero { grid-column: 1; }
    .nl-page[data-look="editorial"] .nl-ship__tile--hero .nl-ship__body { display: flex; }
    .zx-cover { min-height: 88vh; }
    .zx-cover--art::before { background: linear-gradient(to bottom, rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.35) 30%, rgb(0 0 0 / 0.75) 55%, rgb(0 0 0 / 0.85)); }
    .zx-cover__lines { text-align: left; max-width: none; }
    .zx-cover__meta span:first-child { display: none; }
}

/* ---- The shelf (/i/newsletter): back issues as a contents page ---- */
.zx-shelf__head { padding: clamp(2rem, 6vw, 4rem) 0 1rem; border-bottom: 8px solid var(--zx-ink); }
.zx-shelf__head .zx-cover__masthead { color: var(--zx-ink); text-shadow: none; }
.zx-shelf__sub {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem;
    margin: 0.5rem 0 0; font-family: var(--zx-mono); font-size: 0.75rem;
    letter-spacing: 0.08em; text-transform: uppercase;
}
/* Every issue is a small cover on the rack; the latest is the big one, with its art. */
.zx-shelf {
    list-style: none; margin: 2rem 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1.25rem;
}
.zx-shelf__item { --sh-paper: var(--zx-paper); --sh-ink: var(--zx-ink); --sh-hi: var(--zx-red); }
.zx-shelf__item[data-variant="1"] { --sh-paper: var(--zx-red); --sh-ink: #fff8ec; --sh-hi: var(--zx-ink); }
.zx-shelf__item[data-variant="2"] { --sh-paper: var(--zx-ink); --sh-ink: var(--zx-paper); --sh-hi: #ffb199; }
.zx-shelf__item[data-variant="3"] { --sh-paper: #ecd34a; --sh-ink: var(--zx-ink); --sh-hi: #8a1f08; }
.zx-shelf__item[data-variant="4"] { --sh-paper: #234e78; --sh-ink: #fff8ec; --sh-hi: #ffd27a; }
.zx-shelf__item[data-variant="5"] { --sh-paper: #cdbdf0; --sh-ink: var(--zx-ink); --sh-hi: #8a1f08; }
.zx-shelf__item a {
    position: relative; display: flex; flex-direction: column; gap: 0.6rem; height: 100%;
    min-height: 17rem; padding: 1rem 1rem 1.1rem; overflow: hidden;
    background: var(--sh-paper); color: var(--sh-ink); text-decoration: none;
    border: 1px solid var(--zx-ink);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.zx-shelf__item a:hover, .zx-shelf__item a:focus-visible { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--zx-ink); }
.zx-shelf__mast {
    display: flex; justify-content: space-between; align-items: baseline;
    padding-bottom: 0.4rem; border-bottom: 3px solid currentColor;
    font-family: var(--zx-display); font-size: 1.5rem; line-height: 1; text-transform: uppercase;
}
.zx-shelf__mast span { font-family: var(--zx-mono); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--sh-hi); }
.zx-shelf__title {
    font-family: var(--sh-font, var(--zx-display)); text-transform: var(--sh-case, uppercase); font-size: 1.9rem; line-height: 0.95;
    overflow-wrap: anywhere;
}
.zx-shelf__dek { font-family: var(--zx-italic); font-style: italic; font-size: 1.05rem; line-height: 1.2; }
.zx-shelf__date { margin-top: auto; font-family: var(--zx-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; }
.zx-shelf__art { display: none; }

/* The latest issue: a wide cover with its picture behind the type. */
.zx-shelf__item--latest { grid-column: 1 / -1; }
.zx-shelf__item--latest a { min-height: clamp(20rem, 52vw, 34rem); padding: clamp(1rem, 3vw, 2rem); justify-content: flex-end; }
.zx-shelf__item--latest .zx-shelf__mast { position: absolute; top: clamp(1rem, 3vw, 2rem); left: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); font-size: clamp(1.8rem, 5vw, 3.5rem); }
.zx-shelf__item--latest .zx-shelf__mast span { font-size: 0.85rem; }
.zx-shelf__item--latest .zx-shelf__title { font-size: clamp(2.6rem, 8vw, 6.5rem); line-height: 0.9; }
.zx-shelf__item--latest .zx-shelf__dek { font-size: clamp(1.1rem, 2vw, 1.5rem); max-width: 40rem; }
.zx-shelf__item--latest .zx-shelf__date { margin-top: 0; }
.zx-shelf__item--latest.zx-shelf__item--art a { color: #fff8ec; background: var(--zx-ink); }
.zx-shelf__item--latest.zx-shelf__item--art a::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to bottom, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.1) 30%, rgb(0 0 0 / 0.25) 50%, rgb(0 0 0 / 0.85));
}
.zx-shelf__item--latest.zx-shelf__item--art a > :not(img) { position: relative; z-index: 2; }
.zx-shelf__item--latest.zx-shelf__item--art .zx-shelf__mast { position: absolute; }
.zx-shelf__item--latest.zx-shelf__item--art .zx-shelf__mast span { color: #ffb199; }
.zx-shelf__item--latest.zx-shelf__item--art .zx-shelf__art {
    display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.zx-pager a { border: 0; box-shadow: none; background: none; font-family: var(--zx-mono); font-weight: 400; text-transform: uppercase; color: var(--zx-ink); }
.zx-pager a:hover { color: var(--zx-red); }

@media (max-width: 30rem) {
    .zx-shelf { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
    .zx-shelf__item a { min-height: 13rem; padding: 0.7rem; }
    .zx-shelf__mast { font-size: 1.1rem; }
    .zx-shelf__title { font-size: 1.35rem; }
    .zx-shelf__dek { display: none; }
    .zx-shelf__item--latest .zx-shelf__dek { display: block; }
}
.nl-page[data-look="editorial"] .zx-shelf__art { max-width: none; }
.nl-page[data-look="editorial"] .nl-subscribe p { font-size: 1.15rem; max-width: 36rem; margin: 0.5rem auto 0; }
.nl-page[data-look="editorial"] .nl-subscribe a { color: var(--zx-red); }

/* A back issue keeps the newsletter as it went out, folded under its recap. */
.nl-page[data-look="editorial"] .nl-original { max-width: 42rem; margin: 0 auto 4rem; border-top: 1px solid var(--zx-ink); border-bottom: 1px solid var(--zx-ink); }
.nl-page[data-look="editorial"] .nl-original summary {
    cursor: pointer; padding: 1rem 0; font-family: var(--zx-mono); font-size: 0.75rem;
    letter-spacing: 0.08em; text-transform: uppercase;
}
.nl-page[data-look="editorial"] .nl-original summary:hover { color: var(--zx-red); }
.nl-page[data-look="editorial"] .nl-original__body { font-size: 1rem; line-height: 1.6; overflow-wrap: anywhere; }
.nl-page[data-look="editorial"] .nl-original__body a { color: inherit; text-decoration-color: var(--zx-red); }
/* A cover with no picture is type only, so it does not need the full screen. */
.nl-page[data-look="editorial"] .zx-cover:not(.zx-cover--art) { min-height: auto; gap: 3rem; }
.nl-page[data-look="editorial"] .nl-lead:has(+ .nl-original) { margin-bottom: 2.5rem; }
.nl-page[data-look="editorial"] .nl-lead > p + p, .nl-page[data-look="editorial"] .nl-original__body p + p { margin-top: 1em; }

/* ---- Per-issue aesthetics (metadata.aesthetic, validated in newsletter_issue.py) ---- */
.nl-page[data-aesthetic] .zx-cover__headline { font-family: var(--zx-display); text-transform: var(--zx-case, uppercase); font-style: normal; letter-spacing: 0; }
.nl-page[data-aesthetic] .zx-cover__headline { font-size: calc(clamp(2.6rem, 7vw, 6.5rem) * var(--zx-scale, 1)); line-height: 1.05; overflow-wrap: anywhere; }
.zx-shelf__item[data-texture] .zx-shelf__title { font-size: calc(1.9rem * var(--sh-scale, 1)); line-height: 1.05; overflow-wrap: normal; hyphens: auto; }
.zx-cover__kicker { margin: 0 0 0.8rem; font-family: var(--zx-mono); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--zx-red); }
.zx-cover__look { position: relative; z-index: 2; margin: 2rem 0 0; font-family: var(--zx-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; }
.zx-cover__look b { color: var(--zx-red); font-weight: 600; }
.zx-shelf__date i { display: block; margin-top: 0.25rem; font-style: normal; color: var(--sh-hi); }

/* Textures sit over the paper, under the type. */
.zx-cover[data-texture] > * { position: relative; z-index: 2; }
.zx-cover[data-texture]::after,
.zx-shelf__item[data-texture] a::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.zx-shelf__item[data-texture] a > :not(img) { position: relative; z-index: 1; }
.zx-cover { --tx: color-mix(in srgb, var(--zx-ink) 16%, transparent); }
.zx-shelf__item a { --tx: color-mix(in srgb, var(--sh-ink) 16%, transparent); }
[data-texture="scanlines"]::after, [data-texture="scanlines"] a::after { background: repeating-linear-gradient(to bottom, var(--tx) 0 1px, transparent 1px 4px); }
[data-texture="halftone"]::after, [data-texture="halftone"] a::after { background: radial-gradient(var(--tx) 1.3px, transparent 1.7px) 0 0 / 9px 9px; }
[data-texture="grid"]::after, [data-texture="grid"] a::after { background: linear-gradient(var(--tx) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, var(--tx) 1px, transparent 1px) 0 0 / 28px 28px; }
[data-texture="stripes"]::after, [data-texture="stripes"] a::after { background: repeating-linear-gradient(-45deg, var(--tx) 0 10px, transparent 10px 22px); }
[data-texture="dither"]::after, [data-texture="dither"] a::after { background: conic-gradient(var(--tx) 25%, transparent 0 50%, var(--tx) 0 75%, transparent 0) 0 0 / 4px 4px; }
[data-texture="noise"]::after, [data-texture="noise"] a::after { opacity: 0.35; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.nl-page[data-aesthetic] .zx-cover__masthead { font-family: 'Anton', 'Impact', 'Arial Narrow', sans-serif; }

/* ---- A back issue's own text, set in sections; each issue mixes these layouts ---- */
.nl-page[data-look="editorial"] .nl-text { margin: 0 auto 4.5rem; }
.nl-page[data-look="editorial"] .nl-text__body { font-size: 1.05rem; line-height: 1.7; overflow-wrap: anywhere; }
.nl-page[data-look="editorial"] .nl-text__body a { color: inherit; text-decoration-color: var(--zx-red); text-decoration-thickness: 2px; }
.nl-page[data-look="editorial"] .nl-text__body p + p,
.nl-page[data-look="editorial"] .nl-text__body p + ul,
.nl-page[data-look="editorial"] .nl-text__body ul + p { margin-top: 0.9em; }
.nl-page[data-look="editorial"] .nl-text__body h2,
.nl-page[data-look="editorial"] .nl-text__body h3,
.nl-page[data-look="editorial"] .nl-text__body h4 { margin: 1.6em 0 0.4em; font-family: var(--zx-display); text-transform: var(--zx-case, uppercase); font-weight: 400; font-size: 1.5rem; line-height: 1.05; }
.nl-page[data-look="editorial"] .nl-text__body img { max-width: 100%; height: auto; }
.nl-text--column { max-width: 42rem; }
.nl-text--letter { max-width: 38rem; }
.nl-text--letter .nl-text__body { font-family: var(--zx-italic); font-style: italic; font-size: 1.35rem; line-height: 1.45; }
.nl-text--two-col .nl-text__body { columns: 2 22rem; column-gap: 3rem; column-rule: 1px solid var(--zx-ink); }
.nl-text--two-col .nl-text__body > * { break-inside: avoid-column; }
.nl-text--boxed { max-width: 46rem; padding: clamp(1.2rem, 3vw, 2.4rem); border: 3px solid var(--zx-ink); box-shadow: 10px 10px 0 var(--zx-red); }
.nl-text--broadside { max-width: none; padding: clamp(1.5rem, 4vw, 3.5rem) var(--zx-gutter); margin-left: calc(-1 * var(--zx-gutter)); margin-right: calc(-1 * var(--zx-gutter)); background: var(--zx-ink); color: var(--zx-paper); }
.nl-page[data-look="editorial"] .nl-text--broadside .nl-section__title { color: var(--zx-paper); border-color: var(--zx-paper); }
.nl-page[data-look="editorial"] .nl-text--broadside .nl-text__body a { text-decoration-color: currentColor; }
.nl-text--broadside .nl-text__body { max-width: 52rem; font-size: 1.2rem; }
.nl-text--sidebar { display: grid; grid-template-columns: minmax(10rem, 16rem) 1fr; gap: 2.5rem; max-width: 64rem; align-items: start; }
.nl-text--sidebar .nl-section__title { position: sticky; top: 1rem; font-size: clamp(1.8rem, 3.5vw, 3rem); }
.nl-text--timetable { max-width: 56rem; }
.nl-text--timetable .nl-text__body { font-family: var(--zx-mono); font-size: 0.82rem; line-height: 1.55; columns: 2 20rem; column-gap: 2.5rem; }
.nl-text--timetable .nl-text__body h2, .nl-text--timetable .nl-text__body h3, .nl-text--timetable .nl-text__body h4 { font-size: 1.1rem; break-after: avoid; break-inside: avoid; }
.nl-text--two-col .nl-text__body h2, .nl-text--two-col .nl-text__body h3 { break-after: avoid; }
.nl-text--timetable .nl-text__body p { break-inside: avoid; }
@media (max-width: 48rem) { .nl-text--sidebar { grid-template-columns: 1fr; gap: 0.5rem; } .nl-text--sidebar .nl-section__title { position: static; } }

/* Videos: a grid of thumbnails; links without a picture fall in as titles. */
.nl-vgrid__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.4rem 1.2rem; }
.nl-vgrid__item a { display: flex; flex-direction: column; gap: 0.45rem; color: inherit; text-decoration: none; }
.nl-vgrid__frame { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--zx-ink); border: 1px solid var(--zx-ink); }
.nl-vgrid__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nl-vgrid__frame .nl-video__play { position: absolute; left: 0.6rem; bottom: 0.5rem; color: #fff; text-shadow: 0 1px 8px rgb(0 0 0 / 0.6); }
.nl-vgrid__title { font-family: var(--zx-display); text-transform: var(--zx-case, uppercase); font-size: 1.15rem; line-height: 1.05; }
.nl-vgrid__item a:hover .nl-vgrid__title { color: var(--zx-red); }
.nl-vgrid__blurb { font-size: 0.9rem; line-height: 1.4; }
.nl-vgrid__item--plain a { padding-top: 0.6rem; border-top: 3px solid var(--zx-ink); }

/* Link lists: an index, a ticker or a stack. */
.nl-links__list { margin: 0; padding: 0; list-style: none; }
.nl-links__list a { color: inherit; text-decoration-color: var(--zx-red); text-decoration-thickness: 2px; }
.nl-links__note { font-family: var(--zx-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--zx-red); }
.nl-links--index .nl-links__list { columns: 3 14rem; column-gap: 2rem; counter-reset: lnk; }
.nl-links--index li { break-inside: avoid; padding: 0.45rem 0; border-top: 1px solid var(--zx-ink); counter-increment: lnk; }
.nl-links--index li::before { content: counter(lnk, decimal-leading-zero) "  "; font-family: var(--zx-mono); font-size: 0.72rem; color: var(--zx-red); }
.nl-links--ticker .nl-links__list { display: flex; flex-wrap: wrap; gap: 0.3rem 0; font-family: var(--zx-display); text-transform: var(--zx-case, uppercase); font-size: clamp(1.2rem, 2.4vw, 1.9rem); line-height: 1.15; }
.nl-links--ticker li::after { content: " / "; color: var(--zx-red); white-space: pre; }
.nl-links--ticker li:last-child::after { content: ""; }
.nl-links--ticker .nl-links__note { display: none; }
.nl-links--stack .nl-links__list { max-width: 44rem; }
.nl-links--stack li { padding: 0.8rem 0; border-bottom: 1px solid var(--zx-ink); font-size: 1.2rem; }
.nl-links--stack .nl-links__note { display: block; margin-top: 0.2rem; }