/* ============================================================
   EXPLORE V4 — 1990s PHOTOCOPIED ZINE
   ------------------------------------------------------------
   White background. Photocopier-distortion noise overlay.
   Multi-font paragraphs. Hand-cut jagged photo edges via
   clip-path. Tilted boxes (±5°). Slashed/struck-through type.
   Inverted-voice stamps (AVATAR / OPERATOR / REDACTED).
   Single bright accents — xerox-red, xerox-cyan — used sparingly.

   Mobile-first. Reduces rotation amounts at small widths so the
   layout still fits a 390px viewport without horizontal scroll.
   ============================================================ */

:root {
    --zn-paper:  #f7f6f1;        /* very off-white — the "white" of a photocopied page */
    --zn-paper-2: #ecebe5;
    --zn-ink:    #0d0d0d;
    --zn-ink-2:  #2a2a2a;
    --zn-grey:   #7a7a7a;
    --zn-red:    #d72638;        /* xerox-red */
    --zn-red-d:  #9b0d1c;
    --zn-cyan:   #00c8e1;        /* xerox-cyan */
    --zn-cyan-d: #00789a;
    --zn-yellow: #f7e23a;
    --zn-black:  #000;

    --zn-font-mono:    "Courier Prime", "Special Elite",
                       "Courier New", ui-monospace, monospace;
    --zn-font-marker:  "Permanent Marker", "Marker Felt",
                       "Bradley Hand", cursive;
    --zn-font-scrawl:  "Rock Salt", "Permanent Marker", cursive;
    --zn-font-serif:   "Times New Roman", Times, serif;
    --zn-font-display: "Bungee Shade", "Impact", "Arial Black", sans-serif;
    --zn-font-sans:    "Helvetica Neue", "Arial", sans-serif;
}

body {
    background: var(--zn-paper) !important;
    color: var(--zn-ink) !important;
    font-family: var(--zn-font-mono);
}

/* The brutalist topbar gets a slight photocopied off-white. */
header.top {
    background: var(--zn-paper) !important;
    border-bottom-color: var(--zn-ink) !important;
}
header.top nav.primary a:hover { background: var(--zn-yellow) !important; }

main {
    max-width: 920px;
    padding: 22px 14px 80px;
    position: relative;
    z-index: 1;
}

/* ============================================================
   The big illusion: a photocopier-noise filter laid over the
   entire wrap. Built from an SVG fractal-noise data URL so we
   need no external image. Opacity is low so it reads as grain.
   ============================================================ */
.zn-wrap {
    position: relative;
    padding: 6px 4px 24px;
}
.zn-wrap::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 220px 220px;
    opacity: 0.22;
    mix-blend-mode: multiply;
}
/* Per-block noise — softer, smaller scale, applied only to colored panels. */
.zn-noise {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n2'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n2)'/></svg>");
    background-size: 160px 160px;
    opacity: 0.35;
    mix-blend-mode: multiply;
}

/* ============================================================
   STAMPS — inverted into the cosmology's voice
   ============================================================ */

.zn-stamp {
    position: absolute;
    font-family: var(--zn-font-display);
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--zn-red);
    border: 3px solid var(--zn-red);
    padding: 3px 10px;
    background: transparent;
    pointer-events: none;
    z-index: 4;
    opacity: 0.85;
}
.zn-stamp-1 { top:  20px; right: 14px; transform: rotate(8deg);  color: var(--zn-red);  border-color: var(--zn-red); }
.zn-stamp-2 { top: 110px; left: -6px;  transform: rotate(-14deg); color: var(--zn-cyan-d); border-color: var(--zn-cyan-d); }
.zn-stamp-3 { bottom: 26px; right: 18px; transform: rotate(-6deg); color: var(--zn-ink); border-color: var(--zn-ink);
              font-size: 18px; letter-spacing: 0.2em; }

/* ============================================================
   COVER
   ============================================================ */

.zn-cover {
    position: relative;
    padding: 32px 18px 64px;
    margin-bottom: 28px;
    border: 4px solid var(--zn-ink);
    background:
        repeating-linear-gradient(
            -8deg,
            transparent 0 22px,
            rgba(0,0,0,0.025) 22px 23px),
        var(--zn-paper);
    transform: rotate(-1.4deg);
    box-shadow:
        6px 6px 0 var(--zn-ink),
        12px 12px 0 var(--zn-cyan);
    overflow: hidden;
}

.zn-cover-title {
    font-weight: 400;
    line-height: 0.95;
    text-transform: uppercase;
    margin-bottom: 18px;
    position: relative;
    z-index: 2;
}
.zn-cover-title span { display: inline-block; margin: 0 2px; }
.zn-c1 { font-family: var(--zn-font-display); font-size: 52px; color: var(--zn-ink); transform: rotate(-2deg); }
.zn-c2 { font-family: var(--zn-font-marker); font-size: 28px; color: var(--zn-red); transform: rotate(3deg); }
.zn-c3 { font-family: var(--zn-font-serif); font-style: italic; font-size: 24px; color: var(--zn-ink); }
.zn-c4 { font-family: var(--zn-font-display); font-size: 62px; color: var(--zn-ink);
         background: var(--zn-yellow); padding: 0 8px; transform: rotate(-1.5deg);
         box-shadow: 4px 4px 0 var(--zn-ink); }

.zn-cover-sub {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--zn-ink-2);
    margin-bottom: 22px;
    position: relative;
    z-index: 2;
}
.zn-typ   { font-family: var(--zn-font-mono); }
.zn-mark  { font-family: var(--zn-font-marker); color: var(--zn-red); }
.zn-cut   { font-family: var(--zn-font-display); color: var(--zn-ink); background: var(--zn-cyan); padding: 0 4px; }
.zn-strike { font-family: var(--zn-font-serif); font-style: italic; text-decoration: line-through;
             text-decoration-thickness: 2px; text-decoration-color: var(--zn-red); }
.zn-serif { font-family: var(--zn-font-serif); }
.zn-marker { font-family: var(--zn-font-marker); }
.zn-mono   { font-family: var(--zn-font-mono); }
.zn-tinytype { font-family: var(--zn-font-mono); font-size: 12px; color: var(--zn-grey);
               text-transform: lowercase; letter-spacing: 0.04em; }
.zn-arrow { color: var(--zn-red); margin-left: 6px; }

.zn-cover-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    position: relative;
    z-index: 2;
}
.zn-burst {
    display: inline-block;
    font-family: var(--zn-font-display);
    font-size: 18px;
    color: var(--zn-paper);
    background: var(--zn-red);
    padding: 4px 10px;
    transform: rotate(-3deg);
    clip-path: polygon(
        0% 18%, 14% 0%, 28% 18%, 42% 0%, 56% 18%, 70% 0%,
        84% 18%, 100% 0%, 100% 100%, 0% 100%);
}
.zn-tag {
    display: inline-block;
    font-family: var(--zn-font-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 8px;
    background: var(--zn-paper);
    border: 2px solid var(--zn-ink);
    color: var(--zn-ink);
}
.zn-tag-cyan { background: var(--zn-cyan); color: var(--zn-ink); border-color: var(--zn-ink); }
.zn-tag-red  { background: var(--zn-red);  color: var(--zn-paper); border-color: var(--zn-ink); }
.zn-link {
    font-family: var(--zn-font-marker);
    font-size: 16px;
    text-decoration: none;
    color: var(--zn-red);
    border-bottom: 3px solid var(--zn-red);
    padding: 0 4px;
}
.zn-link:hover { background: var(--zn-yellow); color: var(--zn-ink); }

/* ============================================================
   SECTION HEADERS — outlined word with marker scrawl behind
   ============================================================ */

.zn-section { margin: 40px 0; position: relative; }

.zn-header {
    position: relative;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 3px solid var(--zn-ink);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    font-weight: 400;
}
.zn-header .zn-marker {
    font-family: var(--zn-font-display);
    font-size: 38px;
    color: var(--zn-ink);
    text-transform: uppercase;
    letter-spacing: -0.02em;
}
.zn-header .zn-mono { font-family: var(--zn-font-mono); font-size: 18px; color: var(--zn-red); }
.zn-header .zn-serif { font-family: var(--zn-font-serif); font-style: italic; font-size: 26px; color: var(--zn-ink-2); }

/* Drop shadow behind the header — a stencil-ghost of the same word
   using the data-shadow attribute. Offset and tinted xerox-cyan. */
.zn-header::before {
    content: attr(data-shadow);
    position: absolute;
    left: 4px;
    top: 6px;
    font-family: var(--zn-font-display);
    font-size: 38px;
    text-transform: uppercase;
    color: var(--zn-cyan);
    z-index: -1;
    opacity: 0.85;
    pointer-events: none;
    letter-spacing: -0.02em;
}

.zn-section-blurb {
    font-size: 15px;
    line-height: 1.7;
    margin: 0 4px 20px;
    color: var(--zn-ink-2);
}

/* ============================================================
   BEGIN — three hand-pasted blocks
   ============================================================ */

.zn-paste-stage {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 8px 4px;
}

.zn-block {
    position: relative;
    display: block;
    padding: 14px 14px 16px;
    background: var(--zn-paper);
    border: 3px solid var(--zn-ink);
    color: var(--zn-ink);
    text-decoration: none;
    box-shadow: 6px 6px 0 var(--zn-ink);
    transform: rotate(var(--rot, 0deg));
    transition: transform 180ms ease, box-shadow 180ms ease;
}
.zn-block:hover {
    transform: rotate(0deg) translate(-2px, -2px);
    box-shadow: 8px 8px 0 var(--zn-red);
    background: var(--zn-yellow);
    z-index: 30;
}
.zn-block:focus-visible {
    outline: 3px solid var(--zn-red);
    outline-offset: 4px;
}

.zn-tape {
    position: absolute;
    top: -10px; left: 18px;
    width: 64px; height: 18px;
    background: rgba(247, 226, 58, 0.75);   /* yellow tape */
    border-left: 1px dashed rgba(0,0,0,0.35);
    border-right: 1px dashed rgba(0,0,0,0.35);
    transform: rotate(-6deg);
    z-index: 2;
}
.zn-tape-cyan { background: rgba(0, 200, 225, 0.7); top: -10px; right: 14px; left: auto; transform: rotate(8deg); }

.zn-visual {
    position: relative;
    width: 100%;
    height: 150px;
    background: var(--zn-ink);
    color: var(--zn-paper);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    overflow: hidden;
    /* hand-cut jagged top + bottom edges */
    clip-path: polygon(
        0% 4%, 6% 0%, 14% 5%, 22% 1%, 30% 4%, 42% 0%, 54% 5%, 66% 1%,
        78% 4%, 88% 0%, 100% 5%,
        100% 96%, 92% 100%, 80% 95%, 66% 100%, 52% 96%, 40% 100%,
        28% 95%, 14% 100%, 4% 96%, 0% 100%);
}

.zn-visual-mono { background: var(--zn-paper-2); color: var(--zn-ink); }
.zn-mono-text {
    font-family: var(--zn-font-display);
    font-size: 60px;
    letter-spacing: 0.04em;
    color: var(--zn-ink);
}

.zn-visual-photo img,
.zn-place-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* photocopier high-contrast B&W */
    filter: contrast(1.85) grayscale(1) brightness(1.05);
}
.zn-photo-blank {
    font-family: var(--zn-font-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--zn-grey);
    background: var(--zn-paper-2);
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
}

.zn-visual-graph { background: var(--zn-paper); }
.zn-visual-graph svg { width: 100%; height: 100%; filter: grayscale(1) contrast(1.4); }

.zn-kicker {
    font-family: var(--zn-font-mono);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    display: inline-block;
    padding: 2px 6px;
    background: var(--zn-ink);
    color: var(--zn-paper);
    margin-bottom: 8px;
}
.zn-kicker-red  { background: var(--zn-red);  color: var(--zn-paper); }
.zn-kicker-cyan { background: var(--zn-cyan); color: var(--zn-ink); }

.zn-title {
    font-family: var(--zn-font-display);
    font-size: 22px;
    text-transform: uppercase;
    line-height: 1.05;
    margin-bottom: 6px;
    color: var(--zn-ink);
    letter-spacing: -0.01em;
}
.zn-blurb {
    font-family: var(--zn-font-serif);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--zn-ink-2);
    margin-bottom: 10px;
}
.zn-blurb em {
    font-family: var(--zn-font-marker);
    font-style: normal;
    color: var(--zn-red);
}
.zn-cta {
    font-family: var(--zn-font-scrawl);
    font-size: 13px;
    color: var(--zn-red);
}

/* ============================================================
   PLACES — collage of high-contrast cut-outs
   ============================================================ */

.zn-places {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 8px 4px;
}
.zn-place {
    position: relative;
    display: block;
    padding: 10px 10px 12px;
    background: var(--zn-paper);
    border: 3px solid var(--zn-ink);
    text-decoration: none;
    color: var(--zn-ink);
    box-shadow: 4px 4px 0 var(--zn-ink);
    transform: rotate(var(--rot, 0deg));
    transition: transform 180ms ease, box-shadow 180ms ease;
}
.zn-place:hover {
    transform: rotate(0deg) translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--zn-cyan);
    background: var(--zn-yellow);
    z-index: 20;
}
.zn-place:focus-visible {
    outline: 3px solid var(--zn-red);
    outline-offset: 3px;
}
.zn-place-photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--zn-ink);
    overflow: hidden;
    margin-bottom: 8px;
    /* hand-torn edge — different polygon each tile via cycling not needed,
       a single jagged shape is enough for the vibe at scale. */
    clip-path: polygon(
        0% 3%, 10% 0%, 24% 4%, 38% 1%, 52% 5%, 66% 0%, 80% 4%, 92% 1%, 100% 5%,
        100% 95%, 88% 100%, 74% 96%, 60% 100%, 46% 95%, 32% 100%,
        18% 96%, 6% 100%, 0% 96%);
}
.zn-place-label { padding: 0 2px; }
.zn-place-name {
    font-family: var(--zn-font-display);
    font-size: 16px;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 2px;
    color: var(--zn-ink);
    letter-spacing: -0.005em;
}
.zn-place-coords {
    font-family: var(--zn-font-mono);
    font-size: 11px;
    color: var(--zn-red);
    margin-bottom: 2px;
}
.zn-place-region {
    font-family: var(--zn-font-serif);
    font-style: italic;
    font-size: 12.5px;
    color: var(--zn-ink-2);
}

/* ============================================================
   PEOPLE — sticker grid
   ============================================================ */

.zn-persons {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 8px 4px;
}
.zn-person {
    position: relative;
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    background: var(--zn-paper);
    border: 3px solid var(--zn-ink);
    text-decoration: none;
    color: var(--zn-ink);
    box-shadow: 3px 3px 0 var(--zn-ink);
    transform: rotate(var(--rot, 0deg));
    transition: transform 160ms ease, box-shadow 160ms ease;
}
.zn-person:nth-child(3n)   { background: var(--zn-cyan); }
.zn-person:nth-child(5n+2) { background: var(--zn-paper); border-color: var(--zn-red); box-shadow: 3px 3px 0 var(--zn-red); }
.zn-person:nth-child(7n+3) { background: var(--zn-yellow); }
.zn-person:hover {
    transform: rotate(0deg) translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--zn-red);
    background: var(--zn-yellow);
    z-index: 12;
}
.zn-person:focus-visible {
    outline: 3px solid var(--zn-red);
    outline-offset: 3px;
}
.zn-person-mono {
    width: 64px; height: 64px;
    background: var(--zn-ink);
    color: var(--zn-paper);
    display: flex; align-items: center; justify-content: center;
    clip-path: polygon(
        4% 0%, 96% 6%, 100% 92%, 90% 100%, 8% 96%, 0% 8%);
}
.zn-person-mono .zn-mono-text {
    font-family: var(--zn-font-display);
    font-size: 26px;
    color: var(--zn-paper);
}
.zn-person-name {
    font-family: var(--zn-font-display);
    font-size: 15px;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 2px;
}
.zn-person-cat {
    font-family: var(--zn-font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--zn-red);
    margin-bottom: 4px;
}
.zn-person-bio {
    font-family: var(--zn-font-serif);
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--zn-ink-2);
}

/* ============================================================
   THREADS — six manifesto strips
   ============================================================ */

.zn-threads {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 8px 4px;
}
.zn-thread {
    position: relative;
    padding: 14px 14px 16px;
    background: var(--zn-paper);
    border: 3px solid var(--zn-ink);
    box-shadow: 5px 5px 0 var(--zn-ink);
    transform: rotate(var(--rot, 0deg));
}
.zn-thread:nth-child(odd)  { background: var(--zn-paper); }
.zn-thread:nth-child(even) { background: var(--zn-cyan); }
.zn-thread:nth-child(3n+2) { box-shadow: 5px 5px 0 var(--zn-red); }
.zn-thread-stamp {
    position: absolute;
    top: -14px; right: 12px;
    background: var(--zn-red);
    color: var(--zn-paper);
    font-family: var(--zn-font-display);
    font-size: 14px;
    padding: 3px 8px;
    transform: rotate(6deg);
    letter-spacing: 0.05em;
    border: 2px solid var(--zn-ink);
}
.zn-thread-head { margin-bottom: 10px; }
.zn-thread-label {
    font-family: var(--zn-font-display);
    font-size: 20px;
    text-transform: uppercase;
    color: var(--zn-ink);
    letter-spacing: -0.01em;
    line-height: 1.05;
    display: inline-block;
    background: var(--zn-paper);
    padding: 0 4px;
    border-bottom: 4px solid var(--zn-red);
}
.zn-thread-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.zn-chip {
    display: block;
    padding: 6px 9px;
    background: var(--zn-paper);
    border: 2px solid var(--zn-ink);
    text-decoration: none;
    color: var(--zn-ink);
}
.zn-chip:hover { background: var(--zn-yellow); }
.zn-chip-kicker {
    display: block;
    font-family: var(--zn-font-mono);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--zn-red);
    margin-bottom: 2px;
}
.zn-chip-title {
    font-family: var(--zn-font-serif);
    font-style: italic;
    font-size: 14.5px;
}
.zn-empty {
    font-family: var(--zn-font-marker);
    font-size: 13px;
    color: var(--zn-grey);
}

/* ============================================================
   TIMELINE — strips
   ============================================================ */

.zn-timeline {
    list-style: none;
    padding: 8px 4px 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    counter-reset: zn-period;
}
.zn-period {
    counter-increment: zn-period;
    position: relative;
    padding: 12px 14px 12px 56px;
    background: var(--zn-paper);
    border: 3px solid var(--zn-ink);
    box-shadow: 4px 4px 0 var(--zn-ink);
    transform: rotate(var(--rot, 0deg));
}
.zn-period::before {
    content: counter(zn-period, decimal-leading-zero);
    position: absolute;
    left: -8px; top: -10px;
    background: var(--zn-red);
    color: var(--zn-paper);
    font-family: var(--zn-font-display);
    font-size: 16px;
    padding: 2px 7px;
    border: 2px solid var(--zn-ink);
    transform: rotate(-6deg);
}
.zn-period-label {
    font-family: var(--zn-font-display);
    font-size: 14px;
    text-transform: uppercase;
    color: var(--zn-ink);
    margin-bottom: 3px;
    letter-spacing: 0.01em;
}
.zn-period-blurb {
    font-family: var(--zn-font-serif);
    font-style: italic;
    font-size: 14px;
    color: var(--zn-ink-2);
    line-height: 1.45;
}

/* ============================================================
   FOOTER
   ============================================================ */

.zn-footer-note {
    margin-top: 40px;
    padding: 14px 0;
    border-top: 3px solid var(--zn-ink);
    border-bottom: 3px solid var(--zn-ink);
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    font-size: 12px;
}
.zn-footer-note .zn-marker { font-size: 20px; color: var(--zn-red); }
.zn-footer-note .zn-mono   { color: var(--zn-ink-2); }
.zn-footer-note a {
    font-family: var(--zn-font-marker);
    color: var(--zn-red);
    text-decoration: underline;
    text-decoration-color: var(--zn-cyan);
}
.zn-footer-note a:hover { background: var(--zn-yellow); }

/* ============================================================
   RESPONSIVE — desktop columns, mobile reduced rotation
   ============================================================ */

@media (min-width: 640px) {
    main { padding: 28px 28px 90px; }
    .zn-cover { padding: 48px 32px 80px; }
    .zn-c1 { font-size: 80px; }
    .zn-c4 { font-size: 96px; }
    .zn-c2 { font-size: 38px; }
    .zn-c3 { font-size: 32px; }

    .zn-paste-stage { grid-template-columns: repeat(3, 1fr); gap: 28px; padding: 16px 8px; }
    .zn-places      { grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .zn-persons     { grid-template-columns: repeat(2, 1fr); gap: 18px 22px; }
    .zn-threads     { grid-template-columns: repeat(2, 1fr); gap: 28px; }
    .zn-timeline    { grid-template-columns: repeat(2, 1fr); gap: 22px; }

    .zn-header .zn-marker { font-size: 48px; }
    .zn-header::before    { font-size: 48px; left: 6px; top: 8px; }
    .zn-title             { font-size: 26px; }
}

@media (min-width: 920px) {
    .zn-places   { grid-template-columns: repeat(4, 1fr); }
    .zn-persons  { grid-template-columns: repeat(3, 1fr); }
    .zn-threads  { grid-template-columns: repeat(3, 1fr); }
}

/* Mobile: keep ±5° spirit but halve actual rotation so nothing
   spills off a 390px viewport. The cover stays the most rotated
   element; everything else dampens. */
@media (max-width: 639px) {
    .zn-cover { transform: rotate(-1deg); margin: 0 -2px 24px; }
    .zn-block, .zn-place, .zn-person, .zn-thread, .zn-period {
        transform: rotate(calc(var(--rot, 0deg) * 0.5));
    }
    .zn-c1 { font-size: 38px; }
    .zn-c4 { font-size: 46px; }
    .zn-c2 { font-size: 22px; }
    .zn-c3 { font-size: 20px; }
    .zn-header .zn-marker { font-size: 30px; }
    .zn-header::before    { font-size: 30px; left: 3px; top: 4px; }
    .zn-mono-text { font-size: 48px; }
    .zn-stamp-2 { left: 4px; }
    .zn-stamp-1 { right: 6px; }
}

/* Honour reduced-motion: no hover translation, no rotation flatten. */
@media (prefers-reduced-motion: reduce) {
    .zn-block, .zn-place, .zn-person { transition: none; }
    .zn-block:hover, .zn-place:hover, .zn-person:hover {
        transform: rotate(var(--rot, 0deg));
    }
}