/* ============================================================
   JADE & CHINESE ZODIAC — a compendium in six chapters
   Reads --fg / --accent from the surface it sits on (lc.css).
   Prefix: jz-
   ============================================================ */

/* Chinese glyphs inside serif type fall through to a true serif (Songti),
   Latin stays in Cormorant. Scoped to <main>, so the site chrome is untouched. */
#main { --serif: 'Cormorant Garamond', 'Times New Roman', 'Songti SC', 'STSong', 'Noto Serif SC', 'Noto Serif CJK SC', serif; }
.jz-zh { font-family: 'Noto Serif SC', 'Songti SC', 'STSong', 'Noto Serif CJK SC', serif; font-weight: 400; letter-spacing: 0; }

/* the sticky chapter bar sits under the header: land anchors below both */
html { scroll-padding-top: calc(var(--header) + 72px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---------- jade colour tones (Five Elements swatches only) ---------- */
:root {
    --jade-white: #ebe5d6;
    --jade-black: #1f2322;
    --jade-ink: #2d3b36;
    --jade-blue: #5a7284;
    --jade-green: #5c8766;
    --jade-cyan: #6d9b95;
    --jade-red: #98493d;
    --jade-purple: #857198;
    --jade-yellow: #c4a25b;
    --jade-brown: #78573e;
}

/* ============================================================
   SEAL — a Chinese character inside a thin gold ring
   ============================================================ */
.jz-seal {
    --s: 4.6rem;
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: none;
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    border: 1px solid var(--accent);
    background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.07), transparent 62%);
    font-family: 'Noto Serif SC', 'Songti SC', 'STSong', 'Noto Serif CJK SC', serif;
    font-weight: 400;
    font-size: calc(var(--s) * 0.44);
    line-height: 1;
    color: var(--accent-text);
    user-select: none;
}
.jz-seal::after {                       /* the second, finer ring */
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    border: 0.5px solid var(--line-2);
    pointer-events: none;
}
.surface-paper .jz-seal { background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.18) 70%); }
.jz-seal--2 { writing-mode: vertical-rl; font-size: calc(var(--s) * 0.3); letter-spacing: 0.04em; }
.jz-seal--sm { --s: 2.1rem; }
.jz-seal--sm::after { display: none; }
.jz-seal--lg { --s: 5.6rem; }
.jz-seal--xl { --s: 6rem; }

/* two signs, one guardian: interlaced rings */
.jz-seals { display: flex; justify-content: center; }
.jz-seals .jz-seal + .jz-seal { margin-left: calc(var(--s) * -0.2); }
.jz-seals .jz-seal { background: transparent; }

/* ============================================================
   HERO
   ============================================================ */
.jz-hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); position: relative; }
.jz-hero__copy { position: relative; z-index: 1; }
.jz-hero .display { margin-bottom: 1.8rem; font-size: clamp(3.1rem, 7.4vw, 7rem); }
.jz-hero .lede { max-width: 38rem; }

.jz-wheel { width: 100%; max-width: 540px; justify-self: center; color: var(--gold); opacity: 0.78; }
.jz-wheel svg { width: 100%; height: auto; overflow: visible; }
.jz-wheel text { font-family: 'Noto Serif SC', 'Songti SC', 'STSong', 'Noto Serif CJK SC', serif; font-size: 30px; fill: currentColor; stroke: none; }
.jz-wheel__ring { transform-box: view-box; transform-origin: 300px 300px; animation: jz-turn 260s linear infinite; }
@keyframes jz-turn { to { transform: rotate(360deg); } }

/* ============================================================
   CHAPTER BAR
   ============================================================ */
.jz-subnav .subnav__inner { position: relative; justify-content: safe center; gap: 0.3rem clamp(1.4rem, 2.6vw, 2.6rem); }
.jz-subnav a { display: inline-flex; align-items: baseline; gap: 0.55rem; }
.jz-subnav a small { font-size: 0.62rem; color: var(--accent-text); letter-spacing: 0.12em; }

/* ============================================================
   CHAPTER HEAD
   ============================================================ */
.jz-head { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 1.4rem clamp(2rem, 6vw, 6rem); align-items: end; margin-bottom: clamp(3rem, 6vw, 5rem); }
.jz-head .eyebrow { margin-bottom: 1.2rem; }
.jz-head .lede { max-width: 34rem; }
.jz-roman { font-family: var(--serif); font-style: italic; font-size: 0.95rem; letter-spacing: 0.04em; text-transform: none; margin-right: -0.2rem; }

.jz-sub + .jz-sub { margin-top: clamp(4.5rem, 9vw, 7.5rem); }
.jz-subhead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem clamp(2rem, 6vw, 6rem); align-items: end; margin-bottom: clamp(2rem, 4vw, 3rem); }
.jz-subhead .eyebrow { margin-bottom: 0.9rem; }
.jz-subhead p { color: var(--fg-2); max-width: 30rem; }
.jz-subhead .h3 em { color: var(--accent-text); }

/* ============================================================
   I — GUARDIAN DEITIES
   ============================================================ */
.jz-deities { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 1.8vw, 1.6rem); }
.jz-deity { display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(2.4rem, 3.4vw, 3rem) clamp(1.3rem, 2vw, 1.8rem) clamp(2rem, 3vw, 2.6rem); }
.jz-deity::before { content: ''; position: absolute; inset: 7px; border: 1px solid var(--line); pointer-events: none; transition: border-color 0.5s var(--ease); }
.jz-deity:hover::before { border-color: var(--line-2); }
.jz-deity__no { position: absolute; top: 1.1rem; left: 1.35rem; font-family: var(--serif); font-style: italic; font-size: 0.95rem; color: var(--accent-text); }
.jz-deity .jz-seals { margin-bottom: 1.6rem; }
.jz-deity .jz-seal { transition: transform 0.8s var(--ease); }
.jz-deity:hover .jz-seal { transform: rotate(-6deg); }
.jz-deity:hover .jz-seal + .jz-seal { transform: rotate(6deg); }
.jz-deity__animal { font-family: var(--serif); font-weight: 400; font-size: clamp(1.55rem, 2vw, 1.85rem); line-height: 1.15; color: var(--fg); }
.jz-pinyin { display: block; margin-top: 0.4rem; font-family: var(--sans); font-size: 0.78rem; font-weight: 300; letter-spacing: 0.06em; color: var(--fg-3); }
.jz-deity .rule { width: 7.5rem; margin: 1.3rem auto 1.2rem; }
.jz-deity .rule svg { width: 10px; height: 10px; }
.jz-deity__name { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.35rem, 1.7vw, 1.55rem); line-height: 1.2; color: var(--accent-text); overflow-wrap: anywhere; }
.jz-deity__zh { margin-top: 0.35rem; font-size: 0.78rem; letter-spacing: 0.03em; color: var(--fg-2); }
.jz-deity__blessing { margin-top: 1.2rem; font-size: 0.9rem; line-height: 1.7; color: var(--fg-2); max-width: 17rem; }

/* ============================================================
   II — COMPATIBILITY
   ============================================================ */
.jz-finder { display: none; }
.js .jz-finder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; margin-bottom: clamp(3.5rem, 7vw, 5.5rem); }
.jz-finder__label { display: block; margin-bottom: 1.2rem; color: var(--accent-text); }
.jz-finder__hint { margin-top: 1.4rem; font-size: 0.85rem; color: var(--fg-3); max-width: 28rem; }
.jz-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; }
.jz-chips .chip { justify-content: flex-start; gap: 0.7rem; padding: 0.62rem 1rem; min-width: 0; }
.jz-chip__zh { font-size: 1.02rem; line-height: 1; color: var(--accent-text); letter-spacing: 0; }

.jz-reading { min-height: 23rem; display: flex; flex-direction: column; justify-content: center; }
.jz-reading.is-fresh > * { animation: jz-fade 0.8s var(--ease) both; }
@keyframes jz-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.jz-reading__empty { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.jz-reading__empty .sparkle { width: 22px; height: 22px; color: var(--accent); }
.jz-reading__empty p { font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 2.2vw, 1.75rem); line-height: 1.3; color: var(--fg); max-width: 18rem; }
.jz-reading__head { display: flex; align-items: center; gap: 1.4rem; padding-bottom: 1.4rem; margin-bottom: 0.6rem; border-bottom: 1px solid rgba(160, 128, 40, 0.35); }
.jz-reading__head .small-caps { display: block; color: var(--accent-text); margin-bottom: 0.2rem; }
.jz-reading__sign { font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1.1; }
.jz-reading__row { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 1rem; align-items: baseline; padding: 0.95rem 0; border-bottom: 1px dotted rgba(29, 26, 31, 0.22); }
.jz-reading__row dt { font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-3); }
.jz-reading__row dd { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.3rem 1.1rem; font-family: var(--serif); font-size: 1.3rem; line-height: 1.2; text-align: right; }
.jz-reading__row--avoid dd { font-style: italic; color: var(--fg-2); }
.jz-token { display: inline-flex; align-items: baseline; gap: 0.45rem; }
.jz-token__zh { font-size: 0.95rem; color: var(--accent-text); font-style: normal; }

.jz-table-plate { padding: clamp(0.4rem, 2.4vw, 2rem) clamp(0.4rem, 2.6vw, 2.2rem); }
.jz-table { min-width: 640px; }
.jz-table thead th { padding: 0.4rem 1.2rem 1.1rem; }
.jz-table thead th:first-child { padding-left: 0.9rem; }
.jz-table tbody th {
    text-align: left;
    padding: 0.85rem 1.2rem 0.85rem 0.9rem;
    border-bottom: 1px solid var(--line);
    font-family: var(--serif);
    font-weight: 400;
    font-size: 1.2rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--fg);
    white-space: nowrap;
    vertical-align: middle;
}
.jz-table tbody th .jz-seal { margin-right: 0.9rem; vertical-align: middle; font-size: 0.95rem; }
.jz-table td { padding: 1rem 1.2rem; vertical-align: middle; transition: opacity 0.5s var(--ease), background-color 0.5s var(--ease); }
.jz-table td:first-of-type { font-family: var(--serif); font-size: 1.2rem; color: var(--fg); }
.jz-table .jz-avoid { font-family: var(--serif); font-style: italic; font-size: 1.12rem; color: var(--fg-2); }
.jz-table tbody tr { transition: opacity 0.5s var(--ease); }
.jz-table tbody tr:last-child th, .jz-table tbody tr:last-child td { border-bottom: 0; }
.jz-table.has-pick tbody tr:not(.is-picked) { opacity: 0.4; }
.jz-table tr.is-picked th, .jz-table tr.is-picked td { background: rgba(212, 175, 55, 0.09); }
.jz-table tr.is-picked th { box-shadow: inset 2px 0 0 var(--accent); }
.jz-table-note { margin-top: 1.2rem; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3); display: none; }

/* ============================================================
   III — FIVE ELEMENTS
   ============================================================ */
.jz-elements { border-top: 1px solid var(--line-2); }
.jz-el { display: grid; grid-template-columns: 7rem minmax(0, 0.85fr) minmax(0, 1.35fr); gap: 1.4rem clamp(1.6rem, 4vw, 4rem); align-items: start; padding: clamp(2.2rem, 4vw, 3.2rem) 0; border-bottom: 1px solid var(--line); }
.jz-el__glyph { padding-top: 0.2rem; }
.jz-el__title h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 2.5vw, 2.2rem); line-height: 1.1; }
.jz-el__animals { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.2rem; }
.jz-el__animals .small-caps { font-size: 0.62rem; }
.jz-el__animals span:last-child { font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--fg); }
.jz-el__body { display: flex; flex-direction: column; gap: 1.1rem; padding-top: 0.35rem; }
.jz-el__row { display: grid; grid-template-columns: 8.6rem minmax(0, 1fr); gap: 0.4rem 1rem; align-items: baseline; }
.jz-k { font-weight: 400; font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-text); }
.jz-el__row--avoid .jz-k { color: var(--fg-3); }
.jz-colors { display: flex; flex-wrap: wrap; gap: 0.45rem 1.1rem; font-size: 0.98rem; color: var(--fg); }
.jz-c { display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
.jz-el__row--avoid .jz-colors { color: var(--fg-2); }
.jz-el__logic { font-family: var(--serif); font-style: italic; font-size: 1.14rem; line-height: 1.5; color: var(--fg-2); padding: 0.1rem 0 0.1rem 1.1rem; border-left: 1px solid var(--line-2); }

/* a polished cabochon of each jade colour */
.jz-sw {
    --sw: var(--jade-white);
    position: relative;
    display: inline-block;
    flex: none;
    width: 1.08rem;
    height: 1.08rem;
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.72) 0, rgba(255, 255, 255, 0) 44%),
        radial-gradient(circle at 64% 78%, rgba(0, 0, 0, 0.22), transparent 64%),
        var(--sw);
    box-shadow: 0 0 0 1px rgba(29, 26, 31, 0.16), 0 2px 5px rgba(29, 26, 31, 0.16);
}
.jz-sw--white { --sw: var(--jade-white); }
.jz-sw--black { --sw: var(--jade-black); }
.jz-sw--ink { --sw: var(--jade-ink); }
.jz-sw--blue { --sw: var(--jade-blue); }
.jz-sw--green { --sw: var(--jade-green); }
.jz-sw--cyan { --sw: var(--jade-cyan); }
.jz-sw--red { --sw: var(--jade-red); }
.jz-sw--purple { --sw: var(--jade-purple); }
.jz-sw--yellow { --sw: var(--jade-yellow); }
.jz-sw--brown { --sw: var(--jade-brown); }
.jz-sw--colorless {
    background:
        radial-gradient(circle at 32% 28%, #fff 0, rgba(255, 255, 255, 0) 46%),
        linear-gradient(140deg, rgba(214, 222, 218, 0.7), rgba(255, 255, 255, 0.25) 60%, rgba(196, 206, 202, 0.55));
    box-shadow: inset 0 0 0 1px rgba(29, 26, 31, 0.2), 0 2px 5px rgba(29, 26, 31, 0.1);
}
.jz-el__row--avoid .jz-sw { opacity: 0.6; filter: saturate(0.7); }
.jz-el__row--avoid .jz-sw::after { content: ''; position: absolute; left: -3px; right: -3px; top: 50%; height: 1px; background: var(--fg-2); transform: rotate(-45deg); }

/* ============================================================
   IV — CARVING MOTIFS
   ============================================================ */
.jz-quote { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 860px; margin: 0 auto clamp(5rem, 10vw, 8rem); }
.jz-quote__zh {
    writing-mode: vertical-rl;
    display: flex;
    flex-direction: column;         /* in vertical-rl the block axis runs right to left: two columns */
    gap: 0.55em;
    font-family: 'Noto Serif SC', 'Songti SC', 'STSong', 'Noto Serif CJK SC', serif;
    font-weight: 400;
    font-size: clamp(2.3rem, 4.6vw, 3.6rem);
    line-height: 1;
    letter-spacing: 0.28em;
    color: var(--accent-text);
    margin-bottom: clamp(2rem, 4vw, 3rem);
    padding: 1.4rem 1.6rem 1.1rem;
    border-left: 1px solid var(--line-2);
    border-right: 1px solid var(--line-2);
}
.jz-quote__lead { margin-bottom: 1.2rem; color: var(--accent-text); }
.jz-quote blockquote p { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: clamp(1.9rem, 3.8vw, 3.1rem); line-height: 1.18; color: var(--fg); }
.jz-quote__src { margin-top: 1.5rem; font-size: 0.86rem; letter-spacing: 0.06em; color: var(--fg-3); }

.jz-motifs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 1.8vw, 1.6rem); }
.jz-motif { padding: clamp(1.6rem, 2.4vw, 2.2rem); }
.jz-motif__head { display: flex; align-items: center; gap: 1.1rem; padding-bottom: 1.2rem; margin-bottom: 0.4rem; border-bottom: 1px solid var(--line-2); }
.jz-motif__head .jz-seal { --s: 3.3rem; }
.jz-motif__head .jz-seal::after { inset: 3px; }
.jz-motif__head h4 { font-size: clamp(1.4rem, 1.8vw, 1.6rem); }
.jz-motif__head .jz-pinyin { margin-top: 0.2rem; }
.jz-motif__list li { padding: 0.8rem 0; font-size: 0.9rem; line-height: 1.65; color: var(--fg-2); }
.jz-motif__list li + li { border-top: 1px dotted var(--line); }
.jz-motif__list strong { display: block; margin-bottom: 0.15rem; font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 1.14rem; line-height: 1.3; color: var(--fg); }
.jz-ornament { display: grid; place-items: center; }
.jz-ornament .sparkle { width: 38%; height: 38%; color: var(--accent-text); }

/* ============================================================
   V — COMMON FORMS
   ============================================================ */
.jz-forms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2.4rem, 6vw, 6rem); }
.jz-form { position: relative; padding: clamp(1.8rem, 3vw, 2.4rem) 2.6rem clamp(1.8rem, 3vw, 2.4rem) 0; border-top: 1px solid var(--line-2); }
.jz-form__zh { position: absolute; top: clamp(1.9rem, 3vw, 2.5rem); right: 0; writing-mode: vertical-rl; font-size: 1.05rem; letter-spacing: 0.32em; color: var(--accent-text); opacity: 0.7; }
.jz-form__head { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); align-items: baseline; margin-bottom: 1.2rem; }
.jz-form__no { font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--accent-text); }
.jz-form__head h4 { font-size: clamp(1.45rem, 2vw, 1.7rem); }
.jz-form__alt { grid-column: 2; margin-top: 0.35rem; font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-3); }
.jz-form__facts > div { display: grid; grid-template-columns: 7.4rem minmax(0, 1fr); gap: 0.2rem 1.1rem; padding: 0.6rem 0; border-top: 1px dotted var(--line); }
.jz-form__facts dt { padding-top: 0.2rem; font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-text); }
.jz-form__facts dd { font-size: 0.92rem; line-height: 1.65; color: var(--fg-2); }

/* choosing — a certificate */
.jz-choose { max-width: 1000px; margin: clamp(5rem, 10vw, 8rem) auto 0; }
.jz-choose__head { text-align: center; margin-bottom: clamp(2rem, 4vw, 2.8rem); }
.jz-choose__head .rule { margin-bottom: 1.2rem; max-width: 220px; }
.jz-choose__head .h3 { font-variant: small-caps; letter-spacing: 0.04em; }
.jz-choose__cols { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem clamp(2.4rem, 6vw, 5rem); }
.jz-choose__cols::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: linear-gradient(transparent, rgba(160, 128, 40, 0.4), transparent); }
.jz-choose h4 { font-family: var(--sans); font-weight: 400; font-size: 0.66rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent-text); padding-bottom: 0.8rem; border-bottom: 1px solid rgba(160, 128, 40, 0.35); }
.jz-choose li { padding: 1rem 0; border-bottom: 1px dotted rgba(29, 26, 31, 0.22); }
.jz-choose li strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.3rem; line-height: 1.25; color: var(--fg); }
.jz-choose li span { font-size: 0.9rem; color: var(--fg-2); }

/* ============================================================
   VI — FOLKLORE & TIPS
   ============================================================ */
.jz-folk { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr); gap: clamp(3rem, 7vw, 7rem); align-items: center; }
.jz-folk .section-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.jz-folk .fold > summary { align-items: baseline; padding: 1.5rem 0; }
.jz-folk .fold > summary::after { align-self: center; }
.jz-fold__no { flex: none; min-width: 1.6rem; font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--accent-text); }
.jz-fold__title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.4rem, 2.2vw, 1.8rem); line-height: 1.2; color: var(--fg); transition: color 0.3s; }
.jz-fold__title .jz-pinyin { font-size: 0.76rem; }
.jz-folk .fold > summary:hover .jz-fold__title { color: var(--accent-text); }
.jz-folk .fold__body { padding-left: 2.8rem; }
.jz-folk .fold__body p { color: var(--fg-2); max-width: 36rem; }
.jz-folk .fold__body strong { font-weight: 400; color: var(--fg); }

.jz-plaque { position: relative; width: 100%; max-width: 340px; justify-self: center; aspect-ratio: 3 / 4.3; display: grid; place-items: center; border: 1px solid var(--line-2); background: radial-gradient(ellipse at 50% 38%, rgba(212, 175, 55, 0.08), transparent 70%); }
.jz-plaque::before { content: ''; position: absolute; inset: 10px; border: 0.5px solid var(--line-2); pointer-events: none; }
.jz-plaque svg { position: absolute; inset: 14% 12%; width: 76%; height: 72%; color: var(--gold); opacity: 0.35; }
.jz-plaque__zh { position: relative; writing-mode: vertical-rl; font-size: clamp(3.4rem, 6vw, 5rem); line-height: 1; letter-spacing: 0.34em; margin-bottom: -0.34em; color: var(--accent-text); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1180px) {
    .jz-deities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .jz-motifs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .jz-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .jz-el { grid-template-columns: 5.4rem minmax(0, 1fr); }
    .jz-el__glyph .jz-seal { --s: 4.6rem; }
    .jz-el__body { grid-column: 2; }
}

@media (max-width: 860px) {
    .jz-hero__grid { grid-template-columns: minmax(0, 1fr); }
    .jz-wheel { position: absolute; top: -4.5rem; right: -44vw; width: 92vw; max-width: 480px; opacity: 0.14; pointer-events: none; }
    .jz-head, .jz-subhead { grid-template-columns: minmax(0, 1fr); }
    .js .jz-finder { grid-template-columns: minmax(0, 1fr); }
    .jz-forms { grid-template-columns: minmax(0, 1fr); }
    .jz-choose__cols { grid-template-columns: minmax(0, 1fr); }
    .jz-choose__cols::before { display: none; }
    .jz-folk { grid-template-columns: minmax(0, 1fr); }
    .jz-plaque { max-width: 240px; }
    .jz-table-note { display: block; }
}

@media (max-width: 600px) {
    .jz-deities, .jz-motifs { grid-template-columns: minmax(0, 1fr); }
    .jz-chips { gap: 0.45rem; }
    .jz-chips .chip { padding: 0.55rem 0.7rem; gap: 0.5rem; font-size: 0.78rem; }
    .jz-reading { min-height: 0; padding: 2.4rem 1.6rem; }
    .jz-reading__head { gap: 1rem; }
    .jz-reading__head .jz-seal { --s: 4.2rem; }
    .jz-reading__row { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; }
    .jz-reading__row dd { justify-content: flex-start; text-align: left; }
    .jz-el { grid-template-columns: minmax(0, 1fr); }
    .jz-el__glyph .jz-seal { --s: 4rem; }
    .jz-el__body { grid-column: auto; }
    .jz-el__row { grid-template-columns: minmax(0, 1fr); }
    .jz-form { padding-right: 2rem; }
    .jz-form__facts > div { grid-template-columns: minmax(0, 1fr); }
    .jz-folk .fold__body { padding-left: 0; }
    .jz-quote__zh { padding: 1rem 1.1rem 0.8rem; }
}

@media (prefers-reduced-motion: reduce) {
    .jz-wheel__ring, .jz-reading.is-fresh > * { animation: none !important; }
}