/* 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] > :not(.zx-cover__art):not(.zx-cover__credit) { 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"); }
/* Papel picado: cut-paper flags (marigold, siren red, gold) strung across the top,
   halftone grit, and an ember glow rising from the bottom edge. The flags are a fixed
   palette, like the real thing; the cover makes room so they never sit under the masthead. */
[data-texture="papel"]::after, [data-texture="papel"] a::after {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='288' height='80'%3E%3Cdefs%3E%3Cmask id='m' maskUnits='userSpaceOnUse' x='0' y='0' width='96' height='80'%3E%3Crect width='96' height='80' fill='white'/%3E%3Cg fill='black'%3E%3Ccircle cx='48' cy='30' r='5.5'/%3E%3Ccircle cx='60.0' cy='30.0' r='4'/%3E%3Ccircle cx='56.5' cy='38.5' r='4'/%3E%3Ccircle cx='48.0' cy='42.0' r='4'/%3E%3Ccircle cx='39.5' cy='38.5' r='4'/%3E%3Ccircle cx='36.0' cy='30.0' r='4'/%3E%3Ccircle cx='39.5' cy='21.5' r='4'/%3E%3Ccircle cx='48.0' cy='18.0' r='4'/%3E%3Ccircle cx='56.5' cy='21.5' r='4'/%3E%3Cpath d='M16 50l5 6-5 6-5-6z'/%3E%3Cpath d='M32 50l5 6-5 6-5-6z'/%3E%3Cpath d='M64 50l5 6-5 6-5-6z'/%3E%3Cpath d='M80 50l5 6-5 6-5-6z'/%3E%3Cpath d='M14 14l4 5-4 5-4-5z'/%3E%3Cpath d='M82 14l4 5-4 5-4-5z'/%3E%3C/g%3E%3C/mask%3E%3C/defs%3E%3Cpath d='M0 5.5H288' stroke='%23f5e9d3' stroke-opacity='.55' stroke-width='1.5'/%3E%3Cg transform='translate%280%29'%3E%3Cpath d='M4 6H92V68l-4 6-4-6l-4 6-4-6l-4 6-4-6l-4 6-4-6l-4 6-4-6l-4 6-4-6l-4 6-4-6l-4 6-4-6l-4 6-4-6l-4 6-4-6l-4 6-4-6Z' fill='%23ff9f1c' mask='url%28%23m%29'/%3E%3C/g%3E%3Cg transform='translate%2896%29'%3E%3Cpath d='M4 6H92V68l-4 6-4-6l-4 6-4-6l-4 6-4-6l-4 6-4-6l-4 6-4-6l-4 6-4-6l-4 6-4-6l-4 6-4-6l-4 6-4-6l-4 6-4-6l-4 6-4-6Z' fill='%23ff2b1c' mask='url%28%23m%29'/%3E%3C/g%3E%3Cg transform='translate%28192%29'%3E%3Cpath d='M4 6H92V68l-4 6-4-6l-4 6-4-6l-4 6-4-6l-4 6-4-6l-4 6-4-6l-4 6-4-6l-4 6-4-6l-4 6-4-6l-4 6-4-6l-4 6-4-6l-4 6-4-6Z' fill='%23ffcf33' mask='url%28%23m%29'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 288px 80px repeat-x,
        radial-gradient(var(--tx) 1.2px, transparent 1.6px) 0 0 / 7px 7px,
        linear-gradient(to top, rgb(255 43 28 / 0.2), transparent 40%);
}
.zx-cover[data-texture="papel"] { padding-top: calc(1.5rem + 80px); }
@media (max-width: 48rem) {
    .zx-cover[data-texture="papel"]::after { background-size: 216px 60px, 7px 7px, auto; }
    .zx-cover[data-texture="papel"] { padding-top: calc(1.5rem + 60px); }
}
.zx-shelf__item[data-texture="papel"] a::after {
    background-size: 144px 40px, 7px 7px, auto;
}
.zx-shelf__item[data-texture="papel"] a { padding-top: 46px; }
.nl-page[data-aesthetic] .zx-cover__masthead { font-family: 'Anton', 'Impact', 'Arial Narrow', sans-serif; }

/* ---- Slogans (aesthetic.slogans, verified against site_taglines) ---- */
/* A ticker of taglines across the cover, under the masthead. */
.zx-ticker { position: relative; z-index: 2; margin: 1.6rem calc(-1 * var(--zx-gutter)) 0; overflow: hidden;
    border-block: 2px solid var(--zx-red); background: var(--zx-paper); }
.zx-ticker__track { display: flex; width: max-content; animation: zx-ticker 90s linear infinite; }
.zx-ticker__run { display: flex; margin: 0; padding: 0; list-style: none; }
.zx-ticker__run li { padding: 0.55rem 0; white-space: nowrap; font-family: var(--zx-mono); font-size: 0.82rem;
    font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--zx-ink); }
.zx-ticker__run li::after { content: '\2739'; margin: 0 1.1rem; color: var(--zx-red); }
@keyframes zx-ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    .zx-ticker__track { animation: none; width: auto; }
    .zx-ticker__run { flex-wrap: wrap; padding: 0 var(--zx-gutter); }
    .zx-ticker__run[aria-hidden] { display: none; }
}
/* Between sections: a pasted-up, stencilled band, alternating marigold-style accent and siren red.
   Large display type, so the accent's 3:1 floor (aesthetic_for) is the large-text bar. */
.nl-page[data-look="editorial"] .zx-slogan {
    margin: 0 calc(-1 * var(--zx-gutter)) 4.5rem; padding: 1.1rem var(--zx-gutter);
    font-family: var(--zx-display); font-size: max(1.75rem, calc(clamp(1.9rem, 6vw, 3.6rem) * var(--zx-scale, 1)));
    line-height: 1.02; text-transform: var(--zx-case, uppercase); text-align: center; overflow-wrap: anywhere;
    background: var(--zx-red); color: var(--zx-paper); transform: rotate(-1.2deg);
    box-shadow: 0 0 0 3px var(--zx-paper), 0 0 0 5px var(--zx-red);
}
.nl-page[data-look="editorial"] .zx-slogan--b { background: #ff2b1c; color: #0b0b0b; transform: rotate(0.9deg);
    box-shadow: 0 0 0 3px var(--zx-paper), 0 0 0 5px #ff2b1c; }

/* A shipped wall that opens with a hero and then runs in threes: a short last
   row stretches to the full measure instead of leaving an empty column. */
@media (min-width: 48.0625rem) {
    .nl-page[data-aesthetic] .nl-ship > .nl-ship__tile--hero:first-child ~ .nl-ship__tile--std:nth-child(3n+2):nth-last-child(2),
    .nl-page[data-aesthetic] .nl-ship > .nl-ship__tile--hero:first-child ~ .nl-ship__tile--std:nth-child(3n+2):nth-last-child(2) + .nl-ship__tile--std { grid-column: span 6; }
    .nl-page[data-aesthetic] .nl-ship > .nl-ship__tile--hero:first-child ~ .nl-ship__tile--std:nth-child(3n+2):last-child { grid-column: 1 / -1; }
}

/* Anton sets solid at 0.9; most dressed faces have ascenders, swashes and tails
   that collide at that leading, so they get a little air. */
.nl-page[data-aesthetic] :is(.nl-section__title, .nl-card__title, .nl-ship__title) { line-height: 1; }

/* Display type breaks into even lines, never a lone last word. */
.nl-page[data-look="editorial"] :is(.zx-cover__headline, .nl-section__title, .zx-slogan, .zx-cover__dek) { text-wrap: balance; }

/* ---- 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); }
/* A dressed issue sets its sidebar heads in a face that may run far wider than Anton;
   cap them so a word never runs out of its 16rem column into the text beside it. */
.nl-page[data-aesthetic] .nl-text--sidebar .nl-section__title { font-size: calc(min(clamp(2.6rem, 8vw, 7rem), 4rem) * var(--zx-scale, 1)); overflow-wrap: anywhere; }
.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; }

/* ---- Plates on a dressed issue (data-aesthetic): one structure for every plate ----
   The rule on top, then the "No. xx" line, then the picture or terminal, then the title. */
.nl-page[data-aesthetic][data-look="editorial"] .nl-ship__tile { border-top: 8px solid var(--zx-ink); padding-bottom: 2.75rem; }
.nl-page[data-aesthetic][data-look="editorial"] .nl-ship__tile > .nl-ship__kicker { margin: 0 0 0.9rem; padding-top: 0.9rem; }
/* Display leading follows the face (FONT_LEADING), never tighter than solid. */
.nl-page[data-aesthetic][data-look="editorial"] .nl-ship__tile .nl-ship__title,
.nl-page[data-aesthetic][data-look="editorial"] .nl-card .nl-card__title,
.nl-page[data-aesthetic][data-look="editorial"] .nl-section .nl-section__title { line-height: var(--zx-leading, 1); }
.nl-page[data-aesthetic] .zx-cover .zx-cover__headline { line-height: calc(1.05 * var(--zx-leading, 1)); }
/* A long one-word title (a repo name) breaks after its hyphens before it ever overflows. */
.nl-page[data-aesthetic][data-look="editorial"] .nl-ship__title { overflow-wrap: break-word; }
/* The clone line breaks only after a slash (the template puts <wbr> there). */
.nl-page[data-look="editorial"] .nl-ship__term { word-break: normal; overflow-wrap: anywhere; }
/* A lead plate with no picture: the title runs across the top, the story and its
   quote sit side by side underneath, so neither column is left empty. */
@media (min-width: 48.0625rem) {
    .nl-page[data-aesthetic][data-look="editorial"] .nl-ship__tile--hero:not(:has(.nl-ship__media)) .nl-ship__body {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(24px, 3vw, 56px); align-items: start;
    }
    .nl-page[data-aesthetic][data-look="editorial"] .nl-ship__tile--hero:not(:has(.nl-ship__media)) .nl-ship__body > * { grid-column: 1 / -1; grid-row: auto; }
    .nl-page[data-aesthetic][data-look="editorial"] .nl-ship__tile--hero:not(:has(.nl-ship__media)) .nl-ship__title { font-size: calc(clamp(3.4rem, 6.5vw, 7rem) * var(--zx-scale, 1)); margin-bottom: 0.4rem; }
    .nl-page[data-aesthetic][data-look="editorial"] .nl-ship__tile--hero:not(:has(.nl-ship__media)) .nl-ship__body:has(.nl-ship__quote) > :is(.nl-ship__blurb, .nl-ship__excerpt) { grid-column: 1; }
    .nl-page[data-aesthetic][data-look="editorial"] .nl-ship__tile--hero:not(:has(.nl-ship__media)) .nl-ship__body:has(.nl-ship__blurb, .nl-ship__excerpt) > .nl-ship__quote { grid-column: 2; margin-top: 0; }
}

/* =====================================================================
   Magazine spreads for dressed issues: section openers, contents, the
   breather, story plates, numbered card grids and the class listing.
   ===================================================================== */
.nl-page[data-aesthetic] { --zx-siren: #ff2b1c; --zx-black: #0b0b0b; --zx-papel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='288' height='80'%3E%3Cdefs%3E%3Cmask id='m' maskUnits='userSpaceOnUse' x='0' y='0' width='96' height='80'%3E%3Crect width='96' height='80' fill='white'/%3E%3Cg fill='black'%3E%3Ccircle cx='48' cy='30' r='5.5'/%3E%3Ccircle cx='60.0' cy='30.0' r='4'/%3E%3Ccircle cx='56.5' cy='38.5' r='4'/%3E%3Ccircle cx='48.0' cy='42.0' r='4'/%3E%3Ccircle cx='39.5' cy='38.5' r='4'/%3E%3Ccircle cx='36.0' cy='30.0' r='4'/%3E%3Ccircle cx='39.5' cy='21.5' r='4'/%3E%3Ccircle cx='48.0' cy='18.0' r='4'/%3E%3Ccircle cx='56.5' cy='21.5' r='4'/%3E%3Cpath d='M16 50l5 6-5 6-5-6z'/%3E%3Cpath d='M32 50l5 6-5 6-5-6z'/%3E%3Cpath d='M64 50l5 6-5 6-5-6z'/%3E%3Cpath d='M80 50l5 6-5 6-5-6z'/%3E%3Cpath d='M14 14l4 5-4 5-4-5z'/%3E%3Cpath d='M82 14l4 5-4 5-4-5z'/%3E%3C/g%3E%3C/mask%3E%3C/defs%3E%3Cpath d='M0 5.5H288' stroke='%23f5e9d3' stroke-opacity='.55' stroke-width='1.5'/%3E%3Cg transform='translate%280%29'%3E%3Cpath d='M4 6H92V68l-4 6-4-6l-4 6-4-6l-4 6-4-6l-4 6-4-6l-4 6-4-6l-4 6-4-6l-4 6-4-6l-4 6-4-6l-4 6-4-6l-4 6-4-6l-4 6-4-6Z' fill='%23ff9f1c' mask='url%28%23m%29'/%3E%3C/g%3E%3Cg transform='translate%2896%29'%3E%3Cpath d='M4 6H92V68l-4 6-4-6l-4 6-4-6l-4 6-4-6l-4 6-4-6l-4 6-4-6l-4 6-4-6l-4 6-4-6l-4 6-4-6l-4 6-4-6l-4 6-4-6l-4 6-4-6Z' fill='%23ff2b1c' mask='url%28%23m%29'/%3E%3C/g%3E%3Cg transform='translate%28192%29'%3E%3Cpath d='M4 6H92V68l-4 6-4-6l-4 6-4-6l-4 6-4-6l-4 6-4-6l-4 6-4-6l-4 6-4-6l-4 6-4-6l-4 6-4-6l-4 6-4-6l-4 6-4-6l-4 6-4-6Z' fill='%23ffcf33' mask='url%28%23m%29'/%3E%3C/g%3E%3C/svg%3E"); }
/* Density: magazines are dense. */
.nl-page[data-aesthetic][data-look="editorial"] .nl-section { margin: 3.5rem 0; }
.nl-page[data-aesthetic][data-look="editorial"] .nl-lead:empty { display: none; }
.nl-page[data-aesthetic] .zx-cover { margin-bottom: 0; }

/* Contents: a tight box straight under the cover. */
.zx-contents { margin: 0 calc(-1 * var(--zx-gutter)) 0; padding: 1.4rem var(--zx-gutter) 1.6rem;
    background: var(--zx-ink); color: var(--zx-paper); }
.zx-contents__head { display: flex; justify-content: space-between; margin: 0 0 0.9rem; font-family: var(--zx-mono);
    font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.zx-contents ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 1.6rem; margin: 0; padding: 0; list-style: none; }
.zx-contents li { border-top: 2px solid var(--zx-paper); }
.zx-contents a { display: grid; grid-template-columns: auto 1fr; column-gap: 0.8rem; padding: 0.6rem 0 0.2rem; color: inherit; text-decoration: none; }
.zx-contents__n { grid-row: span 2; font-family: var(--zx-display); font-size: 3rem; line-height: 0.9; }
.zx-contents b { font-family: var(--zx-display); font-weight: 400; font-size: 1.5rem; line-height: 1.05; }
.zx-contents i { font-family: var(--zx-mono); font-style: normal; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }
.zx-contents a:hover b, .zx-contents a:focus-visible b { text-decoration: underline; text-decoration-thickness: 3px; }

/* Section openers: folio, a numeral that bleeds off the page edge, the title, the dek. */
.zx-opener { position: relative; overflow: hidden; margin: 4rem calc(-1 * var(--zx-gutter)) 2rem;
    padding: 0 var(--zx-gutter) 1.6rem; border-bottom: 2px solid var(--zx-red); isolation: isolate; }
.zx-folio { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 1.4rem; padding: 0.5rem 0;
    border-bottom: 1px solid currentColor; font-family: var(--zx-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; }
.zx-opener__num { position: absolute; right: -0.06em; bottom: -0.22em; z-index: -1; font-family: 'Anton', sans-serif;
    font-size: clamp(11rem, 30vw, 26rem); line-height: 1; color: transparent; -webkit-text-stroke: 2px var(--zx-red); opacity: 0.55; }
.zx-opener__kicker { display: inline-block; margin: 0 0 0.8rem; padding: 0.25rem 0.6rem; background: var(--zx-red); color: var(--zx-paper);
    font-family: var(--zx-mono); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; transform: rotate(-2deg); }
.zx-opener__title { margin: 0; max-width: 16ch; font-family: var(--zx-display); font-weight: 400;
    font-size: calc(clamp(3.4rem, 9vw, 9rem) * var(--zx-scale, 1)); line-height: var(--zx-leading, 1); text-wrap: balance; }
.zx-opener__dek { max-width: 38rem; margin: 1rem 0 0; font-family: var(--zx-italic); font-size: clamp(1.3rem, 2vw, 1.75rem); line-height: 1.25; }

/* The breather: one tagline, full bleed, as big as it goes, under a papel picado string. */
.zx-breather { position: relative; overflow: hidden; margin: 4rem calc(-1 * var(--zx-gutter)); padding: 110px var(--zx-gutter) 3.5rem;
    background: var(--zx-paper); color: var(--zx-siren); border-block: 2px solid var(--zx-siren); }
.zx-breather::before { content: ''; position: absolute; inset: 0 0 auto; height: 80px;
    background: var(--zx-papel, none) 0 0 / 288px 80px repeat-x; }
.zx-breather__text { margin: 0; font-family: var(--zx-display); font-size: calc(clamp(2.8rem, 9vw, 10rem) * var(--zx-scale, 1));
    line-height: var(--zx-leading, 1); text-wrap: balance; }

/* Story plates: a dense 12-column spread, colour-blocked, with numerals behind. */
.zx-stories { position: relative; }
.zx-stories__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 26px); }
.zx-stories__spine { display: none; }
.zx-plate { position: relative; overflow: hidden; grid-column: span var(--span, 4); isolation: isolate;
    padding: 1.3rem 1.3rem 1.4rem; background: var(--zx-paper); color: var(--zx-ink); border: 2px solid var(--zx-ink); }
.zx-plate--bone { background: var(--zx-ink); color: var(--zx-paper); border-color: var(--zx-ink); }
.zx-plate--marigold { background: var(--zx-red); color: var(--zx-paper); border-color: var(--zx-red); }
.zx-plate--red { background: var(--zx-siren); color: var(--zx-black); border-color: var(--zx-siren); }
.zx-plate:nth-child(4n+2) { transform: rotate(-0.8deg); }
.zx-plate:nth-child(5n+4) { transform: rotate(0.7deg); }
.zx-plate__num { position: absolute; right: -0.04em; top: -0.18em; z-index: -1; font-family: 'Anton', sans-serif; font-size: 9rem; line-height: 1;
    color: transparent; -webkit-text-stroke: 2px currentColor; opacity: 0.28; }
.zx-plate__title { margin: 0 0 0.7rem; max-width: 100%; font-family: var(--zx-display); font-weight: 400; text-transform: uppercase;
    font-size: calc(clamp(2rem, 3vw, 3rem) * var(--zx-scale, 1)); line-height: var(--zx-leading, 1); overflow-wrap: break-word; text-wrap: balance; }
.zx-plate[style*="--span: 8"] .zx-plate__title, .zx-plate[style*="--span: 12"] .zx-plate__title { font-size: calc(clamp(2.6rem, 5vw, 5.4rem) * var(--zx-scale, 1)); }
.zx-plate__quote { margin: 0 0 0.9rem; padding: 0; border: 0; font-family: var(--zx-italic); font-size: clamp(1.5rem, 2.1vw, 2.2rem); line-height: 1.08; }
.zx-plate[style*="--span: 8"] .zx-plate__quote, .zx-plate[style*="--span: 12"] .zx-plate__quote { font-size: clamp(1.9rem, 3vw, 3.2rem); }
.zx-plate__body { font-size: 1rem; line-height: 1.55; }
.zx-plate__body p { margin: 0; }
.zx-plate__body p + p { margin-top: 0.7em; }
.zx-plate__body a { color: inherit; text-decoration-thickness: 2px; }
/* Wide plates: the quote sits beside the story. */
@media (min-width: 64rem) {
    .zx-plate:is([style*="--span: 8"], [style*="--span: 12"]):has(.zx-plate__quote) { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.6rem; align-content: start; }
    .zx-plate[style*="--span: 8"] > :is(.zx-plate__title, .zx-stamp), .zx-plate[style*="--span: 12"] > :is(.zx-plate__title, .zx-stamp) { grid-column: 1 / -1; }
    .zx-plate[style*="--span: 8"] .zx-plate__quote, .zx-plate[style*="--span: 12"] .zx-plate__quote { grid-column: 2; grid-row: 2 / span 2; }
    .zx-plate[style*="--span: 8"] .zx-plate__body, .zx-plate[style*="--span: 12"] .zx-plate__body { grid-column: 1; grid-row: 2; }
}
/* Stamps: a rotated, inked label pressed over the plate's corner. */
.zx-stamp { display: inline-block; justify-self: start; margin: 0 0 0.8rem; padding: 0.2rem 0.55rem; border: 3px double currentColor;
    font-family: var(--zx-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; transform: rotate(-3deg); }
/* A vertical running head down the margin on wide screens. */
@media (min-width: 90rem) {
    .zx-stories__spine { display: block; position: absolute; left: calc(-1 * var(--zx-gutter)); top: 0; bottom: 0; width: var(--zx-gutter);
        margin: 0; overflow: hidden; writing-mode: vertical-rl; transform: rotate(180deg); text-align: end;
        font-family: var(--zx-display); font-size: calc(var(--zx-gutter) * 0.8); line-height: 1; color: var(--zx-red); white-space: nowrap; }
}
@media (max-width: 48rem) {
    .zx-stories__grid { grid-template-columns: minmax(0, 1fr); }
    .zx-plate { grid-column: 1; transform: none !important; }
    .zx-plate__num { font-size: 7rem; }
}

/* Numbered card grids (maps, platform notes) and the back-of-book class listing. */
.zx-cards__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 0 clamp(18px, 2vw, 32px); margin: 0; padding: 0; list-style: none; }
.zx-card { position: relative; padding: 0.8rem 0 1.4rem 4.2rem; border-top: 2px solid var(--zx-ink); }
.zx-card__num { position: absolute; left: 0; top: 0.55rem; font-family: 'Anton', sans-serif; font-size: 3.2rem; line-height: 1; color: var(--zx-red); }
.zx-card__kind { font-family: var(--zx-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--zx-red); }
.nl-page[data-look="editorial"] .zx-card__title { line-height: var(--zx-leading, 1); margin: 0.15rem 0 0.35rem; font-family: var(--zx-display); font-weight: 400; text-transform: uppercase;
    font-size: calc(clamp(1.5rem, 2vw, 2rem) * var(--zx-scale, 1)); }
.zx-card__title a { color: inherit; text-decoration: none; }
.zx-card__title a:hover, .zx-card__title a:focus-visible { text-decoration: underline; text-decoration-color: var(--zx-red); text-decoration-thickness: 3px; }
.zx-card__blurb, .zx-card__byline { margin: 0; font-size: 0.98rem; line-height: 1.5; }
.zx-card__image { display: block; width: 100%; margin-bottom: 0.6rem; }
.zx-cards__head { margin: 0 0 1rem; font-family: var(--zx-mono); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--zx-red); }
/* The listing: cartelera-style rows on bone, two columns on a wide screen. */
.zx-cards--listing { margin-left: calc(-1 * var(--zx-gutter)) !important; margin-right: calc(-1 * var(--zx-gutter)) !important;
    padding: 1.6rem var(--zx-gutter) 2rem; background: var(--zx-ink); color: var(--zx-paper); }
.zx-cards--listing .zx-cards__head { color: var(--zx-paper); }
.zx-cards--listing .zx-cards__grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr)); }
.zx-cards--listing .zx-card { border-top-color: var(--zx-paper); }
.zx-cards--listing .zx-card__num { color: var(--zx-paper); -webkit-text-stroke: 0; }
.zx-cards--listing .zx-card__title a:hover { text-decoration-color: var(--zx-paper); }

/* The feature: drop cap and two columns of body copy, the heading as a spread opener. */
.nl-page[data-aesthetic][data-look="editorial"] .nl-text--column { max-width: none; }
.nl-page[data-aesthetic][data-look="editorial"] .nl-text--column .nl-text__body { columns: 2 22rem; column-gap: 2.6rem; column-rule: 1px solid color-mix(in srgb, var(--zx-ink) 30%, transparent); font-size: 1.08rem; }
.nl-page[data-aesthetic][data-look="editorial"] .nl-text--column .nl-text__body > p:first-child::first-letter {
    float: left; margin: 0.05em 0.1em 0 0; font-family: var(--zx-display); font-size: 4.6em; line-height: 0.8; color: var(--zx-red); }
.nl-page[data-aesthetic][data-look="editorial"] .nl-text--column .nl-section__title { max-width: 26ch; font-size: calc(clamp(2.2rem, 4.2vw, 4.4rem) * var(--zx-scale, 1)); }

/* The front-of-book quote: a hard siren block, the words set huge. */
.nl-page[data-aesthetic][data-look="editorial"] .nl-quote { max-width: none; margin: 2.5rem 0; padding: 2.4rem clamp(1.2rem, 4vw, 3.5rem) 2rem;
    background: var(--zx-red); color: var(--zx-paper); border: 0; text-align: left; transform: rotate(-0.6deg); }
.nl-page[data-aesthetic][data-look="editorial"] .nl-quote::before { left: auto; right: 1.2rem; top: -1.4rem; transform: none; color: var(--zx-paper); font-size: 9rem; }
.nl-page[data-aesthetic][data-look="editorial"] .nl-quote footer { color: var(--zx-paper); font-family: var(--zx-mono); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; }

/* Plates rise in as they scroll into view, where the browser can do it for free. */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .zx-plate, .zx-card { animation: zx-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
        @keyframes zx-rise { from { opacity: 0.2; translate: 0 2.5rem; } }
    }
}
/* The folio sits over the opener's numeral, on the page colour, never crossed by it. */
.zx-folio { position: relative; background: var(--zx-paper); }
@media (max-width: 48rem) { .zx-folio { font-size: 0.62rem; white-space: nowrap; } .zx-folio span:first-child { display: none; } }
@media (max-width: 48rem) { .zx-opener__num { top: 2rem; bottom: auto; font-size: 6.5rem; opacity: 0.35; } }

/* =====================================================================
   Type system for dressed issues. Three faces:
   - the issue's display face (--zx-display): short display only, three words or fewer;
   - the grotesque (--zx-grotesk): long headings, labels and listings;
   - the serif (--zx-serif / --zx-italic): body, captions, quotes.
   Scale: 0.75 / 1.0625 / 1.5 / 2.6 / 4.4 rem, then fitted display above that.
   ===================================================================== */
.nl-page[data-aesthetic] { --zx-grotesk: 'Big Shoulders Display', 'Anton', 'Arial Narrow', sans-serif; }
.nl-page[data-aesthetic][data-look="editorial"] .zx-long {
    font-family: var(--zx-grotesk); font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.92;
    overflow-wrap: normal; hyphens: manual;
}
.nl-page[data-aesthetic][data-look="editorial"] :is(h1, h2, h3) { overflow-wrap: normal; word-break: normal; hyphens: manual; }
.nl-page[data-aesthetic][data-look="editorial"] .nl-text--column .nl-section__title.zx-long { font-size: clamp(2.2rem, 3.6vw, 3.8rem); max-width: 22ch; }
.nl-page[data-aesthetic][data-look="editorial"] .nl-text__body, .zx-plate__body, .zx-brief__body { font-size: 1.0625rem; line-height: 1.55; }
.nl-page[data-aesthetic][data-look="editorial"] .nl-text__body { max-width: 68ch; }
.nl-page[data-aesthetic][data-look="editorial"] .nl-text--column .nl-text__body { max-width: none; }
.zx-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* Text flowed around a giant initial (zine-fit.js lays out each line). */
.zx-flowed { position: relative; margin: 0 0 1em; break-inside: avoid; }
.zx-flowed__initial { position: absolute; left: 0; top: 0.05em; font-family: var(--zx-display); font-size: 7.2em; line-height: 0.82; color: var(--zx-red); }
.zx-flowed__lines { position: relative; }
.zx-flowed__line { position: absolute; white-space: pre; }
.zx-flow .zx-flowed + p { margin-top: 0; }
.nl-page[data-aesthetic][data-look="editorial"] .zx-flow > p:first-child::first-letter { float: none; font: inherit; color: inherit; margin: 0; }

/* Story plates, redesigned: the student's quote is the hero, the blurb its caption. */
.zx-plate { display: flex; flex-direction: column; gap: 0.55rem; padding: 1.2rem 1.25rem 1.3rem; }
.zx-plate > * { margin: 0; }
.zx-comp { position: relative; margin: 0.3rem 0 0.2rem; padding: 0 0 0 0.05em; border: 0; hanging-punctuation: first last; }
.zx-comp::before { content: '\201C'; position: absolute; left: -0.08em; top: -0.32em; z-index: -1; font-family: var(--zx-display);
    font-size: 7rem; line-height: 1; color: var(--zx-red); opacity: 0.9; }
.zx-plate--marigold .zx-comp::before { color: var(--zx-paper); opacity: 0.35; }
.zx-plate--red .zx-comp::before, .zx-plate--bone .zx-comp::before { color: var(--zx-paper); opacity: 0.25; }
.zx-comp__text { margin: 0; font-family: var(--zx-italic); font-size: clamp(1.45rem, 2vw, 2.1rem); line-height: 1.04; letter-spacing: -0.01em; text-wrap: balance; }
.zx-comp__key { font-family: var(--zx-grotesk); font-weight: 800; font-style: normal; text-transform: uppercase;
    font-size: 1.75em; line-height: 0.92; letter-spacing: -0.015em; }
.zx-plate:is([style*="--span: 8"], [style*="--span: 12"]) .zx-comp__text { font-size: clamp(1.8rem, 2.8vw, 3rem); }
.zx-comp__paint { display: flex; flex-direction: column; justify-content: flex-start; font-family: var(--zx-italic); font-size: clamp(1.45rem, 2vw, 2.1rem); letter-spacing: -0.01em; }
.zx-plate:is([style*="--span: 8"], [style*="--span: 12"]) .zx-comp__paint { font-size: clamp(1.8rem, 2.8vw, 3rem); }
.zx-comp__line { display: flex; align-items: baseline; white-space: pre; }
.zx-comp__line > span { line-height: 1; }
.zx-comp__paint :is(.zx-comp__pre, .zx-comp__post) { font-size: 1em; }
.zx-plate__title { font-size: 1.5rem; }
.zx-plate--noquote .zx-plate__title { font-size: calc(clamp(2rem, 3vw, 3rem) * var(--zx-scale, 1)); }
.nl-page[data-aesthetic][data-look="editorial"] .zx-plate__title.zx-long { font-size: clamp(1.5rem, 2vw, 2.1rem); line-height: 0.95; }
.zx-plate__body { font-size: 1.0625rem; }
.zx-plate__body p::before, .zx-brief__body p::before { content: none; }
/* Undo the earlier wide-plate grid: the quote now leads, the caption follows. */
@media (min-width: 64rem) {
    .zx-plate:is([style*="--span: 8"], [style*="--span: 12"]):has(.zx-plate__quote) { display: flex; }
    .zx-plate:is([style*="--span: 8"], [style*="--span: 12"]) :is(.zx-plate__body, .zx-plate__title) { max-width: 60ch; }
}
.zx-plate > .zx-stamp { align-self: flex-start; }
.zx-plate__num { font-size: 7.5rem; right: 0.1em; top: auto; bottom: -0.2em; }

/* Briefs: the short ones, tight, in one column like the front of a magazine. */
.zx-briefs { grid-column: span var(--span, 4); padding: 1rem 1.2rem 1.2rem; border: 2px solid var(--zx-red); background: var(--zx-paper); }
.zx-briefs__head { margin: 0 0 0.6rem; padding-bottom: 0.35rem; border-bottom: 3px solid var(--zx-red); font-family: var(--zx-grotesk);
    font-weight: 800; font-size: 1.6rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--zx-red); }
.zx-brief { padding: 0.65rem 0; border-top: 1px solid color-mix(in srgb, var(--zx-ink) 35%, transparent); }
.zx-brief:first-of-type { border-top: 0; padding-top: 0.2rem; }
.zx-brief__title { margin: 0 0 0.25rem; font-family: var(--zx-grotesk); font-weight: 800; font-size: 1.35rem; line-height: 1; text-transform: uppercase; }
.zx-brief__body { font-size: 1rem; line-height: 1.5; }
.zx-brief__body p { margin: 0; }
.zx-brief .zx-stamp { margin-bottom: 0.35rem; font-size: 0.64rem; }
@media (max-width: 48rem) { .zx-briefs { grid-column: 1; } }

/* Labels, stamps, kickers and listings in the grotesque; small caps labels tracked open. */
.nl-page[data-aesthetic] :is(.zx-card__title, .zx-cards__head) { font-family: var(--zx-grotesk); font-weight: 800; }
.nl-page[data-aesthetic][data-look="editorial"] .zx-card__title { font-size: clamp(1.4rem, 1.8vw, 1.85rem); line-height: 0.98; letter-spacing: -0.005em; }
.zx-contents b { font-family: var(--zx-grotesk); font-weight: 800; text-transform: uppercase; letter-spacing: 0; }
.zx-opener__title.zx-long { font-family: var(--zx-grotesk); font-weight: 800; }

/* Pictures: duotone in the issue's accent and black, a paper edge, a credit line.
   Applied with CSS, never baked into the file. */
.zx-pic { display: block; }
.zx-pic img { display: block; width: 100%; height: auto; }
.zx-plate__fig, .zx-spread, .zx-card--pic .zx-pic { position: relative; margin: 0; background: var(--zx-red); isolation: isolate; }
.zx-plate__fig img, .zx-spread img, .zx-card--pic .zx-pic img { filter: grayscale(1) contrast(1.25) brightness(1.05); mix-blend-mode: multiply; }
.zx-plate__fig { margin: -1.2rem -1.25rem 0.4rem; transform: rotate(-0.6deg); box-shadow: 0 6px 0 var(--zx-paper); }
.zx-plate__fig::after { content: ''; position: absolute; top: -8px; left: 40%; width: 5.5rem; height: 1.4rem; background: color-mix(in srgb, var(--zx-ink) 70%, transparent); transform: rotate(-4deg); }
.zx-plate__fig figcaption, .zx-spread figcaption { position: absolute; right: 0.5rem; bottom: 0.4rem; padding: 0.15rem 0.4rem; background: var(--zx-paper); color: var(--zx-ink);
    font-family: var(--zx-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; }
.zx-spread { margin: 0 calc(-1 * var(--zx-gutter)) 2rem; max-height: 78vh; overflow: hidden; }
.zx-spread img { max-height: 78vh; object-fit: cover; }
.zx-card--pic { padding-left: 0; }
.zx-card--pic .zx-card__num { position: static; display: block; margin-bottom: 0.2rem; font-size: 2.4rem; }
.zx-card--pic .zx-pic { margin-bottom: 0.6rem; aspect-ratio: 16 / 9; overflow: hidden; }
.zx-card--pic .zx-pic img { height: 100%; object-fit: cover; }

/* Density: a dressed issue is dense. */
.nl-page[data-aesthetic][data-look="editorial"] .nl-section { margin: 2.2rem 0; }
.nl-page[data-aesthetic] .zx-opener { margin: 2.6rem calc(-1 * var(--zx-gutter)) 1.4rem; padding-bottom: 1.1rem; }
.nl-page[data-aesthetic] .zx-opener__num { font-size: clamp(9rem, 22vw, 20rem); }
.nl-page[data-aesthetic][data-look="editorial"] .nl-ship__tile { padding-bottom: 1.6rem; }
.nl-page[data-aesthetic] .zx-breather { margin: 2.6rem calc(-1 * var(--zx-gutter)); padding-bottom: 2.2rem; }
.nl-page[data-aesthetic][data-look="editorial"] .nl-quote { margin: 1.6rem 0; }
.nl-page[data-aesthetic] .zx-slogan { margin-bottom: 2.4rem; }
.nl-page[data-aesthetic] .zx-cover:not(.zx-cover--art) { gap: 1.6rem; }
/* The site footer must never sit on the issue's last lines. */
.nl-page[data-aesthetic] { padding-bottom: 7rem; }
.zx-briefs[style*="--span: 12"] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); column-gap: 1.4rem; }
.zx-briefs[style*="--span: 12"] .zx-briefs__head { grid-column: 1 / -1; }
.zx-briefs[style*="--span: 12"] .zx-brief { border-top: 0; border-left: 1px solid color-mix(in srgb, var(--zx-ink) 35%, transparent); padding: 0.2rem 0 0.2rem 1rem; }
.zx-briefs[style*="--span: 12"] .zx-brief:first-of-type { border-left: 0; padding-left: 0; }
@media (max-width: 48rem) { .zx-briefs[style*="--span: 12"] .zx-brief { border-left: 0; padding-left: 0; border-top: 1px solid color-mix(in srgb, var(--zx-ink) 35%, transparent); padding-top: 0.6rem; } }
.nl-page[data-aesthetic] :is(.zx-plate__body, .zx-brief__body, .zx-card__blurb) a { color: inherit; text-decoration: underline; text-decoration-color: var(--zx-red); text-decoration-thickness: 2px; text-underline-offset: 2px; }
.nl-page[data-aesthetic] .zx-plate--marigold :is(.zx-plate__body) a, .nl-page[data-aesthetic] .zx-plate--red .zx-plate__body a { text-decoration-color: currentColor; }

/* A dressed (data-aesthetic) issue swaps the palette: paper is dark, ink is light.
   The art cover must follow it, keep the art behind the text, and keep a long
   cover headline in the readable condensed face (the long-heading rule). */
.nl-page[data-aesthetic] .zx-cover--art { background: var(--zx-paper); color: var(--zx-ink); }
.nl-page[data-aesthetic] .zx-cover--art .zx-cover__art { z-index: 0; object-position: center 70%; filter: brightness(0.62) saturate(1.1); }
.nl-page[data-aesthetic] .zx-cover--art .nl-button { background: var(--zx-accent, #ff9f1c); color: var(--zx-paper); }
.nl-page[data-aesthetic] .zx-cover--art .zx-cover__headline {
    font-family: var(--zx-grotesk); font-weight: 900; text-transform: uppercase;
    font-size: clamp(2.6rem, 5.6vw, 5.4rem); line-height: 0.98; letter-spacing: 0.005em; max-width: 16ch; text-wrap: balance;
}
.nl-page[data-aesthetic] .zx-cover--art .zx-cover__dek { font-size: clamp(1.1rem, 1.5vw, 1.35rem); max-width: 36rem; }

/* "Help us on Patreon" rides under every header (Liz: excessively linked). */
.zx-patreon { display: inline-block; margin: 0.35rem 0 0.9rem; font-family: var(--zx-mono); font-size: 0.72rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--zx-accent, #ff9f1c); text-decoration: underline;
  text-underline-offset: 0.25em; }
.zx-patreon:hover, .zx-patreon:focus-visible { color: var(--zx-ink); }
h2 + .zx-patreon { display: block; width: max-content; max-width: 100%; }
.zx-breather__patreon { margin: 1.2rem 0 0; font-family: var(--zx-mono); font-size: 0.85rem; letter-spacing: 0.06em; text-align: center; }
.zx-breather__patreon .zx-patreon { margin: 0; color: inherit; font-size: inherit; }
.zx-cover .zx-patreon--cover { margin-left: 0.8rem; background: transparent; border: 2px solid currentColor; }

/* A picture whose colour is the point (a screenshot of the product) skips the duotone;
   focus picks the part of a tall picture a cropped frame keeps. */
.zx-pic.zx-pic--color, .zx-card--pic .zx-pic.zx-pic--color { background: none; }
.zx-pic.zx-pic--color img { filter: none; mix-blend-mode: normal; }
.zx-pic--top img { object-position: center top; }
.zx-pic--bottom img { object-position: center bottom; }