/* Newsletter magazine pages (issue + cover shelf) — nu-brutalist brick walls.
 *
 * Thick high-contrast borders, flat colour blocks and sticker chips, tiles
 * packed edge to edge in a masonry wall whose heights follow their content —
 * the same wall-of-tiles feel as the homepage. Every issue picks one of six
 * looks (.nl-page[data-variant]) from its number, or from metadata.variant.
 *
 * Colour comes only from contract tokens (--accent-color, --color-on-primary,
 * --card-bg, --card-text, --card-text-muted, --text-color, --text-muted,
 * --bg-color) so every theme supplies its own palette; borders use
 * --text-color because brutalism needs the hardest contrast a theme offers,
 * not its subtle --border-color. Fonts are inherited from the theme.
 *
 * The old newsletter pages used a differently named card token that most themes
 * never define, so cards fell back to a translucent white that is invisible on
 * light themes. */

.nl-page {
    /* The default "original" theme turns .site-main into a multi-column gallery
       grid; span the whole row or this page lands in one narrow column. */
    grid-column: 1 / -1;
    --nl-line: 3px solid var(--text-color);
    --nl-shadow: 8px 8px 0 var(--text-color);

    /* Look defaults (variant 0); the recipes below override them. */
    --nl-col-w: 16rem;
    --nl-cover-bg: var(--accent-color);
    --nl-cover-fg: var(--color-on-primary, #fff);
    --nl-num-fill: transparent;
    --nl-num-stroke: 4px;
    --nl-num-color: var(--nl-cover-fg);
    --nl-num-opacity: 0.4;
    --nl-num-side: right;
    --nl-cover-extra: 0 0 0 0 transparent;
    --nl-first-bg: var(--accent-color);
    --nl-first-fg: var(--color-on-primary, #fff);

    /* Edge to edge like the homepage wall; only a slim margin, no centred column. */
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 1rem clamp(8px, 1.5vw, 20px) 4rem;
    color: var(--text-color);
}

/* ---- Six looks, one per issue ---- */
.nl-page[data-variant="1"] {
    --nl-col-w: 22rem;
    --nl-cover-bg: var(--text-color);
    --nl-cover-fg: var(--bg-color, #000);
    --nl-num-fill: var(--accent-color);
    --nl-num-stroke: 0px;
    --nl-num-color: var(--accent-color);
    --nl-num-opacity: 1;
    --nl-first-bg: var(--card-bg);
    --nl-first-fg: var(--card-text, var(--text-color));
}
.nl-page[data-variant="2"] {
    --nl-col-w: 14rem;
    --nl-cover-bg: var(--card-bg);
    --nl-cover-fg: var(--card-text, var(--text-color));
    --nl-num-color: var(--accent-color);
    --nl-num-opacity: 0.9;
    --nl-num-side: left;
    --nl-cover-extra: inset 0 16px 0 0 var(--accent-color);
    --nl-first-bg: var(--text-color);
    --nl-first-fg: var(--bg-color, #000);
}
.nl-page[data-variant="3"] {
    --nl-col-w: 16rem;
    --nl-num-fill: var(--nl-cover-fg);
    --nl-num-stroke: 0px;
    --nl-num-opacity: 0.2;
    --nl-num-side: left;
}
.nl-page[data-variant="4"] {
    --nl-col-w: 22rem;
    --nl-cover-bg: var(--text-color);
    --nl-cover-fg: var(--bg-color, #000);
    --nl-num-color: var(--accent-color);
    --nl-num-opacity: 1;
    --nl-first-bg: var(--text-color);
    --nl-first-fg: var(--bg-color, #000);
}
.nl-page[data-variant="5"] {
    --nl-col-w: 18rem;
    --nl-cover-bg: var(--card-bg);
    --nl-cover-fg: var(--card-text, var(--text-color));
    --nl-num-fill: var(--accent-color);
    --nl-num-stroke: 0px;
    --nl-num-opacity: 0.55;
    --nl-cover-extra: inset 18px 0 0 0 var(--accent-color);
    --nl-first-bg: var(--card-bg);
    --nl-first-fg: var(--card-text, var(--text-color));
}

.nl-back {
    display: inline-block;
    margin-bottom: 1.5rem;
    padding: 0.25rem 0.6rem;
    border: var(--nl-line);
    background: var(--card-bg);
    color: var(--card-text, var(--text-color));
    font-weight: 700;
    text-decoration: none;
}
.nl-back:hover { background: var(--accent-color); color: var(--color-on-primary, #fff); }

a:focus-visible, .nl-button:focus-visible {
    outline: 4px solid var(--accent-color);
    outline-offset: 3px;
}

/* ---- Cover ---- */
.nl-cover {
    position: relative;
    overflow: hidden;
    padding: clamp(2rem, 6vw, 4rem) clamp(1.25rem, 5vw, 3rem);
    margin-bottom: 3rem;
    border: 4px solid var(--text-color);
    box-shadow: var(--nl-cover-extra), 10px 10px 0 var(--text-color);
    background: var(--nl-cover-bg);
    color: var(--nl-cover-fg);
}
/* The page's one loud gesture: an oversized issue numeral. */
.nl-cover__number {
    position: absolute;
    bottom: -0.18em;
    font-size: clamp(9rem, 32vw, 20rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.06em;
    color: var(--nl-num-fill);
    -webkit-text-stroke: var(--nl-num-stroke) var(--nl-num-color);
    opacity: var(--nl-num-opacity);
    pointer-events: none;
    user-select: none;
    right: -0.02em;
}
.nl-page[data-variant="2"] .nl-cover__number,
.nl-page[data-variant="3"] .nl-cover__number { right: auto; left: -0.04em; }
.nl-cover__text { position: relative; max-width: 40rem; }
.nl-page[data-variant="2"] .nl-cover__text,
.nl-page[data-variant="3"] .nl-cover__text { margin-left: auto; }
.nl-cover__date {
    display: inline-block;
    margin: 0 0 1.25rem;
    padding: 0.2rem 0.6rem;
    border: 3px solid currentColor;
    font-weight: 700;
    font-size: 0.95rem;
}
.nl-cover__headline {
    margin: 0 0 1rem;
    font-size: clamp(2.3rem, 7.5vw, 4.6rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
}
.nl-cover__dek { margin: 0 0 1.75rem; font-size: 1.25rem; line-height: 1.35; font-weight: 500; max-width: 32rem; }

.nl-button {
    display: inline-block;
    padding: 0.8rem 1.4rem;
    border: var(--nl-line);
    background: var(--card-bg);
    color: var(--card-text, var(--text-color));
    font-weight: 800;
    text-decoration: none;
    box-shadow: 4px 4px 0 var(--text-color);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.nl-button:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--text-color); }
.nl-button:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--text-color); }

/* Sticker chip: flat label on a tile (kind of release, etc.). */
.nl-chip {
    display: inline-block;
    margin: 0 0 0.6rem;
    padding: 0.15rem 0.5rem;
    border: 2px solid var(--text-color);
    background: var(--accent-color);
    color: var(--color-on-primary, #fff);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ---- Lead story (the issue's own text) ---- */
.nl-lead {
    max-width: 40rem;
    margin: 0 auto 3.5rem;
    line-height: 1.75;
    font-size: 1.08rem;
}
.nl-lead > p:first-of-type { font-size: 1.35rem; line-height: 1.5; font-weight: 600; }
.nl-lead h1, .nl-lead h2, .nl-lead h3 { margin: 2.25rem 0 0.75rem; line-height: 1.15; font-weight: 900; letter-spacing: -0.01em; }
.nl-lead a { color: var(--text-color); text-decoration: underline; text-decoration-color: var(--accent-color); text-decoration-thickness: 4px; text-underline-offset: 2px; }
.nl-lead a:hover { background: var(--accent-color); color: var(--color-on-primary, #fff); }
.nl-lead img { max-width: 100%; height: auto; border: var(--nl-line); box-shadow: var(--nl-shadow); margin: 1.5rem 0; }
.nl-lead blockquote {
    margin: 2rem 0;
    padding: 1rem 1.25rem;
    border: var(--nl-line);
    background: var(--card-bg);
    color: var(--card-text, var(--text-color));
    box-shadow: var(--nl-shadow);
}
.nl-lead pre {
    overflow-x: auto;
    padding: 1rem;
    background: var(--card-bg);
    color: var(--card-text, var(--text-color));
    border: var(--nl-line);
}

/* ---- Sections ---- */
.nl-section { margin: 4rem 0; }
.nl-section__title {
    display: inline-block;
    margin: 0 0 1.5rem;
    padding: 0.3rem 0.9rem;
    border: var(--nl-line);
    background: var(--accent-color);
    color: var(--color-on-primary, #fff);
    box-shadow: 5px 5px 0 var(--text-color);
    font-size: clamp(1.4rem, 4vw, 2rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.01em;
    transform: rotate(-1deg);
}

/* ---- Brick wall: columns of stacked tiles, heights follow content ---- */
.nl-cards {
    display: flex;
    flex-wrap: wrap;          /* columns wrap to a single stack on narrow screens */
    margin-bottom: 1.5rem;
    border-top: var(--nl-line);
    border-left: var(--nl-line);
}
.nl-cards__col {
    flex: 1 1 var(--nl-col-w);
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.nl-card {
    box-sizing: border-box;
    margin: 0;
    padding: 1.1rem;
    background: var(--card-bg);
    color: var(--card-text, var(--text-color));
    border-right: var(--nl-line);
    border-bottom: var(--nl-line);
    transition: background-color 0.1s ease;
}
/* Stagger tile heights a little so the wall reads as bricks even when copy is short. */
.nl-card:nth-child(3n+1) { padding-bottom: 2.75rem; }
.nl-card:nth-child(4n+3) { padding-top: 2rem; }
/* The very first tile leads. */
.nl-cards__col:first-child > .nl-card:first-child { background: var(--nl-first-bg); color: var(--nl-first-fg); padding: 1.5rem 1.5rem 3.25rem; }
.nl-cards__col:first-child > .nl-card:first-child .nl-card__title { font-size: 1.6rem; line-height: 1.1; }
.nl-cards__col:first-child > .nl-card:first-child .nl-card__byline { color: inherit; opacity: 0.8; }
.nl-card:has(a):hover { background: var(--accent-color); color: var(--color-on-primary, #fff); }
.nl-card:has(a):hover .nl-card__byline { color: inherit; }
.nl-card__image { display: block; width: 100%; height: auto; border: var(--nl-line); margin-bottom: 0.9rem; }
.nl-card__title { margin: 0 0 0.3rem; font-size: 1.15rem; font-weight: 900; line-height: 1.2; }
.nl-card__title a { color: inherit; text-decoration-color: var(--accent-color); text-decoration-thickness: 3px; text-underline-offset: 2px; }
.nl-card__byline { margin: 0 0 0.5rem; color: var(--card-text-muted, var(--text-muted)); font-size: 0.88rem; font-weight: 600; }
.nl-card__blurb { margin: 0; font-size: 0.97rem; line-height: 1.5; }
.nl-card__links a { margin-right: 0.75rem; color: inherit; font-weight: 700; font-size: 0.92rem; text-decoration-color: var(--accent-color); text-decoration-thickness: 3px; }

/* ---- Video tile ---- */
.nl-video { border: 4px solid var(--text-color); background: var(--card-bg); color: var(--card-text, var(--text-color)); box-shadow: var(--nl-shadow); }
.nl-video__link { display: block; color: inherit; text-decoration: none; }
.nl-video__frame { position: relative; display: block; aspect-ratio: 16 / 7; background: var(--accent-color); border-bottom: var(--nl-line); overflow: hidden; }
.nl-video__thumb { display: block; width: 100%; height: 100%; object-fit: cover; }
.nl-video__play {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    padding: 0.5rem 0.9rem;
    border: var(--nl-line);
    background: var(--accent-color);
    color: var(--color-on-primary, #fff);
    font-size: 1.3rem;
    font-weight: 900;
    box-shadow: 4px 4px 0 var(--text-color);
}
.nl-video__link:hover .nl-video__play { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--text-color); }
.nl-video__text { display: block; padding: 1rem 1.25rem 1.25rem; }
.nl-video__text .nl-card__title { display: block; font-size: 1.5rem; }
.nl-video__text .nl-card__blurb { display: block; margin-top: 0.4rem; }

/* Classes: outlined block. Membership: the second place the page spends emphasis. */
.nl-section--sell { padding: 1.75rem; border: 4px solid var(--text-color); box-shadow: 10px 10px 0 var(--text-color); }
.nl-section--sell .nl-section__title { margin-top: 0; }
.nl-section--class { background: var(--card-bg); color: var(--card-text, var(--text-color)); }
.nl-section--member { background: var(--accent-color); color: var(--color-on-primary, #fff); }
.nl-section--member .nl-section__title { background: var(--card-bg); color: var(--card-text, var(--text-color)); }
.nl-section--member > p { max-width: 34rem; font-size: 1.15rem; font-weight: 600; }
/* Inside the sell panels every tile is plain: the lead-tile treatment would
   vanish into the membership panel's accent background. */
.nl-section--sell .nl-cards__col:first-child > .nl-card:first-child { background: var(--card-bg); color: var(--card-text, var(--text-color)); padding: 1.1rem; }
.nl-section--sell .nl-cards__col:first-child > .nl-card:first-child .nl-card__title { font-size: 1.15rem; line-height: 1.2; }

.nl-tier__price { margin: 0 0 0.5rem; font-size: 2.4rem; font-weight: 900; line-height: 1; letter-spacing: -0.03em; }
.nl-tier__price span { font-size: 0.9rem; font-weight: 600; letter-spacing: 0; color: var(--card-text-muted, var(--text-muted)); }
.nl-tier__perks { margin: 0.75rem 0 0; padding-left: 1.1rem; font-size: 0.95rem; line-height: 1.5; }

/* ---- Pull quote ---- */
.nl-quote {
    margin: 4rem 0;
    padding: 1.5rem 1.75rem;
    max-width: 46rem;
    border: 4px solid var(--text-color);
    background: var(--card-bg);
    color: var(--card-text, var(--text-color));
    box-shadow: 10px 10px 0 var(--accent-color), 10px 10px 0 3px var(--text-color);
}
.nl-quote p { margin: 0; font-size: clamp(1.6rem, 4.5vw, 2.5rem); font-weight: 900; line-height: 1.12; letter-spacing: -0.02em; }
.nl-quote footer { margin-top: 0.9rem; font-size: 0.95rem; font-weight: 700; color: var(--card-text-muted, var(--text-muted)); }

/* ---- Subscribe card ---- */
.nl-subscribe {
    margin-top: 4rem;
    padding: 1.5rem;
    background: var(--card-bg);
    color: var(--card-text, var(--text-color));
    border: 4px solid var(--text-color);
    box-shadow: 10px 10px 0 var(--text-color);
    text-align: center;
}
.nl-subscribe iframe { width: 100%; max-width: 500px; border: 0; }

/* ---- Cover shelf (index): a brick wall of issue covers ---- */
.nl-masthead { padding: 1.5rem 0 2.5rem; max-width: 42rem; }
.nl-masthead h1 { margin: 0 0 0.8rem; font-size: clamp(2.4rem, 8vw, 4rem); font-weight: 900; line-height: 1; letter-spacing: -0.03em; }
.nl-masthead p { margin: 0; font-size: 1.2rem; line-height: 1.4; font-weight: 500; }

.nl-shelf {
    list-style: none;
    padding: 0;
    margin: 0 0 3rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    align-items: stretch;      /* each course of bricks has its own height, set by its tallest cover */
    border-top: 4px solid var(--text-color);
    border-left: 4px solid var(--text-color);
}
.nl-shelf__item {
    display: flex;             /* the cover fills the whole cell of its course */
    border-right: 4px solid var(--text-color);
    border-bottom: 4px solid var(--text-color);
}
.nl-shelf__item a {
    flex: 1;
    /* Each tile's fill and ink; variants and :hover swap these two. */
    --tile-bg: var(--accent-color);
    --tile-fg: var(--color-on-primary, #fff);
    position: relative;
    display: block;
    overflow: hidden;
    min-height: 11rem;
    padding: 1.25rem;
    background: var(--tile-bg);
    color: var(--tile-fg);
    text-decoration: none;
    transition: background-color 0.1s ease;
}
/* Each issue's own height and fill, from its own look. */
.nl-shelf__item[data-variant="0"] a { min-height: 10rem; }
.nl-shelf__item[data-variant="1"] a { min-height: 15rem; --tile-bg: var(--card-bg); --tile-fg: var(--card-text, var(--text-color)); }
.nl-shelf__item[data-variant="2"] a { min-height: 12rem; --tile-bg: var(--text-color); --tile-fg: var(--bg-color, #000); }
.nl-shelf__item[data-variant="3"] a { min-height: 18rem; }
.nl-shelf__item[data-variant="4"] a { min-height: 11rem; --tile-bg: var(--text-color); --tile-fg: var(--bg-color, #000); }
.nl-shelf__item[data-variant="5"] a { min-height: 14rem; --tile-bg: var(--card-bg); --tile-fg: var(--card-text, var(--text-color)); }
.nl-shelf__item a:hover { --tile-bg: var(--accent-color); --tile-fg: var(--color-on-primary, #fff); }
.nl-shelf__big {
    position: absolute;
    right: -0.02em;
    bottom: -0.2em;
    font-size: 9rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.06em;
    color: transparent;
    -webkit-text-stroke: 3px var(--tile-fg);
    opacity: 0.4;
    pointer-events: none;
}
.nl-shelf__text { position: relative; display: block; max-width: 85%; }
.nl-shelf__title { display: block; margin: 0 0 0.6rem; font-size: 1.3rem; font-weight: 900; line-height: 1.1; letter-spacing: -0.01em; }
.nl-shelf__date { display: block; font-size: 0.88rem; font-weight: 600; }

/* The newest issue is featured across the whole row. */
.nl-shelf__item--latest { grid-column: 1 / -1; }
.nl-shelf__item--latest a { min-height: 16rem; padding: clamp(1.5rem, 5vw, 2.5rem); }
.nl-shelf__item--latest .nl-shelf__big { font-size: clamp(11rem, 30vw, 17rem); -webkit-text-stroke-width: 4px; }
.nl-shelf__item--latest .nl-shelf__title { font-size: clamp(1.9rem, 5vw, 3.2rem); letter-spacing: -0.03em; }

.nl-pager { display: flex; justify-content: space-between; margin: 1rem 0 2rem; }
.nl-pager a { padding: 0.3rem 0.8rem; border: var(--nl-line); background: var(--card-bg); color: var(--card-text, var(--text-color)); font-weight: 800; text-decoration: none; box-shadow: 4px 4px 0 var(--text-color); }

@media (max-width: 600px) {
    .nl-page { --nl-shadow: 4px 4px 0 var(--text-color); }
    .nl-section--sell { padding: 1.1rem; box-shadow: 6px 6px 0 var(--text-color); }
    .nl-cover, .nl-quote, .nl-subscribe, .nl-video { box-shadow: 6px 6px 0 var(--text-color); }
    .nl-shelf { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .nl-button, .nl-card, .nl-shelf__item a { transition: none; }
    .nl-button:hover, .nl-button:active, .nl-video__link:hover .nl-video__play { transform: none; }
    .nl-section__title { transform: none; }
}

/* ---- Shipped: a wall whose tiles take their shape from the work ----
 * Sizes come from newsletter_issue.ship_tiles (picture shape, then text length);
 * the grid packs densely so a wide or tall tile never leaves a hole. Each kind
 * keeps its own frame: an essay reads like a page, a repo is a terminal, a site
 * sits in a browser bar, a render is the picture itself. */
.nl-ship__dek { max-width: 46rem; margin: -0.5rem 0 1.75rem; font-size: 1.1rem; line-height: 1.5; }
.nl-ship {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--nl-col-w)), 1fr));
    grid-auto-rows: minmax(9rem, auto);
    grid-auto-flow: row dense;
    gap: 14px;
}
.nl-ship__tile {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: var(--nl-line);
    background: var(--card-bg);
    color: var(--card-text, var(--text-color));
    overflow: hidden;
}
.nl-ship__tile--wide { grid-column: span 2; }
.nl-ship__tile--tall { grid-row: span 2; }
.nl-ship__tile--hero { grid-column: span 2; grid-row: span 2; box-shadow: var(--nl-shadow); }

/* Some themes make --card-bg translucent, so anything painted with it is laid
   over the page colour first; on the bare text colour it would vanish. */
.nl-ship { --nl-ship-solid: linear-gradient(var(--card-bg), var(--card-bg)), var(--bg-color, #000); }
.nl-ship__media { position: relative; margin: 0; border-bottom: var(--nl-line); background: var(--nl-ship-solid); }
/* Pictures keep their own shape (width/height come from the item), so a portrait
   sketch stands tall and a render runs wide; only extreme portraits are capped. */
.nl-ship__media img { display: block; width: 100%; height: auto; max-height: 36rem; object-fit: cover; object-position: top; }
.nl-ship__tile--hero .nl-ship__media img { max-height: 30rem; }

/* With zine-pack.js the wall becomes masonry: 8px rows, each tile spanning as
   many as its content needs, so no tile carries dead space. */
.nl-ship--packed { grid-auto-rows: 8px; align-items: start; }
/* Tall and hero tiles set grid-row: span 2, which makes the START a span; when
   start and end are both spans the end is ignored, so reset the start here. */
.nl-ship--packed .nl-ship__tile { grid-row-start: auto; grid-row-end: span 30; }

.nl-ship__body { display: flex; flex-direction: column; gap: 0.45rem; padding: 1rem 1.1rem 1.1rem; }
.nl-ship__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; }
.nl-ship__kicker .nl-chip { margin: 0; }
.nl-ship__source { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--card-text-muted, var(--text-muted)); }
.nl-ship__title { margin: 0; font-size: 1.25rem; font-weight: 900; line-height: 1.15; }
.nl-ship__title a { color: inherit; text-decoration-color: var(--accent-color); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.nl-ship__tile--hero .nl-ship__title { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.nl-ship__blurb, .nl-ship__excerpt { margin: 0; font-size: 0.97rem; line-height: 1.5; }
.nl-ship__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; margin: auto 0 0; padding-top: 0.4rem; font-size: 0.9rem; font-weight: 800; }
.nl-ship__who { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; }
.nl-ship__go { color: inherit; text-decoration-color: var(--accent-color); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.nl-ship__quote { margin: 0.2rem 0 0; padding-left: 0.8rem; border-left: 5px solid var(--accent-color); font-size: 1.02rem; font-style: italic; line-height: 1.45; }

/* Essay: reads like the first page of the piece. */
.nl-ship--essay .nl-ship__body { padding: 1.4rem 1.5rem; }
.nl-ship--essay .nl-ship__title { font-family: Georgia, 'Times New Roman', serif; font-size: 1.7rem; font-weight: 700; }
.nl-ship--essay .nl-ship__excerpt { font-family: Georgia, 'Times New Roman', serif; font-size: 1.05rem; line-height: 1.6; }
.nl-ship--essay .nl-ship__excerpt::first-letter { float: left; margin: 0.08em 0.1em 0 0; font-size: 3.4em; line-height: 0.8; font-weight: 700; color: var(--accent-color); }

/* Site: a browser bar over the screenshot. */
.nl-ship__chrome { display: flex; align-items: center; gap: 6px; height: 2rem; padding: 0 0.7rem; border-bottom: var(--nl-line); background: var(--nl-ship-solid); color: var(--card-text, var(--text-color)); }
.nl-ship__chrome i { width: 10px; height: 10px; border: 2px solid var(--text-color); border-radius: 50%; }
.nl-ship__chrome span { margin-left: 0.5rem; padding: 0 0.6rem; border: 2px solid var(--text-color); font: 700 0.78rem/1.4 ui-monospace, Menlo, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Repo: a terminal, because that's where you meet it. A terminal is dark in
   every theme, so this is the one tile with fixed colours. */
.nl-ship--repo { background: #0c0c0c; color: #ececec; }
.nl-ship--repo .nl-ship__title a, .nl-ship--repo .nl-ship__go { color: #fff; }
.nl-ship--repo .nl-ship__source, .nl-ship--repo .nl-ship__who { color: inherit; opacity: 0.75; }
.nl-ship__term { margin: 0; padding: 1rem 1.1rem; border-bottom: 3px solid #ececec; font: 700 0.85rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-all; color: var(--accent-color); }

/* Hardware and repo specs: a mono strip, like a parts list. */
.nl-ship__specs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.2rem 0 0; padding: 0; list-style: none; }
.nl-ship__specs li { padding: 0.1rem 0.45rem; border: 2px solid currentColor; font: 700 0.76rem/1.5 ui-monospace, Menlo, monospace; }

/* Render: the picture is the point; the play badge says it moves. */
.nl-ship__play { position: absolute; left: 1rem; bottom: 1rem; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border: var(--nl-line); background: var(--accent-color); color: var(--color-on-primary, #fff); font-size: 1.3rem; box-shadow: 4px 4px 0 var(--text-color); }

/* Guide: a poster. */
.nl-ship--guide { background: var(--accent-color); color: var(--color-on-primary, #fff); }
.nl-ship--guide .nl-ship__title { font-size: 1.9rem; text-transform: uppercase; letter-spacing: -0.02em; }
.nl-ship--guide .nl-ship__source { color: inherit; opacity: 0.85; }

/* Sketch: the paper it was planned on. */
.nl-ship--sketch .nl-ship__media { padding: 0.75rem; }
.nl-ship--sketch .nl-ship__media img { border: 2px solid var(--text-color); transform: rotate(-1deg); }

/* Status: not out yet, and that's the news. */
.nl-ship__status { align-self: flex-start; margin: 0.15rem 0; padding: 0.25rem 0.6rem; border: var(--nl-line); background: var(--accent-color); color: var(--color-on-primary, #fff); font-weight: 900; font-size: 0.85rem; }
.nl-ship--status .nl-ship__title { font-size: 2rem; }

@media (max-width: 40rem) {
    .nl-ship__tile--wide, .nl-ship__tile--hero { grid-column: auto; }
    .nl-ship__tile--tall, .nl-ship__tile--hero { grid-row: auto; }
}