/* ============================================================
   okurairi.com  —  お蔵入り
   The Archive of the Forgotten
   Victorian curiosity cabinet, dark academia
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
    --vault-black:    #12100e;
    --aged-linen:     #faf4e8;
    --dark-wood:      #3b2f24;
    --brass-gold:     #c9a55c;
    --leather-brown:  #6b4c3b;
    --deep-mahogany:  #2a1f18;
    --light-brass:    #e8d5a3;
    --wax-red:        #8b0000;
    --ink-deep:       #2a1f18;

    --serif-display: "Cinzel Decorative", "Cinzel", "Lora", Georgia, serif;
    --serif-body:    "EB Garamond", "Lora", Georgia, "Times New Roman", serif;
    --serif-label:   "Spectral SC", "EB Garamond", Georgia, serif;
    --serif-mono:    "Space Mono", "Inter", monospace;

    --frame-thick: 2px;
    --max-readable: 64ch;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--serif-body);
    color: var(--aged-linen);
    background: var(--vault-black);
    line-height: 1.8;
    font-size: 1.05rem;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

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

/* ---------- Vault Atmosphere ---------- */
body::before {
    /* Subtle paper-grain noise / aged texture across the vault */
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 99;
    background-image:
        radial-gradient(rgba(201,165,92,0.03) 1px, transparent 1px),
        radial-gradient(rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 3px 3px, 7px 7px;
    background-position: 0 0, 1px 2px;
    mix-blend-mode: screen;
}

body::after {
    /* The persistent vault vignette */
    content: "";
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at center,
        transparent 40%,
        rgba(0,0,0,0.45) 85%,
        rgba(0,0,0,0.65) 100%);
    pointer-events: none;
    z-index: 100;
}

/* ---------- Dust motes ---------- */
.dust-field {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 50;
    overflow: hidden;
}
.dust-mote {
    position: absolute;
    border-radius: 50%;
    background: var(--brass-gold);
    opacity: 0.18;
    filter: blur(0.4px);
    will-change: transform, opacity;
}

/* ---------- Hero / Vault Door ---------- */
.vault-hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 32px 48px;
    position: relative;
    background:
        radial-gradient(ellipse at 50% 35%, rgba(201,165,92,0.10), transparent 55%),
        var(--vault-black);
}

.vault-frame {
    position: relative;
    max-width: 760px;
    width: 100%;
    padding: 80px 64px 72px;
    text-align: center;
    background:
        radial-gradient(ellipse at center, rgba(42,31,24,0.35), rgba(18,16,14,0.0) 70%);
    border: 1px solid rgba(201,165,92,0.35);
    box-shadow:
        0 0 0 1px rgba(18,16,14,0.6) inset,
        0 0 60px rgba(0,0,0,0.6) inset,
        0 30px 80px -20px rgba(0,0,0,0.8);
}

/* Brass gradient frame outline */
.vault-frame::before {
    content: "";
    position: absolute;
    inset: -8px;
    border: 2px solid transparent;
    background:
        linear-gradient(135deg,
            #c9a55c 0%,
            #e8d5a3 25%,
            #a08030 50%,
            #e8d5a3 75%,
            #c9a55c 100%) border-box;
    -webkit-mask:
        linear-gradient(#000 0 0) padding-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}
.vault-frame::after {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(201,165,92,0.25);
    pointer-events: none;
}

/* Ornamental corners */
.ornament {
    position: absolute;
    width: 42px;
    height: 42px;
    pointer-events: none;
}
.ornament::before,
.ornament::after {
    content: "";
    position: absolute;
    background: var(--brass-gold);
    box-shadow: 0 0 8px rgba(201,165,92,0.4);
}
.ornament::before { width: 100%; height: 1.5px; top: 0; left: 0; }
.ornament::after  { width: 1.5px; height: 100%; top: 0; left: 0; }
.ornament .dot,
.ornament span { display: none; }

.corner-tl { top: -22px;    left: -22px;   }
.corner-tr { top: -22px;    right: -22px;  transform: scaleX(-1); }
.corner-bl { bottom: -22px; left: -22px;   transform: scaleY(-1); }
.corner-br { bottom: -22px; right: -22px;  transform: scale(-1, -1); }

/* Tiny brass discs at corner ends */
.ornament::before { border-radius: 1px; }
.corner-tl::after,
.corner-tr::after,
.corner-bl::after,
.corner-br::after { border-radius: 1px; }

.vault-eyebrow {
    font-family: var(--serif-label);
    font-size: 0.78rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--brass-gold);
    margin: 0 0 28px;
    opacity: 0.8;
}

.vault-title {
    font-family: var(--serif-display);
    font-weight: 900;
    font-size: clamp(2.4rem, 6vw, 4.4rem);
    line-height: 1.05;
    margin: 0 0 12px;
    color: var(--light-brass);
    letter-spacing: 0.02em;
    text-shadow:
        0 1px 0 #6b4c3b,
        0 2px 18px rgba(201,165,92,0.25);
}
.vault-title .dot {
    color: var(--brass-gold);
}

.vault-kanji {
    font-family: var(--serif-display);
    font-weight: 400;
    font-size: clamp(1.2rem, 2.4vw, 1.7rem);
    color: var(--brass-gold);
    margin: 0 0 28px;
    letter-spacing: 0.4em;
    opacity: 0.85;
}

.vault-subtitle {
    font-family: var(--serif-body);
    font-style: italic;
    font-size: clamp(1rem, 1.6vw, 1.18rem);
    color: var(--aged-linen);
    max-width: 56ch;
    margin: 0 auto 36px;
    line-height: 1.7;
    opacity: 0.9;
}

.vault-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 0 auto 28px;
    width: 60%;
}
.divider-rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--brass-gold), transparent);
    opacity: 0.7;
}
.divider-glyph {
    color: var(--brass-gold);
    font-size: 1.1rem;
    line-height: 1;
}

.vault-meta {
    font-family: var(--serif-label);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brass-gold);
    margin: 0;
    opacity: 0.75;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.vault-meta .dot-sep { opacity: 0.5; }

.scroll-hint {
    margin: 64px 0 0;
    font-family: var(--serif-label);
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--brass-gold);
    opacity: 0.6;
}
.scroll-hint .arrow {
    display: inline-block;
    margin-left: 6px;
    animation: bob 3.4s ease-in-out infinite;
}
@keyframes bob {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50%      { transform: translateY(6px); opacity: 1; }
}

/* ---------- Curator's Note ---------- */
.curator-note {
    background: var(--deep-mahogany);
    padding: 96px 32px;
    border-top: 1px solid rgba(201,165,92,0.18);
    border-bottom: 1px solid rgba(201,165,92,0.18);
    position: relative;
}
.curator-note::before,
.curator-note::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(201,165,92,0.4) 20%,
        rgba(201,165,92,0.4) 80%,
        transparent 100%);
}
.curator-note::before { top: 8px; }
.curator-note::after  { bottom: 8px; }

.curator-inner {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

.wax-seal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, #c0413a 0%, var(--wax-red) 50%, #5a0000 100%);
    color: var(--light-brass);
    font-family: var(--serif-display);
    font-weight: 900;
    font-size: 1.6rem;
    margin: 0 auto 28px;
    box-shadow:
        inset 0 -6px 14px rgba(0,0,0,0.5),
        inset 0 4px 6px rgba(255,255,255,0.18),
        0 6px 16px rgba(0,0,0,0.5);
    transform: rotate(-6deg);
    position: relative;
}
.wax-seal::before {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    border: 1px dashed rgba(232,213,163,0.35);
    pointer-events: none;
}
.wax-mono { line-height: 1; }

.curator-heading {
    font-family: var(--serif-display);
    font-weight: 700;
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    color: var(--light-brass);
    margin: 0 0 24px;
    letter-spacing: 0.04em;
}

.curator-body {
    font-family: var(--serif-body);
    font-size: 1.12rem;
    line-height: 1.85;
    color: var(--aged-linen);
    margin: 0 0 18px;
    opacity: 0.92;
}

.curator-signature {
    font-family: var(--serif-body);
    font-style: italic;
    font-size: 1rem;
    color: var(--brass-gold);
    margin: 28px 0 0;
    letter-spacing: 0.05em;
}

/* ---------- Cabinet (masonry) ---------- */
.cabinet {
    padding: 96px 32px 48px;
    max-width: 1280px;
    margin: 0 auto;
}

.cabinet-header {
    text-align: center;
    margin: 0 auto 56px;
    max-width: 640px;
}
.cabinet-tag {
    font-family: var(--serif-label);
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--brass-gold);
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid rgba(201,165,92,0.4);
    margin-bottom: 20px;
}
.cabinet-title {
    font-family: var(--serif-display);
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3rem);
    color: var(--light-brass);
    margin: 0 0 14px;
    letter-spacing: 0.04em;
}
.cabinet-lede {
    font-family: var(--serif-body);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--aged-linen);
    margin: 0;
    opacity: 0.78;
}

.masonry {
    column-count: 3;
    column-gap: 24px;
}

@media (max-width: 960px) {
    .masonry { column-count: 2; }
}
@media (max-width: 620px) {
    .masonry { column-count: 1; }
    .cabinet { padding: 72px 20px 32px; }
    .vault-frame { padding: 56px 28px 48px; }
    .curator-note { padding: 72px 22px; }
}

/* ---------- Card / Cabinet Drawer ---------- */
.card {
    background: var(--aged-linen);
    color: var(--leather-brown);
    border: 2px solid var(--dark-wood);
    padding: 32px 26px 26px;
    margin: 0 0 24px;
    position: relative;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    box-shadow:
        inset 0 0 0 1px rgba(107,76,59,0.18),
        0 8px 24px -8px rgba(0,0,0,0.7),
        0 2px 0 rgba(0,0,0,0.4);
    transform: translateY(8px) scale(0.96);
    opacity: 0;
    transition:
        transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
        opacity 0.7s ease-out;
    /* Slight aged-paper texture */
    background-image:
        radial-gradient(rgba(107,76,59,0.05) 1px, transparent 1.4px),
        linear-gradient(180deg, rgba(255,255,255,0.0), rgba(107,76,59,0.04));
    background-size: 4px 4px, auto;
}
.card.is-revealed {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* Brass label tab */
.card::before {
    content: attr(data-label);
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, var(--light-brass) 0%, var(--brass-gold) 50%, #a08030 100%);
    color: var(--ink-deep);
    padding: 4px 18px;
    border: 1px solid var(--dark-wood);
    font-family: var(--serif-label);
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 600;
    box-shadow:
        0 2px 4px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.45);
    white-space: nowrap;
}

/* Ornamental inner frame */
.card::after {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(107,76,59,0.22);
    pointer-events: none;
}

.card-title {
    font-family: var(--serif-display);
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--ink-deep);
    margin: 8px 0 8px;
    line-height: 1.25;
    letter-spacing: 0.01em;
}

.card-meta {
    font-family: var(--serif-label);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--leather-brown);
    margin: 0 0 18px;
    opacity: 0.85;
    border-bottom: 1px solid rgba(107,76,59,0.25);
    padding-bottom: 12px;
}

.card-body {
    font-family: var(--serif-body);
    font-size: 1rem;
    line-height: 1.72;
    color: var(--leather-brown);
    margin: 0 0 14px;
}
.card-body em { color: var(--ink-deep); }
.card-body.card-emph {
    text-align: center;
    font-style: italic;
    padding: 8px 0;
    border-top: 1px dashed rgba(107,76,59,0.3);
    border-bottom: 1px dashed rgba(107,76,59,0.3);
    margin: 14px 0;
}

.card-pull-quote {
    font-family: var(--serif-body);
    font-style: italic;
    font-size: 1.02rem;
    color: var(--ink-deep);
    line-height: 1.7;
    margin: 18px 0;
    padding: 12px 16px;
    border-left: 2px solid var(--brass-gold);
    background: rgba(201,165,92,0.08);
}

.card-footnote {
    font-family: var(--serif-label);
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--leather-brown);
    margin: 18px 0 0;
    opacity: 0.7;
    text-align: right;
    border-top: 1px solid rgba(107,76,59,0.2);
    padding-top: 10px;
}

/* Rare items (sealing wax red accents) */
.card-rare {
    border-color: var(--wax-red);
    background:
        radial-gradient(ellipse at top, rgba(139,0,0,0.06), transparent 70%),
        var(--aged-linen);
}
.card-rare::before {
    background: linear-gradient(180deg, #c0413a 0%, var(--wax-red) 100%);
    color: var(--light-brass);
    border-color: #5a0000;
}
.card-rare .card-title { color: var(--wax-red); }
.card-rare .card-meta  { color: var(--wax-red); border-bottom-color: rgba(139,0,0,0.3); }

/* Tall cards retain natural flow */
.card-tall { /* nothing extra; longer content makes it taller */ }

/* ---------- Ledger / Holdings ---------- */
.ledger {
    background: var(--deep-mahogany);
    padding: 96px 32px;
    border-top: 1px solid rgba(201,165,92,0.18);
    border-bottom: 1px solid rgba(201,165,92,0.18);
    position: relative;
}
.ledger::before,
.ledger::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,165,92,0.4) 20%, rgba(201,165,92,0.4) 80%, transparent);
}
.ledger::before { top: 8px; }
.ledger::after  { bottom: 8px; }

.ledger-inner {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}
.ledger-title {
    font-family: var(--serif-display);
    font-weight: 700;
    font-size: clamp(1.8rem, 3.6vw, 2.6rem);
    color: var(--light-brass);
    margin: 0 0 14px;
    letter-spacing: 0.04em;
}
.ledger-lede {
    font-family: var(--serif-body);
    font-style: italic;
    color: var(--aged-linen);
    opacity: 0.78;
    margin: 0 0 56px;
}

.ledger-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
@media (max-width: 820px) { .ledger-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .ledger-grid { grid-template-columns: 1fr; } }

.ledger-stat {
    border: 1px solid rgba(201,165,92,0.3);
    padding: 32px 18px;
    background: rgba(18,16,14,0.4);
    position: relative;
}
.ledger-stat::before,
.ledger-stat::after {
    content: "";
    position: absolute;
    width: 14px; height: 14px;
    border: 1px solid var(--brass-gold);
}
.ledger-stat::before { top: 6px; left: 6px; border-right: none; border-bottom: none; }
.ledger-stat::after  { bottom: 6px; right: 6px; border-left: none; border-top: none; }

.stat-figure {
    display: block;
    font-family: var(--serif-display);
    font-weight: 900;
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    color: var(--brass-gold);
    line-height: 1;
    margin-bottom: 12px;
    letter-spacing: 0.03em;
}
.stat-label {
    display: block;
    font-family: var(--serif-label);
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--aged-linen);
    opacity: 0.78;
}

/* ---------- Card Catalog (footer) ---------- */
.card-catalog {
    padding: 96px 32px 64px;
    background:
        radial-gradient(ellipse at center top, rgba(201,165,92,0.06), transparent 60%),
        var(--vault-black);
    position: relative;
    overflow: hidden;
}

.catalog-header {
    text-align: center;
    margin: 0 auto 56px;
    max-width: 640px;
}
.catalog-tag {
    font-family: var(--serif-label);
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--brass-gold);
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid rgba(201,165,92,0.4);
    margin-bottom: 20px;
}
.catalog-title {
    font-family: var(--serif-display);
    font-weight: 700;
    font-size: clamp(1.8rem, 3.6vw, 2.6rem);
    color: var(--light-brass);
    margin: 0 0 14px;
    letter-spacing: 0.04em;
}
.catalog-lede {
    font-family: var(--serif-body);
    font-style: italic;
    color: var(--aged-linen);
    opacity: 0.78;
    margin: 0;
}

.index-cards {
    max-width: 1000px;
    margin: 0 auto 72px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 6px;
    padding: 32px 16px;
}

.index-card {
    --rot: 0deg;
    display: inline-block;
    background: var(--aged-linen);
    color: var(--leather-brown);
    font-family: var(--serif-label);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 14px 22px;
    border: 1.5px solid var(--dark-wood);
    transform: rotate(var(--rot)) translateY(0);
    box-shadow:
        inset 0 0 0 1px rgba(107,76,59,0.2),
        0 6px 14px -4px rgba(0,0,0,0.6);
    position: relative;
    cursor: default;
    transition:
        transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
        box-shadow 0.45s ease,
        background 0.45s ease;
    /* aged paper grain */
    background-image:
        radial-gradient(rgba(107,76,59,0.06) 1px, transparent 1.4px);
    background-size: 4px 4px;
}
.index-card::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -3px;
    transform: translateX(-50%);
    width: 8px; height: 8px;
    background: var(--brass-gold);
    border: 1px solid var(--dark-wood);
    border-radius: 50%;
    box-shadow: 0 1px 1px rgba(0,0,0,0.4);
}
.index-card:hover {
    transform: rotate(0deg) translateY(-4px);
    background: var(--light-brass);
    box-shadow:
        inset 0 0 0 1px rgba(107,76,59,0.3),
        0 12px 24px -6px rgba(0,0,0,0.7);
}

/* ---------- Colophon ---------- */
.colophon {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}
.colophon-line {
    font-family: var(--serif-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--brass-gold);
    letter-spacing: 0.16em;
    margin: 0 0 14px;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.colophon-line .dot-sep { opacity: 0.5; }
.colophon-rule {
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--brass-gold), transparent);
    margin: 16px auto;
    opacity: 0.6;
}
.colophon-fine {
    font-family: var(--serif-body);
    font-style: italic;
    font-size: 0.9rem;
    color: var(--aged-linen);
    opacity: 0.6;
    margin: 0;
    letter-spacing: 0.02em;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .card { transform: none; opacity: 1; transition: none; }
    .scroll-hint .arrow { animation: none; }
    .dust-mote { display: none; }
}