/* ==============================================================
   lordly.dev — The Court of Computation
   Stylesheet for the permanent split-screen court chamber.
   ============================================================== */

/* --- Tokens ------------------------------------------------- */
:root {
    /* Primary surfaces */
    --court-cream: #F4ECDD;
    --privy-ink: #0B0B16;
    --indigo-vault: #1A1A2E;

    /* Dopamine-neon accents */
    --hibiscus-shock: #FF2EA6;
    --lime-buzz: #C6FF3A;
    --royal-voltage: #6E46FF;
    --tangerine-decree: #FF8A1F;
    --cyan-edict: #21E5F1;
    --gilded-buttercream: #FFE45E;

    /* Muted court */
    --sealing-wax-sage: #9A8F79;
    --heraldic-plum: #5A2A52;

    /* Typography */
    --display: "Fraunces", "Lora", Georgia, serif;
    --ui-round: "Quicksand", "Inter", system-ui, sans-serif;
    --body-serif: "Newsreader", "Lora", Georgia, serif;
    --mono: "DM Mono", "Menlo", "Courier New", monospace;

    /* Scroll-driven custom properties (updated by JS) */
    --scroll-phase: 0;
    --scroll-velocity: 0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    background: var(--privy-ink);
    color: var(--privy-ink);
    overflow-x: hidden;
}

body {
    font-family: var(--body-serif);
    font-feature-settings: "kern" 1, "liga" 1;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    cursor: default;
}

/* Custom scrollbar — fat capsule, lime track / hibiscus thumb */
html { scrollbar-width: thin; scrollbar-color: var(--hibiscus-shock) var(--lime-buzz); }
::-webkit-scrollbar { width: 14px; }
::-webkit-scrollbar-track {
    background: var(--lime-buzz);
    border-radius: 999px;
    margin: 8px 2px;
}
::-webkit-scrollbar-thumb {
    background: var(--hibiscus-shock);
    border-radius: 999px;
    border: 3px solid var(--lime-buzz);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
}

/* --- Layout: the court chamber ----------------------------- */
#court { display: block; }

.spread {
    display: grid;
    grid-template-columns: 38vw 1fr;
    min-height: 100svh;
    position: relative;
    background: var(--court-cream);
}

/* --- Left panel: gravitas ---------------------------------- */
.left {
    background: var(--court-cream);
    color: var(--privy-ink);
    border-right: 2px solid var(--privy-ink);
    position: relative;
    padding: 5rem 4rem 4rem 5.5rem;
    display: flex;
    align-items: flex-start;
    z-index: 2;
}

.court-margin {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 56px;
    border-right: 1px solid rgba(154, 143, 121, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 5rem;
    gap: 3.4rem;
    color: var(--heraldic-plum);
    font-family: var(--body-serif);
    font-size: 1.35rem;
}

.court-margin .ornament { display: block; opacity: 0.78; }

.left-inner {
    max-width: 36ch;
    width: 100%;
}

.ledger-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 1.6rem;
    color: var(--heraldic-plum);
    font-family: var(--body-serif);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.folio {
    font-weight: 600;
    font-style: italic;
}
.ledger-rule {
    flex: 1;
    height: 1px;
    background: var(--sealing-wax-sage);
    opacity: 0.55;
}
.folio-name {
    font-style: italic;
    color: var(--sealing-wax-sage);
}

.left-title {
    font-family: var(--body-serif);
    font-weight: 400;
    font-size: 1.55rem;
    line-height: 1.22;
    letter-spacing: -0.01em;
    margin-bottom: 1.6rem;
    color: var(--privy-ink);
}
.left-title em {
    font-style: italic;
    color: var(--heraldic-plum);
}

.prose {
    font-family: var(--body-serif);
    font-size: 1.04rem;
    line-height: 1.62;
    font-weight: 400;
    color: var(--privy-ink);
    margin-bottom: 1.2rem;
}
.prose em { font-style: italic; color: var(--heraldic-plum); }
.prose.secondary { color: rgba(11, 11, 22, 0.78); font-size: 0.96rem; }

.hairline {
    border: none;
    border-top: 0.8px solid var(--sealing-wax-sage);
    opacity: 0.55;
    margin: 1.4rem 0;
}

.footnote {
    font-family: var(--body-serif);
    font-size: 0.84rem;
    color: var(--sealing-wax-sage);
    line-height: 1.5;
    font-style: italic;
}
.ornament-inline { color: var(--heraldic-plum); font-style: normal; margin-right: 0.3em; }

.ledger-list {
    list-style: none;
    margin: 1.2rem 0;
    padding: 0;
    border-top: 0.8px solid rgba(154, 143, 121, 0.5);
}
.ledger-list li {
    display: flex;
    gap: 0.9rem;
    padding: 0.55rem 0;
    border-bottom: 0.8px solid rgba(154, 143, 121, 0.5);
    font-family: var(--body-serif);
    font-size: 0.98rem;
    color: var(--privy-ink);
}
.ledger-list li em { font-style: italic; color: var(--heraldic-plum); }
.li-num {
    font-style: italic;
    color: var(--heraldic-plum);
    flex: 0 0 1.6em;
}

.footer-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem 1.2rem;
    margin: 1.2rem 0;
    font-family: var(--body-serif);
    font-size: 0.94rem;
}
.footer-list dt {
    font-style: italic;
    color: var(--heraldic-plum);
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    align-self: center;
}
.footer-list dd { color: var(--privy-ink); }
.footer-list dd em { color: var(--heraldic-plum); font-style: italic; }

.bell-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-style: italic;
    color: var(--heraldic-plum);
}
.bell-toggle input { accent-color: var(--heraldic-plum); }

.cul-de-lampe {
    width: 80px;
    height: 24px;
    margin: 1.4rem 0 0;
    opacity: 0.7;
}

.mono-inline {
    font-family: var(--mono);
    font-size: 0.86em;
    background: rgba(11, 11, 22, 0.06);
    padding: 0.05em 0.45em;
    border-radius: 4px;
    color: var(--privy-ink);
}

/* --- Right panel: dopamine --------------------------------- */
.right {
    background: var(--privy-ink);
    color: var(--court-cream);
    position: relative;
    overflow: hidden;
    padding: 5rem 4rem 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/* mesh atmosphere */
.mesh-layer {
    position: absolute;
    inset: -10%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.blob {
    position: absolute;
    width: 56vw;
    height: 56vw;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
    will-change: transform;
}
.blob-a { top: -10%; left: -8%; }
.blob-b { bottom: -14%; right: -6%; opacity: 0.7; }
.blob-c { top: 20%; left: 35%; opacity: 0.4; width: 40vw; height: 40vw; }

/* per-section unique mesh palettes */
[data-section="00"] .blob-a { background: radial-gradient(circle, var(--hibiscus-shock), transparent 70%); }
[data-section="00"] .blob-b { background: radial-gradient(circle, var(--royal-voltage), transparent 70%); }
[data-section="00"] .blob-c { background: radial-gradient(circle, var(--cyan-edict), transparent 70%); }

[data-section="01"] .blob-a { background: radial-gradient(circle, var(--lime-buzz), transparent 70%); }
[data-section="01"] .blob-b { background: radial-gradient(circle, var(--tangerine-decree), transparent 70%); }
[data-section="01"] .blob-c { background: radial-gradient(circle, var(--cyan-edict), transparent 70%); }

[data-section="02"] .blob-a { background: radial-gradient(circle, var(--hibiscus-shock), transparent 70%); }
[data-section="02"] .blob-b { background: radial-gradient(circle, var(--cyan-edict), transparent 70%); }
[data-section="02"] .blob-c { background: radial-gradient(circle, var(--lime-buzz), transparent 70%); }

[data-section="03"] .blob-a { background: radial-gradient(circle, var(--royal-voltage), transparent 70%); }
[data-section="03"] .blob-b { background: radial-gradient(circle, var(--tangerine-decree), transparent 70%); }
[data-section="03"] .blob-c { background: radial-gradient(circle, var(--cyan-edict), transparent 70%); }

[data-section="04"] .blob-a { background: radial-gradient(circle, var(--hibiscus-shock), transparent 70%); }
[data-section="04"] .blob-b { background: radial-gradient(circle, var(--gilded-buttercream), transparent 70%); }
[data-section="04"] .blob-c { background: radial-gradient(circle, var(--royal-voltage), transparent 70%); }

[data-section="05"] .blob-a { background: radial-gradient(circle, var(--gilded-buttercream), transparent 70%); }
[data-section="05"] .blob-b { background: radial-gradient(circle, var(--hibiscus-shock), transparent 70%); }
[data-section="05"] .blob-c { background: radial-gradient(circle, var(--royal-voltage), transparent 70%); }

[data-section="06"] .blob-a { background: radial-gradient(circle, var(--cyan-edict), transparent 70%); }
[data-section="06"] .blob-b { background: radial-gradient(circle, var(--hibiscus-shock), transparent 70%); }
[data-section="06"] .blob-c { background: radial-gradient(circle, var(--lime-buzz), transparent 70%); }

@keyframes blob-drift-a {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    25%  { transform: translate3d(40px, -30px, 0) scale(1.06); }
    50%  { transform: translate3d(-20px, 30px, 0) scale(0.96); }
    75%  { transform: translate3d(30px, 20px, 0) scale(1.02); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes blob-drift-b {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    33%  { transform: translate3d(-40px, 20px, 0) scale(1.04); }
    66%  { transform: translate3d(30px, -20px, 0) scale(0.98); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes blob-drift-c {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(50px, 30px, 0) scale(1.08); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}
.blob-a { animation: blob-drift-a 40s ease-in-out infinite; }
.blob-b { animation: blob-drift-b 44s ease-in-out infinite; }
.blob-c { animation: blob-drift-c 36s ease-in-out infinite; }

/* parallax of color via scroll phase */
.right .blob-a { translate: 0 calc(var(--scroll-phase) * 60px); }
.right .blob-b { translate: 0 calc(var(--scroll-phase) * -40px); }
.right .blob-c { translate: 0 calc(var(--scroll-phase) * 30px); }

.right-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 760px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2rem;
}

/* --- Decree pill (collapsed state) ------------------------- */
.decree-pill {
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.4rem 3rem;
    border-radius: 999px;
    border: none;
    font-family: var(--ui-round);
    font-weight: 700;
    font-size: 1.08rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--privy-ink);
    background: linear-gradient(120deg, var(--hibiscus-shock), var(--lime-buzz));
    cursor: pointer;
    box-shadow: 0 0 0 4px rgba(255, 46, 166, 0.18),
                0 12px 40px rgba(255, 46, 166, 0.42);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.4s ease;
    position: relative;
}
.decree-pill:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 0 0 6px rgba(255, 46, 166, 0.22),
                0 16px 48px rgba(255, 46, 166, 0.5);
}

/* per-pill gradient flavors */
[data-pill="00"] { background: linear-gradient(120deg, var(--hibiscus-shock), var(--royal-voltage)); box-shadow: 0 0 0 4px rgba(110, 70, 255, 0.2), 0 12px 40px rgba(255, 46, 166, 0.4); }
[data-pill="01"] { background: linear-gradient(120deg, var(--lime-buzz), var(--cyan-edict)); box-shadow: 0 0 0 4px rgba(33, 229, 241, 0.2), 0 12px 40px rgba(198, 255, 58, 0.4); }
[data-pill="02"] { background: linear-gradient(120deg, var(--hibiscus-shock), var(--tangerine-decree)); box-shadow: 0 0 0 4px rgba(255, 138, 31, 0.2), 0 12px 40px rgba(255, 46, 166, 0.42); }
[data-pill="03"] { background: linear-gradient(120deg, var(--royal-voltage), var(--cyan-edict)); box-shadow: 0 0 0 4px rgba(33, 229, 241, 0.2), 0 12px 40px rgba(110, 70, 255, 0.4); }
[data-pill="04"] { background: linear-gradient(120deg, var(--gilded-buttercream), var(--hibiscus-shock)); box-shadow: 0 0 0 4px rgba(255, 228, 94, 0.2), 0 12px 40px rgba(255, 46, 166, 0.42); }
[data-pill="05"] { background: linear-gradient(120deg, var(--gilded-buttercream), var(--tangerine-decree)); box-shadow: 0 0 0 4px rgba(255, 138, 31, 0.22), 0 12px 40px rgba(255, 228, 94, 0.4); }
[data-pill="06"] { background: linear-gradient(120deg, var(--cyan-edict), var(--royal-voltage)); box-shadow: 0 0 0 4px rgba(110, 70, 255, 0.22), 0 12px 40px rgba(33, 229, 241, 0.4); }

/* pulse on §00 pill until unfurled */
[data-pill="00"]:not(.is-unfurled) {
    animation: pill-pulse 1.6s ease-in-out infinite;
}
@keyframes pill-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); box-shadow: 0 0 0 8px rgba(255, 46, 166, 0.3), 0 18px 60px rgba(255, 46, 166, 0.55); }
}

.pill-label { display: inline-block; }

/* --- Unfurled card (expanded state) ------------------------ */
.unfurled-card {
    position: relative;
    width: 100%;
    background: rgba(11, 11, 22, 0.55);
    border: 1.5px solid rgba(244, 236, 221, 0.18);
    border-radius: 32px;
    padding: 2.4rem 2.6rem;
    backdrop-filter: blur(18px) saturate(1.25);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45),
                inset 0 1px 0 rgba(244, 236, 221, 0.08);
    /* hidden until unfurl */
    opacity: 0;
    max-height: 0;
    transform: scale(0.96) translateY(12px);
    overflow: hidden;
    transition: opacity 0.6s ease 0.4s,
                max-height 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s,
                transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s,
                padding 0.6s ease;
    pointer-events: none;
}
.unfurled-card.is-open {
    opacity: 1;
    max-height: 1400px;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}
/* When card opens, decree-pill becomes a small inline label above */
.decree-pill.is-unfurled {
    transform: scale(0.86);
    padding: 0.7rem 1.6rem;
    font-size: 0.84rem;
    box-shadow: 0 0 0 2px rgba(244, 236, 221, 0.18), 0 6px 18px rgba(0, 0, 0, 0.35);
}

/* staggered children fade-rise */
.unfurled-card > * {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.unfurled-card.is-open > * {
    opacity: 1;
    transform: translateY(0);
}
.unfurled-card.is-open > *:nth-child(1) { transition-delay: 0.45s; }
.unfurled-card.is-open > *:nth-child(2) { transition-delay: 0.55s; }
.unfurled-card.is-open > *:nth-child(3) { transition-delay: 0.65s; }
.unfurled-card.is-open > *:nth-child(4) { transition-delay: 0.75s; }
.unfurled-card.is-open > *:nth-child(5) { transition-delay: 0.85s; }

/* --- Display typography (right panel) ---------------------- */
.display-headline {
    font-family: var(--display);
    font-variation-settings: "SOFT" 100, "WONK" 1;
    font-weight: 800;
    font-size: clamp(3.4rem, 7vw, 6.8rem);
    line-height: 0.94;
    letter-spacing: -0.02em;
    color: var(--court-cream);
    margin-bottom: 0.4rem;
}
.display-headline.small {
    font-size: clamp(2.6rem, 5vw, 4.8rem);
}

.throne-inner .display-headline {
    font-size: clamp(5rem, 12vw, 12rem);
    text-align: center;
    background: linear-gradient(120deg, var(--court-cream), var(--gilded-buttercream) 50%, var(--hibiscus-shock));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.throne-inner .display-headline .dot {
    color: var(--hibiscus-shock);
    -webkit-text-fill-color: var(--hibiscus-shock);
}

.display-sub {
    font-family: var(--ui-round);
    font-weight: 500;
    font-size: 1.04rem;
    line-height: 1.5;
    color: rgba(244, 236, 221, 0.84);
    margin-bottom: 1.4rem;
    max-width: 56ch;
}

/* --- Decree actions row ------------------------------------ */
.decree-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.4rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(244, 236, 221, 0.14);
}
.meta-tag {
    font-family: var(--ui-round);
    font-weight: 500;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(244, 236, 221, 0.66);
}
.furl-btn {
    background: transparent;
    color: var(--court-cream);
    border: 1px solid rgba(244, 236, 221, 0.4);
    border-radius: 999px;
    padding: 0.5rem 1.1rem;
    font-family: var(--ui-round);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.furl-btn:hover {
    background: var(--lime-buzz);
    color: var(--privy-ink);
    border-color: var(--lime-buzz);
}

/* --- §00 Throne shield ------------------------------------- */
.shield-stage {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1.4rem 0;
}
.heraldic-shield {
    width: clamp(180px, 22vw, 260px);
    height: auto;
    animation: shield-rotate 90s linear infinite;
    filter: drop-shadow(0 18px 40px rgba(255, 46, 166, 0.35));
}
@keyframes shield-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* --- §01 Cameo grid ---------------------------------------- */
.cameo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 1rem 0 1.4rem;
}
.cameo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}
.cameo-art {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 36px;
    background: radial-gradient(circle at 30% 30%, var(--g1, var(--hibiscus-shock)), var(--g2, var(--royal-voltage)) 80%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.25),
                0 12px 30px rgba(0, 0, 0, 0.35);
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cameo:hover .cameo-art {
    transform: translateY(-4px) scale(1.03);
}
.cameo-art svg { width: 50%; height: 50%; }
.cameo-label {
    font-family: var(--ui-round);
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(244, 236, 221, 0.86);
    text-align: center;
}

.hex-lattice {
    width: 100%;
    height: auto;
    margin-top: 0.5rem;
}
.hex-lattice polygon {
    transition: opacity 0.6s ease, fill 0.6s ease;
}
.hex-lattice polygon.lit {
    fill: var(--lime-buzz);
    fill-opacity: 0.35;
}

/* --- §02 CRT terminal -------------------------------------- */
.crt-bezel {
    background: linear-gradient(160deg, var(--hibiscus-shock), var(--tangerine-decree));
    border-radius: 36px;
    padding: 18px;
    box-shadow: 0 0 0 4px rgba(255, 46, 166, 0.18),
                0 24px 60px rgba(255, 46, 166, 0.45);
    margin: 0.4rem 0 1.2rem;
}
.crt-screen {
    background: var(--indigo-vault);
    border-radius: 22px;
    padding: 1rem 1.2rem;
    font-family: var(--mono);
    color: var(--lime-buzz);
    overflow: hidden;
    position: relative;
}
.crt-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(244, 236, 221, 0.12);
    margin-bottom: 0.6rem;
}
.crt-dot {
    width: 12px; height: 12px; border-radius: 50%;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
.dot-pink   { background: var(--hibiscus-shock); }
.dot-yellow { background: var(--gilded-buttercream); }
.dot-lime   { background: var(--lime-buzz); }
.crt-title {
    margin-left: auto;
    font-size: 0.74rem;
    color: rgba(244, 236, 221, 0.6);
    letter-spacing: 0.08em;
}
.crt-log {
    font-size: 0.84rem;
    line-height: 1.7;
    max-height: 280px;
    overflow: hidden;
}
.log-line {
    display: flex;
    gap: 0.7rem;
    align-items: baseline;
    color: rgba(244, 236, 221, 0.88);
    opacity: 0;
    transform: translateX(-6px);
    animation: log-in 0.4s ease forwards;
}
@keyframes log-in {
    to { opacity: 1; transform: translateX(0); }
}
.crt-log .log-line:nth-child(1) { animation-delay: 0.2s; }
.crt-log .log-line:nth-child(2) { animation-delay: 0.5s; }
.crt-log .log-line:nth-child(3) { animation-delay: 0.8s; }
.crt-log .log-line:nth-child(4) { animation-delay: 1.1s; }
.crt-log .log-line:nth-child(5) { animation-delay: 1.4s; }
.crt-log .log-line:nth-child(6) { animation-delay: 1.7s; }
.crt-log .log-line:nth-child(7) { animation-delay: 2.0s; }
.crt-log .log-line:nth-child(8) { animation-delay: 2.3s; }
.crt-log .log-line:nth-child(9) { animation-delay: 2.6s; }

.log-time { color: var(--sealing-wax-sage); font-size: 0.78rem; }
.log-tag {
    padding: 0.06em 0.5em;
    border-radius: 4px;
    font-size: 0.74rem;
    letter-spacing: 0.05em;
}
.log-tag.info { background: rgba(33, 229, 241, 0.18); color: var(--cyan-edict); }
.log-tag.ok   { background: rgba(198, 255, 58, 0.18); color: var(--lime-buzz); }
.log-tag.warn { background: rgba(255, 138, 31, 0.18); color: var(--tangerine-decree); }
.log-line strong { color: var(--lime-buzz); }
.blink {
    display: inline-block;
    animation: blink 1s steps(2) infinite;
    color: var(--lime-buzz);
}
@keyframes blink { 50% { opacity: 0; } }

/* CRT scanline overlay */
.crt-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 3px,
        rgba(0, 0, 0, 0.18) 4px
    );
    border-radius: 22px;
    mix-blend-mode: multiply;
    opacity: 0.5;
}

/* --- §03 Oscilloscope -------------------------------------- */
.oscilloscope {
    position: relative;
    background: linear-gradient(160deg, rgba(110, 70, 255, 0.18), rgba(33, 229, 241, 0.12));
    border: 1px solid rgba(244, 236, 221, 0.18);
    border-radius: 28px;
    padding: 1.4rem;
    margin: 0.4rem 0 1.2rem;
}
.oscilloscope svg {
    width: 100%;
    height: 220px;
    display: block;
}
.osc-grid line {
    stroke: rgba(244, 236, 221, 0.14);
    stroke-width: 0.8;
    stroke-dasharray: 4 6;
}
#osc-trace {
    stroke-dasharray: 1800;
    stroke-dashoffset: 1800;
    animation: osc-draw 4.5s ease-out forwards 0.6s,
               osc-pulse 6s ease-in-out infinite 5s;
}
@keyframes osc-draw {
    to { stroke-dashoffset: 0; }
}
@keyframes osc-pulse {
    0%, 100% { stroke-dashoffset: 0; }
    50%      { stroke-dashoffset: -300; }
}

.osc-readout {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.8rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(244, 236, 221, 0.12);
}
.readout-line {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.r-label {
    font-family: var(--ui-round);
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(244, 236, 221, 0.6);
}
.r-value {
    font-family: var(--mono);
    font-size: 1.2rem;
    color: var(--lime-buzz);
    margin-top: 0.2rem;
}

/* --- §04 Privy council orbit ------------------------------- */
.orbit-stage {
    position: relative;
    width: 100%;
    height: 360px;
    margin: 0.6rem 0 1.2rem;
}
.orbit-track {
    position: absolute;
    inset: 0;
    animation: orbit-spin 36s linear infinite;
}
@keyframes orbit-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.bean-avatar {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 64px;
    height: 80px;
    border-radius: 999px;
    background: linear-gradient(140deg, var(--c1, var(--hibiscus-shock)), var(--c2, var(--gilded-buttercream)));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--privy-ink);
    font-family: var(--ui-round);
    font-weight: 700;
    font-size: 0.86rem;
    letter-spacing: 0.05em;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.35),
                0 12px 28px rgba(0, 0, 0, 0.35);
    transform-origin: center center;
}
.bean-avatar:nth-child(1) { transform: translate(-50%, -50%) rotate(0deg)   translateX(140px) rotate(0deg); }
.bean-avatar:nth-child(2) { transform: translate(-50%, -50%) rotate(45deg)  translateX(140px) rotate(-45deg); }
.bean-avatar:nth-child(3) { transform: translate(-50%, -50%) rotate(90deg)  translateX(140px) rotate(-90deg); }
.bean-avatar:nth-child(4) { transform: translate(-50%, -50%) rotate(135deg) translateX(140px) rotate(-135deg); }
.bean-avatar:nth-child(5) { transform: translate(-50%, -50%) rotate(180deg) translateX(140px) rotate(-180deg); }
.bean-avatar:nth-child(6) { transform: translate(-50%, -50%) rotate(225deg) translateX(140px) rotate(-225deg); }
.bean-avatar:nth-child(7) { transform: translate(-50%, -50%) rotate(270deg) translateX(140px) rotate(-270deg); }
.bean-avatar:nth-child(8) { transform: translate(-50%, -50%) rotate(315deg) translateX(140px) rotate(-315deg); }
.bean-avatar span { animation: counter-spin 36s linear infinite; display: inline-block; }
@keyframes counter-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}

.orbit-center {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(244, 236, 221, 0.22), rgba(244, 236, 221, 0.04) 70%);
    border: 1px dashed rgba(244, 236, 221, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--court-cream);
    font-family: var(--display);
    font-variation-settings: "SOFT" 100, "WONK" 1;
    font-weight: 800;
    font-size: 1.4rem;
    letter-spacing: -0.02em;
}
.orbit-label {
    font-style: italic;
    text-align: center;
    line-height: 1.1;
}

/* --- §05 Royal seal ---------------------------------------- */
.seal-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    margin: 0.4rem 0 1rem;
}
.wax-seal {
    position: relative;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%,
            #FFB1DA 0%,
            var(--hibiscus-shock) 18%,
            #B0156A 55%,
            #5A2A52 100%);
    box-shadow: inset 0 -10px 24px rgba(0, 0, 0, 0.45),
                inset 0 8px 18px rgba(255, 255, 255, 0.18),
                0 24px 60px rgba(255, 46, 166, 0.55),
                0 0 0 4px rgba(255, 46, 166, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.seal-highlight {
    position: absolute;
    top: 18%; left: 22%;
    width: 60px;
    height: 30px;
    background: radial-gradient(ellipse, rgba(255,255,255,0.7), transparent 70%);
    border-radius: 50%;
    filter: blur(2px);
    pointer-events: none;
}
.seal-rim {
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    border: 2px dashed rgba(11, 11, 22, 0.35);
    pointer-events: none;
}
.seal-sigil {
    position: relative;
    width: 70%;
    height: 70%;
    z-index: 2;
}

.hash-string {
    text-align: center;
    font-family: var(--mono);
    font-size: 0.82rem;
    color: rgba(244, 236, 221, 0.78);
    letter-spacing: 0.08em;
}
.hash-label {
    display: block;
    font-family: var(--ui-round);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    color: var(--gilded-buttercream);
    margin-bottom: 0.3rem;
}
.hash-value {
    word-spacing: 0.4em;
}

/* --- §06 Closure ------------------------------------------- */
.spinner-stage {
    display: flex;
    justify-content: center;
    margin: 0.4rem 0 1.2rem;
}
.spinner-shield {
    width: clamp(180px, 20vw, 240px);
    height: auto;
    filter: drop-shadow(0 18px 40px rgba(33, 229, 241, 0.35));
}
.spinner-stroke {
    animation: spinner-cycle 4.6s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    transform-origin: 100px 120px;
}
@keyframes spinner-cycle {
    0%   { stroke-dashoffset: 0;    transform: rotate(0deg); }
    50%  { stroke-dashoffset: -420; transform: rotate(180deg); }
    100% { stroke-dashoffset: -840; transform: rotate(360deg); }
}

.petition-btn {
    align-self: center;
    background: linear-gradient(120deg, var(--cyan-edict), var(--royal-voltage));
    color: var(--privy-ink);
    border: none;
    border-radius: 999px;
    padding: 0.95rem 2.2rem;
    font-family: var(--ui-round);
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 0 0 4px rgba(33, 229, 241, 0.18),
                0 12px 32px rgba(33, 229, 241, 0.42);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 1rem;
}
.petition-btn:hover {
    transform: translateY(-2px) scale(1.04);
}

/* --- Custom cursor (right-panel only) ---------------------- */
#cursor-jellybean {
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 9999;
    width: 12px; height: 24px;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.18s ease;
}
#cursor-jellybean.visible { opacity: 1; }

.bean-main, .bean-trail {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: linear-gradient(150deg, var(--hibiscus-shock), var(--gilded-buttercream));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6),
                0 0 12px rgba(255, 46, 166, 0.55);
}
.bean-trail {
    transform: translate(0, 0) scale(0.7);
    opacity: 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
    background: linear-gradient(150deg, var(--cyan-edict), var(--lime-buzz));
}
#cursor-jellybean .bean-trail:nth-child(1) { transition-delay: 60ms; }
#cursor-jellybean .bean-trail:nth-child(2) { transition-delay: 120ms; }
#cursor-jellybean .bean-trail:nth-child(3) { transition-delay: 180ms; }

.right * { cursor: none; }
.right .decree-pill,
.right .furl-btn,
.right .petition-btn,
.right .cameo { cursor: none; }

/* --- Reduced motion ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .blob,
    .heraldic-shield,
    .orbit-track,
    .bean-avatar span,
    #osc-trace,
    .spinner-stroke,
    [data-pill="00"]:not(.is-unfurled) {
        animation: none !important;
    }
    .unfurled-card {
        transition: opacity 0.2s ease;
    }
}

/* --- Responsive (medium / small) --------------------------- */
@media (max-width: 960px) {
    .spread {
        grid-template-columns: 1fr;
    }
    .left {
        border-right: none;
        border-bottom: 2px solid var(--privy-ink);
        padding: 3rem 2rem 2.4rem 4rem;
    }
    .right {
        padding: 3rem 2rem;
    }
    .court-margin {
        padding-top: 3rem;
        gap: 2rem;
    }
    .throne-inner .display-headline { font-size: clamp(3.4rem, 16vw, 6.4rem); }
    .cameo-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
    .left { padding: 2.4rem 1.4rem 2rem 3.4rem; }
    .right { padding: 2.4rem 1.4rem; }
    .court-margin { width: 38px; padding-top: 2.4rem; font-size: 1.1rem; }
    .left-title { font-size: 1.3rem; }
    .cameo-grid { grid-template-columns: repeat(2, 1fr); }
    .orbit-stage { height: 300px; }
    .bean-avatar:nth-child(1) { transform: translate(-50%, -50%) rotate(0deg)   translateX(110px) rotate(0deg); }
    .bean-avatar:nth-child(2) { transform: translate(-50%, -50%) rotate(45deg)  translateX(110px) rotate(-45deg); }
    .bean-avatar:nth-child(3) { transform: translate(-50%, -50%) rotate(90deg)  translateX(110px) rotate(-90deg); }
    .bean-avatar:nth-child(4) { transform: translate(-50%, -50%) rotate(135deg) translateX(110px) rotate(-135deg); }
    .bean-avatar:nth-child(5) { transform: translate(-50%, -50%) rotate(180deg) translateX(110px) rotate(-180deg); }
    .bean-avatar:nth-child(6) { transform: translate(-50%, -50%) rotate(225deg) translateX(110px) rotate(-225deg); }
    .bean-avatar:nth-child(7) { transform: translate(-50%, -50%) rotate(270deg) translateX(110px) rotate(-270deg); }
    .bean-avatar:nth-child(8) { transform: translate(-50%, -50%) rotate(315deg) translateX(110px) rotate(-315deg); }
}