/* ===================================================================
   archaic.works — victorian-ornate × dopamine-neon × calm-serene
   =================================================================== */

:root {
    /* Palette */
    --midnight: #0B0716;
    --plum: #1A0E2E;
    --rose: #FF3FA4;
    --cyan: #3DF0FF;
    --absinthe: #A8FF60;
    --amber: #FFB347;
    --lilac: #C77DFF;
    --paper: #F4EAD5;
    --foundry: #5A4F6B;

    /* Glow rgba pairs (for matched outer bloom) */
    --rose-bloom: rgba(255, 63, 164, 0.6);
    --cyan-bloom: rgba(61, 240, 255, 0.6);
    --absinthe-bloom: rgba(168, 255, 96, 0.55);
    --amber-bloom: rgba(255, 179, 71, 0.55);
    --lilac-bloom: rgba(199, 125, 255, 0.6);

    /* Type */
    --display: "Limelight", "Cormorant Garamond", serif;
    --deco: "Poiret One", "Cormorant Garamond", serif;
    --body: "Cormorant Garamond", Georgia, serif;
    --notes: "IM Fell DW Pica", "Cormorant Garamond", serif;
    --fraktur: "UnifrakturMaguntia", "Cormorant Garamond", serif;

    /* Motion */
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
    scroll-behavior: smooth;
    background: var(--midnight);
}

body {
    background: var(--midnight);
    color: var(--paper);
    font-family: var(--body);
    font-size: 1.05rem;
    line-height: 1.75;
    overflow-x: hidden;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background: var(--rose);
    color: var(--midnight);
}

img, svg { max-width: 100%; display: block; }

/* ===================================================================
   Background blobs — atmospheric substrate
   =================================================================== */
.blob-stage {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 20% 10%, rgba(26, 14, 46, 0.9), transparent 60%),
        radial-gradient(ellipse at 80% 90%, rgba(26, 14, 46, 0.7), transparent 70%),
        var(--midnight);
}

.blob {
    position: absolute;
    width: 80vw;
    height: 80vw;
    max-width: 1400px;
    max-height: 1400px;
    opacity: 0.14;
    filter: blur(80px);
    will-change: transform;
}

.blob-1 { top: -20%; left: -15%; }
.blob-2 { top: 10%;  right: -20%; }
.blob-3 { bottom: -10%; left: 5%; }
.blob-4 { bottom: -25%; right: -10%; }

/* ===================================================================
   Reusable: neon glow utility
   =================================================================== */
.neon-rose {
    color: var(--rose);
    filter:
        drop-shadow(0 0 1px currentColor)
        drop-shadow(0 0 3px currentColor)
        drop-shadow(0 0 10px currentColor)
        drop-shadow(0 0 28px var(--rose-bloom));
}
.neon-cyan {
    color: var(--cyan);
    filter:
        drop-shadow(0 0 1px currentColor)
        drop-shadow(0 0 3px currentColor)
        drop-shadow(0 0 10px currentColor)
        drop-shadow(0 0 28px var(--cyan-bloom));
}
.neon-absinthe {
    color: var(--absinthe);
    filter:
        drop-shadow(0 0 1px currentColor)
        drop-shadow(0 0 3px currentColor)
        drop-shadow(0 0 10px currentColor)
        drop-shadow(0 0 28px var(--absinthe-bloom));
}
.neon-amber {
    color: var(--amber);
    filter:
        drop-shadow(0 0 1px currentColor)
        drop-shadow(0 0 3px currentColor)
        drop-shadow(0 0 10px currentColor)
        drop-shadow(0 0 28px var(--amber-bloom));
}
.neon-lilac {
    color: var(--lilac);
    filter:
        drop-shadow(0 0 1px currentColor)
        drop-shadow(0 0 3px currentColor)
        drop-shadow(0 0 10px currentColor)
        drop-shadow(0 0 28px var(--lilac-bloom));
}

@keyframes hum {
    0%   { filter: hue-rotate(-6deg)
            drop-shadow(0 0 1px currentColor)
            drop-shadow(0 0 3px currentColor)
            drop-shadow(0 0 10px currentColor)
            drop-shadow(0 0 28px var(--rose-bloom)); }
    50%  { filter: hue-rotate(6deg)
            drop-shadow(0 0 1px currentColor)
            drop-shadow(0 0 4px currentColor)
            drop-shadow(0 0 12px currentColor)
            drop-shadow(0 0 28px var(--rose-bloom)); }
    100% { filter: hue-rotate(-6deg)
            drop-shadow(0 0 1px currentColor)
            drop-shadow(0 0 3px currentColor)
            drop-shadow(0 0 10px currentColor)
            drop-shadow(0 0 28px var(--rose-bloom)); }
}

@keyframes flicker {
    0%, 100% { opacity: 1; }
    20%      { opacity: 0.3; }
    40%      { opacity: 1; }
    60%      { opacity: 0.3; }
    80%      { opacity: 1; }
}

.flicker {
    animation: flicker 240ms steps(2, end) 1;
}

/* ===================================================================
   Section common
   =================================================================== */
section {
    position: relative;
    padding: 6rem 4vw;
}

.section-eyebrow {
    font-family: var(--notes);
    font-style: italic;
    color: var(--lilac);
    letter-spacing: 0.18em;
    text-transform: lowercase;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

.section-title {
    font-family: var(--display);
    color: var(--rose);
    font-size: clamp(2.4rem, 5.5vw, 5.4rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 1rem;
    font-feature-settings: "dlig", "liga", "ss01";
    filter:
        drop-shadow(0 0 1px currentColor)
        drop-shadow(0 0 3px currentColor)
        drop-shadow(0 0 10px currentColor)
        drop-shadow(0 0 28px var(--rose-bloom));
    animation: hum 6s var(--ease) infinite;
}

.section-sub {
    font-family: var(--deco);
    color: var(--paper);
    font-size: clamp(1rem, 1.4vw, 1.3rem);
    letter-spacing: 0.08em;
    opacity: 0.8;
    max-width: 60ch;
}

/* ===================================================================
   Signboard
   =================================================================== */
.signboard {
    height: 100vh;
    min-height: 720px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.signboard-frame {
    position: relative;
    width: min(92vw, 1200px);
    aspect-ratio: 12 / 7;
    color: var(--rose);
}

.frame-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: var(--rose);
    filter:
        drop-shadow(0 0 1px currentColor)
        drop-shadow(0 0 3px currentColor)
        drop-shadow(0 0 10px currentColor)
        drop-shadow(0 0 28px var(--rose-bloom));
    animation: hum 6s var(--ease) infinite;
}

.frame-rosette { color: var(--cyan); }
.frame-cartouche { color: var(--lilac); }
.frame-fleuron { color: var(--amber); }
.frame-acanthus { color: var(--rose); }

.signboard-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 4vw;
}

.wordmark {
    font-family: var(--display);
    font-weight: 400;
    color: var(--cyan);
    font-size: clamp(2.5rem, 11vw, 9rem);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 2rem;
    filter:
        drop-shadow(0 0 1px currentColor)
        drop-shadow(0 0 3px currentColor)
        drop-shadow(0 0 10px currentColor)
        drop-shadow(0 0 28px var(--cyan-bloom));
}

.wordmark.warming {
    animation: warmup 1.4s var(--ease) 1;
}

@keyframes warmup {
    0% {
        letter-spacing: 0.30em;
        filter:
            drop-shadow(0 0 0 currentColor)
            drop-shadow(0 0 0 currentColor)
            drop-shadow(0 0 0 currentColor)
            drop-shadow(0 0 0 var(--cyan-bloom));
        opacity: 0.4;
    }
    100% {
        letter-spacing: 0.16em;
        filter:
            drop-shadow(0 0 1px currentColor)
            drop-shadow(0 0 3px currentColor)
            drop-shadow(0 0 10px currentColor)
            drop-shadow(0 0 28px var(--cyan-bloom));
        opacity: 1;
    }
}

.wm-l, .wm-dot { display: inline-block; }
.wm-dot { color: var(--rose); }

.sign-tag {
    font-family: var(--deco);
    color: var(--paper);
    font-size: clamp(0.95rem, 1.5vw, 1.4rem);
    letter-spacing: 0.18em;
    text-transform: lowercase;
    font-style: italic;
    opacity: 0.92;
    margin-top: 0.5rem;
}

.scroll-cue {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    color: var(--lilac);
    font-family: var(--notes);
    font-style: italic;
    letter-spacing: 0.22em;
    text-transform: lowercase;
    font-size: 0.85rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    opacity: 0.85;
    animation: cuebob 3s var(--ease) infinite;
    filter:
        drop-shadow(0 0 1px currentColor)
        drop-shadow(0 0 6px currentColor);
}

@keyframes cuebob {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, 8px); }
}

/* ===================================================================
   Drawer + masonry
   =================================================================== */
.drawer {
    padding-top: 8rem;
    padding-bottom: 8rem;
}

.drawer-header {
    text-align: left;
    max-width: 1400px;
    margin: 0 auto 4rem;
    padding: 0 2vw;
}

.masonry {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 1vw;
    column-count: 3;
    column-gap: 2rem;
}

@supports (grid-template-rows: masonry) {
    .masonry {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
        grid-template-rows: masonry;
        gap: 2rem;
        column-count: auto;
    }
}

@media (max-width: 1100px) {
    .masonry { column-count: 2; }
}
@media (max-width: 700px) {
    .masonry { column-count: 1; }
}

.plaque {
    position: relative;
    background:
        radial-gradient(ellipse at 30% 10%, rgba(199, 125, 255, 0.07), transparent 60%),
        var(--plum);
    border-radius: 2px;
    margin: 0 0 2rem;
    padding: 0;
    break-inside: avoid;
    page-break-inside: avoid;
    overflow: hidden;
    transition: transform 700ms var(--ease);
    opacity: 0;
    transform: translateY(32px);
}

.plaque.in-view {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}

.plaque-tall    { min-height: 44rem; }
.plaque-tallest { min-height: 56rem; }
.plaque-mid     { min-height: 36rem; }
.plaque-short   { min-height: 28rem; }

.plaque-border {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    color: var(--rose);
    filter:
        drop-shadow(0 0 1px currentColor)
        drop-shadow(0 0 3px currentColor)
        drop-shadow(0 0 10px currentColor)
        drop-shadow(0 0 18px var(--rose-bloom));
    transition: filter 700ms var(--ease);
}

.plaque[data-tile="fletcher"]    .plaque-border { color: var(--rose); }
.plaque[data-tile="wheelwright"] .plaque-border { color: var(--cyan); }
.plaque[data-tile="cooper"]      .plaque-border { color: var(--amber); }
.plaque[data-tile="scrivener"]   .plaque-border { color: var(--lilac); }
.plaque[data-tile="limner"]      .plaque-border { color: var(--absinthe); }
.plaque[data-tile="stonemason"]  .plaque-border { color: var(--rose); }
.plaque[data-tile="tinker"]      .plaque-border { color: var(--cyan); }
.plaque[data-tile="typefounder"] .plaque-border { color: var(--amber); }
.plaque[data-tile="lamplighter"] .plaque-border { color: var(--lilac); }

.plaque[data-tile="fletcher"]    { --tile-glow: var(--rose-bloom); }
.plaque[data-tile="wheelwright"] { --tile-glow: var(--cyan-bloom); }
.plaque[data-tile="cooper"]      { --tile-glow: var(--amber-bloom); }
.plaque[data-tile="scrivener"]   { --tile-glow: var(--lilac-bloom); }
.plaque[data-tile="limner"]      { --tile-glow: var(--absinthe-bloom); }
.plaque[data-tile="stonemason"]  { --tile-glow: var(--rose-bloom); }
.plaque[data-tile="tinker"]      { --tile-glow: var(--cyan-bloom); }
.plaque[data-tile="typefounder"] { --tile-glow: var(--amber-bloom); }
.plaque[data-tile="lamplighter"] { --tile-glow: var(--lilac-bloom); }

.plaque:hover .plaque-border {
    filter:
        drop-shadow(0 0 2px currentColor)
        drop-shadow(0 0 6px currentColor)
        drop-shadow(0 0 14px currentColor)
        drop-shadow(0 0 32px var(--tile-glow, var(--rose-bloom)));
}

.plaque-inner {
    position: relative;
    z-index: 1;
    padding: 3rem 2.4rem 2.4rem;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.plaque-eyebrow {
    font-family: var(--notes);
    font-style: italic;
    color: var(--lilac);
    letter-spacing: 0.16em;
    text-transform: lowercase;
    font-size: 0.85rem;
    margin-bottom: 0.4rem;
    filter:
        drop-shadow(0 0 1px currentColor)
        drop-shadow(0 0 4px currentColor);
}

.plaque-title {
    font-family: var(--display);
    font-size: clamp(2rem, 3.4vw, 2.7rem);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 1.5rem;
    color: inherit;
}

.plaque[data-tile="fletcher"]    .plaque-title,
.plaque[data-tile="stonemason"]  .plaque-title { color: var(--rose); }
.plaque[data-tile="wheelwright"] .plaque-title,
.plaque[data-tile="tinker"]      .plaque-title { color: var(--cyan); }
.plaque[data-tile="cooper"]      .plaque-title,
.plaque[data-tile="typefounder"] .plaque-title { color: var(--amber); }
.plaque[data-tile="scrivener"]   .plaque-title,
.plaque[data-tile="lamplighter"] .plaque-title { color: var(--lilac); }
.plaque[data-tile="limner"]      .plaque-title { color: var(--absinthe); }

.plaque-title {
    filter:
        drop-shadow(0 0 1px currentColor)
        drop-shadow(0 0 3px currentColor)
        drop-shadow(0 0 10px currentColor)
        drop-shadow(0 0 24px var(--tile-glow, var(--rose-bloom)));
}

.plaque-tool {
    align-self: center;
    width: clamp(80px, 30%, 130px);
    aspect-ratio: 1;
    margin: 0.5rem 0 1.6rem;
    color: inherit;
    transition: transform 700ms var(--ease);
}

.plaque[data-tile="fletcher"]    .plaque-tool,
.plaque[data-tile="stonemason"]  .plaque-tool { color: var(--rose); }
.plaque[data-tile="wheelwright"] .plaque-tool,
.plaque[data-tile="tinker"]      .plaque-tool { color: var(--cyan); }
.plaque[data-tile="cooper"]      .plaque-tool,
.plaque[data-tile="typefounder"] .plaque-tool { color: var(--amber); }
.plaque[data-tile="scrivener"]   .plaque-tool,
.plaque[data-tile="lamplighter"] .plaque-tool { color: var(--lilac); }
.plaque[data-tile="limner"]      .plaque-tool { color: var(--absinthe); }

.plaque-tool svg {
    width: 100%;
    height: 100%;
    filter:
        drop-shadow(0 0 1px currentColor)
        drop-shadow(0 0 3px currentColor)
        drop-shadow(0 0 10px currentColor)
        drop-shadow(0 0 22px var(--tile-glow, var(--rose-bloom)));
}

.plaque:hover .plaque-tool {
    transform: rotate(90deg);
}

.plaque-body {
    color: var(--paper);
    font-family: var(--body);
    font-size: 1.02rem;
    line-height: 1.72;
    margin-bottom: 1rem;
    opacity: 0.94;
}

.plaque-body em {
    font-style: italic;
    color: var(--paper);
}

.plaque-date {
    font-family: var(--deco);
    color: var(--lilac);
    letter-spacing: 0.20em;
    text-transform: lowercase;
    font-size: 0.95rem;
    margin-top: 0.6rem;
    filter:
        drop-shadow(0 0 1px currentColor)
        drop-shadow(0 0 4px currentColor);
}

.plaque-sibling {
    font-family: var(--notes);
    font-style: italic;
    color: var(--cyan);
    text-decoration: none;
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    margin-top: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 600ms var(--ease);
    filter:
        drop-shadow(0 0 1px currentColor)
        drop-shadow(0 0 6px currentColor);
}

.plaque-sibling svg { color: var(--cyan); }

.plaque-sibling:hover {
    color: var(--rose);
}
.plaque-sibling:hover svg { color: var(--rose); }

/* ===================================================================
   Workshop floor (essay)
   =================================================================== */
.workshop {
    padding: 8rem 4vw;
    position: relative;
}

.workshop-header {
    max-width: 68ch;
    margin: 0 auto 4rem;
    text-align: left;
}

.essay {
    max-width: 68ch;
    margin: 0 auto;
    position: relative;
    color: var(--paper);
    font-family: var(--body);
    font-size: 1.18rem;
    line-height: 1.85;
}

.essay-para {
    margin-bottom: 1.6rem;
    color: var(--paper);
    opacity: 0.96;
}

.essay-para em {
    color: var(--paper);
    font-style: italic;
}

.essay-first {
    font-size: 1.22rem;
}

.dropcap {
    font-family: var(--fraktur);
    font-size: 7rem;
    line-height: 0.85;
    color: var(--cyan);
    float: left;
    padding: 0.5rem 1rem 0 0;
    margin-top: 0.2rem;
    filter:
        drop-shadow(0 0 1px currentColor)
        drop-shadow(0 0 3px currentColor)
        drop-shadow(0 0 10px currentColor)
        drop-shadow(0 0 28px var(--cyan-bloom));
}

.margin-note {
    font-family: var(--notes);
    font-style: italic;
    color: var(--lilac);
    font-size: 0.9rem;
    line-height: 1.4;
    letter-spacing: 0.04em;
    width: 12rem;
    text-align: center;
    position: absolute;
}

.margin-note p {
    margin-top: 0.4rem;
    filter:
        drop-shadow(0 0 1px currentColor)
        drop-shadow(0 0 6px currentColor);
}

.margin-note svg {
    margin: 0 auto;
    color: var(--lilac);
    filter:
        drop-shadow(0 0 1px currentColor)
        drop-shadow(0 0 4px currentColor)
        drop-shadow(0 0 12px var(--lilac-bloom));
}

.margin-note-left  { left: -16rem; }
.margin-note-right { right: -16rem; }

@media (max-width: 1200px) {
    .margin-note {
        position: relative;
        left: auto !important;
        right: auto !important;
        width: 100%;
        margin: 1rem 0 1.6rem;
    }
}

/* ===================================================================
   Ledger
   =================================================================== */
.ledger {
    padding: 8rem 4vw;
}

.ledger-header {
    max-width: 1400px;
    margin: 0 auto 4rem;
    padding: 0 2vw;
}

.ledger-grid {
    max-width: 1400px;
    margin: 0 auto;
    column-count: 3;
    column-gap: 2.4rem;
    padding: 0 1vw;
}
@media (max-width: 1100px) { .ledger-grid { column-count: 2; } }
@media (max-width: 700px)  { .ledger-grid { column-count: 1; } }

.ledger-entry {
    break-inside: avoid;
    page-break-inside: avoid;
    padding: 1.4rem 1.6rem;
    margin-bottom: 1.2rem;
    border-top: 1px solid var(--foundry);
    border-bottom: 1px solid var(--foundry);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    background: rgba(26, 14, 46, 0.4);
}

.ledger-name {
    font-family: var(--display);
    font-size: 1.35rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--paper);
}

.ledger-trade {
    font-family: var(--body);
    font-style: italic;
    color: var(--cyan);
    font-size: 1.05rem;
    filter:
        drop-shadow(0 0 1px currentColor)
        drop-shadow(0 0 6px currentColor);
}

.ledger-date {
    font-family: var(--notes);
    font-style: italic;
    color: var(--lilac);
    font-size: 0.85rem;
    letter-spacing: 0.20em;
    text-transform: lowercase;
}

/* ===================================================================
   Closing glyph
   =================================================================== */
.closing {
    height: 75vh;
    min-height: 580px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 4vw;
}

.glyph-stage {
    position: relative;
    width: min(90vw, 520px);
    aspect-ratio: 2 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.grand-glyph {
    width: 100%;
    height: 100%;
    color: var(--rose);
    filter:
        drop-shadow(0 0 2px currentColor)
        drop-shadow(0 0 6px currentColor)
        drop-shadow(0 0 18px currentColor)
        drop-shadow(0 0 38px var(--rose-bloom));
    animation: hum 6s var(--ease) infinite;
}

.glyph-foot {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
}

.glyph-foot p {
    font-family: var(--notes);
    font-style: italic;
    color: var(--paper);
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    text-transform: lowercase;
    margin: 0.2rem 0;
    opacity: 0.7;
}

.glyph-foot-sub {
    color: var(--lilac) !important;
    opacity: 0.85 !important;
    filter:
        drop-shadow(0 0 1px currentColor)
        drop-shadow(0 0 6px currentColor);
}

/* ===================================================================
   Aged-paper interior accent (used inside scrivener plaque body)
   =================================================================== */
.plaque[data-tile="scrivener"] .plaque-inner::before {
    content: "";
    position: absolute;
    left: 1.4rem;
    right: 1.4rem;
    bottom: 5rem;
    height: 0.5rem;
    background: var(--paper);
    opacity: 0.07;
    border-radius: 1px;
}

/* ===================================================================
   prefers-reduced-motion
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .blob { display: none; }
}