/* ================================================================
   NovZon Homepage — Fractured Library Experience
   Everything in this file is scoped below .nhx-experience.
   Hero and global navigation are intentionally outside this scope.
   ================================================================ */

.home-page {
    min-height: 100vh;
    overflow-x: clip;
    color: #f4f1eb;
    background: #07080d;
}

.home-page,
.home-page * {
    box-sizing: border-box;
}

.home-page img {
    max-width: 100%;
}

.nhx-experience {
    --nhx-canvas: #07080d;
    --nhx-canvas-soft: #0b0d14;
    --nhx-surface: rgba(17, 19, 29, 0.78);
    --nhx-surface-solid: #11131d;
    --nhx-ink: #f4f1eb;
    --nhx-muted: rgba(233, 230, 223, 0.64);
    --nhx-faint: rgba(233, 230, 223, 0.38);
    --nhx-line: rgba(255, 255, 255, 0.11);
    --nhx-line-strong: rgba(255, 255, 255, 0.2);
    --nhx-accent: #9478cf;
    --nhx-accent-soft: rgba(148, 120, 207, 0.22);
    --nhx-paper: #d9d2c5;
    position: relative;
    isolation: isolate;
    overflow: clip;
    color: var(--nhx-ink);
    background:
        radial-gradient(ellipse 58% 28% at 88% 3%, rgba(148, 120, 207, 0.11), transparent 72%),
        radial-gradient(ellipse 45% 35% at 4% 46%, rgba(92, 106, 132, 0.08), transparent 74%),
        linear-gradient(180deg, #090a10 0%, var(--nhx-canvas) 50%, #090a10 100%);
    font-family: 'Bricolage Grotesque', 'Outfit', sans-serif;
}

/* The shared hero owns its height; homepage spacing starts in the experience. */
.home-page > .hero-section {
    margin-bottom: 0;
}

.nhx-experience,
.nhx-experience * {
    box-sizing: border-box;
}

.nhx-experience h1,
.nhx-experience h2,
.nhx-experience h3,
.nhx-experience h4,
.nhx-experience h5,
.nhx-experience h6 {
    font-family: 'Bricolage Grotesque', 'Outfit', sans-serif !important;
}

.nhx-container {
    width: min(100% - 64px, 1320px);
    margin-inline: auto;
}

.nhx-section {
    position: relative;
    padding-top: clamp(74px, 8vw, 122px);
}

.nhx-section-header {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: clamp(28px, 4vw, 46px);
}

.nhx-heading-lockup {
    display: flex;
    align-items: center;
    gap: 18px;
}

.nhx-index {
    display: grid;
    place-items: center;
    width: 48px;
    height: 52px;
    color: var(--nhx-ink);
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.16em;
    background: linear-gradient(145deg, rgba(148, 120, 207, 0.32), rgba(148, 120, 207, 0.06));
    border: 1px solid rgba(148, 120, 207, 0.44);
    clip-path: polygon(12% 0, 100% 7%, 88% 90%, 28% 100%, 0 72%);
}

.nhx-title {
    margin: 0;
    color: var(--nhx-ink);
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    font-weight: 800;
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.nhx-subtitle {
    margin: 10px 0 0;
    color: var(--nhx-muted);
    font-size: clamp(0.9rem, 1.2vw, 1rem);
    line-height: 1.5;
}

.nhx-text-link {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 9px;
    color: var(--nhx-muted);
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: color 220ms ease, transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.nhx-text-link span {
    color: var(--nhx-accent);
    font-size: 1rem;
}

.nhx-text-link:hover,
.nhx-text-link:focus-visible {
    color: var(--nhx-ink);
    transform: translate3d(3px, -2px, 0);
}

.nhx-ambient {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.nhx-ambient::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.17;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
    mix-blend-mode: soft-light;
}

.nhx-ambient-line {
    position: absolute;
    width: 1px;
    height: 28%;
    background: linear-gradient(transparent, rgba(148, 120, 207, 0.38), transparent);
    transform: rotate(21deg);
}

.nhx-ambient-line-a { top: 18%; left: 8%; }
.nhx-ambient-line-b { top: 57%; right: 10%; transform: rotate(-18deg); }

/* Reveal choreography is only activated after JS is ready. */
.nhx-motion-ready [data-reveal-section] .nhx-section-header,
.nhx-motion-ready [data-reveal-section] .nhx-reading-layout,
.nhx-motion-ready [data-reveal-section] .nhx-chaos-stage,
.nhx-motion-ready [data-reveal-section] .nhx-community-strip {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition:
        opacity 720ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 820ms cubic-bezier(0.16, 1, 0.3, 1);
}

.nhx-motion-ready [data-reveal-section].is-visible .nhx-section-header,
.nhx-motion-ready [data-reveal-section].is-visible .nhx-reading-layout,
.nhx-motion-ready [data-reveal-section].is-visible .nhx-chaos-stage,
.nhx-motion-ready [data-reveal-section].is-visible .nhx-community-strip {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.nhx-motion-ready [data-reveal-section].is-visible .nhx-reading-layout,
.nhx-motion-ready [data-reveal-section].is-visible .nhx-chaos-stage { transition-delay: 90ms; }

/* ----------------------------------------------------------------
   Continue reading — an open page, a cover and a living bookmark.
   ---------------------------------------------------------------- */

.nhx-reading-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.62fr) minmax(280px, 0.72fr);
    gap: clamp(18px, 2.4vw, 32px);
    align-items: stretch;
}

.nhx-reading-primary {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(150px, 190px) minmax(0, 1fr);
    gap: clamp(18px, 2.4vw, 32px);
    min-height: 386px;
    padding: clamp(22px, 3vw, 38px);
    color: inherit;
    text-decoration: none;
    background:
        linear-gradient(112deg, rgba(24, 26, 37, 0.9), rgba(13, 15, 23, 0.76)),
        var(--nhx-canvas-soft);
    border: 1px solid var(--nhx-line);
    border-radius: 8px 34px 12px 28px;
    box-shadow: 0 34px 100px rgba(0, 0, 0, 0.34);
    overflow: hidden;
    isolation: isolate;
    transition: border-color 320ms ease, box-shadow 520ms ease, transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.nhx-reading-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.6;
    background:
        linear-gradient(118deg, transparent 0 72%, rgba(148, 120, 207, 0.08) 72% 73%, transparent 73%),
        repeating-linear-gradient(0deg, transparent 0 31px, rgba(255,255,255,0.016) 31px 32px);
}

.nhx-reading-primary::after {
    content: '';
    position: absolute;
    right: -54px;
    bottom: -76px;
    width: 210px;
    height: 190px;
    z-index: -1;
    background: rgba(148, 120, 207, 0.13);
    border: 1px solid rgba(148, 120, 207, 0.24);
    clip-path: polygon(12% 22%, 85% 0, 100% 72%, 42% 100%, 0 63%);
    transform: rotate(-13deg);
}

.nhx-reading-primary:hover,
.nhx-reading-primary:focus-visible {
    transform: translate3d(0, -5px, 0);
    border-color: rgba(148, 120, 207, 0.42);
    box-shadow: 0 42px 120px rgba(0, 0, 0, 0.46);
}

.nhx-reading-spine {
    display: flex;
    align-self: stretch;
    align-items: flex-start;
    justify-content: center;
    min-height: 100%;
    color: rgba(244, 241, 235, 0.82);
    background: linear-gradient(180deg, rgba(148, 120, 207, 0.68), rgba(73, 59, 106, 0.3));
    border-radius: 3px 3px 18px 18px;
    box-shadow: inset 1px 0 rgba(255,255,255,0.22), 0 18px 30px rgba(0,0,0,0.2);
    transform: translateY(-38px);
}

.nhx-reading-spine span {
    margin-top: 58px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.17em;
    writing-mode: vertical-rl;
}

.nhx-reading-cover-shell {
    position: relative;
    display: block;
    align-self: center;
    perspective: 900px;
}

.nhx-reading-cover {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 4px 13px 13px 4px;
    box-shadow: -10px 24px 42px rgba(0, 0, 0, 0.48);
    transform: rotateY(4deg);
    transform-origin: left center;
    transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1), filter 420ms ease;
}

.nhx-reading-primary:hover .nhx-reading-cover,
.nhx-reading-primary:focus-visible .nhx-reading-cover {
    filter: saturate(1.08) contrast(1.03);
    transform: rotateY(0deg) translate3d(0, -3px, 0);
}

.nhx-cover-edge {
    position: absolute;
    inset: 8px auto 8px -5px;
    width: 7px;
    background: linear-gradient(90deg, #090a0e, rgba(255,255,255,0.12), #090a0e);
    border-radius: 4px 0 0 4px;
}

.nhx-cover-placeholder,
.nhx-secondary-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 2 / 3;
    color: rgba(255,255,255,0.38);
    background: linear-gradient(145deg, #242735, #12141d);
    border: 1px solid var(--nhx-line);
}

.nhx-reading-page {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-self: stretch;
    padding: 12px 8px 4px 0;
}

.nhx-page-kicker,
.nhx-popular-label,
.nhx-collection-number {
    color: var(--nhx-accent);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.nhx-reading-title {
    display: -webkit-box;
    margin-top: 10px;
    overflow: hidden;
    color: var(--nhx-ink);
    font-size: clamp(1.35rem, 2.3vw, 2.15rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.045em;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.nhx-reading-chapter {
    margin-top: 8px;
    color: var(--nhx-muted);
    font-size: 0.86rem;
}

.nhx-reading-excerpt {
    display: -webkit-box;
    max-width: 58ch;
    margin-top: clamp(24px, 3vw, 36px);
    overflow: hidden;
    color: rgba(217, 210, 197, 0.56);
    font-family: 'Instrument Serif', serif !important;
    font-size: clamp(1.08rem, 1.6vw, 1.38rem);
    font-style: italic;
    line-height: 1.56;
    letter-spacing: 0.012em;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.nhx-reading-excerpt::before { content: '“'; }
.nhx-reading-excerpt::after { content: '”'; }

.nhx-reading-excerpt .nhx-wave-word {
    color: inherit;
    text-shadow: none;
}

.nhx-reading-primary:hover .nhx-wave-word,
.nhx-reading-primary:focus-visible .nhx-wave-word {
    animation: nhx-word-wave 3.6s ease-in-out var(--wave-delay) infinite;
}

@keyframes nhx-word-wave {
    0%, 16%, 52%, 100% { color: rgba(217, 210, 197, 0.56); text-shadow: none; }
    25%, 34% { color: #fffaf1; text-shadow: 0 0 10px rgba(244, 226, 190, 0.34); }
}

.nhx-reading-progress-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    margin-top: auto;
    padding-top: 24px;
}

.nhx-reading-progress,
.nhx-secondary-progress {
    display: block;
    height: 3px;
    overflow: hidden;
    background: rgba(255,255,255,0.08);
}

.nhx-reading-progress > span,
.nhx-secondary-progress > i {
    display: block;
    width: var(--progress);
    height: 100%;
    background: linear-gradient(90deg, #6f5a9e, #ad92e2);
    transform-origin: left center;
}

.nhx-reading-percent {
    color: var(--nhx-muted);
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
}

.nhx-continue-action {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    color: var(--nhx-ink);
    font-size: 0.82rem;
    font-weight: 750;
}

.nhx-continue-action i {
    color: var(--nhx-accent);
    transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.nhx-reading-primary:hover .nhx-continue-action i { transform: translateX(5px); }

.nhx-reading-others {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 12px;
    padding-top: 4px;
}

.nhx-others-label {
    margin-bottom: 3px;
    color: var(--nhx-faint);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.nhx-reading-secondary {
    position: relative;
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr) 24px;
    gap: 15px;
    align-items: center;
    min-height: 154px;
    padding: 15px 16px 15px 15px;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    background: rgba(17, 19, 29, 0.6);
    border: 1px solid var(--nhx-line);
    border-radius: 16px 5px 22px 7px;
    backdrop-filter: blur(16px);
    transition: transform 460ms cubic-bezier(0.16, 1, 0.3, 1), border-color 260ms ease, background 260ms ease;
}

.nhx-reading-secondary::after {
    content: '';
    position: absolute;
    right: -32px;
    bottom: -32px;
    width: 74px;
    height: 74px;
    background: var(--nhx-accent-soft);
    clip-path: polygon(50% 0, 100% 100%, 0 72%);
}

.nhx-reading-secondary:hover,
.nhx-reading-secondary:focus-visible {
    transform: translate3d(5px, -3px, 0);
    border-color: rgba(148, 120, 207, 0.38);
    background: rgba(22, 24, 36, 0.78);
}

.nhx-reading-secondary img,
.nhx-secondary-placeholder {
    display: block;
    width: 74px;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 3px 9px 9px 3px;
}

.nhx-secondary-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 7px;
}

.nhx-secondary-copy strong {
    display: -webkit-box;
    overflow: hidden;
    color: var(--nhx-ink);
    font-size: 0.94rem;
    line-height: 1.22;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.nhx-secondary-copy > span:not(.nhx-secondary-progress) {
    overflow: hidden;
    color: var(--nhx-muted);
    font-size: 0.72rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nhx-secondary-progress { margin-top: 6px; }
.nhx-secondary-arrow { color: var(--nhx-faint); font-size: 0.75rem; }

/* ----------------------------------------------------------------
   Today popular — structured chaos, refracted stone, no random layout.
   ---------------------------------------------------------------- */

.nhx-chaos-stage {
    position: relative;
    min-height: 580px;
    padding: clamp(36px, 5vw, 70px) clamp(20px, 3vw, 46px);
    isolation: isolate;
}

.nhx-chaos-stage::before {
    content: '';
    position: absolute;
    inset: 7% 2% 3%;
    z-index: -3;
    background:
        radial-gradient(circle at 50% 45%, rgba(148, 120, 207, 0.15), transparent 34%),
        linear-gradient(123deg, rgba(17, 20, 31, 0.32), rgba(8, 9, 14, 0.06));
    border: 1px solid rgba(255,255,255,0.045);
    clip-path: polygon(3% 18%, 19% 4%, 43% 10%, 57% 0, 82% 8%, 98% 27%, 93% 69%, 78% 92%, 54% 85%, 37% 100%, 13% 88%, 0 57%);
}

.nhx-resonance-ring {
    position: absolute;
    top: 47%;
    left: 50%;
    z-index: -2;
    width: min(48vw, 600px);
    aspect-ratio: 1;
    border: 1px solid rgba(148, 120, 207, 0.19);
    border-radius: 50%;
    box-shadow:
        inset 0 0 0 44px rgba(148, 120, 207, 0.018),
        inset 0 0 0 45px rgba(148, 120, 207, 0.08),
        inset 0 0 0 110px rgba(148, 120, 207, 0.012),
        inset 0 0 0 111px rgba(148, 120, 207, 0.05);
    opacity: 0.7;
    transform: translate3d(-50%, -50%, 0);
    animation: nhx-ring-breathe 7s ease-in-out infinite;
}

@keyframes nhx-ring-breathe {
    0%, 100% { opacity: 0.45; transform: translate3d(-50%, -50%, 0) scale(0.97); }
    50% { opacity: 0.82; transform: translate3d(-50%, -50%, 0) scale(1.02); }
}

.nhx-chaos-fragments {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.nhx-fragment {
    position: absolute;
    display: block;
    background: linear-gradient(145deg, rgba(180, 157, 226, 0.19), rgba(72, 61, 106, 0.035));
    border: 1px solid rgba(166, 139, 219, 0.32);
    box-shadow: inset 10px 8px 30px rgba(255,255,255,0.025);
    transform: translate3d(var(--fragment-x, 0), var(--fragment-y, 0), 0) rotate(var(--fragment-rotation));
    transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
}

.nhx-fragment::after {
    content: '';
    position: absolute;
    inset: 12%;
    border-top: 1px solid rgba(255,255,255,0.17);
    transform: rotate(24deg);
}

.nhx-fragment.f1 { --fragment-rotation: 13deg; top: 6%; left: 10%; width: 84px; height: 58px; clip-path: polygon(9% 38%, 82% 0, 100% 77%, 41% 100%); }
.nhx-fragment.f2 { --fragment-rotation: -17deg; top: 11%; right: 7%; width: 118px; height: 86px; clip-path: polygon(0 28%, 72% 0, 100% 42%, 69% 100%, 18% 83%); }
.nhx-fragment.f3 { --fragment-rotation: 31deg; top: 44%; left: 1%; width: 64px; height: 128px; clip-path: polygon(28% 0, 100% 21%, 58% 100%, 0 64%); }
.nhx-fragment.f4 { --fragment-rotation: -26deg; bottom: 5%; left: 18%; width: 132px; height: 74px; clip-path: polygon(0 32%, 48% 0, 100% 67%, 35% 100%); }
.nhx-fragment.f5 { --fragment-rotation: 19deg; right: 1%; bottom: 16%; width: 92px; height: 118px; clip-path: polygon(35% 0, 100% 37%, 67% 100%, 0 71%); }
.nhx-fragment.f6 { --fragment-rotation: -8deg; top: 0; left: 42%; width: 52px; height: 38px; clip-path: polygon(0 54%, 63% 0, 100% 83%, 32% 100%); }
.nhx-fragment.f7 { --fragment-rotation: 42deg; right: 26%; bottom: 1%; width: 66px; height: 48px; clip-path: polygon(21% 0, 100% 37%, 72% 100%, 0 68%); }

.nhx-popular-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-areas: 'second first third';
    grid-template-columns: minmax(0, 0.88fr) minmax(270px, 1.2fr) minmax(0, 0.88fr);
    gap: clamp(16px, 2.4vw, 34px);
    align-items: center;
    min-height: 470px;
}

.nhx-popular-card {
    display: block;
    min-width: 0;
    color: inherit;
    text-decoration: none;
    perspective: 1100px;
}

.nhx-rank-1 { grid-area: first; transform: translateY(-20px); }
.nhx-rank-2 { grid-area: second; transform: translateY(48px) rotate(-1.2deg); }
.nhx-rank-3 { grid-area: third; transform: translateY(66px) rotate(1.4deg); }

.nhx-popular-surface {
    position: relative;
    display: grid;
    min-height: 368px;
    grid-template-rows: minmax(0, 1fr) auto;
    padding: 22px;
    overflow: hidden;
    background:
        linear-gradient(148deg, color-mix(in srgb, var(--series-color) 16%, rgba(19, 21, 31, 0.88)), rgba(9, 11, 17, 0.82));
    border: 1px solid color-mix(in srgb, var(--series-color) 42%, rgba(255,255,255,0.08));
    border-radius: 8px 30px 12px 24px;
    box-shadow: 0 28px 80px rgba(0,0,0,0.42);
    backdrop-filter: blur(18px) saturate(1.1);
    transform: translate3d(var(--card-x, 0), var(--card-y, 0), 0) rotateX(var(--card-rx, 0deg)) rotateY(var(--card-ry, 0deg));
    transition: transform 440ms cubic-bezier(0.16, 1, 0.3, 1), border-color 260ms ease, box-shadow 420ms ease;
}

.nhx-rank-1 .nhx-popular-surface {
    min-height: 468px;
    padding: 28px;
    border-radius: 30px 8px 34px 10px;
}

.nhx-rank-2 .nhx-popular-surface { clip-path: polygon(5% 5%, 96% 0, 100% 87%, 87% 100%, 0 93%, 2% 24%); }
.nhx-rank-3 .nhx-popular-surface { clip-path: polygon(0 10%, 91% 0, 100% 23%, 97% 92%, 15% 100%, 2% 82%); }

.nhx-popular-card:hover .nhx-popular-surface,
.nhx-popular-card:focus-visible .nhx-popular-surface {
    border-color: color-mix(in srgb, var(--series-color) 68%, rgba(255,255,255,0.24));
    box-shadow: 0 38px 100px rgba(0,0,0,0.55);
}

.nhx-rank-number {
    position: absolute;
    top: -26px;
    right: 8px;
    z-index: 0;
    color: color-mix(in srgb, var(--series-color) 27%, transparent);
    font-size: clamp(7rem, 12vw, 11rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.1em;
    pointer-events: none;
}

.nhx-stone-frame {
    position: relative;
    z-index: 1;
    display: block;
    width: min(84%, 210px);
    margin: 2px auto 22px;
    aspect-ratio: 2 / 3;
    filter: drop-shadow(0 24px 26px rgba(0,0,0,0.48));
    transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1), filter 420ms ease;
}

.nhx-rank-1 .nhx-stone-frame { width: min(84%, 240px); }

.nhx-popular-card:hover .nhx-stone-frame,
.nhx-popular-card:focus-visible .nhx-stone-frame {
    filter: drop-shadow(0 31px 34px rgba(0,0,0,0.58));
    transform: translate3d(0, -7px, 0) rotate(1deg);
}

.nhx-popular-cover,
.nhx-stone-frame > .nhx-cover-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2px;
    clip-path: polygon(6% 0, 94% 3%, 100% 19%, 96% 91%, 82% 100%, 8% 96%, 0 78%, 3% 14%);
}

.nhx-stone-facet {
    position: absolute;
    inset: -10px;
    z-index: -1;
    background: color-mix(in srgb, var(--series-color) 25%, transparent);
    border: 1px solid color-mix(in srgb, var(--series-color) 52%, transparent);
    clip-path: polygon(11% 0, 91% 4%, 100% 18%, 95% 88%, 84% 100%, 6% 95%, 0 76%, 5% 12%);
    transform: rotate(-2.5deg);
}

.nhx-popular-copy {
    position: relative;
    z-index: 2;
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.nhx-popular-title {
    display: -webkit-box;
    margin-top: 8px;
    overflow: hidden;
    color: var(--nhx-ink);
    font-size: clamp(1rem, 1.65vw, 1.32rem);
    font-weight: 800;
    line-height: 1.13;
    letter-spacing: -0.035em;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.nhx-rank-1 .nhx-popular-title { font-size: clamp(1.28rem, 2vw, 1.72rem); }

.nhx-popular-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 13px;
    margin-top: 13px;
    color: var(--nhx-muted);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}

.nhx-popular-meta span { display: inline-flex; align-items: center; gap: 6px; }
.nhx-popular-meta i { color: var(--series-color); }

/* ----------------------------------------------------------------
   Collections — real cover colors become the glass atmosphere.
   ---------------------------------------------------------------- */

.nhx-collection-stack {
    display: grid;
    gap: clamp(26px, 4vw, 50px);
}

.nhx-collection-panel {
    position: relative;
    min-width: 0;
    padding: clamp(26px, 4vw, 48px);
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(128deg, rgba(22, 24, 35, 0.88), rgba(8, 10, 16, 0.91));
    border: 1px solid color-mix(in srgb, var(--collection-color) 34%, rgba(255,255,255,0.1));
    box-shadow: 0 34px 96px rgba(0,0,0,0.36);
    backdrop-filter: blur(22px) saturate(1.1);
}

.nhx-collection-panel:nth-child(3n + 1) {
    border-radius: 7px 36px 12px 27px;
    clip-path: polygon(0 7%, 5% 0, 97% 3%, 100% 22%, 98% 94%, 91% 100%, 3% 97%, 0 77%);
}

.nhx-collection-panel:nth-child(3n + 2) {
    width: 96%;
    margin-left: auto;
    border-radius: 35px 8px 31px 11px;
    clip-path: polygon(2% 2%, 94% 0, 100% 9%, 98% 89%, 91% 100%, 4% 97%, 0 78%, 1% 18%);
}

.nhx-collection-panel:nth-child(3n) {
    width: 94%;
    border-radius: 9px 31px 8px 38px;
    clip-path: polygon(0 9%, 8% 0, 100% 4%, 98% 84%, 93% 100%, 9% 97%, 2% 88%);
}

.nhx-collection-atmosphere {
    position: absolute;
    inset: -70px;
    z-index: -2;
    overflow: hidden;
    opacity: 0.52;
    pointer-events: none;
}

.nhx-collection-atmosphere::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(7,8,13,0.68), rgba(7,8,13,0.26) 52%, rgba(7,8,13,0.7));
}

.nhx-collection-atmosphere span {
    position: absolute;
    width: 46%;
    aspect-ratio: 1;
    background-position: center;
    background-size: cover;
    filter: blur(62px) saturate(0.92) contrast(1.08);
    transform: scale(1.28);
}

.nhx-collection-atmosphere span:nth-child(1) { top: -4%; left: 0; }
.nhx-collection-atmosphere span:nth-child(2) { top: 5%; left: 32%; opacity: 0.76; }
.nhx-collection-atmosphere span:nth-child(3) { top: -8%; right: -2%; opacity: 0.68; }

.nhx-collection-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(110deg, rgba(255,255,255,0.035), transparent 22%),
        repeating-linear-gradient(0deg, transparent 0 42px, rgba(255,255,255,0.018) 42px 43px);
    pointer-events: none;
}

.nhx-collection-cut {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    background: color-mix(in srgb, var(--collection-color) 22%, transparent);
    border: 1px solid color-mix(in srgb, var(--collection-color) 44%, transparent);
}

.nhx-cut-a {
    top: -28px;
    right: 8%;
    width: 92px;
    height: 108px;
    clip-path: polygon(0 19%, 71% 0, 100% 72%, 38% 100%);
    transform: rotate(14deg);
}

.nhx-cut-b {
    right: -20px;
    bottom: -35px;
    width: 145px;
    height: 150px;
    clip-path: polygon(21% 0, 100% 34%, 71% 100%, 0 76%);
    transform: rotate(-11deg);
}

.nhx-collection-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.nhx-collection-title {
    margin: 8px 0 0;
    color: var(--nhx-ink);
    font-size: clamp(1.35rem, 2.5vw, 2.05rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.045em;
}

.nhx-collection-desc {
    max-width: 62ch;
    margin: 9px 0 0;
    color: var(--nhx-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.nhx-book-rail {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: clamp(11px, 1.6vw, 20px);
    align-items: start;
}

.nhx-collection-rail-shell {
    position: relative;
    z-index: 2;
    min-width: 0;
}

.nhx-collection-rail-nav {
    display: none;
}

.nhx-collection-book {
    display: flex;
    min-width: 0;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
    transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.nhx-collection-book:nth-child(3n + 2) { transform: translateY(9px); }
.nhx-collection-book:nth-child(4n) { transform: translateY(-5px); }
.nhx-collection-book:hover,
.nhx-collection-book:focus-visible { transform: translate3d(0, -9px, 0); }

.nhx-book-cover-shell {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 2 / 3;
    background: rgba(10,12,18,0.72);
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 4px 12px 8px 3px;
    box-shadow: 0 17px 34px rgba(0,0,0,0.34);
}

.nhx-book-cover-shell img,
.nhx-book-cover-shell > .nhx-cover-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1), filter 420ms ease;
}

.nhx-collection-book:hover img,
.nhx-collection-book:focus-visible img {
    filter: saturate(1.08) contrast(1.04);
    transform: scale(1.045);
}

.nhx-book-reflection {
    position: absolute;
    inset: -30% -80%;
    background: linear-gradient(108deg, transparent 42%, rgba(255,255,255,0.13) 49%, transparent 56%);
    transform: translateX(-38%);
    transition: transform 820ms cubic-bezier(0.16, 1, 0.3, 1);
}

.nhx-collection-book:hover .nhx-book-reflection,
.nhx-collection-book:focus-visible .nhx-book-reflection { transform: translateX(38%); }

.nhx-collection-book > strong {
    display: -webkit-box;
    margin-top: 11px;
    overflow: hidden;
    color: rgba(244,241,235,0.86);
    font-size: 0.78rem;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* ----------------------------------------------------------------
   Compact community/support strip and restrained footer.
   ---------------------------------------------------------------- */

.nhx-community { padding-top: clamp(62px, 7vw, 98px); }

.nhx-community-strip {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.65fr);
    min-height: 166px;
    overflow: hidden;
    background: linear-gradient(120deg, rgba(22,24,36,0.9), rgba(11,13,20,0.88));
    border: 1px solid var(--nhx-line);
    border-radius: 6px 28px 8px 22px;
    box-shadow: 0 28px 80px rgba(0,0,0,0.28);
}

.nhx-community-shard {
    position: absolute;
    top: -62px;
    right: 29%;
    width: 180px;
    height: 260px;
    background: linear-gradient(150deg, rgba(148,120,207,0.2), rgba(148,120,207,0.025));
    border-inline: 1px solid rgba(148,120,207,0.22);
    clip-path: polygon(42% 0, 100% 26%, 68% 100%, 0 72%);
    transform: rotate(10deg);
    pointer-events: none;
}

.nhx-community-main {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    padding: 30px 34px;
}

.nhx-community-icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    color: #d8cff0;
    font-size: 1.8rem;
    background: rgba(148,120,207,0.16);
    border: 1px solid rgba(148,120,207,0.28);
    clip-path: polygon(9% 8%, 92% 0, 100% 82%, 24% 100%, 0 64%);
}

.nhx-community-main h2 {
    margin: 0;
    color: var(--nhx-ink);
    font-size: clamp(1.15rem, 2vw, 1.55rem);
    font-weight: 800;
    letter-spacing: -0.035em;
}

.nhx-community-main p {
    max-width: 56ch;
    margin: 7px 0 0;
    color: var(--nhx-muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

.nhx-community-button {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 18px;
    color: #f7f3ff;
    font-size: 0.78rem;
    font-weight: 800;
    text-decoration: none;
    background: #705a9d;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 5px 14px 6px 11px;
    transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1), background 220ms ease;
}

.nhx-community-button:hover,
.nhx-community-button:focus-visible { background: #8169af; transform: translate3d(0, -3px, 0); }

.nhx-support-links {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    gap: 10px;
    padding: 28px 30px;
    background: rgba(8,10,16,0.48);
    border-left: 1px solid var(--nhx-line);
}

.nhx-support-links > span {
    width: 100%;
    color: var(--nhx-faint);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.nhx-support-links a {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    color: var(--nhx-muted);
    font-size: 0.73rem;
    font-weight: 700;
    text-decoration: none;
    background: rgba(255,255,255,0.035);
    border: 1px solid var(--nhx-line);
    border-radius: 5px;
    transition: color 220ms ease, border-color 220ms ease, transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.nhx-support-links a:hover,
.nhx-support-links a:focus-visible { color: var(--nhx-ink); border-color: rgba(148,120,207,0.36); transform: translateY(-2px); }

.nhx-footer {
    margin-top: clamp(78px, 9vw, 132px);
    padding: 54px 0 28px;
    background: rgba(5,6,10,0.54);
    border-top: 1px solid rgba(255,255,255,0.07);
}

.nhx-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(5, minmax(105px, 0.7fr));
    gap: clamp(24px, 3vw, 46px);
}

.nhx-footer-brand > strong {
    color: var(--nhx-ink);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.nhx-footer-brand > strong span { color: var(--nhx-accent); }
.nhx-footer-brand p { max-width: 28ch; margin: 12px 0 0; color: var(--nhx-faint); font-size: 0.78rem; line-height: 1.5; }
.nhx-footer-socials { display: flex; gap: 8px; margin-top: 20px; }
.nhx-footer-socials a { display: grid; place-items: center; width: 40px; height: 40px; color: var(--nhx-muted); text-decoration: none; border: 1px solid var(--nhx-line); border-radius: 6px 12px 7px 9px; transition: color 200ms ease, transform 300ms ease; }
.nhx-footer-socials a:hover,
.nhx-footer-socials a:focus-visible { color: var(--nhx-ink); transform: translateY(-3px); }

.nhx-footer-nav { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.nhx-footer-nav strong { margin-bottom: 4px; color: rgba(244,241,235,0.8); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; }
.nhx-footer-nav a { min-height: 25px; color: var(--nhx-faint); font-size: 0.76rem; text-decoration: none; transition: color 200ms ease, transform 260ms ease; }
.nhx-footer-nav a:hover,
.nhx-footer-nav a:focus-visible { color: var(--nhx-ink); transform: translateX(2px); }

.nhx-footer-bottom {
    margin-top: 42px;
    padding-top: 22px;
    color: rgba(233,230,223,0.25);
    font-size: 0.7rem;
    border-top: 1px solid rgba(255,255,255,0.055);
}

.nhx-experience a:focus-visible {
    outline: 2px solid #b9a5e4;
    outline-offset: 4px;
}

/* ----------------------------------------------------------------
   Responsive composition
   ---------------------------------------------------------------- */

@media (max-width: 1120px) {
    .nhx-reading-layout { grid-template-columns: minmax(0, 1.35fr) minmax(250px, 0.65fr); }
    .nhx-reading-primary { grid-template-columns: 40px minmax(130px, 160px) minmax(0, 1fr); }
    .nhx-popular-grid { grid-template-columns: minmax(0, 0.82fr) minmax(245px, 1.08fr) minmax(0, 0.82fr); }
    .nhx-popular-surface { min-height: 340px; padding: 18px; }
    .nhx-rank-1 .nhx-popular-surface { min-height: 430px; }
    .nhx-book-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 26px; }
    .nhx-community-strip { grid-template-columns: 1fr; }
    .nhx-support-links { border-top: 1px solid var(--nhx-line); border-left: 0; }
}

@media (max-width: 900px) {
    .nhx-container { width: min(100% - 40px, 760px); }
    .nhx-reading-layout { grid-template-columns: 1fr; }
    .nhx-reading-others { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nhx-others-label { grid-column: 1 / -1; }
    .nhx-popular-grid {
        grid-template-areas:
            'first first'
            'second third';
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 720px;
        margin-inline: auto;
    }
    .nhx-rank-1 { width: min(100%, 390px); margin-inline: auto; transform: none; }
    .nhx-rank-2,
    .nhx-rank-3 { transform: none; }
    .nhx-rank-1 .nhx-popular-surface { min-height: 450px; }
    .nhx-rank-2 .nhx-popular-surface,
    .nhx-rank-3 .nhx-popular-surface { min-height: 360px; }
    .nhx-chaos-stage { min-height: auto; }
    .nhx-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nhx-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
    .nhx-container { width: min(100% - 28px, 620px); }
    .nhx-section { padding-top: 66px; }
    .nhx-section-header { align-items: flex-start; }
    .nhx-heading-lockup { gap: 12px; }
    .nhx-index { width: 40px; height: 44px; }
    .nhx-title { font-size: clamp(1.55rem, 8vw, 2rem); }
    .nhx-subtitle { margin-top: 7px; }
    .nhx-section-header > .nhx-text-link { font-size: 0; }
    .nhx-section-header > .nhx-text-link span { display: grid; width: 44px; height: 44px; place-items: center; font-size: 1rem; border: 1px solid var(--nhx-line); border-radius: 50%; }

    .nhx-reading-primary {
        grid-template-columns: 30px 108px minmax(0, 1fr);
        gap: 14px;
        min-height: 330px;
        padding: 20px 16px 20px 12px;
        border-radius: 5px 22px 8px 17px;
    }
    .nhx-reading-spine { transform: translateY(-20px); }
    .nhx-reading-spine span { margin-top: 38px; font-size: 0.52rem; }
    .nhx-reading-page { padding-top: 5px; }
    .nhx-reading-title { font-size: 1.12rem; }
    .nhx-reading-chapter { font-size: 0.72rem; }
    .nhx-reading-excerpt { margin-top: 18px; font-size: 1rem; line-height: 1.45; -webkit-line-clamp: 4; }
    .nhx-reading-progress-row { padding-top: 17px; }
    .nhx-continue-action { margin-top: 14px; font-size: 0.73rem; }
    .nhx-reading-others { grid-template-columns: 1fr; }

    .nhx-chaos-stage { padding: 18px 0 0; }
    .nhx-popular-grid { grid-template-areas: 'first' 'second' 'third'; grid-template-columns: 1fr; gap: 16px; }
    .nhx-rank-1,
    .nhx-rank-2,
    .nhx-rank-3 { width: 100%; margin: 0; transform: none; }
    .nhx-popular-surface,
    .nhx-rank-1 .nhx-popular-surface,
    .nhx-rank-2 .nhx-popular-surface,
    .nhx-rank-3 .nhx-popular-surface {
        display: grid;
        min-height: 190px;
        grid-template-columns: 104px minmax(0, 1fr);
        grid-template-rows: 1fr;
        gap: 18px;
        align-items: center;
        padding: 18px;
        clip-path: none;
        border-radius: 8px 22px 8px 17px;
    }
    .nhx-stone-frame,
    .nhx-rank-1 .nhx-stone-frame { width: 104px; height: 156px; margin: 0; }
    .nhx-popular-copy { align-self: end; padding-bottom: 8px; }
    .nhx-rank-number { top: -16px; right: 12px; font-size: 7rem; }
    .nhx-resonance-ring { width: 92vw; }
    .nhx-fragment.f2,
    .nhx-fragment.f3,
    .nhx-fragment.f6 { display: none; }

    .nhx-collection-panel,
    .nhx-collection-panel:nth-child(3n + 1),
    .nhx-collection-panel:nth-child(3n + 2),
    .nhx-collection-panel:nth-child(3n) {
        width: 100%;
        margin: 0;
        padding: 24px 18px;
        clip-path: none;
        border-radius: 7px 23px 9px 17px;
    }
    .nhx-collection-header { align-items: flex-start; margin-bottom: 24px; }
    .nhx-collection-header .nhx-text-link { font-size: 0; }
    .nhx-collection-header .nhx-text-link span { font-size: 1rem; }
    .nhx-book-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
    .nhx-collection-book:nth-child(n) { transform: none; }
    .nhx-collection-book:hover,
    .nhx-collection-book:focus-visible { transform: translateY(-5px); }

    .nhx-community-main { grid-template-columns: 52px minmax(0, 1fr); padding: 24px 20px; }
    .nhx-community-icon { width: 52px; height: 52px; }
    .nhx-community-button { grid-column: 1 / -1; width: 100%; }
    .nhx-support-links { padding: 22px 20px; }
    .nhx-footer-grid { gap: 28px 18px; }
}

@media (max-width: 430px) {
    .nhx-reading-primary { grid-template-columns: 24px 86px minmax(0, 1fr); gap: 10px; padding-inline: 10px; }
    .nhx-page-kicker { font-size: 0.55rem; letter-spacing: 0.1em; }
    .nhx-reading-excerpt { -webkit-line-clamp: 3; }
    .nhx-continue-action { font-size: 0.68rem; gap: 6px; }
    .nhx-footer-grid { grid-template-columns: 1fr; }
    .nhx-footer-brand { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .nhx-experience *,
    .nhx-experience *::before,
    .nhx-experience *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    .nhx-motion-ready [data-reveal-section] .nhx-section-header,
    .nhx-motion-ready [data-reveal-section] .nhx-reading-layout,
    .nhx-motion-ready [data-reveal-section] .nhx-chaos-stage,
    .nhx-motion-ready [data-reveal-section] .nhx-collection-panel,
    .nhx-motion-ready [data-reveal-section] .nhx-community-strip {
        opacity: 1;
        transform: none;
    }
}

/* ================================================================
   Experience refinement v2 — desktop fracture / mobile calm
   ================================================================ */

/* Seven deterministic weekday atmospheres. Particles are generated by JS. */
.nhx-weather-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0.82;
    contain: paint;
    mask-image: linear-gradient(to bottom, transparent 0, #000 3%, #000 97%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 3%, #000 97%, transparent 100%);
    mix-blend-mode: screen;
}

.nhx-weather-layer::before {
    content: '';
    position: absolute;
    inset: -2%;
    opacity: 0.3;
    background-image:
        radial-gradient(circle, rgba(222, 216, 238, 0.76) 0 1px, transparent 1.6px),
        radial-gradient(circle, rgba(148, 120, 207, 0.58) 0 0.9px, transparent 1.4px);
    background-position: 18px 24px, 91px 73px;
    background-size: 176px 176px, 241px 241px;
    animation: nhx-sky-drift 34s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}

.nhx-experience > :not(.nhx-ambient):not(.nhx-weather-layer) {
    position: relative;
    z-index: 1;
}

.nhx-weather-particle {
    position: absolute;
    top: var(--weather-y);
    left: var(--weather-x);
    display: block;
    opacity: 0.72;
    transform: translateZ(0);
    animation-delay: var(--weather-delay) !important;
    animation-duration: var(--weather-duration) !important;
}

.nhx-experience[data-atmosphere='fireflies'] .nhx-weather-particle {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #d9bd7f;
    box-shadow: 0 0 12px rgba(217, 189, 127, 0.72);
    animation: nhx-firefly ease-in-out infinite alternate;
}

.nhx-experience[data-atmosphere='motes'] .nhx-weather-particle {
    width: 2px;
    height: 12px;
    background: rgba(232, 224, 205, 0.64);
    animation: nhx-mote linear infinite;
}

.nhx-experience[data-atmosphere='shooting-stars'] .nhx-weather-particle {
    width: 112px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(225, 218, 243, 0.88) 72%, rgba(255,255,255,0.9));
    transform: rotate(-28deg);
    animation: nhx-shooting-star ease-in infinite;
}

.nhx-experience[data-atmosphere='rain'] .nhx-weather-particle {
    width: 1.25px;
    height: 44px;
    background: linear-gradient(transparent, rgba(181, 202, 229, 0.76));
    box-shadow: 0 0 4px rgba(181, 202, 229, 0.16);
    animation: nhx-rain linear infinite;
}

.nhx-experience[data-atmosphere='ink'] .nhx-weather-particle {
    width: 7px;
    height: 14px;
    background: rgba(158, 132, 211, 0.48);
    clip-path: polygon(20% 0, 100% 24%, 68% 100%, 0 72%);
    animation: nhx-ink-drift ease-in-out infinite alternate;
}

.nhx-experience[data-atmosphere='snow'] .nhx-weather-particle {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(242, 245, 255, 0.88);
    box-shadow: 0 0 7px rgba(213, 225, 255, 0.32);
    animation: nhx-snow linear infinite;
}

.nhx-experience[data-atmosphere='constellation'] .nhx-weather-particle {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #ddd5ef;
    box-shadow: 0 0 10px rgba(167, 139, 223, 0.76);
    animation: nhx-constellation ease-in-out infinite alternate;
}

@keyframes nhx-firefly { 0% { opacity: 0.18; transform: translate3d(0, 0, 0) scale(var(--weather-scale)); } 55% { opacity: 0.9; } 100% { opacity: 0.22; transform: translate3d(var(--weather-drift), -34px, 0) scale(var(--weather-scale)); } }
@keyframes nhx-sky-drift { to { opacity: 0.42; transform: translate3d(22px, -16px, 0); } }
@keyframes nhx-mote { 0% { opacity: 0.58; transform: translate3d(0, 16px, 0) rotate(0); } 100% { opacity: 0.06; transform: translate3d(var(--weather-drift), -190px, 0) rotate(80deg); } }
@keyframes nhx-shooting-star { 0%, 72% { opacity: 0; transform: translate3d(-150px, -70px, 0) rotate(-28deg); } 78% { opacity: 0.9; } 91%, 100% { opacity: 0; transform: translate3d(270px, 155px, 0) rotate(-28deg); } }
@keyframes nhx-rain { 0% { opacity: 0; transform: translate3d(0, -7vh, 0); } 12% { opacity: 0.78; } 82% { opacity: 0.46; } 100% { opacity: 0; transform: translate3d(var(--weather-drift), 46vh, 0); } }
@keyframes nhx-ink-drift { 0% { opacity: 0.46; transform: translate3d(0, 0, 0) rotate(0) scale(var(--weather-scale)); } 100% { opacity: 0.1; transform: translate3d(var(--weather-drift), -52px, 0) rotate(42deg) scale(var(--weather-scale)); } }
@keyframes nhx-snow { 0% { opacity: 0.12; transform: translate3d(0, -6vh, 0) rotate(0) scale(var(--weather-scale)); } 18% { opacity: 0.88; } 100% { opacity: 0.12; transform: translate3d(var(--weather-drift), 42vh, 0) rotate(160deg) scale(var(--weather-scale)); } }
@keyframes nhx-constellation { 0% { opacity: 0.2; transform: scale(0.75); } 48% { opacity: 0.92; } 100% { opacity: 0.24; transform: scale(1.85); } }

/* Desktop popular stage: the covers themselves form the broken composition. */
.nhx-popular-mobile-list { display: none; }

.nhx-popular-desktop-stage {
    position: relative;
    min-height: 660px;
    isolation: isolate;
}

.nhx-popular-desktop-stage::before,
.nhx-popular-desktop-stage::after {
    content: '';
    position: absolute;
    pointer-events: none;
}

.nhx-popular-desktop-stage::before {
    inset: 6% 3% 4%;
    z-index: -3;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background:
        linear-gradient(118deg, rgba(150, 122, 203, 0.08), transparent 29%),
        radial-gradient(circle at 51% 45%, rgba(148, 120, 207, 0.16), transparent 42%);
    clip-path: polygon(3% 18%, 18% 3%, 42% 9%, 57% 0, 81% 8%, 98% 27%, 94% 72%, 76% 94%, 53% 87%, 36% 100%, 12% 89%, 0 58%);
}

.nhx-popular-desktop-stage::after {
    left: 12%;
    right: 12%;
    bottom: 9%;
    height: 1px;
    opacity: 0.55;
    background: linear-gradient(90deg, transparent, rgba(148, 120, 207, 0.65), transparent);
    box-shadow: 0 0 28px rgba(148, 120, 207, 0.26);
}

.nhx-popular-desktop-stage .nhx-resonance-ring { top: 46%; }

.nhx-popular-cluster {
    position: relative;
    z-index: 2;
    min-height: 650px;
}

.nhx-popular-cluster .nhx-popular-card {
    position: absolute;
    top: 0;
    width: min(34%, 420px);
    perspective: 1200px;
}

.nhx-popular-cluster .nhx-rank-1 {
    top: 22px;
    left: 50%;
    z-index: 4;
    width: min(36%, 440px);
    transform: translateX(-50%) rotate(-1deg);
}

.nhx-popular-cluster .nhx-rank-2 {
    top: 174px;
    left: 2%;
    z-index: 2;
    transform: rotate(-5deg);
}

.nhx-popular-cluster .nhx-rank-3 {
    top: 198px;
    right: 1%;
    z-index: 2;
    transform: rotate(4.5deg);
}

.nhx-popular-count-1 .nhx-popular-cluster .nhx-rank-1 { width: min(42%, 470px); }
.nhx-popular-count-2 .nhx-popular-cluster .nhx-rank-1 { left: 62%; }
.nhx-popular-count-2 .nhx-popular-cluster .nhx-rank-2 { left: 12%; }

.nhx-popular-cluster .nhx-popular-surface {
    position: relative;
    display: grid;
    min-height: 430px;
    grid-template-rows: minmax(0, 1fr) auto;
    padding: 24px;
    overflow: visible;
    isolation: isolate;
    clip-path: none;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
}

.nhx-popular-cluster .nhx-popular-surface::before {
    content: '';
    position: absolute;
    inset: 8% 0 0;
    z-index: -2;
    border: 1px solid color-mix(in srgb, var(--series-color) 48%, rgba(255,255,255,0.08));
    background:
        linear-gradient(140deg, color-mix(in srgb, var(--series-color) 19%, rgba(20, 22, 32, 0.92)), rgba(8, 10, 16, 0.9) 66%),
        rgba(12, 14, 22, 0.88);
    box-shadow: 0 32px 90px rgba(0,0,0,0.48), inset 0 1px rgba(255,255,255,0.055);
    clip-path: polygon(7% 0, 91% 3%, 100% 14%, 96% 88%, 83% 100%, 8% 96%, 0 78%, 3% 12%);
    backdrop-filter: blur(20px) saturate(1.12);
}

.nhx-popular-cluster .nhx-popular-surface::after {
    content: '';
    position: absolute;
    inset: 14% 4% 6%;
    z-index: -1;
    opacity: 0.34;
    background:
        linear-gradient(71deg, transparent 42%, color-mix(in srgb, var(--series-color) 62%, transparent) 42.4% 42.8%, transparent 43.2%),
        linear-gradient(132deg, transparent 67%, rgba(255,255,255,0.26) 67.2% 67.5%, transparent 67.8%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.nhx-popular-cluster .nhx-rank-1 .nhx-popular-surface { min-height: 555px; padding: 29px 31px 32px; }
.nhx-popular-cluster .nhx-rank-2 .nhx-popular-surface::before { clip-path: polygon(3% 7%, 84% 0, 100% 17%, 94% 91%, 76% 100%, 0 88%, 5% 51%); }
.nhx-popular-cluster .nhx-rank-3 .nhx-popular-surface::before { clip-path: polygon(13% 0, 100% 8%, 94% 48%, 100% 91%, 22% 100%, 0 82%, 5% 19%); }

.nhx-cover-assembly {
    position: relative;
    display: block;
    width: min(76%, 230px);
    margin: -4px auto 20px;
    aspect-ratio: 2 / 3;
    transition: transform 560ms cubic-bezier(0.16, 1, 0.3, 1);
}

.nhx-rank-1 .nhx-cover-assembly { width: min(80%, 270px); }
.nhx-popular-card:hover .nhx-cover-assembly,
.nhx-popular-card:focus-visible .nhx-cover-assembly { transform: translate3d(0, -10px, 0) rotate(1.6deg) scale(1.025); }

.nhx-cover-echo {
    position: absolute;
    inset: -8% -11% -6%;
    z-index: -2;
    border: 1px solid color-mix(in srgb, var(--series-color) 58%, transparent);
    background: color-mix(in srgb, var(--series-color) 18%, transparent);
    box-shadow: 0 0 52px color-mix(in srgb, var(--series-color) 22%, transparent);
    clip-path: polygon(11% 0, 90% 5%, 100% 22%, 92% 88%, 76% 100%, 4% 93%, 0 61%, 5% 13%);
    transform: rotate(-4deg);
}

.nhx-popular-cluster .nhx-stone-frame {
    width: 100%;
    height: 100%;
    margin: 0;
    filter: drop-shadow(0 26px 30px rgba(0,0,0,0.56));
}

.nhx-popular-cluster .nhx-popular-cover,
.nhx-popular-cluster .nhx-stone-frame > .nhx-cover-placeholder {
    border-radius: 0;
    clip-path: polygon(4% 0, 94% 4%, 100% 18%, 95% 87%, 81% 100%, 7% 95%, 0 76%, 3% 12%);
}

.nhx-card-shard {
    position: absolute;
    z-index: -1;
    display: block;
    border: 1px solid color-mix(in srgb, var(--series-color) 54%, transparent);
    background: linear-gradient(145deg, color-mix(in srgb, var(--series-color) 28%, transparent), rgba(255,255,255,0.025));
    transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.nhx-card-shard-a { top: 7%; right: -25%; width: 35%; height: 23%; clip-path: polygon(0 21%, 100% 0, 68% 100%, 18% 74%); transform: rotate(12deg); }
.nhx-card-shard-b { bottom: 10%; left: -22%; width: 29%; height: 18%; clip-path: polygon(13% 0, 100% 31%, 68% 100%, 0 72%); transform: rotate(-18deg); }
.nhx-card-shard-c { right: -13%; bottom: -9%; width: 24%; height: 16%; clip-path: polygon(0 38%, 78% 0, 100% 80%, 31% 100%); transform: rotate(23deg); }
.nhx-popular-card:hover .nhx-card-shard-a { transform: translate3d(8px,-7px,0) rotate(17deg); }
.nhx-popular-card:hover .nhx-card-shard-b { transform: translate3d(-7px,5px,0) rotate(-23deg); }
.nhx-popular-card:hover .nhx-card-shard-c { transform: translate3d(5px,8px,0) rotate(28deg); }

.nhx-rank-sigil {
    position: absolute;
    top: 4%;
    right: -3%;
    z-index: 4;
    display: grid;
    width: 64px;
    height: 74px;
    place-content: center;
    text-align: center;
    color: #fff;
    background: color-mix(in srgb, var(--series-color) 48%, rgba(15,16,24,0.88));
    border: 1px solid color-mix(in srgb, var(--series-color) 68%, rgba(255,255,255,0.2));
    clip-path: polygon(10% 0, 100% 7%, 86% 87%, 34% 100%, 0 72%);
    box-shadow: 0 18px 36px rgba(0,0,0,0.3);
}

.nhx-rank-sigil small { font-size: 0.48rem; font-weight: 800; letter-spacing: 0.15em; opacity: 0.7; }
.nhx-rank-sigil b { font-size: 1.4rem; line-height: 1.05; }
.nhx-rank-1 .nhx-rank-sigil { width: 76px; height: 88px; }

.nhx-popular-cluster .nhx-popular-copy {
    padding: 0 8px 4px;
    transform: rotate(0.001deg);
}

.nhx-popular-label {
    color: color-mix(in srgb, var(--series-color) 72%, white);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.nhx-popular-open {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    margin-top: 16px;
    color: rgba(244,241,235,0.76);
    font-size: 0.72rem;
    font-weight: 750;
}

/* Collection panels keep a small hand-cut edge without visual wobble. */
.nhx-collection-panel,
.nhx-collection-panel:nth-child(3n + 1),
.nhx-collection-panel:nth-child(3n + 2),
.nhx-collection-panel:nth-child(3n) {
    width: 100%;
    margin-left: 0;
    border-radius: 18px;
    clip-path: polygon(18px 0, calc(100% - 24px) 0, 100% 19px, 100% calc(100% - 22px), calc(100% - 28px) 100%, 17px 100%, 0 calc(100% - 18px), 0 17px);
}

.nhx-book-rail {
    grid-template-columns: repeat(auto-fit, minmax(112px, 146px));
    gap: 22px 18px;
}

/* Desktop collection shelf: equal, book-like frames with stronger captions. */
@media (min-width: 901px) {
    .nhx-book-rail {
        grid-template-columns: repeat(auto-fit, minmax(150px, 158px));
        gap: 28px 18px;
    }

    .nhx-collection-book,
    .nhx-book-cover-shell {
        width: 100%;
    }

    .nhx-book-cover-shell {
        aspect-ratio: 2 / 3;
    }

    .nhx-book-cover-shell img,
    .nhx-book-cover-shell > .nhx-cover-placeholder {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .nhx-collection-book > strong {
        min-height: 2.6em;
        margin-top: 12px;
        color: rgba(248,246,242,0.95);
        font-size: 0.86rem;
        font-weight: 750;
        line-height: 1.3;
        letter-spacing: -0.012em;
        text-wrap: balance;
        transition: color 240ms ease, text-shadow 240ms ease;
    }

    .nhx-collection-book:hover > strong,
    .nhx-collection-book:focus-visible > strong {
        color: #fff;
        text-shadow: 0 0 18px color-mix(in srgb, var(--collection-color) 34%, transparent);
    }
}

.nhx-collection-link {
    position: relative;
    display: grid;
    grid-template-columns: auto 38px;
    min-height: 46px;
    gap: 13px;
    padding: 0 0 0 16px;
    color: rgba(248,246,242,0.88);
    border: 0;
    border-left: 2px solid color-mix(in srgb, var(--collection-color) 76%, white 8%);
    border-bottom: 1px solid color-mix(in srgb, var(--collection-color) 34%, rgba(255,255,255,0.1));
    border-radius: 0;
    background: linear-gradient(90deg, color-mix(in srgb, var(--collection-color) 11%, transparent), transparent 72%);
    box-shadow: none;
    overflow: hidden;
    transition: border-color 260ms ease, background 360ms ease;
}

.nhx-collection-link:hover,
.nhx-collection-link:focus-visible {
    color: #fff;
    border-color: color-mix(in srgb, var(--collection-color) 82%, white 12%);
    background: linear-gradient(90deg, color-mix(in srgb, var(--collection-color) 18%, transparent), transparent 78%);
    transform: none;
}

.nhx-collection-link-label {
    color: rgba(248,246,242,0.84) !important;
    font-size: 0.76rem !important;
    font-weight: 780;
    letter-spacing: 0.075em;
    text-transform: uppercase;
    transition: color 220ms ease, transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.nhx-collection-link:hover .nhx-collection-link-label,
.nhx-collection-link:focus-visible .nhx-collection-link-label {
    color: #fff !important;
    transform: translate3d(2px, 0, 0);
}

.nhx-collection-link .nhx-collection-link-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: rgba(255,255,255,0.9);
    border: 1px solid color-mix(in srgb, var(--collection-color) 56%, rgba(255,255,255,0.16));
    background: color-mix(in srgb, var(--collection-color) 20%, rgba(8,10,16,0.55));
    clip-path: polygon(0 0, 76% 0, 100% 24%, 100% 100%, 24% 100%, 0 76%);
    transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1), background 260ms ease;
}

.nhx-collection-link-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: square;
    stroke-linejoin: miter;
}

.nhx-collection-link:hover .nhx-collection-link-icon,
.nhx-collection-link:focus-visible .nhx-collection-link-icon {
    background: color-mix(in srgb, var(--collection-color) 30%, rgba(8,10,16,0.5));
    transform: translate3d(2px, -2px, 0);
}

/* Homepage delayed quick preview. */
.novel-hover-preview.theme-fractured { width: min(390px, calc(100vw - 32px)); }
.novel-hover-preview.theme-fractured .novel-hover-preview__surface {
    min-height: 264px;
    padding: 24px;
    border-color: color-mix(in srgb, var(--preview-color, #9478cf) 52%, rgba(255,255,255,0.13));
    border-radius: 10px 24px 12px 18px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--preview-color, #9478cf) 14%, rgba(18,20,29,0.96)), rgba(7,9,15,0.97));
    box-shadow: 0 30px 90px rgba(0,0,0,0.66), 0 0 42px color-mix(in srgb, var(--preview-color, #9478cf) 12%, transparent);
    clip-path: polygon(0 8%, 7% 0, 94% 2%, 100% 15%, 97% 90%, 86% 100%, 5% 97%, 0 82%);
}

.novel-hover-preview.theme-fractured .novel-hover-preview__surface::before {
    background:
        linear-gradient(122deg, color-mix(in srgb, var(--preview-color, #9478cf) 15%, transparent), transparent 43%),
        linear-gradient(68deg, transparent 72%, rgba(255,255,255,0.08) 72.3% 72.7%, transparent 73%);
}

.novel-hover-preview.theme-fractured .novel-hover-preview__eyebrow { color: color-mix(in srgb, var(--preview-color, #9478cf) 70%, white); }
.novel-hover-preview.theme-fractured .novel-hover-preview__eyebrow::before { background: var(--preview-color, #9478cf); box-shadow: 0 0 14px var(--preview-color, #9478cf); }
.novel-hover-preview.theme-fractured .novel-hover-preview__action { border-color: color-mix(in srgb, var(--preview-color, #9478cf) 58%, transparent); background: color-mix(in srgb, var(--preview-color, #9478cf) 20%, transparent); }

/* Collection content is never allowed to depend on observer timing. */
.nhx-motion-ready [data-reveal-section] .nhx-collection-panel,
.nhx-motion-ready [data-reveal-section].is-visible .nhx-collection-panel {
    opacity: 1;
    transform: none;
}

/* Tablet and phone use a purpose-built calm composition. */
@media (max-width: 900px) {
    .nhx-popular-desktop-stage { display: none; }
    .nhx-popular-mobile-list { display: grid; gap: 10px; }

    .nhx-popular-mobile-card {
        position: relative;
        display: grid;
        min-height: 122px;
        grid-template-columns: 42px 68px minmax(0, 1fr) 24px;
        gap: 13px;
        align-items: center;
        padding: 12px 14px 12px 10px;
        overflow: hidden;
        color: inherit;
        text-decoration: none;
        border: 1px solid color-mix(in srgb, var(--series-color) 26%, rgba(255,255,255,0.08));
        border-radius: 18px;
        background: linear-gradient(112deg, color-mix(in srgb, var(--series-color) 8%, rgba(18,20,29,0.88)), rgba(10,12,18,0.86));
        box-shadow: 0 14px 38px rgba(0,0,0,0.22);
    }

    .nhx-popular-mobile-card::after {
        content: '';
        position: absolute;
        inset: auto 0 0;
        height: 2px;
        opacity: 0.7;
        background: linear-gradient(90deg, var(--series-color), transparent 70%);
    }

    .nhx-mobile-rank { color: color-mix(in srgb, var(--series-color) 72%, white); font-size: 1.12rem; font-weight: 800; text-align: center; }
    .nhx-mobile-popular-cover { display: block; width: 68px; height: 98px; overflow: hidden; border-radius: 9px; background: #11131b; box-shadow: 0 9px 22px rgba(0,0,0,0.35); }
    .nhx-mobile-popular-cover img,
    .nhx-mobile-popular-cover > span { display: block; width: 100%; height: 100%; object-fit: cover; }
    .nhx-mobile-popular-copy { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
    .nhx-mobile-popular-copy small { color: color-mix(in srgb, var(--series-color) 66%, white); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
    .nhx-mobile-popular-copy strong { display: -webkit-box; overflow: hidden; color: #f7f4ef; font-size: 0.98rem; line-height: 1.22; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    .nhx-mobile-popular-copy > span { color: var(--nhx-muted); font-size: 0.7rem; }
    .nhx-popular-mobile-card > i { color: color-mix(in srgb, var(--series-color) 60%, white); font-size: 0.7rem; }
}

@media (max-width: 680px) {
    .nhx-experience {
        background:
            radial-gradient(ellipse 80% 22% at 100% 2%, rgba(148,120,207,0.09), transparent 76%),
            linear-gradient(180deg, #090a10, #07080d 54%, #090a10);
    }

    .nhx-weather-layer { opacity: 0.48; }
    .nhx-container { width: min(100% - 32px, 620px); }
    .nhx-section { padding-top: 54px; }
    .nhx-section-header { margin-bottom: 22px; }
    .nhx-heading-lockup { align-items: flex-start; }
    .nhx-index {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        border-radius: 10px;
        clip-path: none;
        font-size: 0.62rem;
    }
    .nhx-title { font-size: clamp(1.55rem, 7vw, 1.9rem); line-height: 1.05; letter-spacing: -0.04em; }
    .nhx-subtitle { font-size: 0.82rem; }

    .nhx-reading-primary {
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 16px;
        min-height: 246px;
        padding: 16px;
        border-radius: 20px;
        background: linear-gradient(118deg, rgba(23,25,35,0.94), rgba(11,13,20,0.9));
        box-shadow: 0 18px 48px rgba(0,0,0,0.28);
    }
    .nhx-reading-primary::after { right: -70px; bottom: -100px; opacity: 0.45; }
    .nhx-reading-spine { display: none; }
    .nhx-reading-cover-shell { width: 88px; height: 132px; align-self: start; border-radius: 10px; }
    .nhx-reading-page { min-height: 132px; padding-top: 1px; }
    .nhx-page-kicker { font-size: 0.58rem; }
    .nhx-reading-title { margin-top: 6px; font-size: 1.02rem; -webkit-line-clamp: 2; }
    .nhx-reading-chapter { margin-top: 4px; font-size: 0.68rem; }
    .nhx-reading-excerpt { grid-column: 1 / -1; margin-top: 12px; font-family: 'Instrument Serif', Georgia, serif; font-size: 0.96rem; line-height: 1.42; -webkit-line-clamp: 3; }
    .nhx-reading-progress-row { padding-top: 12px; }
    .nhx-continue-action { margin-top: 12px; }
    .nhx-reading-others { gap: 9px; padding: 13px; border-radius: 18px; }
    .nhx-others-label { padding: 2px 3px 7px; }
    .nhx-reading-secondary { min-height: 82px; padding: 9px; border-radius: 14px; }
    .nhx-reading-secondary img,
    .nhx-secondary-placeholder { width: 46px; height: 64px; border-radius: 7px; }

    .nhx-popular-mobile-card { min-height: 112px; grid-template-columns: 34px 62px minmax(0, 1fr) 18px; gap: 11px; padding: 10px 12px 10px 8px; border-radius: 16px; }
    .nhx-mobile-popular-cover { width: 62px; height: 92px; }

    .nhx-collection-stack { gap: 22px; }
    .nhx-collection-panel,
    .nhx-collection-panel:nth-child(3n + 1),
    .nhx-collection-panel:nth-child(3n + 2),
    .nhx-collection-panel:nth-child(3n) {
        padding: 20px 16px 18px;
        border-radius: 20px;
        clip-path: none;
        box-shadow: 0 18px 48px rgba(0,0,0,0.26);
    }
    .nhx-collection-cut { opacity: 0.3; transform: scale(0.62); }
    .nhx-collection-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; margin-bottom: 18px; }
    .nhx-collection-title { font-size: 1.25rem; }
    .nhx-collection-desc { font-size: 0.79rem; -webkit-line-clamp: 2; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; }
    .nhx-collection-link {
        align-self: start;
        grid-template-columns: auto 34px;
        min-height: 44px;
        gap: 9px;
        padding: 0 0 0 12px;
    }
    .nhx-collection-link-label { display: inline; font-size: 0.68rem !important; letter-spacing: 0.055em; }
    .nhx-collection-link .nhx-collection-link-icon { width: 34px; height: 34px; }
    .nhx-book-rail {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin-inline: 0;
        padding: 2px 0 4px;
        overflow: visible;
    }
    .nhx-collection-book:nth-child(n + 5) { display: none; }
    .nhx-collection-book { min-width: 0; }
    .nhx-collection-book > strong { margin-top: 9px; font-size: 0.82rem; }
    .nhx-book-cover-shell { border-radius: 9px; }

    .nhx-community-strip { border-radius: 20px; clip-path: none; }
    .nhx-community-main { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 14px; padding: 20px 16px; }
    .nhx-community-main h2 { font-size: 1.15rem; }
    .nhx-community-main p { font-size: 0.78rem; }
    .nhx-community-button { min-height: 44px; border-radius: 12px; }
    .nhx-footer { margin-top: 58px; padding: 38px 0 92px; }
    .nhx-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nhx-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 420px) {
    .nhx-reading-primary { grid-template-columns: 78px minmax(0, 1fr); gap: 13px; padding: 14px; }
    .nhx-reading-cover-shell { width: 78px; height: 117px; }
    .nhx-reading-page { min-height: 117px; }
    .nhx-mobile-rank { font-size: 0.92rem; }
    .nhx-popular-mobile-card { grid-template-columns: 28px 58px minmax(0, 1fr) 14px; gap: 9px; }
    .nhx-mobile-popular-cover { width: 58px; height: 86px; }
    .nhx-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nhx-footer-brand { grid-column: 1 / -1; }
}

/* Two-row touch shelf: vertical reading stays calm, horizontal discovery stays open. */
@media (max-width: 900px) {
    .nhx-collection-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        align-items: start;
        margin-bottom: 20px;
    }

    .nhx-collection-copy {
        min-width: 0;
        width: 100%;
    }

    .nhx-collection-title {
        max-width: 100%;
        font-size: clamp(1.25rem, 5.8vw, 1.58rem);
        line-height: 1.08;
        overflow-wrap: anywhere;
    }

    .nhx-collection-desc {
        display: block;
        max-width: none;
        margin-top: 10px;
        overflow: visible;
        color: rgba(233, 230, 223, 0.68);
        font-size: 0.84rem;
        line-height: 1.52;
        -webkit-box-orient: initial;
        -webkit-line-clamp: unset;
    }

    .nhx-collection-link {
        justify-self: start;
        align-self: start;
    }

    .nhx-collection-rail-shell {
        display: flex;
        flex-direction: column;
        margin-right: -16px;
    }

    .nhx-book-rail {
        display: grid;
        grid-template-rows: repeat(2, minmax(0, auto));
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: clamp(126px, 37vw, 180px);
        gap: 18px 14px;
        align-items: start;
        margin: 0;
        padding: 3px 18px 12px 0;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-inline: contain;
        scroll-behavior: smooth;
        scroll-padding-inline: 0 18px;
        scroll-snap-type: inline mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .nhx-book-rail::-webkit-scrollbar {
        display: none;
    }

    .nhx-collection-book,
    .nhx-collection-book:nth-child(n),
    .nhx-collection-book:nth-child(n + 5) {
        display: flex;
        width: 100%;
        min-width: 0;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        transform: none;
    }

    .nhx-collection-book:hover,
    .nhx-collection-book:focus-visible {
        transform: translate3d(0, -4px, 0);
    }

    .nhx-collection-book > strong {
        min-height: 2.7em;
        margin-top: 9px;
        font-size: 0.8rem;
    }

    .nhx-collection-rail-nav {
        --rail-progress: 0;
        display: grid;
        grid-template-columns: minmax(72px, 1fr) 44px 44px;
        gap: 9px;
        align-items: center;
        order: -1;
        margin: 0 0 12px;
        padding-right: 16px;
    }

    .nhx-collection-rail-progress {
        position: relative;
        display: block;
        height: 1px;
        overflow: hidden;
        background: rgba(255,255,255,0.1);
    }

    .nhx-collection-rail-progress i {
        position: absolute;
        inset: 0;
        background: color-mix(in srgb, var(--collection-color) 72%, rgba(255,255,255,0.26));
        transform: scaleX(var(--rail-progress));
        transform-origin: left center;
        transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    .nhx-collection-rail-button {
        display: grid;
        width: 44px;
        height: 44px;
        padding: 0;
        place-items: center;
        color: rgba(248,246,242,0.9);
        border: 1px solid color-mix(in srgb, var(--collection-color) 45%, rgba(255,255,255,0.14));
        border-radius: 0;
        background: color-mix(in srgb, var(--collection-color) 12%, rgba(8,10,16,0.68));
        clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
        cursor: pointer;
        transition: color 220ms ease, border-color 220ms ease, background 220ms ease, transform 320ms cubic-bezier(0.16, 1, 0.3, 1), opacity 220ms ease;
    }

    .nhx-collection-rail-button svg {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: square;
        stroke-linejoin: miter;
    }

    .nhx-collection-rail-button:not(:disabled):active {
        transform: translate3d(0, 1px, 0) scale(0.96);
    }

    .nhx-collection-rail-button:disabled {
        opacity: 0.28;
        cursor: default;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nhx-weather-layer { display: none; }
}

/* Mobile render budget: retain the atmosphere, avoid full-page live blurs. */
@media (max-width: 900px) {
    .nhx-ambient::before {
        opacity: 0.08;
        background-size: 180px 180px;
        mix-blend-mode: normal;
    }

    .nhx-weather-layer {
        opacity: 0.38;
        mix-blend-mode: normal;
        mask-image: none;
        -webkit-mask-image: none;
    }

    .nhx-weather-layer::before {
        opacity: 0.16;
        animation-duration: 58s;
    }

    .nhx-experience.is-scrolling .nhx-weather-layer::before,
    .nhx-experience.is-scrolling .nhx-weather-particle {
        animation-play-state: paused;
    }

    .nhx-reading-secondary,
    .nhx-collection-panel {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .nhx-collection-panel {
        content-visibility: auto;
        contain-intrinsic-size: auto 620px;
        box-shadow: 0 18px 46px rgba(0,0,0,0.28);
    }

    .nhx-collection-atmosphere {
        inset: 0;
        opacity: 1;
        background:
            radial-gradient(circle at 18% 20%, color-mix(in srgb, var(--collection-color) 18%, transparent), transparent 42%),
            radial-gradient(circle at 82% 76%, color-mix(in srgb, var(--collection-color) 12%, transparent), transparent 48%);
    }

    .nhx-collection-atmosphere span {
        display: none;
    }
}

@media (hover: none) and (pointer: coarse) {
    .nhx-reading-primary:hover .nhx-wave-word,
    .nhx-reading-primary:focus-visible .nhx-wave-word {
        animation-iteration-count: 1;
    }

    .nhx-collection-book:hover,
    .nhx-collection-book:focus-visible {
        transform: none;
    }

    .nhx-collection-book:hover img,
    .nhx-collection-book:focus-visible img {
        filter: none;
        transform: none;
    }
}

/* ================================================================
   Personal shelf / discovery route / recent comment ledger
   ================================================================ */
.nhx-kicker {
    display: block;
    margin-bottom: 7px;
    color: var(--nhx-accent);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.nhx-personal {
    --shelf-paper: #d7d0c4;
}

.nhx-personal-body {
    min-height: 470px;
}

.nhx-shelf-loading,
.nhx-shelf-empty {
    min-height: 300px;
    border: 1px solid var(--nhx-line);
    background: linear-gradient(135deg, rgba(24, 26, 36, 0.96), rgba(11, 12, 19, 0.98));
    clip-path: polygon(0 8%, 2% 0, 98% 0, 100% 7%, 99% 94%, 96% 100%, 2% 100%, 0 92%);
}

.nhx-shelf-loading {
    display: grid;
    place-items: center;
    gap: 20px;
    padding: 34px;
}

.nhx-shelf-loading-copy {
    color: var(--nhx-muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.nhx-shelf-skeletons {
    display: grid;
    width: min(100%, 980px);
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .75fr);
    grid-template-rows: repeat(2, 94px);
    gap: 18px;
}

.nhx-shelf-skeletons i {
    height: 94px;
    background: linear-gradient(100deg, rgba(255,255,255,.035) 25%, rgba(255,255,255,.085) 42%, rgba(255,255,255,.035) 60%);
    background-size: 240% 100%;
    border: 1px solid rgba(255,255,255,.06);
    animation: nhx-shelf-pulse 1.4s linear infinite;
}

.nhx-shelf-skeletons i:first-child { height: 206px; grid-row: 1 / 3; }

@keyframes nhx-shelf-pulse {
    to { background-position: -180% 0; }
}

.nhx-personal-shelf {
    position: relative;
    padding: clamp(26px, 3vw, 42px) clamp(22px, 3.2vw, 48px) 22px;
    overflow: hidden;
    border: 1px solid rgba(148, 120, 207, 0.28);
    background:
        radial-gradient(circle at 8% 12%, rgba(148,120,207,.15), transparent 30%),
        linear-gradient(115deg, rgba(27, 27, 41, 0.98), rgba(13, 15, 23, 0.99) 54%, rgba(22, 18, 29, 0.98)),
        #11131d;
    box-shadow: 0 34px 80px rgba(0,0,0,.26), inset 0 1px rgba(255,255,255,.07);
    clip-path: polygon(0 5%, 1.5% 0, 98.5% 0, 100% 5%, 99.4% 95%, 97.5% 100%, 2% 100%, 0 94%);
}

.nhx-personal-shelf::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: .18;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(100deg, #000, transparent 72%);
    pointer-events: none;
}

.nhx-shelf-intro {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255,255,255,.09);
}

.nhx-shelf-intro > span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #c7a9ff;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .15em;
}

.nhx-shelf-intro > span i {
    width: 22px;
    height: 2px;
    background: #b58aff;
    box-shadow: 0 0 12px rgba(181,138,255,.55);
}

.nhx-shelf-intro p {
    margin: 0;
    color: var(--nhx-faint);
    font-size: .78rem;
}

.nhx-shelf-books {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.38fr) minmax(300px, .74fr);
    grid-template-rows: repeat(2, minmax(196px, auto));
    gap: 16px;
}

.nhx-shelf-book {
    position: relative;
    display: grid;
    min-width: 0;
    gap: 20px;
    align-items: center;
    padding: 20px;
    overflow: hidden;
    color: var(--nhx-ink);
    text-decoration: none;
    background:
        linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.012) 58%),
        rgba(10,11,18,.52);
    border: 1px solid rgba(255,255,255,.09);
    transition: transform 420ms cubic-bezier(.16,1,.3,1), border-color 240ms ease, background 240ms ease;
}

.nhx-shelf-book::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 2px;
    background: linear-gradient(transparent, #b58aff 30%, #b58aff 70%, transparent);
    opacity: .7;
}

.nhx-shelf-book--lead {
    grid-row: 1 / 3;
    grid-template-columns: clamp(180px, 17vw, 242px) minmax(0, 1fr);
    min-height: 408px;
    padding: clamp(24px, 3vw, 38px);
    background:
        radial-gradient(circle at 15% 18%, rgba(181,138,255,.13), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,.065), rgba(255,255,255,.012) 58%),
        rgba(10,11,18,.62);
}

.nhx-shelf-book--compact {
    grid-template-columns: 104px minmax(0, 1fr);
    min-height: 196px;
    padding: 17px 18px;
}

.nhx-shelf-book--lead:only-child {
    grid-column: 1 / -1;
    grid-row: auto;
}

.nhx-shelf-book:hover,
.nhx-shelf-book:focus-visible {
    z-index: 3;
    border-color: rgba(191,140,255,.42);
    background: linear-gradient(150deg, rgba(148,120,207,.13), rgba(255,255,255,.018) 60%);
    transform: translate3d(0,-5px,0);
}

.nhx-shelf-call {
    position: absolute;
    top: 9px;
    right: 12px;
    color: rgba(255,255,255,.34);
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .14em;
}

.nhx-shelf-cover-wrap {
    position: relative;
    display: block;
    aspect-ratio: 2 / 3;
    overflow: visible;
    background: #14151d;
    box-shadow: -11px 14px 25px rgba(0,0,0,.38);
}

.nhx-shelf-cover-wrap > img,
.nhx-shelf-cover-wrap > .nhx-cover-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nhx-shelf-page-edge {
    position: absolute;
    inset: 4px -5px 4px auto;
    width: 5px;
    background: repeating-linear-gradient(180deg, #d5ccbd 0 2px, #8f887d 2px 3px);
    transform: skewY(-4deg);
}

.nhx-shelf-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.nhx-shelf-copy > small {
    color: #ba95ff;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .13em;
}

.nhx-shelf-copy > strong {
    margin-top: 8px;
    font-size: clamp(1.05rem, 1.25vw, 1.28rem);
    line-height: 1.12;
    letter-spacing: -.035em;
}

.nhx-shelf-book--lead .nhx-shelf-copy > strong {
    max-width: 18ch;
    font-size: clamp(1.5rem, 2.25vw, 2.15rem);
    line-height: 1.02;
}

.nhx-shelf-summary {
    display: -webkit-box;
    margin-top: 11px;
    overflow: hidden;
    color: var(--nhx-muted);
    font-size: .82rem;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.nhx-shelf-book--compact .nhx-shelf-summary {
    margin-top: 7px;
    font-size: .74rem;
    line-height: 1.38;
    -webkit-line-clamp: 2;
}

.nhx-shelf-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 12px;
}

.nhx-shelf-tags i {
    padding: 4px 7px;
    color: rgba(245,242,235,.75);
    font-size: .61rem;
    font-style: normal;
    font-weight: 700;
    border: 1px solid rgba(255,255,255,.1);
}

.nhx-shelf-reason {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 12px;
    color: rgba(237,231,222,.74);
    font-size: .78rem;
    line-height: 1.38;
}

.nhx-shelf-reason b { color: #c7a9ff; font-size: .56rem; font-weight: 800; letter-spacing: .13em; }
.nhx-shelf-reason span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

.nhx-shelf-open {
    margin-top: 14px;
    color: #f1eafa;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.nhx-shelf-open i { color: #ba95ff; font-style: normal; }

.nhx-shelf-foot {
    position: relative;
    z-index: 3;
    display: flex;
    min-height: 54px;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-top: 18px;
    color: var(--nhx-faint);
    font-size: .72rem;
}

.nhx-shelf-foot button {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 8px;
    padding: 0 15px;
    color: var(--nhx-muted);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.1);
}

.nhx-shelf-foot button:hover { color: white; border-color: rgba(186,149,255,.5); }
.nhx-shelf-foot button:disabled { cursor: wait; opacity: .72; }
.nhx-shelf-refresh > span { align-items: center; gap: 8px; }
.nhx-refresh-idle { display: inline-flex; }
.nhx-refresh-busy { display: none; }
.nhx-shelf-refresh.htmx-request .nhx-refresh-idle { display: none; }
.nhx-shelf-refresh.htmx-request .nhx-refresh-busy { display: inline-flex; opacity: 1; }

.nhx-shelf-empty {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 24px;
    align-items: center;
    padding: clamp(28px, 5vw, 64px);
}

.nhx-shelf-empty-mark {
    display: grid;
    width: 78px;
    height: 94px;
    place-items: center;
    color: #b994ff;
    font-family: 'Instrument Serif', serif;
    font-size: 3.4rem;
    border: 1px solid rgba(185,148,255,.4);
    clip-path: polygon(7% 0, 100% 5%, 91% 91%, 25% 100%, 0 78%);
}

.nhx-shelf-empty strong { font-size: 1.25rem; }
.nhx-shelf-empty p { margin: 7px 0 0; color: var(--nhx-muted); }
.nhx-shelf-empty a { color: #c4a4ff; font-weight: 800; text-decoration: none; }

/* Discovery is a route, not another card grid. */
.nhx-discovery-route {
    position: relative;
    display: grid;
    min-height: 310px;
    grid-template-columns: minmax(250px, .8fr) minmax(380px, 1.55fr) minmax(180px, .55fr);
    align-items: center;
    gap: 16px;
    padding: clamp(28px, 4vw, 58px);
    overflow: hidden;
    color: var(--nhx-ink);
    text-decoration: none;
    background:
        radial-gradient(circle at 77% 38%, rgba(195,151,72,.14), transparent 25%),
        linear-gradient(109deg, #111624, #0b1117 48%, #17140f);
    border-top: 1px solid rgba(194,212,223,.2);
    border-bottom: 1px solid rgba(205,162,81,.25);
    clip-path: polygon(0 13%, 3% 2%, 46% 0, 48% 4%, 96% 2%, 100% 15%, 98% 88%, 94% 100%, 44% 97%, 40% 100%, 3% 97%, 0 84%);
}

.nhx-discovery-route::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: .19;
    background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 38px 38px;
    mask-image: linear-gradient(90deg, transparent, #000 25%, #000 80%, transparent);
}

.nhx-discovery-origin,
.nhx-discovery-arrival { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; }
.nhx-discovery-origin small,
.nhx-discovery-arrival small { color: #d3ad67; font-size: .62rem; font-weight: 800; letter-spacing: .16em; }
.nhx-discovery-origin strong { margin-top: 12px; font-size: clamp(1.7rem, 2.8vw, 3rem); line-height: .92; letter-spacing: -.06em; }
.nhx-discovery-origin > span { max-width: 330px; margin-top: 16px; color: var(--nhx-muted); font-size: .88rem; line-height: 1.5; }

.nhx-discovery-map { position: relative; z-index: 2; display: block; min-width: 0; }
.nhx-discovery-map svg { display: block; width: 100%; overflow: visible; }
.nhx-map-shadow,
.nhx-map-path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.nhx-map-shadow { stroke: rgba(0,0,0,.65); stroke-width: 11; }
.nhx-map-path { stroke: #d6b878; stroke-width: 2.2; stroke-dasharray: 5 11; transition: stroke-dashoffset 1.2s ease; }
.nhx-discovery-route:hover .nhx-map-path { stroke-dashoffset: -48; }
.nhx-discovery-map circle { fill: #0d1219; stroke: #d6b878; stroke-width: 2; }
.nhx-map-compass { fill: #e0c17e; filter: drop-shadow(0 0 7px rgba(224,193,126,.45)); }
.nhx-route-shard { position: absolute; display: block; width: 36px; height: 27px; background: rgba(118,160,182,.15); border: 1px solid rgba(152,190,208,.22); clip-path: polygon(15% 0,100% 21%,78% 100%,0 72%); }
.nhx-route-shard.shard-a { top: 7%; left: 25%; transform: rotate(17deg); }
.nhx-route-shard.shard-b { right: 24%; bottom: 10%; transform: rotate(-28deg) scale(.7); }
.nhx-route-shard.shard-c { top: 23%; right: 3%; transform: rotate(54deg) scale(.45); }
.nhx-route-note { position: absolute; color: rgba(230,226,213,.5); font-size: .54rem; font-weight: 800; letter-spacing: .14em; }
.nhx-route-note.note-a { left: 23%; top: 23%; }
.nhx-route-note.note-b { left: 54%; bottom: 18%; }
.nhx-route-note.note-c { right: 4%; top: 15%; color: #d6b878; }

.nhx-discovery-arrival { align-items: flex-end; text-align: right; }
.nhx-discovery-arrival strong { margin-top: 10px; color: #e8ddc4; font-family: 'Instrument Serif', serif; font-size: 1.7rem; font-style: italic; font-weight: 400; }
.nhx-discovery-button { display: inline-flex; min-height: 48px; align-items: center; gap: 14px; margin-top: 22px; padding: 0 18px; color: #15130f; font-size: .76rem; font-weight: 800; background: #d8b66e; }
.nhx-discovery-button i { font-style: normal; }
.nhx-discovery-route:hover .nhx-discovery-button { background: #f0d795; }

/* Six real comments presented as a single open reader journal. */
.nhx-comments { padding-bottom: clamp(64px, 7vw, 104px); }

.nhx-comment-journal {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 0, rgba(148,120,207,.09), transparent 36%),
        linear-gradient(116deg, rgba(21,23,33,.97), rgba(11,13,20,.99) 52%, rgba(20,20,29,.97));
    border: 1px solid rgba(255,255,255,.11);
    box-shadow: 0 30px 80px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.05);
    clip-path: polygon(0 4%, 1.5% 0, 98.8% 0, 100% 5%, 99.3% 96%, 97% 100%, 2% 100%, 0 95%);
}

.nhx-comment-journal-head {
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 clamp(24px, 3vw, 42px);
    color: var(--nhx-faint);
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.nhx-comment-journal-head > span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #c9b2f5;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .15em;
}

.nhx-comment-journal-head > span i {
    width: 7px;
    height: 7px;
    background: #a879ff;
    box-shadow: 0 0 14px rgba(168,121,255,.8);
    transform: rotate(45deg);
}

.nhx-comment-journal-head small { font-size: .75rem; }

.nhx-comment-spread {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.nhx-comment-spread::after {
    content: '';
    position: absolute;
    z-index: 3;
    inset: 0 auto 0 50%;
    width: 18px;
    opacity: .65;
    background: linear-gradient(90deg, rgba(0,0,0,.34), rgba(255,255,255,.035) 48%, rgba(0,0,0,.32));
    transform: translateX(-50%);
    pointer-events: none;
}

.nhx-comment-page {
    position: relative;
    min-width: 0;
    padding: 22px clamp(22px, 3vw, 42px) 30px;
}

.nhx-comment-page::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: .09;
    background-image: repeating-linear-gradient(180deg, transparent 0 39px, rgba(255,255,255,.12) 39px 40px);
    pointer-events: none;
}

.nhx-comment-page--right { background: rgba(255,255,255,.012); }

.nhx-comment-page-label {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 34px;
    margin-bottom: 4px;
    color: rgba(233,230,223,.34);
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .14em;
}

.nhx-comment-page-label i { color: rgba(201,178,245,.52); font-style: normal; }

.nhx-comment-entry {
    position: relative;
    z-index: 2;
    display: grid;
    min-width: 0;
    grid-template-columns: 30px 72px minmax(0, 1fr);
    gap: 15px;
    align-items: start;
    min-height: 145px;
    padding: 18px 8px 18px 0;
    border-top: 1px solid color-mix(in srgb, var(--comment-color) 28%, rgba(255,255,255,.1));
    transition: transform 360ms cubic-bezier(.16,1,.3,1), background-color 220ms ease;
}

.nhx-comment-entry:first-of-type {
    grid-template-columns: 30px 86px minmax(0, 1fr);
    min-height: 174px;
    padding-block: 22px;
}

.nhx-comment-entry:hover {
    background-color: color-mix(in srgb, var(--comment-color) 7%, transparent);
    transform: translate3d(4px,0,0);
}

.nhx-comment-number {
    padding-top: 2px;
    color: color-mix(in srgb, var(--comment-color) 72%, #d9d1e7);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .1em;
    writing-mode: vertical-rl;
}

.nhx-comment-cover {
    position: relative;
    display: block;
    width: 72px;
    aspect-ratio: 2/3;
    overflow: hidden;
    background: #0a0b10;
    box-shadow: 7px 10px 20px rgba(0,0,0,.28);
}

.nhx-comment-entry:first-of-type .nhx-comment-cover { width: 86px; }
.nhx-comment-cover::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.13); }
.nhx-comment-cover img,
.nhx-comment-cover .nhx-cover-placeholder { width: 100%; height: 100%; object-fit: cover; }
.nhx-comment-copy { display: flex; min-width: 0; min-height: 100%; flex-direction: column; }
.nhx-comment-context { display: flex; min-width: 0; flex-direction: column; color: inherit; text-decoration: none; }
.nhx-comment-context small { overflow: hidden; color: color-mix(in srgb, var(--comment-color) 68%, #f0eaf7); font-size: .77rem; font-weight: 800; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.nhx-comment-context strong { margin-top: 5px; overflow: hidden; color: #f4f1eb; font-size: .96rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.nhx-comment-copy > p { display: -webkit-box; margin: 11px 0 14px; overflow: hidden; color: rgba(238,233,225,.76); font-family: 'Bricolage Grotesque', 'Outfit', sans-serif; font-size: .9rem; font-weight: 480; line-height: 1.48; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.nhx-comment-entry:first-of-type .nhx-comment-copy > p { font-size: .98rem; -webkit-line-clamp: 3; }
.nhx-comment-copy footer { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 10px; align-items: center; margin-top: auto; }
.nhx-comment-user { display: flex; min-width: 0; align-items: center; gap: 8px; color: rgba(238,233,225,.67); text-decoration: none; }
.nhx-comment-user img,
.nhx-comment-user > span { display: grid; width: 27px; height: 27px; flex: 0 0 auto; place-items: center; object-fit: cover; color: white; font-size: .7rem; font-weight: 800; background: color-mix(in srgb, var(--comment-color) 50%, #292a35); border: 1px solid rgba(255,255,255,.14); border-radius: 50%; }
.nhx-comment-user b { overflow: hidden; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.nhx-comment-copy time { color: rgba(233,230,223,.38); font-size: .66rem; white-space: nowrap; }
.nhx-comment-open { display: inline-flex; min-height: 30px; align-items: center; gap: 7px; color: color-mix(in srgb, var(--comment-color) 68%, #e9e0f5); font-size: .66rem; font-weight: 800; text-decoration: none; }
.nhx-comment-open span { border-bottom: 1px solid color-mix(in srgb, var(--comment-color) 50%, transparent); }

@media (max-width: 1120px) {
    .nhx-shelf-books { grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); }
    .nhx-shelf-book--lead { grid-template-columns: 158px minmax(0,1fr); gap: 18px; padding: 24px; }
    .nhx-shelf-book--compact { grid-template-columns: 88px minmax(0,1fr); gap: 13px; padding-inline: 14px; }
    .nhx-shelf-book--compact .nhx-shelf-summary { display: none; }
    .nhx-comment-page { padding-inline: 22px; }
    .nhx-comment-open span { display: none; }
    .nhx-discovery-route { grid-template-columns: minmax(220px,.8fr) minmax(300px,1.3fr) 160px; }
}

@media (max-width: 900px) {
    .nhx-personal-body { min-height: 0; }
    .nhx-personal-shelf { padding: 24px 18px 18px; clip-path: none; border-radius: 18px; background: linear-gradient(160deg, #171824, #0e0f17); }
    .nhx-personal-shelf::before { display: none; }
    .nhx-shelf-books { display: flex; align-items: stretch; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 12px; }
    .nhx-shelf-books::-webkit-scrollbar { display: none; }
    .nhx-shelf-book,
    .nhx-shelf-book-1,
    .nhx-shelf-book-2,
    .nhx-shelf-book-3 { min-width: min(78vw, 430px); min-height: 250px; grid-row: auto; grid-template-columns: 116px minmax(0,1fr); align-items: center; padding: 20px; scroll-snap-align: start; transform: none; border-radius: 14px; }
    .nhx-shelf-book--lead .nhx-shelf-copy > strong { font-size: 1.2rem; line-height: 1.08; }
    .nhx-shelf-book--compact .nhx-shelf-summary { display: -webkit-box; }
    .nhx-shelf-book:hover,
    .nhx-shelf-book:focus-visible { transform: translateY(-3px); }
    .nhx-shelf-summary { -webkit-line-clamp: 3; }
    .nhx-shelf-foot { margin-top: 10px; }
    .nhx-shelf-empty { min-height: 220px; grid-template-columns: auto 1fr; clip-path: none; border-radius: 18px; }
    .nhx-shelf-empty a { grid-column: 2; }

    .nhx-discovery-route { min-height: 330px; grid-template-columns: 1fr auto; padding: 32px 26px; clip-path: none; border-radius: 18px; }
    .nhx-discovery-map { position: absolute; inset: auto 3% 2% 27%; opacity: .58; }
    .nhx-discovery-arrival { align-self: end; }

    .nhx-comment-journal { clip-path: none; border-radius: 18px; }
    .nhx-comment-spread { grid-template-columns: minmax(0, 1fr); }
    .nhx-comment-spread::after { display: none; }
    .nhx-comment-page--right { border-top: 1px solid rgba(255,255,255,.1); }
}

@media (max-width: 680px) {
    .nhx-personal-header .nhx-text-link { display: inline-flex; flex: 0 0 44px; }
    .nhx-personal-body { margin-inline: -2px; }
    .nhx-shelf-loading { min-height: 230px; clip-path: none; border-radius: 16px; }
    .nhx-shelf-skeletons { display: flex; overflow: hidden; }
    .nhx-shelf-skeletons i { min-width: 76%; height: 170px; }
    .nhx-shelf-skeletons i:first-child { height: 170px; }
    .nhx-shelf-intro { align-items: flex-start; margin-bottom: 16px; padding-bottom: 13px; }
    .nhx-shelf-intro p { display: none; }
    .nhx-shelf-books { margin-right: -18px; padding-right: 18px; }
    .nhx-shelf-book,
    .nhx-shelf-book-1,
    .nhx-shelf-book-2,
    .nhx-shelf-book-3 { min-width: min(86vw, 390px); min-height: 226px; grid-template-columns: 104px minmax(0,1fr); gap: 14px; padding: 18px 14px; }
    .nhx-shelf-copy > strong,
    .nhx-shelf-book--lead .nhx-shelf-copy > strong { font-size: 1.05rem; }
    .nhx-shelf-summary { font-size: .74rem; -webkit-line-clamp: 2; }
    .nhx-shelf-reason { font-size: .84rem; }
    .nhx-shelf-foot { align-items: center; }
    .nhx-shelf-foot > span { max-width: 48%; }
    .nhx-shelf-empty { grid-template-columns: 1fr; gap: 14px; padding: 24px; }
    .nhx-shelf-empty-mark { width: 54px; height: 62px; font-size: 2.4rem; }
    .nhx-shelf-empty a { grid-column: auto; min-height: 44px; display: inline-flex; align-items: center; }

    .nhx-discovery-heading { margin-bottom: 18px; }
    .nhx-discovery-route { display: flex; min-height: 360px; flex-direction: column; align-items: stretch; justify-content: space-between; padding: 28px 24px; }
    .nhx-discovery-origin strong { font-size: 2.05rem; }
    .nhx-discovery-origin > span { font-size: .83rem; }
    .nhx-discovery-map { inset: 40% -20% auto 17%; }
    .nhx-discovery-arrival { position: relative; z-index: 4; align-items: flex-end; margin-top: auto; }
    .nhx-discovery-arrival strong { display: none; }
    .nhx-discovery-button { min-height: 50px; }

    .nhx-comment-journal-head { min-height: 54px; padding-inline: 18px; }
    .nhx-comment-journal-head small { display: none; }
    .nhx-comment-page { padding: 16px 16px 20px; }
    .nhx-comment-entry,
    .nhx-comment-entry:first-of-type { grid-template-columns: 24px 68px minmax(0,1fr); gap: 12px; min-height: 154px; padding: 17px 2px 17px 0; }
    .nhx-comment-cover,
    .nhx-comment-entry:first-of-type .nhx-comment-cover { width: 68px; }
    .nhx-comment-copy > p,
    .nhx-comment-entry:first-of-type .nhx-comment-copy > p { margin: 9px 0 12px; font-size: .9rem; -webkit-line-clamp: 3; }
    .nhx-comment-copy footer { grid-template-columns: minmax(0,1fr) auto; }
    .nhx-comment-copy time { display: none; }
    .nhx-comment-open span { display: none; }
}

@media (max-width: 390px) {
    .nhx-shelf-book,
    .nhx-shelf-book-1,
    .nhx-shelf-book-2,
    .nhx-shelf-book-3 { grid-template-columns: 92px minmax(0,1fr); }
    .nhx-shelf-tags { display: none; }
    .nhx-comment-entry,
    .nhx-comment-entry:first-of-type { grid-template-columns: 20px 60px minmax(0,1fr); gap: 10px; }
    .nhx-comment-cover,
    .nhx-comment-entry:first-of-type .nhx-comment-cover { width: 60px; }
    .nhx-comment-context small { font-size: .72rem; }
    .nhx-comment-context strong { font-size: .88rem; }
    .nhx-comment-user b { font-size: .72rem; }
}

@media (prefers-reduced-motion: reduce) {
    .nhx-shelf-skeletons i { animation: none; }
    .nhx-map-path { transition: none; }
    .nhx-shelf-book,
    .nhx-comment-entry { transition: none; }
}