/* ─────────────────────────────────────────────────────────────────────────
   /explore/v10-library — Mid-20th-century library card catalog.
   References: NYPL & Bodleian card catalogs, Dewey Decimal cards, the
   Whole Earth Catalog's typographic spread, Borges' Library of Babel.
   All ornament is CSS — no images. Wood grain via stacked linear-gradients;
   typewriter feel via monospace + small letter-spacing; rubber-stamp
   imagery via rotated borders + textured red ink.
   ──────────────────────────────────────────────────────────────────────── */

/* ─────────── Background: wooden drawer facing ───────────
   Several overlaid linear-gradients fake horizontal wood-grain striping.
   The dark base is walnut; lighter stripes ride on top at low alpha. */
body {
    background:
        /* finest grain — sub-pixel highlights */
        repeating-linear-gradient(
            90deg,
            rgba(255, 220, 170, 0.00) 0px,
            rgba(255, 220, 170, 0.04) 1px,
            rgba(0, 0, 0, 0.04)       2px,
            rgba(255, 220, 170, 0.00) 4px
        ),
        /* mid-band grain — long parallel stripes */
        repeating-linear-gradient(
            90deg,
            rgba(50, 25, 0, 0.0) 0px,
            rgba(50, 25, 0, 0.0) 22px,
            rgba(50, 25, 0, 0.12) 23px,
            rgba(50, 25, 0, 0.0) 30px
        ),
        /* knots / soft brown variation */
        radial-gradient(ellipse at 12% 30%,
                        rgba(60, 30, 10, 0.32) 0%, transparent 32%),
        radial-gradient(ellipse at 78% 65%,
                        rgba(40, 20, 5, 0.30) 0%, transparent 30%),
        radial-gradient(ellipse at 50% 90%,
                        rgba(60, 35, 15, 0.22) 0%, transparent 40%),
        /* base walnut */
        linear-gradient(180deg, #7a4a22 0%, #6a3d18 50%, #5a3214 100%) !important;
    background-attachment: fixed !important;
    color: #2a1a08 !important;
    font-family: "American Typewriter", "Courier Prime", ui-monospace,
                 "Courier New", Courier, monospace !important;
}

/* Topbar — keep the brutalist nav but in cream so it sits on the wood. */
header.top {
    background: #f5ecd3 !important;
    border-bottom: 2px solid #2a1a08 !important;
}
header.top .brand,
header.top nav.primary a {
    color: #2a1a08 !important;
    font-family: "American Typewriter", "Courier Prime", ui-monospace, monospace !important;
}

/* Loosen the brutalist 760-cap so the cabinet has room to breathe. */
main {
    max-width: 1200px !important;
    padding: 18px 16px 80px !important;
}

/* ─────────── Cabinet ─────────── */
.lib-cabinet {
    position: relative;
    padding: 0;
}

.lib-head {
    text-align: center;
    margin-bottom: 14px;
}
.lib-brass {
    display: inline-block;
    padding: 10px 22px;
    background:
        linear-gradient(180deg,
                        #d4b367 0%, #b9933f 45%,
                        #a07a2c 55%, #c69d4a 100%);
    color: #2a1a08;
    border: 2px solid #5a3a10;
    box-shadow:
        inset 0 1px 0 rgba(255, 235, 180, 0.7),
        inset 0 -1px 0 rgba(0, 0, 0, 0.35),
        0 2px 4px rgba(0, 0, 0, 0.5);
    font-family: "American Typewriter", "Courier Prime", ui-monospace, monospace;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.lib-brass-line-1 { font-size: 14px; font-weight: 700; }
.lib-brass-line-2 { font-size: 10.5px; margin-top: 4px; opacity: 0.85; letter-spacing: 0.8px; }

/* ─────────── Drawer Tabs ─────────── */
.lib-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 0 6px;
    margin-bottom: 0;
    position: relative;
    z-index: 2;
}
.lib-tab {
    flex: 1 1 auto;
    min-width: 90px;
    padding: 9px 10px 11px;
    background: linear-gradient(180deg, #f3e3b5 0%, #e0c884 100%);
    color: #3a230a;
    border: 1px solid #5a3a10;
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
    font-family: "American Typewriter", "Courier Prime", ui-monospace, monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    cursor: pointer;
    text-transform: uppercase;
    box-shadow:
        inset 0 1px 0 rgba(255, 250, 220, 0.7),
        0 -2px 3px rgba(0, 0, 0, 0.15);
    transition: transform 0.15s ease, background 0.15s ease;
}
.lib-tab:hover {
    background: linear-gradient(180deg, #f8edc8 0%, #ebd496 100%);
    transform: translateY(-2px);
}
.lib-tab.is-active {
    background: linear-gradient(180deg, #fffaf0 0%, #f5e6b8 100%);
    transform: translateY(-3px);
    color: #1a0a02;
    border-bottom: 2px solid #fffaf0;     /* visual continuity into the drawer */
    margin-bottom: -2px;
    z-index: 3;
}
.lib-tab:focus {
    outline: 2px dashed #8a3a10;
    outline-offset: 1px;
}

/* ─────────── Drawer (the open box) ─────────── */
.lib-drawer {
    position: relative;
    background:
        /* faint paper-cream interior */
        linear-gradient(180deg, #fffaf0 0%, #f5e6b8 100%);
    border: 2px solid #2a1a08;
    border-top: 3px solid #2a1a08;
    padding: 22px 18px 32px;
    box-shadow:
        inset 0 6px 14px rgba(60, 30, 10, 0.3),
        inset 0 -4px 8px rgba(60, 30, 10, 0.2),
        0 8px 22px rgba(0, 0, 0, 0.4);
    min-height: 360px;
}

.lib-panel { display: none; }
.lib-panel.is-active { display: block; }
.lib-panel[hidden] { display: none; }

/* ─────────── Card stack ─────────── */
.lib-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 22px 18px;
    padding-top: 4px;
}

/* ─────────── Single index card (3×5 ratio) ─────────── */
.lib-card {
    --lib-skew: 0deg;
    position: relative;
    display: block;
    aspect-ratio: 5 / 3;
    min-height: 168px;
    padding: 14px 16px 14px 16px;
    background:
        /* faint horizontal rulings — like a real cataloger's card */
        repeating-linear-gradient(
            180deg,
            rgba(0, 0, 0, 0) 0px,
            rgba(0, 0, 0, 0) 22px,
            rgba(60, 80, 120, 0.16) 23px,
            rgba(0, 0, 0, 0) 24px
        ),
        /* paper grain */
        radial-gradient(ellipse at 30% 30%,
                        rgba(0, 0, 0, 0.02) 0%, transparent 60%),
        #fefcf4;
    color: #1a1108;
    border: 1px solid #1a1108;
    border-radius: 4px;                  /* ONE allowed rounded-corner: cards are real-world cards */
    text-decoration: none;
    box-shadow:
        0 2px 0 rgba(0, 0, 0, 0.08),
        0 5px 14px rgba(0, 0, 0, 0.28);
    transform: rotate(var(--lib-skew));
    transition: transform 0.18s ease, box-shadow 0.18s ease, z-index 0s;
    font-family: "American Typewriter", "Courier Prime", ui-monospace, monospace;
    overflow: hidden;
    will-change: transform;
}

/* Hover / focus / "lifted" — the card pops forward and untilts. */
.lib-card:hover,
.lib-card:focus,
.lib-card.is-lifted {
    transform: rotate(0deg) translateY(-6px) scale(1.03);
    box-shadow:
        0 4px 0 rgba(0, 0, 0, 0.1),
        0 14px 30px rgba(0, 0, 0, 0.35);
    z-index: 5;
    outline: 0;
}

/* Top row: empty left, call number right (typewritten). */
.lib-card-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 6px;
}
.lib-call {
    font-family: "American Typewriter", "Courier Prime", ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 1.5px;
    color: #4a3520;
    padding: 1px 6px;
    border: 1px solid #4a3520;
    background: rgba(255, 250, 230, 0.6);
    text-transform: uppercase;
}

/* Entity name — mixed-case bold typewriter, the primary label. */
.lib-card-name {
    font-family: "American Typewriter", "Courier Prime", ui-monospace, monospace;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.25;
    color: #1a1108;
    margin-bottom: 6px;
    letter-spacing: 0.2px;
    max-width: 80%;       /* keep clear of the stamp / tape */
}

.lib-card-rule {
    height: 1px;
    background: #1a1108;
    opacity: 0.55;
    margin-bottom: 6px;
}

.lib-card-meta {
    font-size: 10.5px;
    line-height: 1.45;
    color: #2a1a08;
}
.lib-meta-line {
    font-family: "American Typewriter", "Courier Prime", ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #4a3520;
    margin-bottom: 2px;
}
.lib-meta-blurb {
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.4;
    max-height: 4em;
    overflow: hidden;
    color: #2a1a08;
}

/* ─────────── Red-ink lending-date stamp (corner) ─────────── */
.lib-stamp {
    position: absolute;
    bottom: 10px;
    right: 8px;
    transform: rotate(-7deg);
    pointer-events: none;
    z-index: 2;
}
.lib-stamp-text {
    font-family: "American Typewriter", "Courier Prime", ui-monospace, monospace;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 3px 7px;
    color: #a31515;
    border: 1.5px solid #a31515;
    background:
        /* faded-ink texture: tiny noisy dots */
        radial-gradient(circle at 30% 40%, rgba(255,255,255,0.55) 0.5px, transparent 1px),
        radial-gradient(circle at 70% 60%, rgba(255,255,255,0.45) 0.5px, transparent 1px),
        rgba(255, 245, 240, 0.0);
    background-size: 3px 3px, 4px 4px;
    text-shadow: 0 0 1px rgba(163, 21, 21, 0.4);
    opacity: 0.85;
}

/* ─────────── Masking-tape strip (top-left corner) ─────────── */
.lib-tape {
    position: absolute;
    top: -3px;
    left: 14px;
    width: 56px;
    height: 14px;
    background:
        linear-gradient(180deg,
                        rgba(255, 245, 220, 0.85) 0%,
                        rgba(245, 230, 190, 0.9) 50%,
                        rgba(220, 200, 160, 0.85) 100%);
    border-left: 1px dashed rgba(120, 90, 40, 0.5);
    border-right: 1px dashed rgba(120, 90, 40, 0.5);
    transform: rotate(-2deg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    opacity: 0.85;
    pointer-events: none;
}

/* ─────────── Librarian's margin note — small handwritten scribble ─────────── */
.lib-margin-note {
    position: absolute;
    top: 8px;
    left: 8px;
    font-family: "Bradley Hand", "Comic Sans MS", "Snell Roundhand", cursive;
    font-size: 10px;
    color: #2c3a78;
    transform: rotate(-4deg);
    opacity: 0.6;
    pointer-events: none;
    max-width: 80px;
}
/* Different category cards get the marginalia in different positions to
   keep the look handcrafted rather than templated. */
.lib-card-place .lib-margin-note { top: auto; bottom: 8px; left: 14px; transform: rotate(3deg); }
.lib-card-case  .lib-margin-note { top: 14px; left: auto; right: 14px; transform: rotate(2deg); }
.lib-card-procedure .lib-margin-note { top: 28px; left: 12px; transform: rotate(-6deg); }

/* ─────────── "OUT" stamp — only on cards the user has visited.
   JS adds .is-out to cards whose slug is in localStorage. ─── */
.lib-out-stamp {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-12deg);
    font-family: "American Typewriter", "Courier Prime", ui-monospace, monospace;
    font-size: 38px;
    font-weight: 900;
    letter-spacing: 8px;
    color: rgba(163, 21, 21, 0.75);
    border: 4px double rgba(163, 21, 21, 0.7);
    padding: 4px 14px;
    background:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.4) 1px, transparent 1.5px),
        radial-gradient(circle at 75% 65%, rgba(255,255,255,0.3) 1px, transparent 1.5px);
    background-size: 5px 5px, 6px 6px;
    pointer-events: none;
    opacity: 0;                     /* hidden by default */
    z-index: 4;
}
.lib-card.is-out .lib-out-stamp { opacity: 1; }

/* ─────────── Cabinet footer ─────────── */
.lib-foot {
    display: flex;
    justify-content: space-between;
    margin-top: 14px;
    padding: 8px 12px;
    color: #f5ecd3;
    font-family: "American Typewriter", "Courier Prime", ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ─────────── Mobile ─────────── */
@media (max-width: 640px) {
    main { padding: 12px 8px 60px !important; }
    .lib-tabs { flex-wrap: wrap; gap: 1px; }
    .lib-tab {
        min-width: 0; flex: 1 1 30%; font-size: 10.5px;
        padding: 8px 6px 10px; letter-spacing: 0.8px;
    }
    .lib-drawer { padding: 14px 10px 22px; }
    .lib-cards { grid-template-columns: 1fr; gap: 18px; }
    .lib-card { min-height: 156px; padding: 12px 14px; }
    .lib-card-name { font-size: 14px; max-width: 78%; }
    .lib-brass-line-1 { font-size: 12px; }
    .lib-brass-line-2 { font-size: 9.5px; }
    .lib-out-stamp { font-size: 28px; letter-spacing: 4px; }
    .lib-foot { font-size: 9.5px; }
}

/* Respect reduced-motion: damp the lift transition. */
@media (prefers-reduced-motion: reduce) {
    .lib-card { transition: none; }
    .lib-tab { transition: none; }
}