/*
 * Losse Eindj.es: the refreshed look.
 *
 * Every rule hangs off html.nl, which base.html sets for visitors who opened
 * the site with ?look=new (and ?look=old turns it off again). To make it the
 * look for everyone, add the class unconditionally there. /traffic doesn't
 * load this file at all.
 *
 * Same character as before (memo board, polaroids, post-its, hand lettering),
 * on warm paper instead of plain white, with calmer cards and an easier
 * reading column.
 */

.nl-only { display: none; }
html.nl .nl-only { display: block; }

html.nl {
    --paper: #f7f4ee;
    --paper-deep: #efe9df;
    --line: #e6dfd3;
    --ink: #2b2926;
    --ink-soft: #4a4640;
    --muted: #7a7368;
    --accent: #0f766e;
    --accent-soft: rgba(15, 118, 110, 0.35);
    --card-shadow: 0 1px 2px rgba(60, 40, 20, 0.05), 0 10px 24px -14px rgba(60, 40, 20, 0.28);
    --card-shadow-hover: 0 2px 4px rgba(60, 40, 20, 0.06), 0 18px 32px -16px rgba(60, 40, 20, 0.34);
    scroll-padding-top: 5rem;
}

/* Tailwind v4 draws a plain `border` in the text colour (near black here);
   give unspecified borders a soft paper line again. Zero specificity, so
   any explicit border-* colour class still wins. */
:where(html.nl) *,
:where(html.nl) ::before,
:where(html.nl) ::after {
    border-color: var(--line);
}

html.nl,
html.nl body {
    background: var(--paper);
    color: var(--ink);
}

html.nl ::selection {
    background: #fde68a;
    color: inherit;
}

/* ---------------------------------------------------------------- header */

html.nl header .sticky.bg-white {
    background: rgba(255, 255, 255, 0.97);
    border-bottom: 1px solid rgba(60, 40, 20, 0.07);
}

html.nl header .menu-link {
    transition: color 0.15s ease;
}

html.nl header .menu-link:hover {
    color: var(--accent);
}

html.nl header .dropdown-menu {
    border-radius: 12px;
    border: 1px solid var(--line);
    box-shadow: 0 16px 36px -18px rgba(60, 40, 20, 0.4);
    overflow: hidden;
}

html.nl header input[type="search"],
html.nl header input[type="text"],
html.nl header button[type="submit"] {
    border-radius: 999px;
    border-color: var(--line);
    background: #fff;
}

html.nl header input[type="search"]:focus,
html.nl header input[type="text"]:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

/* ------------------------------------------------------- reading column */

html.nl .prose {
    color: var(--ink);
}

html.nl .blog-post-content,
html.nl main article.prose {
    max-width: 44rem;
    margin-left: auto;
    margin-right: auto;
}

html.nl .blog-post-content p,
html.nl .blog-post-content li,
html.nl main article.prose p,
html.nl main article.prose li {
    color: var(--ink-soft);
    font-size: 1.15rem;
    line-height: 1.8;
}

html.nl .blog-post-content strong,
html.nl main article.prose strong {
    color: var(--ink);
}

/* Section headings: a hand-drawn squiggle in the link colour underneath. */
html.nl .prose h2 {
    position: relative;
    margin-top: 2.8rem;
    padding-bottom: 0.7rem;
    color: var(--ink);
    letter-spacing: 0.04em;
}

html.nl .prose h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 4.6rem;
    height: 9px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 9'%3E%3Cpath d='M2 6.5C9 2 15 2 21 5.5s12 3.5 19 0 12-3.5 19 0 12 3.5 19 0 9-3 12-1.5' fill='none' stroke='%230f766e' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center / contain;
    opacity: 0.85;
}

html.nl .prose a {
    color: var(--accent);
    text-decoration-color: var(--accent-soft);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    transition: text-decoration-color 0.15s ease;
}

html.nl .prose a:hover {
    text-decoration-color: currentColor;
}

/* Pictures, videos and tables may be wider than the text. */
html.nl .blog-post-content figure.blog-inline-image-center,
html.nl .blog-post-content .blog-yt-embed {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: min(58rem, calc(100vw - 2.5rem));
    max-width: none !important;
    margin-top: 1.8rem;
    margin-bottom: 1.8rem;
}

html.nl .blog-post-content figure.blog-inline-image-center .blog-inline-image-media {
    border-radius: 12px;
    border-color: var(--line);
    box-shadow: var(--card-shadow);
}

html.nl .blog-post-content table {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: min(58rem, calc(100vw - 2.5rem));
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--card-shadow);
    border-collapse: separate;
    border-spacing: 0;
    font-size: 1rem;
}

html.nl .prose th,
html.nl .prose td {
    border: 0;
    border-bottom: 1px solid var(--line);
}

html.nl .prose th {
    background: var(--paper-deep);
    color: var(--ink);
}

html.nl .prose tbody tr:nth-child(even) {
    background: #fcfaf6;
}

html.nl .prose tbody tr:last-child td {
    border-bottom: 0;
}

@media (max-width: 767px) {
    html.nl .blog-post-content table {
        display: block;
        overflow-x: auto;
    }
}

html.nl .prose blockquote {
    background: transparent;
    border-left: 3px solid #fcd34d;
    color: var(--ink-soft);
}

html.nl .prose code {
    background: var(--paper-deep);
}

html.nl .prose pre {
    background: #fff;
    border: 1px solid var(--line);
}

/* The post's polaroid and post-it sit above the same column. */
html.nl .post-head {
    max-width: 58rem;
    margin-left: auto;
    margin-right: auto;
}

/* ----------------------------------------------------------- homepage */

/* On a phone the Eindhoven magnet note and the quote sat on top of the
   newest post; give them their own spot above it. */
@media (max-width: 767px) {
    html.nl .memo-fresku-note-wrap {
        position: relative;
        top: auto;
        right: auto;
        width: min(15rem, 76vw);
        margin: 1rem auto 2.75rem;
    }

    html.nl .memo-fresku-quote {
        width: 100%;
        margin-top: 1.6rem;
        text-align: center;
    }
}

/* Category view: a heading, and cards that match the rest. */
html.nl .nl-category-head {
    margin: 0 0 2.2rem;
}

html.nl .nl-category-kicker {
    margin: 0;
    color: var(--muted);
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

html.nl .nl-category-title {
    margin: 0.2rem 0 0;
    font-size: 2rem;
}

/* ---------------------------------------------------------------- cards */

/* Collection cards (vinyl, Playmobil) and the post grid. */
html.nl main .border.rounded.shadow-sm.bg-white:not(.vinyl-card),
html.nl main a.rounded-xl.border.bg-white,
html.nl main .rounded-lg.border.bg-white {
    border-radius: 14px;
    border-color: var(--line);
    box-shadow: var(--card-shadow);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

html.nl main .border.rounded.shadow-sm.bg-white:not(.vinyl-card):hover,
html.nl main a.rounded-xl.border.bg-white:hover {
    transform: translateY(-3px);
    box-shadow: var(--card-shadow-hover);
}

html.nl main .border.rounded.shadow-sm.bg-white:not(.vinyl-card) img,
html.nl main a.rounded-xl.border.bg-white img {
    border-radius: 8px;
}

html.nl main input[type="text"],
html.nl main input[type="search"] {
    border-radius: 10px;
    border-color: var(--line);
    background: #fff;
}

html.nl main input[type="text"]:focus,
html.nl main input[type="search"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

/* ----------------------------------------------------------- pagination */

html.nl nav[aria-label="Pagination Navigation"] .relative.z-0.inline-flex {
    gap: 0.35rem;
    box-shadow: none;
}

html.nl nav[aria-label="Pagination Navigation"] .relative.z-0.inline-flex > * > a,
html.nl nav[aria-label="Pagination Navigation"] .relative.z-0.inline-flex > * > span,
html.nl nav[aria-label="Pagination Navigation"] .relative.z-0.inline-flex > a,
html.nl nav[aria-label="Pagination Navigation"] .relative.z-0.inline-flex > span > span {
    margin-left: 0 !important;
    min-width: 2.25rem;
    justify-content: center;
    border-radius: 999px !important;
    border-color: var(--line);
    background: #fff;
}

html.nl nav[aria-label="Pagination Navigation"] [aria-current="page"] > span {
    background: var(--ink) !important;
    border-color: var(--ink) !important;
    color: #fff !important;
}

html.nl nav[aria-label="Pagination Navigation"] p {
    color: var(--muted);
}

/* -------------------------------------------------------------- footer */

html.nl footer {
    margin-top: 4rem;
    border-top: 1px solid var(--line);
}

/* ------------------------------------------------------- cookie notice */

/* A small sticky note in the corner instead of a full-width bar. */
html.nl .cookie-consent {
    left: 1rem;
    right: auto;
    bottom: 1rem;
    max-width: 22rem;
}

html.nl .cookie-consent > div {
    padding: 0;
}

html.nl .cookie-consent .bg-yellow-50 {
    background: #fff4ad;
    border: 0;
    border-radius: 2px;
    transform: rotate(-1.2deg);
    box-shadow:
        1px 1px 1px rgba(15, 23, 42, 0.08),
        3px 9px 14px -6px rgba(15, 23, 42, 0.26),
        4px 15px 18px -12px rgba(15, 23, 42, 0.16);
}

html.nl .cookie-consent p {
    font-size: 0.9rem;
}

html.nl .cookie-consent button {
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
}

html.nl .cookie-consent button:hover {
    background: #000;
}

/* Logos and watermarks drawn on white: let the paper show through. */

html.nl .vinyl-watermark {
    display: none;
}

/* ======================================================================
 * The memo board, made physical
 * ==================================================================== */

html.nl {
    /* Fine paper fibre, tiled over notes and polaroid frames. */
    --grain: url("/images/grain.png?v=2");
}

/* The magnetic board: a steel whiteboard in a brushed aluminium frame,
   hanging on the paper wall. */
html.nl .memo-board-surface--magnetic {
    background:
        radial-gradient(120% 80% at 30% 0%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 60%),
        linear-gradient(180deg, #f3f3f0 0%, #e9e9e5 100%);
    border-radius: 6px;
    border: 10px solid transparent;
    border-image: linear-gradient(135deg, #d9dcdf 0%, #b7bbbf 22%, #eef0f2 48%, #a9adb2 72%, #d4d7da 100%) 1;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 0 0 1px rgba(0, 0, 0, 0.06),
        0 30px 50px -28px rgba(60, 40, 20, 0.45),
        0 12px 18px -10px rgba(60, 40, 20, 0.2);
}

/* Polaroids: off-white matte frame with grain, the photo set in and glossy. */
html.nl .memo-polaroid-card,
html.nl .blog-polaroid {
    background-color: #fbfaf6;
    background-image: var(--grain), linear-gradient(170deg, #ffffff 0%, #f6f3ec 100%);
    border-radius: 3px;
    box-shadow:
        0 0.5px 0 rgba(255, 255, 255, 0.9) inset,
        0 1px 1px rgba(40, 30, 20, 0.12),
        0 3px 6px -2px rgba(40, 30, 20, 0.18),
        6px 18px 22px -10px rgba(40, 30, 20, 0.32),
        10px 30px 40px -24px rgba(40, 30, 20, 0.28);
}

html.nl .memo-polaroid-photo,
html.nl .blog-polaroid-photo {
    border: 0;
    border-radius: 1px;
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.18),
        0 0 0 1px rgba(255, 255, 255, 0.7);
    filter: saturate(1.04) contrast(1.02);
}

/* The gloss: a soft diagonal sheen over the photo area. */
html.nl .memo-polaroid-card::after {
    content: "";
    position: absolute;
    left: 0.72rem;
    right: 0.72rem;
    top: 0.8rem;
    aspect-ratio: 6 / 5;
    pointer-events: none;
    background: linear-gradient(118deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 28%, rgba(255, 255, 255, 0) 42%);
}

html.nl .memo-polaroid-card-grid::after {
    left: 0.62rem;
    right: 0.62rem;
    top: 0.7rem;
}

html.nl .memo-polaroid:hover {
    box-shadow:
        0 0.5px 0 rgba(255, 255, 255, 0.9) inset,
        0 1px 1px rgba(40, 30, 20, 0.1),
        0 6px 10px -3px rgba(40, 30, 20, 0.18),
        10px 28px 30px -12px rgba(40, 30, 20, 0.34),
        14px 42px 50px -26px rgba(40, 30, 20, 0.3);
}

/* Post-its: glued along the top, the bottom lifting off the board. The
   adhesive band is a touch glossier; the lifted end catches the light and
   throws its shadow down. */
html.nl .memo-sticky,
html.nl .blog-postit,
html.nl .cookie-consent .bg-yellow-50 {
    background-color: var(--note-bg, #fff4ad);
    background-image:
        var(--grain),
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.28) 0%,
            rgba(255, 255, 255, 0.08) 16%,
            rgba(0, 0, 0, 0.03) 17%,
            rgba(0, 0, 0, 0) 40%,
            rgba(0, 0, 0, 0) 72%,
            rgba(255, 255, 255, 0.22) 94%,
            rgba(0, 0, 0, 0.06) 100%);
    background-blend-mode: normal;
    border-radius: 1px 1px 3px 3px / 1px 1px 10px 10px;
    box-shadow:
        0 1px 1px rgba(40, 30, 20, 0.1),
        0 10px 8px -8px rgba(40, 30, 20, 0.4),
        0 22px 18px -16px rgba(40, 30, 20, 0.3);
}

html.nl .blog-postit {
    background-color: #fff4ad;
}

html.nl .memo-note:hover,
html.nl .blog-postit:hover {
    box-shadow:
        0 1px 1px rgba(40, 30, 20, 0.08),
        0 16px 12px -10px rgba(40, 30, 20, 0.42),
        0 30px 24px -20px rgba(40, 30, 20, 0.3);
}


/* ======================================================================
 * The weather station: a fridge-magnet LCD unit on the board
 * ==================================================================== */

html.nl .nl-station[hidden] {
    display: none;
}

html.nl .nl-station {
    position: relative;
    width: 12.5rem;
    margin: 1.8rem 0 0 auto;
    transform: rotate(1.2deg);
}

/* The magnet behind it: a dark disc peeking out at the top. */
html.nl .nl-station-magnet {
    position: absolute;
    top: -6px;
    left: 50%;
    width: 2.2rem;
    height: 0.9rem;
    transform: translateX(-50%);
    border-radius: 999px 999px 4px 4px;
    background: linear-gradient(180deg, #4b5563, #1f2937);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
}

html.nl .nl-station-body {
    position: relative;
    padding: 0.55rem 0.6rem 0.5rem;
    border-radius: 14px;
    background:
        var(--grain),
        linear-gradient(165deg, #fdfdfb 0%, #ecebe6 55%, #dedcd5 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -2px 0 rgba(0, 0, 0, 0.06),
        0 1px 1px rgba(40, 30, 20, 0.15),
        4px 12px 16px -8px rgba(40, 30, 20, 0.4),
        8px 24px 30px -18px rgba(40, 30, 20, 0.3);
}

html.nl .nl-station-brand {
    margin: 0 0.15rem 0.35rem;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #4b5563;
}

html.nl .nl-station-brand span {
    font-weight: 400;
    letter-spacing: 0.08em;
    color: #9ca3af;
}

/* The LCD: grey-green, set into the case, with faint unlit segments. */
html.nl .nl-station-lcd {
    padding: 0.45rem 0.55rem 0.4rem;
    border-radius: 6px;
    background: linear-gradient(180deg, #c4cdb3 0%, #b5bf9f 100%);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.35),
        inset 0 0 0 1px rgba(0, 0, 0, 0.25),
        0 1px 0 rgba(255, 255, 255, 0.8);
    color: #1f2a17;
    font-family: 'Share Tech Mono', ui-monospace, monospace;
}

html.nl .nl-station-main {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* The icon as an LCD pictogram: dark segments, no colour. */
html.nl .nl-station-icon svg {
    width: 2.4rem;
    height: 2.4rem;
    filter: grayscale(1) brightness(0.2) contrast(1.4);
    opacity: 0.85;
}

html.nl .nl-station-temp {
    position: relative;
    font-size: 2.1rem;
    line-height: 1;
    letter-spacing: 0.02em;
}

html.nl .nl-lcd-ghost {
    position: absolute;
    inset: 0;
    color: rgba(31, 42, 23, 0.09);
}

html.nl .nl-station-temp [data-w] {
    position: relative;
}

html.nl .nl-station-unit {
    align-self: flex-start;
    margin-top: 0.15rem;
    font-size: 0.85rem;
}

html.nl .nl-station-label {
    margin-top: 0.1rem;
    min-height: 1em;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

html.nl .nl-station-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.1rem 0.6rem;
    margin: 0.3rem 0 0;
    padding-top: 0.3rem;
    border-top: 1px solid rgba(31, 42, 23, 0.25);
    font-size: 0.7rem;
}

html.nl .nl-station-grid div {
    display: flex;
    justify-content: space-between;
    gap: 0.3rem;
}

html.nl .nl-station-grid dt {
    opacity: 0.6;
    text-transform: uppercase;
}

html.nl .nl-station-grid dd {
    margin: 0;
}

/* Three rubber keys under the screen. */
html.nl .nl-station-keys {
    display: flex;
    justify-content: center;
    gap: 0.45rem;
    margin-top: 0.4rem;
}

html.nl .nl-station-keys i {
    width: 1.3rem;
    height: 0.32rem;
    border-radius: 999px;
    background: linear-gradient(180deg, #d1d5db, #9ca3af);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 1px rgba(0, 0, 0, 0.25);
}

@media (max-width: 767px) {
    html.nl .nl-station {
        margin: 1.6rem auto 0;
    }
}

/* LCD digits: the unlit 88.8 behind, the reading right-aligned over it. */
html.nl .nl-lcd-ghost {
    position: static;
}

html.nl .nl-station-temp [data-w] {
    position: absolute;
    top: 0;
    right: 0;
}

/* ======================================================================
 * App feel
 * ==================================================================== */

/* Page transitions: a quick fade and lift; named photos morph in place. */
::view-transition-old(root) {
    animation: 180ms ease-in both nl-fade-out;
}

::view-transition-new(root) {
    animation: 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both nl-rise-in;
}

::view-transition-group(*) {
    animation-duration: 420ms;
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes nl-fade-out {
    to { opacity: 0; }
}

@keyframes nl-rise-in {
    from { opacity: 0; transform: translateY(14px); }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none !important;
    }
}

/* Phone tab bar: frosted glass along the bottom, like an app. */
html.nl .nl-tabbar {
    display: none;
}

@media (max-width: 767px) {
    html.nl .nl-tabbar {
        position: fixed;
        left: 0.75rem;
        right: 0.75rem;
        bottom: calc(0.6rem + env(safe-area-inset-bottom));
        z-index: 94040;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        padding: 0.35rem;
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid rgba(0, 0, 0, 0.05);
        box-shadow: 0 10px 30px -10px rgba(40, 30, 20, 0.35), 0 1px 0 rgba(0, 0, 0, 0.04);
    }

    html.nl body {
        padding-bottom: 5.5rem;
    }

    html.nl .cookie-consent {
        bottom: 6rem;
    }
}

html.nl .nl-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    padding: 0.4rem 0 0.3rem;
    border-radius: 16px;
    color: #57534e;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-decoration: none;
    background: none;
    border: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

html.nl .nl-tab svg {
    width: 1.35rem;
    height: 1.35rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

html.nl .nl-tab.is-active,
html.nl .nl-tab:active {
    color: var(--accent);
    background: rgba(15, 118, 110, 0.1);
}

/* Phones: less frame and padding around the board, a smaller cookie note. */
@media (max-width: 767px) {
    html.nl .memo-board-surface--magnetic {
        border-width: 6px;
        padding: 2.2rem 1rem 2.5rem !important;
    }

    html.nl section:has(> .memo-board-frame) {
        padding: 1rem 0.75rem 2rem !important;
    }

    html.nl .memo-fresku-quote {
        font-size: 1rem;
        line-height: 1.2rem;
        padding: 0 0.25rem;
        transform: none;
    }

    html.nl .cookie-consent {
        left: 0.75rem;
        max-width: 17rem;
    }

    html.nl .cookie-consent .bg-yellow-50 {
        padding: 0.7rem 0.8rem;
    }

    html.nl .cookie-consent p {
        font-size: 0.8rem;
        line-height: 1.35;
    }
}

/* ======================================================================
 * Trips as a travel journal
 * ==================================================================== */

html.nl .nl-hide {
    display: none !important;
}

html.nl .nl-journal {
    --jpaper: #fbf7ee;
    --jdots: rgba(120, 100, 70, 0.16);
    --jink: #2d2a26;
    --jhand: 'Kalam', 'Segoe Print', cursive;
    --jserif: 'Lora', Georgia, serif;
    max-width: 68rem;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
}

/* --- the cover: a linen hardback with an elastic band and a label --- */
html.nl .nl-jcover {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 19rem;
    gap: 2.5rem;
    align-items: center;
    margin-bottom: 3.5rem;
}

html.nl .nl-jcover-book {
    position: relative;
    min-height: 22rem;
    padding: 2.4rem 2.4rem 2.4rem 3.4rem;
    border-radius: 6px 14px 14px 6px;
    background:
        var(--grain),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 2px, rgba(0, 0, 0, 0.03) 2px 4px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0 2px, rgba(0, 0, 0, 0.025) 2px 4px),
        linear-gradient(135deg, #2f4a43 0%, #22362f 100%);
    box-shadow:
        inset 10px 0 0 rgba(0, 0, 0, 0.18),
        inset 12px 0 1px rgba(255, 255, 255, 0.06),
        inset 0 0 40px rgba(0, 0, 0, 0.25),
        0 2px 2px rgba(40, 30, 20, 0.2),
        12px 26px 40px -16px rgba(40, 30, 20, 0.55);
    display: flex;
    align-items: center;
    gap: 2rem;
}

/* The elastic band down the right edge. */
html.nl .nl-jcover-band {
    position: absolute;
    top: -4px;
    bottom: -4px;
    right: 2.2rem;
    width: 12px;
    border-radius: 3px;
    background: linear-gradient(90deg, #111 0%, #3a3a3a 45%, #151515 100%);
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.4);
}

html.nl .nl-jcover-label {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    max-width: 19rem;
    padding: 1.1rem 1.3rem;
    border-radius: 4px;
    background: var(--grain), #f4ecd8;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(120, 90, 50, 0.25), inset 0 0 0 5px #f4ecd8, inset 0 0 0 6px rgba(120, 90, 50, 0.3);
    transform: rotate(-1deg);
}

html.nl .nl-jcover-kicker {
    display: block;
    font-size: 0.68rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #8a7a5c;
}

html.nl .nl-jcover-title {
    margin: 0.3rem 0 0.2rem;
    font-family: var(--jhand);
    font-size: 2rem;
    line-height: 1.1;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: #1f2d2a;
}

html.nl .nl-jcover-dates {
    font-family: var(--jhand);
    color: #5b5040;
}

html.nl .nl-jcover-photo {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    width: 15rem;
    transform: rotate(4deg);
}

/* --- the boarding-pass stub with the numbers --- */
html.nl .nl-jstub {
    display: grid;
    grid-template-columns: 1fr;
    border-radius: 14px;
    background: var(--grain), #fffdf8;
    box-shadow: var(--card-shadow);
    overflow: hidden;
    font-size: 0.85rem;
}

html.nl .nl-jstub-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 1.1rem 1.2rem;
    background: #eb5405;
    color: #fff;
}

html.nl .nl-jstub span {
    display: block;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.75;
}

html.nl .nl-jstub b {
    font-size: 0.98rem;
    font-weight: 600;
}

html.nl .nl-jstub-plane svg {
    width: 1.6rem;
    fill: #fff;
    transform: rotate(90deg);
}

html.nl .nl-jstub-side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    padding: 1rem 1.2rem;
    border-top: 2px dashed var(--line);
}

html.nl .nl-jstub-side span {
    color: var(--muted);
    opacity: 1;
}

/* --- the open notebook --- */
html.nl .nl-jbody {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}

html.nl .nl-jindex {
    position: sticky;
    top: 6rem;
}

html.nl .nl-jindex-card {
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
    padding: 1rem 1rem 1rem 1.2rem;
    border-radius: 3px;
    background:
        var(--grain),
        linear-gradient(transparent 1.6rem, #f1b0a6 1.6rem, #f1b0a6 calc(1.6rem + 1px), transparent calc(1.6rem + 1px)),
        repeating-linear-gradient(#fff 0 calc(1.45rem - 1px), #c9dcef calc(1.45rem - 1px) 1.45rem);
    box-shadow: var(--card-shadow);
    transform: rotate(-0.6deg);
}

html.nl .nl-jindex-title {
    font-family: var(--jhand);
    font-weight: 700;
    color: #b91c1c;
    margin-bottom: 0.5rem;
}

html.nl .nl-jindex ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

html.nl .nl-jindex li {
    margin: 0;
    font-family: var(--jhand);
    font-size: 0.86rem;
    line-height: 1.45rem;
}

html.nl .nl-jindex a {
    display: block;
    color: #334155;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html.nl .nl-jindex a span {
    color: #94a3b8;
    margin-right: 0.35rem;
}

html.nl .nl-jindex a:hover,
html.nl .nl-jindex a.is-current {
    color: #eb5405;
}

html.nl .nl-jpages {
    position: relative;
    padding: 2.5rem clamp(1.2rem, 4vw, 3.5rem) 3rem clamp(2rem, 5vw, 4.5rem);
    border-radius: 4px 10px 10px 4px;
    background:
        radial-gradient(var(--jdots) 1px, transparent 1.2px) 0 0 / 1.25rem 1.25rem,
        var(--grain),
        var(--jpaper);
    box-shadow:
        inset 22px 0 26px -18px rgba(80, 60, 30, 0.35),
        0 1px 1px rgba(40, 30, 20, 0.1),
        /* page edges stacked underneath */
        3px 3px 0 -1px #f3eee2,
        3px 3px 0 0 rgba(120, 100, 70, 0.18),
        6px 6px 0 -1px #efe9db,
        6px 6px 0 0 rgba(120, 100, 70, 0.16),
        14px 26px 40px -18px rgba(40, 30, 20, 0.45);
}

html.nl .nl-jentry {
    scroll-margin-top: 6rem;
    padding-bottom: 2.8rem;
    margin-bottom: 2.8rem;
    border-bottom: 0;
    background: none;
}

/* A hand-drawn rule between entries. */
html.nl .nl-jentry + .nl-jentry {
    position: relative;
}

html.nl .nl-jentry + .nl-jentry::before {
    content: "";
    position: absolute;
    top: -2.9rem;
    left: 20%;
    right: 20%;
    height: 10px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6c40-4 70 3 110-1s80-3 120 0 50 1 66-1' fill='none' stroke='%23b8a98c' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

html.nl .nl-jentry-head {
    margin-bottom: 1.2rem;
}

html.nl .nl-jentry-no {
    display: inline-block;
    padding: 0.05rem 0.55rem;
    border: 2px solid rgba(235, 84, 5, 0.7);
    border-radius: 999px;
    color: rgba(235, 84, 5, 0.85);
    font-family: var(--jhand);
    font-size: 0.8rem;
    font-weight: 700;
    transform: rotate(-4deg);
}

html.nl .nl-jentry-date,
html.nl .nl-jentry-weather {
    font-family: var(--jhand);
    color: #6b5d48;
    font-size: 0.98rem;
}

html.nl .nl-jentry-date {
    margin-top: 0.5rem;
}

html.nl .nl-jflag {
    display: inline-block;
    height: 0.8rem;
    margin-left: 0.4rem;
    vertical-align: -0.05rem;
    border-radius: 1px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transform: rotate(-3deg);
}

html.nl .nl-jentry-title {
    margin: 0.4rem 0 0;
    padding: 0;
    font-family: var(--jhand);
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 700;
    line-height: 1.15;
    text-transform: none;
    letter-spacing: 0;
    color: var(--jink);
}

html.nl .nl-jentry-title::after {
    content: none;
}

html.nl .nl-jentry-text,
html.nl .nl-jentry-text p {
    font-family: var(--jserif);
    font-size: 1.08rem;
    line-height: 1.85;
    color: #3a352e;
}

html.nl .nl-jentry-text p {
    margin: 0 0 1.1em;
}

/* --- prints taped into the journal --- */
html.nl .nl-jprints {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
    grid-auto-flow: dense;
    gap: 1.6rem 1.3rem;
    margin-top: 1.8rem;
}

html.nl .nl-jprint {
    position: relative;
    display: block;
    padding: 0.45rem 0.45rem 1.4rem;
    background: var(--grain), #fffefb;
    box-shadow:
        0 1px 1px rgba(40, 30, 20, 0.15),
        4px 10px 14px -8px rgba(40, 30, 20, 0.4);
    transform: rotate(var(--tilt, -1.5deg));
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

html.nl .nl-jprint:nth-child(3n + 2) { --tilt: 1.8deg; }
html.nl .nl-jprint:nth-child(3n + 3) { --tilt: -0.6deg; }
html.nl .nl-jprint:nth-child(4n + 4) { --tilt: 2.4deg; }

/* The first photo of an entry is the big one. */
html.nl .nl-jprints .nl-jprint:first-child {
    grid-column: span 2;
    grid-row: span 2;
}

html.nl .nl-jprint img,
html.nl .nl-jprint video {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #1f2937;
}

html.nl .nl-jprints .nl-jprint:first-child img,
html.nl .nl-jprints .nl-jprint:first-child video {
    aspect-ratio: auto;
    height: calc(100% - 0rem);
    min-height: 100%;
}

html.nl .nl-jprints .nl-jprint:first-child {
    display: flex;
}

/* Washi tape across the top. */
html.nl .nl-jprint::before {
    content: "";
    position: absolute;
    top: -0.65rem;
    left: 50%;
    width: 4.2rem;
    height: 1.35rem;
    transform: translateX(-50%) rotate(-3deg);
    background:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.25) 0 6px, rgba(255, 255, 255, 0) 6px 12px),
        var(--tape, rgba(250, 204, 21, 0.55));
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
    z-index: 2;
}

html.nl .nl-jprint:nth-child(3n + 2)::before { --tape: rgba(125, 211, 252, 0.55); left: 30%; }
html.nl .nl-jprint:nth-child(3n + 3)::before { --tape: rgba(249, 168, 212, 0.55); left: 68%; transform: translateX(-50%) rotate(4deg); }

html.nl .nl-jprint:hover {
    transform: rotate(0deg) scale(1.03);
    box-shadow: 0 2px 3px rgba(40, 30, 20, 0.15), 8px 20px 26px -12px rgba(40, 30, 20, 0.45);
    z-index: 3;
}

/* Videos: a clip with a play button and a handwritten note. */
html.nl .nl-jclip-play {
    position: absolute;
    top: calc(50% - 0.5rem);
    left: 50%;
    width: 3rem;
    height: 3rem;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

html.nl .nl-jclip-play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    border-left: 0.9rem solid #eb5405;
    border-top: 0.55rem solid transparent;
    border-bottom: 0.55rem solid transparent;
}

html.nl .nl-jclip-label {
    position: absolute;
    bottom: 0.15rem;
    right: 0.6rem;
    font-family: var(--jhand);
    font-size: 0.8rem;
    color: #8a7a5c;
}

html.nl .nl-jend {
    margin: 1rem 0 0;
    text-align: center;
    font-family: var(--jhand);
    color: #9a8a6c;
}

/* Fancybox shows the photos full size; keep its overlay above the tab bar. */
html.nl .fancybox__container {
    z-index: 95000;
}

@media (max-width: 900px) {
    html.nl .nl-jcover {
        grid-template-columns: 1fr;
        gap: 1.6rem;
    }

    html.nl .nl-jbody {
        grid-template-columns: 1fr;
    }

    html.nl .nl-jindex {
        display: none;
    }
}

@media (max-width: 640px) {
    html.nl .nl-jcover-book {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.6rem 2.6rem 1.8rem 2rem;
    }

    html.nl .nl-jcover-photo {
        width: 80%;
        align-self: center;
    }

    html.nl .nl-jpages {
        padding: 1.8rem 1.1rem 2rem 1.6rem;
    }

    html.nl .nl-jprints {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.3rem 0.9rem;
    }
}

/* The contents card scrolls its own list: let the ruled lines scroll with it. */
html.nl .nl-jindex-card {
    background-attachment: local, local, local;
    scrollbar-width: thin;
}

/* ======================================================================
 * Vinyl: a record-store crate (platenbak) and a listening booth
 * ==================================================================== */

html.nl .vinyl-grid.is-crate {
    --rec: min(19rem, 66vw);
    display: block;
    position: relative;
    height: calc(var(--rec) * 1.42 + 2rem);
    max-width: calc(var(--rec) + 7rem);
    margin: 1rem auto 0;
    perspective: 1500px;
    perspective-origin: 50% -55%;
    touch-action: pan-x pinch-zoom;
    user-select: none;
}

html.nl .is-crate .vinyl-card {
    position: absolute;
    left: 50%;
    bottom: calc(var(--rec) * 0.16);
    width: var(--rec);
    height: var(--rec);
    min-height: 0;
    margin-left: calc(var(--rec) / -2);
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: #222;
    overflow: hidden;
    z-index: calc(100 - var(--d));
    transform-origin: 50% 100%;
    transform: translateZ(calc(var(--d) * -30px)) translateY(calc(var(--d) * -0.55rem)) rotateX(7deg);
    filter: brightness(calc(1 - var(--d) * 0.07));
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.2) inset, 0 6px 16px rgba(0, 0, 0, 0.35);
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.4s ease, opacity 0.35s ease;
    cursor: pointer;
}

/* No lift on hover for records further back: the one that looks picked
   must always be the one on the divider card. */

/* The front record lifts a little out of the crate. */
html.nl .is-crate .vinyl-card.is-front {
    transform: translateY(-0.6rem) rotateX(4deg);
}

/* Flipped records fall forward against the front of the crate, back side up. */
html.nl .is-crate .vinyl-card.is-flipped {
    z-index: 150;
    transform: translateZ(20px) rotateX(-78deg);
    filter: brightness(0.32) sepia(0.6);
}

html.nl .is-crate .vinyl-card.is-gone {
    opacity: 0;
    pointer-events: none;
}

html.nl .is-crate .vinyl-sleeve {
    position: absolute;
    inset: 0;
    height: 100%;
    margin: 0;
    border-radius: 0;
    background: #1b1b1b;
}

html.nl .is-crate .vinyl-sleeve img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

/* Sleeve wear: a faint ring where the record pressed through, worn edges, gloss. */
html.nl .is-crate .vinyl-sleeve::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 50%, transparent 43%, rgba(255, 255, 255, 0.07) 44.5%, transparent 46.5%),
        linear-gradient(120deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 32%),
        linear-gradient(0deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0) 12%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 0 18px rgba(0, 0, 0, 0.25);
}

html.nl .is-crate .vinyl-info {
    display: none;
}

/* The crate: two pine planks with a gap, a hand hole and a tape label. */
html.nl .crate-front {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: calc(var(--rec) + 4.5rem);
    height: calc(var(--rec) * 0.5);
    transform: translateX(-50%);
    z-index: 200;
    border-radius: 4px;
    background:
        linear-gradient(180deg, transparent 47%, rgba(30, 18, 8, 0.85) 47%, rgba(30, 18, 8, 0.85) 53%, transparent 53%),
        repeating-linear-gradient(92deg, rgba(110, 70, 30, 0) 0 9px, rgba(110, 70, 30, 0.1) 9px 11px, rgba(110, 70, 30, 0) 11px 23px),
        repeating-linear-gradient(88deg, rgba(255, 255, 255, 0) 0 31px, rgba(255, 255, 255, 0.06) 31px 33px),
        var(--grain),
        linear-gradient(180deg, #d9b07a 0%, #c99a5e 46%, #c3925a 54%, #b9874f 100%);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.35),
        inset 0 -3px 6px rgba(70, 40, 15, 0.35),
        0 18px 30px -14px rgba(40, 25, 10, 0.55);
}

html.nl .crate-hole {
    position: absolute;
    top: 14%;
    left: 50%;
    width: 4.6rem;
    height: 1.25rem;
    transform: translateX(-50%);
    border-radius: 999px;
    background: #2a1a0d;
    box-shadow: inset 0 3px 4px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.35);
}

html.nl .crate-label {
    position: absolute;
    left: 50%;
    bottom: 14%;
    transform: translateX(-50%) rotate(-2deg);
    padding: 0.15rem 0.9rem;
    background: rgba(245, 238, 215, 0.92);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    font-family: 'Permanent Marker', cursive;
    font-size: 1.15rem;
    color: #1f2937;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

html.nl .crate-floor {
    position: absolute;
    left: 50%;
    bottom: calc(var(--rec) * 0.12);
    width: calc(var(--rec) + 3rem);
    height: 2.5rem;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(40, 25, 10, 0.35), transparent);
    z-index: 0;
}

/* The divider card below the crate: what's in front, and the controls. */
html.nl .crate-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 1.2rem auto 2.5rem;
    max-width: 34rem;
}

html.nl .crate-tag-card {
    flex: 1 1 15rem;
    max-width: 22rem;
    padding: 0.9rem 1.1rem 1rem;
    border-radius: 3px 3px 10px 3px;
    background: var(--grain), linear-gradient(170deg, #d7bb8f, #c9a774);
    box-shadow: 0 1px 1px rgba(40, 25, 10, 0.2), 4px 12px 18px -10px rgba(40, 25, 10, 0.5);
    transform: rotate(-0.8deg);
    text-align: center;
}

html.nl .crate-tag-artist {
    font-family: 'Permanent Marker', cursive;
    font-size: 1.35rem;
    line-height: 1.2;
    color: #1c1917;
}

html.nl .crate-tag-title {
    margin-top: 0.15rem;
    font-family: 'Kalam', cursive;
    font-size: 1.05rem;
    color: #3f3326;
}

html.nl .crate-tag-meta {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.25rem;
    font-family: 'Courier Prime', monospace;
    font-size: 0.8rem;
    color: #5b4a35;
}

html.nl .crate-pull {
    margin-top: 0.6rem;
    padding: 0.35rem 1rem;
    border-radius: 999px;
    background: #1c1917;
    color: #f5efe3;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: transform 0.15s ease, background 0.15s ease;
}

html.nl .crate-pull:hover {
    background: #000;
    transform: translateY(-1px);
}

html.nl .crate-btn {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 999px;
    background: #fff;
    box-shadow: var(--card-shadow);
    font-size: 1.6rem;
    line-height: 1;
    color: #44403c;
    transition: transform 0.15s ease;
}

html.nl .crate-btn:hover {
    transform: scale(1.06);
}

html.nl .crate-hint {
    flex-basis: 100%;
    margin: 0;
    text-align: center;
    font-size: 0.8rem;
    color: var(--muted);
}

/* The page intro and search, quieter around the crate. */
html.nl .vinyl-collection > .bg-white.rounded-lg {
    background: transparent;
    box-shadow: none;
}

/* Major9's new arrivals: records on the wall rack, with price stickers. */
html.nl #vinyl-hero-cards a[data-hero-card] {
    background: transparent;
    border: 0;
}

html.nl #vinyl-hero-cards a[data-hero-card] img {
    width: 100%;
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 4px 10px 14px -8px rgba(40, 25, 10, 0.45);
    transition: transform 0.2s ease;
}

html.nl #vinyl-hero-cards a[data-hero-card]:hover img {
    transform: translateY(-4px) rotate(-1deg);
}

html.nl #vinyl-hero-cards a[data-hero-card] .text-amber-700 {
    display: inline-block;
    margin-top: -1.2rem;
    position: relative;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    background: #facc15;
    color: #1c1917 !important;
    transform: rotate(-8deg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* --- the listening booth (album details) --- */
html.nl .vinyl-booth-backdrop {
    background: rgba(18, 14, 10, 0.8);
}

html.nl .vinyl-sheet {
    display: grid;
    grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    max-width: 62rem;
    border-radius: 18px;
    background: var(--grain), linear-gradient(160deg, #24201b, #171411);
    color: #ece4d6;
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8);
    animation: nl-booth-in 0.2s ease-out both;
}

@keyframes nl-booth-in {
    from { opacity: 0; transform: translateY(20px) scale(0.98); }
}

html.nl .vinyl-deck {
    display: block;
    position: relative;
    grid-row: 1 / span 2;
    align-self: center;
    margin: 2rem 0 2rem 1.8rem;
    aspect-ratio: 1 / 1;
}

html.nl .vinyl-deck-sleeve {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5), 10px 24px 40px -14px rgba(0, 0, 0, 0.8);
    z-index: 2;
}

/* The record slides out of the sleeve, then spins at 33⅓. The sheen is on the
   still outer disc, so the light stays put while the grooves turn. */
html.nl .vinyl-deck-disc {
    position: absolute;
    top: 3%;
    left: 3%;
    width: 94%;
    height: 94%;
    border-radius: 50%;
    z-index: 1;
    animation: nl-disc-out 0.5s 0.05s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

html.nl .vinyl-deck-disc::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 20deg, rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 0.14) 25deg, rgba(255, 255, 255, 0) 60deg, rgba(255, 255, 255, 0) 180deg, rgba(255, 255, 255, 0.1) 205deg, rgba(255, 255, 255, 0) 240deg);
    pointer-events: none;
}

html.nl .vinyl-deck-disc span {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle, #e9e2d4 0 1.4%, transparent 1.6%),
        radial-gradient(circle, transparent 0 33%, rgba(0, 0, 0, 0.35) 33.5%, transparent 35%),
        repeating-radial-gradient(circle, #111 0 1px, #1c1c1c 1px 2px, #0d0d0d 2px 3px),
        #111;
    animation: nl-spin 1.8s 0.5s linear infinite;
}

/* The centre label: the cover, cut round. */
html.nl .vinyl-deck-disc span::before {
    content: "";
    position: absolute;
    inset: 33.5%;
    border-radius: 50%;
    background: var(--label) center / cover, #b45309;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35);
}

html.nl .vinyl-deck-disc span::after {
    content: "";
    position: absolute;
    inset: calc(50% - 0.25rem);
    border-radius: 50%;
    background: #e9e2d4;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
}

@keyframes nl-disc-out {
    from { transform: translateX(0); }
    to { transform: translateX(46%); }
}

@keyframes nl-spin {
    to { transform: rotate(360deg); }
}

html.nl .vinyl-sheet-head {
    grid-column: 2;
    border-color: rgba(255, 255, 255, 0.1);
    padding-left: 4.5rem;
}

html.nl .vinyl-sheet-head h2 {
    color: #fff8ec;
    font-family: 'Kalam', cursive;
    font-size: 1.5rem;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: 0;
}

html.nl .vinyl-sheet-head .text-gray-500 {
    color: #a8987f;
}

html.nl .vinyl-close {
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ece4d6;
}

html.nl .vinyl-close:hover {
    color: #fff;
    border-color: #fff;
}

html.nl .vinyl-sheet-body {
    grid-column: 2;
    padding-left: 4.5rem;
    font-family: 'Courier Prime', monospace;
}

html.nl .vinyl-sheet-meta img {
    display: none;
}

html.nl .vinyl-sheet-meta,
html.nl .vinyl-sheet-meta .text-gray-500,
html.nl .vinyl-sheet-body h3 {
    color: #c9bba3;
}

html.nl .vinyl-side {
    color: #f59e0b;
}

html.nl .vinyl-track {
    background: transparent;
    border: 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.14);
    border-radius: 0;
    padding: 0.45rem 0;
    color: #ece4d6;
}

html.nl .vinyl-track .text-gray-500,
html.nl .vinyl-track .text-gray-600 {
    color: #a8987f;
}

@media (max-width: 767px) {
    html.nl .vinyl-sheet {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto minmax(0, 1fr);
    }

    html.nl .vinyl-deck {
        grid-row: auto;
        width: 58%;
        margin: 1.4rem auto 0.5rem 1.4rem;
    }

    html.nl .vinyl-sheet-head,
    html.nl .vinyl-sheet-body {
        grid-column: 1;
        padding-left: 1.5rem;
    }
}

/* Journal text in a clean, even handwriting. */
html.nl .nl-journal {
    --jtext: 'Patrick Hand', 'Kalam', cursive;
}

html.nl .nl-jentry-text,
html.nl .nl-jentry-text p {
    font-family: var(--jtext);
    font-size: 1.32rem;
    line-height: 1.6;
    letter-spacing: 0.005em;
    color: #2f3a4a;
}

/* Leave room beside the sleeve for the record that slides out. */
@media (min-width: 768px) {
    html.nl .vinyl-sheet {
        grid-template-columns: auto minmax(0, 1fr);
        max-width: 68rem;
    }

    html.nl .vinyl-deck {
        width: min(20rem, 30vw);
        margin: 2rem calc(min(20rem, 30vw) * 0.5 + 1.5rem) 2rem 2rem;
    }

    html.nl .vinyl-sheet-head,
    html.nl .vinyl-sheet-body {
        padding-left: 1rem;
    }
}

/* ======================================================================
 * Pokémon: a collector's binder with nine-pocket sleeves
 * ==================================================================== */

html.nl .nl-binder-page {
    max-width: 74rem;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

html.nl .nl-binder-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.8rem;
}

html.nl .nl-binder-kicker {
    margin: 0;
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
}

html.nl .nl-binder-title {
    margin: 0.2rem 0 0.4rem;
    font-family: 'Bungee', 'Julius Sans One', sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    letter-spacing: 0.02em;
    text-transform: none;
    color: #1e3a8a;
    text-shadow: 2px 2px 0 #facc15;
}

html.nl .nl-binder-intro {
    margin: 0;
    max-width: 36rem;
}

/* A Pokédex-style counter. */
html.nl .nl-binder-dex {
    min-width: 16rem;
    padding: 0.8rem 1rem;
    border-radius: 14px;
    background: linear-gradient(160deg, #dc2626, #b91c1c);
    color: #fff;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.25), var(--card-shadow);
}

html.nl .nl-binder-dex-count {
    font-family: 'Bungee', sans-serif;
    font-size: 1.1rem;
}

html.nl .nl-binder-dex-count b {
    font-size: 1.6rem;
    color: #fde047;
}

html.nl .nl-binder-dex-count span {
    font-family: 'Abel', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.85;
}

html.nl .nl-binder-dex-bar {
    height: 0.55rem;
    margin: 0.45rem 0 0.35rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

html.nl .nl-binder-dex-bar span {
    display: block;
    height: 100%;
    min-width: 0.55rem;
    border-radius: inherit;
    background: linear-gradient(90deg, #86efac, #22c55e);
    box-shadow: 0 0 8px rgba(134, 239, 172, 0.8);
}

html.nl .nl-binder-dex-medals {
    font-size: 0.8rem;
    opacity: 0.85;
}

/* The binder: a padded navy vinyl cover with stitching, open flat. */
html.nl .nl-binder {
    position: relative;
    padding: clamp(0.9rem, 2vw, 1.6rem);
    border-radius: 18px;
    background:
        var(--grain),
        radial-gradient(120% 90% at 30% 0%, rgba(255, 255, 255, 0.12), transparent 60%),
        linear-gradient(160deg, #1e3a8a, #172554);
    box-shadow:
        inset 0 0 0 6px rgba(255, 255, 255, 0.04),
        inset 0 0 0 7px rgba(255, 255, 255, 0.14),
        inset 0 3px 8px rgba(255, 255, 255, 0.15),
        0 30px 60px -28px rgba(15, 23, 42, 0.75),
        0 10px 18px -8px rgba(15, 23, 42, 0.35);
    perspective: 2200px;
}

html.nl .nl-binder-spread {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.6rem;
}

@media (min-width: 900px) {
    html.nl .nl-binder-spread {
        grid-template-columns: 1fr 1fr;
    }
}

/* The rings, down the middle on a two-page spread, on the left on one page. */
html.nl .nl-binder-rings {
    position: absolute;
    top: 8%;
    bottom: 8%;
    left: 50%;
    width: 2.6rem;
    margin-left: -1.3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    pointer-events: none;
    z-index: 5;
}

@media (max-width: 899px) {
    html.nl .nl-binder-rings {
        left: 0.4rem;
        margin-left: 0;
    }

    html.nl .nl-binder {
        padding-left: 2.4rem;
    }
}

html.nl .nl-binder-rings i {
    width: 2.6rem;
    height: 1.1rem;
    border-radius: 999px;
    border: 4px solid transparent;
    background:
        linear-gradient(#0000, #0000) padding-box,
        linear-gradient(180deg, #f8fafc, #94a3b8 40%, #e2e8f0 60%, #64748b) border-box;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.45);
}

/* A page: white card stock with three rows of three pockets. */
html.nl .nl-sheet {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(0.4rem, 1vw, 0.75rem);
    padding: clamp(0.5rem, 1.4vw, 1rem);
    border-radius: 6px;
    background:
        var(--grain),
        linear-gradient(180deg, #fbfbfd, #eef0f5);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 6px 14px -6px rgba(0, 0, 0, 0.5);
    transform-origin: left center;
    backface-visibility: hidden;
}

html.nl .nl-sheet--right {
    transform-origin: left center;
}

html.nl .nl-binder-spread.is-turning[data-turn="next"] .nl-sheet {
    animation: nl-turn-next 0.55s cubic-bezier(0.3, 0.7, 0.2, 1) both;
}

html.nl .nl-binder-spread.is-turning[data-turn="prev"] .nl-sheet {
    transform-origin: right center;
    animation: nl-turn-prev 0.55s cubic-bezier(0.3, 0.7, 0.2, 1) both;
}

html.nl .nl-binder-spread.is-turning .nl-sheet--right {
    animation-delay: 0.08s;
}

@keyframes nl-turn-next {
    from { transform: rotateY(-70deg); opacity: 0.2; filter: brightness(0.7); }
    to { transform: rotateY(0); opacity: 1; filter: none; }
}

@keyframes nl-turn-prev {
    from { transform: rotateY(70deg); opacity: 0.2; filter: brightness(0.7); }
    to { transform: rotateY(0); opacity: 1; filter: none; }
}

/* A pocket: the clear sleeve over the card, with its opening along the top. */
html.nl .nl-pocket {
    position: relative;
    aspect-ratio: 63 / 88;
    border-radius: 5px;
    background: rgba(203, 213, 225, 0.35);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.45);
}

html.nl .nl-pocket::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 5px;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0, rgba(255, 255, 255, 0.75) 1px, transparent 1px, transparent 6px),
        linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.38) 42%, rgba(255, 255, 255, 0.05) 52%, rgba(255, 255, 255, 0) 60%),
        linear-gradient(115deg, rgba(255, 255, 255, 0) 64%, rgba(255, 255, 255, 0.18) 68%, rgba(255, 255, 255, 0) 72%);
    background-size: 100% 100%, 300% 100%, 100% 100%;
    background-position: 0 0, 100% 0, 0 0;
    transition: background-position 0.8s ease;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

/* Tilt the light across the plastic on hover. */
html.nl .nl-pocket:hover::after {
    background-position: 0 0, 0 0, 0 0;
}

html.nl .nl-pocket.is-empty::before {
    content: "";
    position: absolute;
    inset: 22% 22%;
    border-radius: 50%;
    border: 2px dashed rgba(148, 163, 184, 0.5);
}

/* The card: a yellow frame around a foil panel, like a trading card. */
html.nl .nl-pcard {
    position: absolute;
    inset: 4% 5%;
    display: flex;
    flex-direction: column;
    padding: 5% 6% 4%;
    border-radius: 4.5% / 3.2%;
    background: linear-gradient(160deg, #fde68a, #facc15 45%, #eab308);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    color: #1f2937;
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.25s ease;
}

html.nl .nl-pcard--medal {
    background: linear-gradient(160deg, #e5e7eb, #cbd5e1 45%, #94a3b8);
}

html.nl .nl-pocket:hover .nl-pcard {
    transform: translateY(-2%);
}

html.nl .nl-pcard-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.3rem;
    padding: 0 0.15rem;
}

html.nl .nl-pcard-name {
    font-weight: 700;
    font-size: clamp(0.6rem, 1.05vw, 0.85rem);
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html.nl .nl-pcard-kind {
    flex: none;
    font-size: clamp(0.42rem, 0.6vw, 0.55rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.7;
}

html.nl .nl-pcard-art {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4% 0;
    aspect-ratio: 1.25 / 1;
    border-radius: 2px;
    background:
        radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 70%),
        conic-gradient(from 200deg, #bae6fd, #ddd6fe, #fbcfe8, #fef08a, #bbf7d0, #bae6fd);
    box-shadow: inset 0 0 0 2px rgba(146, 64, 14, 0.35), inset 0 2px 6px rgba(0, 0, 0, 0.2);
}

html.nl .nl-pcard-art img {
    width: 82%;
    height: 82%;
    object-fit: contain;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35));
}

html.nl .nl-pcard-where {
    padding: 0.15rem 0.3rem;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.6);
    font-size: clamp(0.48rem, 0.75vw, 0.66rem);
    line-height: 1.25;
    text-align: center;
}

html.nl .nl-pcard-mons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.15rem;
    margin-top: 0.25rem;
}

html.nl .nl-pcard-mons span {
    padding: 0 0.3rem;
    border-radius: 999px;
    background: rgba(30, 58, 138, 0.85);
    color: #fff;
    font-size: clamp(0.4rem, 0.6vw, 0.55rem);
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

html.nl .nl-pcard-foot {
    display: flex;
    justify-content: space-between;
    gap: 0.3rem;
    margin-top: auto;
    padding: 0 0.15rem;
    font-size: clamp(0.4rem, 0.58vw, 0.55rem);
    opacity: 0.75;
}

html.nl .nl-binder-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.2rem;
    font-family: 'Kalam', cursive;
    color: var(--muted);
}

html.nl .nl-binder-nav .crate-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

@media (max-width: 899px) {
    html.nl .nl-pcard-name { font-size: 0.68rem; }
    html.nl .nl-pcard-kind { font-size: 0.45rem; }
    html.nl .nl-pcard-where { font-size: 0.55rem; }
    html.nl .nl-pcard-mons span { font-size: 0.45rem; }
    html.nl .nl-pcard-foot { font-size: 0.45rem; }
}

/* ======================================================================
 * Vinyl: a row of crates, like the bins in a record store
 * ==================================================================== */

html.nl .nl-store {
    --rec: min(15rem, 58vw);
    position: relative;
    margin: 0.5rem calc(50% - 50vw) 0;
    width: 100vw;
    overflow: hidden;
    padding: 1rem 0 0;
}

html.nl .nl-store-row {
    display: flex;
    align-items: flex-end;
    gap: clamp(0.4rem, 1.5vw, 1.4rem);
    width: max-content;
    transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
}

html.nl .nl-crate {
    position: relative;
    flex: none;
    width: calc(var(--rec) + 4rem);
    height: calc(var(--rec) * 1.42);
    perspective: 1400px;
    perspective-origin: 50% -55%;
    transform: scale(0.84);
    transform-origin: 50% 100%;
    filter: brightness(0.86) saturate(0.85);
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.4s ease;
    cursor: pointer;
    user-select: none;
    touch-action: none;
}

html.nl .nl-crate.is-sel {
    transform: none;
    filter: none;
    cursor: default;
}

html.nl .nl-crate:not(.is-sel):hover {
    filter: brightness(0.95);
}

html.nl .nl-crate-stack {
    position: absolute;
    inset: 0;
}

html.nl .nl-rec {
    position: absolute;
    left: 50%;
    bottom: calc(var(--rec) * 0.16);
    width: var(--rec);
    height: var(--rec);
    margin-left: calc(var(--rec) / -2);
    border-radius: 2px;
    background: #222;
    overflow: hidden;
    z-index: calc(100 - var(--d));
    transform-origin: 50% 100%;
    transform: translateZ(calc(var(--d) * -28px)) translateY(calc(var(--d) * -0.5rem)) rotateX(7deg);
    filter: brightness(calc(1 - var(--d) * 0.07));
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.2) inset, 0 6px 16px rgba(0, 0, 0, 0.35);
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.4s ease, opacity 0.35s ease;
}

html.nl .nl-rec img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

html.nl .nl-rec::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 50%, transparent 43%, rgba(255, 255, 255, 0.07) 44.5%, transparent 46.5%),
        linear-gradient(120deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 32%),
        linear-gradient(0deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0) 12%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 0 18px rgba(0, 0, 0, 0.25);
}

html.nl .nl-crate.is-sel .nl-rec.is-front {
    transform: translateY(-0.6rem) rotateX(4deg);
    cursor: pointer;
}

html.nl .nl-rec.is-flipped {
    z-index: 150;
    transform: translateZ(20px) rotateX(-78deg);
    filter: brightness(0.32) sepia(0.6);
}

html.nl .nl-rec.is-gone {
    opacity: 0;
    pointer-events: none;
}

/* Crates far from the selected one are just their wooden box. */
html.nl .nl-crate:not(.is-near) .nl-crate-stack {
    display: none;
}

html.nl .nl-crate-front {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--rec) * 0.5);
    z-index: 200;
    border-radius: 4px;
    background:
        linear-gradient(180deg, transparent 47%, rgba(30, 18, 8, 0.85) 47%, rgba(30, 18, 8, 0.85) 53%, transparent 53%),
        repeating-linear-gradient(92deg, rgba(110, 70, 30, 0) 0 9px, rgba(110, 70, 30, 0.1) 9px 11px, rgba(110, 70, 30, 0) 11px 23px),
        repeating-linear-gradient(88deg, rgba(255, 255, 255, 0) 0 31px, rgba(255, 255, 255, 0.06) 31px 33px),
        var(--grain),
        linear-gradient(180deg, #d9b07a 0%, #c99a5e 46%, #c3925a 54%, #b9874f 100%);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.35),
        inset 0 -3px 6px rgba(70, 40, 15, 0.35),
        0 18px 30px -14px rgba(40, 25, 10, 0.55);
}

/* Each crate has a slightly different plank tone, like real reused crates. */
html.nl .nl-crate:nth-child(3n + 2) .nl-crate-front { filter: hue-rotate(-6deg) brightness(0.95); }
html.nl .nl-crate:nth-child(4n + 3) .nl-crate-front { filter: saturate(0.85) brightness(1.04); }

html.nl .nl-crate-shadow {
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: -0.6rem;
    height: 1.4rem;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(40, 25, 10, 0.4), transparent);
    z-index: -1;
}

/* Major9's crate: black, with a white label and price stickers. */
html.nl .nl-crate.is-sale .nl-crate-front {
    background:
        linear-gradient(180deg, transparent 47%, rgba(255, 255, 255, 0.12) 47%, rgba(255, 255, 255, 0.12) 53%, transparent 53%),
        var(--grain),
        linear-gradient(180deg, #2b2b2b 0%, #161616 100%);
    filter: none;
}

html.nl .nl-crate.is-sale .crate-label {
    background: #fff;
    color: #111;
    font-family: 'Bungee', 'Permanent Marker', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

html.nl .nl-price {
    position: absolute;
    top: 6%;
    right: 6%;
    z-index: 2;
    padding: 0.35rem 0.45rem;
    border-radius: 999px;
    background: #facc15;
    color: #111;
    font: 700 0.8rem/1 'Courier Prime', monospace;
    transform: rotate(12deg);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
}

html.nl .nl-store-tag .crate-tag {
    margin-top: 1.4rem;
}

html.nl .nl-store-tag .crate-tag-meta {
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
}

/* A clip in the journal: a strip of film with sprocket holes, nothing loaded
   until it's played. */
html.nl .nl-jfilm {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    background:
        radial-gradient(circle at 50% 50%, rgba(235, 84, 5, 0.18), transparent 60%),
        repeating-linear-gradient(90deg, transparent 0 9px, rgba(255, 255, 255, 0.55) 9px 15px, transparent 15px 24px) top 6px left 0 / 100% 7px no-repeat,
        repeating-linear-gradient(90deg, transparent 0 9px, rgba(255, 255, 255, 0.55) 9px 15px, transparent 15px 24px) bottom 6px left 0 / 100% 7px no-repeat,
        linear-gradient(160deg, #2a2522, #121010);
}

/* The menu stays on top: the sticky header sits inside a second <header>
   that is only as tall as itself, so make the outer one sticky. */
html.nl body > header {
    position: sticky;
    top: 0;
    z-index: 94035;
}

html.nl body > header > header {
    position: relative;
    margin-bottom: 0;
}

html.nl body > header + main {
    margin-top: 1rem;
}

/* ======================================================================
 * Vinyl: a compact intro and search, so the crates fit on a laptop screen
 * ==================================================================== */

html.nl #vinyl-page .vinyl-collection {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 1.5rem;
    padding-top: 0.5rem;
}

html.nl #vinyl-page .vinyl-collection > .bg-white.rounded-lg {
    margin: 0;
    padding: 0;
    gap: 0.8rem;
    align-items: center;
}

html.nl #vinyl-page .vinyl-collection > .bg-white.rounded-lg img {
    width: 3rem;
    height: 3rem;
}

html.nl #vinyl-page .vinyl-collection > .bg-white.rounded-lg h1 {
    margin: 0;
    font-size: 1.25rem;
}

html.nl #vinyl-page .vinyl-collection > .bg-white.rounded-lg p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.4;
}

html.nl #vinyl-page .vinyl-collection > .bg-white.rounded-lg p + p {
    display: inline;
}

html.nl #vinyl-page .vinyl-collection > .mb-8:has(input) {
    margin: 0;
}

html.nl #vinyl-page .vinyl-collection > .mb-8:has(input) input {
    width: 16rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
}

html.nl #vinyl-page .nl-store {
    grid-column: 1 / -1;
    margin-top: 0;
    padding-top: 0.25rem;
}

@media (max-width: 767px) {
    html.nl #vinyl-page .vinyl-collection {
        grid-template-columns: 1fr;
        row-gap: 0.8rem;
    }

    html.nl #vinyl-page .vinyl-collection > .mb-8:has(input) input {
        width: 100%;
    }
}

/* ======================================================================
 * Reistips: the world map in the journal
 * ==================================================================== */

html.nl .nl-reis-stamps {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    max-width: 16rem;
}

html.nl .nl-reis-stamp {
    padding: 0.35rem 0.6rem;
    border: 2px solid rgba(250, 204, 21, 0.75);
    border-radius: 6px;
    color: rgba(250, 204, 21, 0.9);
    font-family: var(--jhand);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transform: rotate(var(--r, -6deg));
    box-shadow: inset 0 0 0 2px rgba(250, 204, 21, 0.15);
}

html.nl .nl-reis-stamp:nth-child(2n) { --r: 5deg; border-color: rgba(125, 211, 252, 0.75); color: rgba(125, 211, 252, 0.9); }
html.nl .nl-reis-stamp:nth-child(3n) { --r: -2deg; border-color: rgba(249, 168, 212, 0.75); color: rgba(249, 168, 212, 0.9); }

html.nl .nl-reis-pages > section + section {
    margin-top: 3rem;
}

html.nl .nl-world {
    position: relative;
    margin: 1.2rem 0 0.8rem;
}

html.nl .nl-world svg {
    display: block;
    width: 100%;
    height: auto;
}

html.nl .nl-world .world-sphere {
    fill: #e3edf3;
    stroke: rgba(120, 100, 70, 0.35);
    stroke-width: 1;
}

html.nl .nl-world .world-graticule {
    fill: none;
    stroke: rgba(120, 140, 160, 0.25);
    stroke-width: 0.5;
}

html.nl .nl-world .world-countries path {
    fill: #e9e1d2;
    stroke: #fbf7ee;
    stroke-width: 0.45;
    transition: fill 0.15s ease;
}

html.nl .nl-world .world-countries path:hover {
    fill: #d6cbb6;
}

html.nl .nl-world .world-countries path.lvl-1,
html.nl .nl-world-legend .lvl-1 { fill: #fdba74; background: #fdba74; }
html.nl .nl-world .world-countries path.lvl-2,
html.nl .nl-world-legend .lvl-2 { fill: #fb923c; background: #fb923c; }
html.nl .nl-world .world-countries path.lvl-3,
html.nl .nl-world-legend .lvl-3 { fill: #eb5405; background: #eb5405; }
html.nl .nl-world .world-countries path.lvl-4,
html.nl .nl-world-legend .lvl-4 { fill: #9a3412; background: #9a3412; }

html.nl .nl-world .world-countries path[class^="lvl-"]:hover {
    filter: brightness(1.1);
}

html.nl .nl-world-tip {
    position: absolute;
    z-index: 5;
    transform: translate(-50%, calc(-100% - 12px));
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    background: #2d2a26;
    color: #fff;
    font-family: var(--jhand);
    font-size: 0.9rem;
    white-space: nowrap;
    pointer-events: none;
}

html.nl .nl-world-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.2rem;
    font-family: var(--jhand);
    color: #6b5d48;
}

html.nl .nl-world-legend i {
    display: inline-block;
    width: 0.9rem;
    height: 0.9rem;
    margin-right: 0.35rem;
    vertical-align: -0.1rem;
    border-radius: 3px;
}

html.nl .nl-reis-continents {
    columns: 3 14rem;
    column-gap: 2rem;
    margin-top: 1.8rem;
}

html.nl .nl-reis-continent {
    break-inside: avoid;
    margin-bottom: 1.4rem;
}

html.nl .nl-reis-continent h3 {
    margin: 0 0 0.3rem;
    font-family: var(--jhand);
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--jink);
}

html.nl .nl-reis-continent h3 span {
    font-size: 0.85rem;
    font-weight: 400;
    color: #9a8a6c;
}

html.nl .nl-reis-continent ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

html.nl .nl-reis-continent li {
    margin: 0;
    font-family: var(--jtext);
    font-size: 1.12rem;
    line-height: 1.6;
    color: #2f3a4a;
}

html.nl .nl-reis-continent li b {
    color: #eb5405;
    font-weight: 400;
}

html.nl .nl-reis-flag {
    display: inline-block;
    width: 1.5rem;
}

html.nl .nl-reis-intro {
    font-family: var(--jtext);
    font-size: 1.25rem;
    line-height: 1.6;
    color: #2f3a4a;
}

html.nl .nl-reis-tip {
    position: relative;
    margin: 1.4rem 0;
    padding: 0.4rem 0 0.4rem 4rem;
}

html.nl .nl-reis-tip .nl-jentry-no {
    position: absolute;
    left: 0;
    top: 0.6rem;
}

html.nl .nl-reis-tip p {
    margin: 0;
    font-family: var(--jtext);
    font-size: 1.3rem;
    line-height: 1.55;
    color: #2f3a4a;
}

html.nl .nl-reis-seen {
    margin-top: 0.4rem;
    font-family: var(--jhand);
    font-size: 0.92rem;
    color: #9a8a6c;
}

html.nl .nl-reis-seen a {
    margin-left: 0.5rem;
    color: #eb5405;
    text-decoration: none;
}

html.nl .nl-reis-seen a:hover {
    text-decoration: underline;
}

/* ======================================================================
 * Pokémon: cards that fit, and the detail view
 * ==================================================================== */

html.nl button.nl-pcard {
    border: 0;
    cursor: pointer;
    text-align: left;
    font: inherit;
}

html.nl .nl-pcard-name {
    font-size: clamp(0.62rem, 1.1vw, 0.9rem);
}

html.nl .nl-pcard-art {
    flex: 1 1 auto;
    aspect-ratio: auto;
    min-height: 0;
}

html.nl .nl-pcard-where {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

html.nl .nl-pcard-caught {
    margin-top: 0.2rem;
    text-align: center;
    font-family: 'Kalam', cursive;
    font-weight: 700;
    font-size: clamp(0.55rem, 0.85vw, 0.75rem);
    color: #166534;
}

html.nl .nl-dex[hidden] {
    display: none;
}

html.nl .nl-dex {
    position: fixed;
    inset: 0;
    z-index: 95000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

html.nl .nl-dex-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.7);
}

/* The detail view: a Pokédex in red, the card big on the left. */
html.nl .nl-dex-sheet {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: 1.6rem;
    width: min(56rem, 100%);
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding: 1.6rem;
    border-radius: 22px;
    background: linear-gradient(160deg, #dc2626, #991b1b);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.25), 0 40px 80px -30px rgba(0, 0, 0, 0.7);
    color: #fff;
    animation: nl-booth-in 0.2s ease-out both;
}

html.nl .nl-dex-close {
    position: absolute;
    top: 0.8rem;
    right: 0.9rem;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
}

html.nl .nl-dex-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* The lid on a screen with a light, like the Pokédex's display. */
html.nl .nl-dex-art {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    border: 10px solid #e5e7eb;
    border-radius: 14px;
    background:
        radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 70%),
        conic-gradient(from 200deg, #bae6fd, #ddd6fe, #fbcfe8, #fef08a, #bbf7d0, #bae6fd);
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.3), 0 2px 0 rgba(255, 255, 255, 0.3);
}

html.nl .nl-dex-art img {
    width: 88%;
    height: 88%;
    object-fit: contain;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35));
}

html.nl .nl-dex-kind {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.8;
}

html.nl .nl-dex-title {
    margin: 0.15rem 0 0;
    font-family: 'Bungee', sans-serif;
    font-size: 1.8rem;
    line-height: 1.1;
    text-transform: none;
    letter-spacing: 0.01em;
    color: #fde047;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.25);
}

html.nl .nl-dex-title::after {
    content: none;
}

html.nl .nl-dex-where {
    margin: 0.2rem 0 0.8rem;
    color: #fee2e2;
}

html.nl .nl-dex-facts {
    display: grid;
    gap: 0.35rem;
    margin: 0 0 0.8rem;
    padding: 0.7rem 0.9rem;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.18);
}

html.nl .nl-dex-facts div {
    display: grid;
    grid-template-columns: 7rem 1fr;
}

html.nl .nl-dex-facts div[hidden] {
    display: none;
}

html.nl .nl-dex-facts dt {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.75;
    align-self: center;
}

html.nl .nl-dex-facts dd {
    margin: 0;
    color: #fff;
    font-family: 'Courier Prime', ui-monospace, monospace;
}

html.nl .nl-dex-mons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.9rem;
}

html.nl .nl-dex-mons a {
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    background: #fde047;
    color: #1e3a8a;
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
}

html.nl .nl-dex-mons a:hover {
    background: #fff;
}

/* A small OpenStreetMap window, centred on the lid, with a pin. */
html.nl .nl-dex-map {
    position: relative;
    height: 11rem;
    overflow: hidden;
    border: 4px solid #e5e7eb;
    border-radius: 10px;
    background: #e5e7eb;
}

html.nl .nl-dex-map[hidden] {
    display: none;
}

html.nl .nl-dex-tiles {
    position: absolute;
    left: 50%;
    top: 50%;
    display: grid;
    grid-template-columns: repeat(3, 256px);
    width: 768px;
    transform: translate(calc(-256px - var(--fx, 0.5) * 256px), calc(-256px - var(--fy, 0.5) * 256px));
}

html.nl .nl-dex-tiles img {
    display: block;
    width: 256px;
    height: 256px;
}

html.nl .nl-dex-pin {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1.4rem;
    height: 1.4rem;
    transform: translate(-50%, -100%) rotate(-45deg);
    border-radius: 50% 50% 50% 0;
    background: #dc2626;
    border: 3px solid #fff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
    transform-origin: 50% 50%;
    translate: 0 0;
}

html.nl .nl-dex-osm {
    position: absolute;
    right: 0.3rem;
    bottom: 0.2rem;
    padding: 0 0.3rem;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.8);
    color: #334155;
    font-size: 0.6rem;
}

html.nl .nl-dex-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1rem;
}

html.nl .nl-dex-links a {
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: #fff;
    color: #991b1b;
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
}

html.nl .nl-dex-links a[hidden] {
    display: none;
}

html.nl .nl-dex-links a:hover {
    background: #fde047;
}

@media (max-width: 767px) {
    html.nl .nl-dex-sheet {
        grid-template-columns: 1fr;
        padding: 1.2rem;
    }

    html.nl .nl-dex-art {
        width: min(14rem, 70%);
        margin: 0 auto;
    }
}

/* The close button: a cross drawn from two lines, centred in its circle (the
   × glyph sat low and to one side in this font). */
html.nl .nl-dex-close {
    display: block;
    padding: 0;
    border: 0;
    font-size: 0;
    color: transparent;
    cursor: pointer;
    z-index: 2;
}

html.nl .nl-dex-close::before,
html.nl .nl-dex-close::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.95rem;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    transform: translate(-50%, -50%) rotate(45deg);
}

html.nl .nl-dex-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Reistips: room for the № stamp before each tip. */
html.nl .nl-reis-tip {
    padding-left: 5rem;
}

html.nl .nl-reis-tip .nl-jentry-no {
    white-space: nowrap;
}