/* ============================================
               TINY BOOKSHOP - VANILLA CSS STYLESHEET
               Converted from Tailwind CSS
               ============================================ */
/* --------------------------------------------
               CSS VARIABLES - Design Tokens
               -------------------------------------------- */
:root {
    /* Primary Brand Colors */
    --color-primary: #ec1337;
    --color-primary-30: rgba(236, 19, 55, 0.3);
    --color-primary-40: rgba(236, 19, 55, 0.4);
    --color-primary-5: rgba(236, 19, 55, 0.05);

    /* Background Colors */
    --color-background-light: #f8f6f6;
    --color-background-dark: #221013;
    --color-pearl-gray: #f8f6f2;
    --color-cappuccino-light: #d4c4b0;
    --color-cappuccino-medium: #b8a089;
    --color-cappuccino-dark: #9c8266;
    --color-cappuccino-warm: #e8ddd4;

    /* Stone Color Palette (Neutrals) */
    --color-stone-100: #f5f5f4;
    --color-stone-200: #e7e5e4;
    --color-stone-300: #d6d3d1;
    --color-stone-400: #a8a29e;
    --color-stone-800: #292524;

    /* Book Spine Colors */
    --color-book-old-sea: #4a0e0e;
    --color-book-forest: #1b3022;
    --color-book-midnight: #0c1428;
    --color-book-harvest: #c28d2e;
    --color-book-dust: #9e4a3d;
    --color-book-cloud: #f2e9e1;

    /* Wood/Brand Colors */
    --color-wood-dark: #3d2422;
    --color-wood-darker: #1b0d10;
    --color-wood-medium: #4a2c2a;
    --color-wood-light: #5d3a37;

    /* Accent Colors */
    --color-gold-foil: #d4af37;
    --color-paper: #fdfae6;

    /* Shadow Definitions */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
    --shadow-book-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    --shadow-wood-inner: inset 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-wood-outer: 0 10px 20px rgba(0, 0, 0, 0.2);
    --shadow-paper: 2px 2px 5px rgba(0, 0, 0, 0.1);

    /* Spacing Scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* Typography */
    --font-serif: 'Newsreader', serif;
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Border Radius */
    --radius-sm: 0.125rem;
    --radius-md: 0.25rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-full: 9999px;

    /* Transitions */
    --transition-default: all 0.3s ease;
    --transition-colors: color 0.3s ease;
}

/* --------------------------------------------
               BASE STYLES & RESET
               -------------------------------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-serif);
    min-height: 100vh;
    color: var(--color-wood-dark);
    line-height: 1.6;
    position: relative;
}

body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Staggered tile dot pattern - brick layout */
    background-image: radial-gradient(circle, var(--color-cappuccino-medium) 2px, transparent 2px),
        radial-gradient(circle, var(--color-cappuccino-medium) 2px, transparent 2px);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
    z-index: -1;
    opacity: 0.2;
}

/* Centered warmer radial gradient overlay */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at bottom center, #b8a089be 60%, transparent 50%);
    opacity: 0.6;
    pointer-events: none;
    z-index: -2;
}

/* Dark Mode Body Styles */
body.dark-mode {
    background-color: var(--color-background-dark);
    color: var(--color-stone-400);
}

/* --------------------------------------------
               UTILITY CLASSES - Layout & Positioning
               -------------------------------------------- */
/* Positioning Utilities */
.position-relative {
    position: relative;
}

.position-absolute {
    position: absolute;
}

.position-fixed {
    position: fixed;
}

/* Z-Index Utilities */
.z-index-negative {
    z-index: -10;
}

.z-index-low {
    z-index: 10;
}

.z-index-medium {
    z-index: 20;
}

.z-index-high {
    z-index: 30;
}

/* Display Utilities */
.display-flex {
    display: flex;
}

.display-block {
    display: block;
}

/* Flex Direction */
.flex-direction-column {
    flex-direction: column;
}

/* Flex Alignment - Items */
.align-items-center {
    align-items: center;
}

.align-items-end {
    align-items: flex-end;
}

/* Flex Justification - Content */
.justify-content-center {
    justify-content: center;
}

/* Gap Utilities */
.gap-size-xs {
    gap: var(--space-1);
}

.gap-size-sm {
    gap: var(--space-2);
}

.gap-size-md {
    gap: var(--space-8);
}

.gap-size-lg {
    gap: var(--space-24);
}

.gap-size-xl {
    gap: 12rem;
}

/* --------------------------------------------
               UTILITY CLASSES - Sizing
               -------------------------------------------- */
/* Width Utilities */
.width-full {
    width: 100%;
}

.width-percent-90 {
    width: 90%;
}

.width-percent-105 {
    width: 105%;
}

.width-px-1 {
    width: 4px;
}

.width-px-2 {
    width: 8px;
}

.width-px-8 {
    width: 32px;
}

.width-px-9 {
    width: 36px;
}

.width-px-10 {
    width: 40px;
}

.width-px-11 {
    width: 44px;
}

.width-px-12 {
    width: 48px;
}

.width-px-14 {
    width: 56px;
}

.width-px-16 {
    width: 64px;
}

.width-px-64 {
    width: 256px;
}

.width-px-96 {
    width: 384px;
}

/* Height Utilities */
.height-full {
    height: 100%;
}

.height-viewport-full {
    height: 100vh;
}

.height-px-1 {
    height: 4px;
}

.height-px-2 {
    height: 4px;
}

.height-px-4 {
    height: 16px;
}

.height-px-12 {
    height: 48px;
}

.height-px-48 {
    height: 192px;
}

.height-px-60 {
    height: 240px;
}

.height-px-64 {
    height: 256px;
}

.height-px-68 {
    height: 272px;
}

.height-px-72 {
    height: 288px;
}

.height-px-320 {
    min-height: 320px;
}

/* Max Width Utilities */
.max-width-container {
    max-width: 56rem;
}

.max-width-container-narrow {
    max-width: 896px;
}

/* --------------------------------------------
               UTILITY CLASSES - Spacing (Margin & Padding)
               -------------------------------------------- */
/* Margin Top Utilities */
.margin-top-xs {
    margin-top: var(--space-1);
}

.margin-top-sm {
    margin-top: var(--space-2);
}

.margin-top-md {
    margin-top: var(--space-24);
}

/* Margin Bottom Utilities */
.margin-bottom-xs {
    margin-bottom: var(--space-1);
}

.margin-bottom-lg {
    margin-bottom: var(--space-20);
}

/* Margin X (Left & Right) Utilities */
.margin-x-auto {
    margin-left: auto;
    margin-right: auto;
}

.margin-x-negative {
    margin-left: -2.5%;
}

/* Padding All Sides */
.padding-sm {
    padding: var(--space-4);
}

/* Padding X (Left & Right) Utilities */
.padding-x-md {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
}

.padding-x-lg {
    padding-left: var(--space-12);
    padding-right: var(--space-12);
}

/* Padding Y (Top & Bottom) Utilities */
.padding-y-md {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
}

.padding-y-lg {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
}

/* --------------------------------------------
               UTILITY CLASSES - Typography
               -------------------------------------------- */
/* Font Family Utilities */
.font-family-serif {
    font-family: var(--font-serif);
}

.font-family-sans {
    font-family: var(--font-sans);
}

/* Font Size Utilities */
.font-size-xs {
    font-size: 0.625rem;
}

.font-size-sm {
    font-size: 0.75rem;
}

.font-size-md {
    font-size: 0.875rem;
}

.font-size-lg {
    font-size: 1.125rem;
}

.font-size-xl {
    font-size: 1.25rem;
}

.font-size-2xl {
    font-size: 1.5rem;
}

.font-size-4xl {
    font-size: 2.25rem;
}

.font-size-5xl {
    font-size: 3rem;
}

/* Font Weight Utilities */
.font-weight-light {
    font-weight: 300;
}

.font-weight-medium {
    font-weight: 500;
}

.font-weight-bold {
    font-weight: 700;
}

.font-weight-extrabold {
    font-weight: 800;
}

.font-weight-black {
    font-weight: 900;
}

/* Font Style Utilities */
.font-style-italic {
    font-style: italic;
}

/* Text Transform Utilities */
.text-transform-uppercase {
    text-transform: uppercase;
}

/* Letter Spacing Utilities */
.letter-spacing-tight {
    letter-spacing: -0.025em;
}

.letter-spacing-wide {
    letter-spacing: 0.1em;
}

.letter-spacing-wider {
    letter-spacing: 0.3em;
}

/* Line Height Utilities */
.line-height-tight {
    line-height: 1.25;
}

/* Text Alignment Utilities */
.text-align-center {
    text-align: center;
}

/* Text Color Utilities */
.text-color-primary {
    color: var(--color-primary);
}

.text-color-stone-200 {
    color: var(--color-stone-200);
}

.text-color-stone-300 {
    color: var(--color-stone-300);
}

.text-color-stone-800 {
    color: var(--color-stone-800);
}

.text-color-wood-dark {
    color: var(--color-wood-dark);
}

.text-color-wood-darker {
    color: var(--color-wood-darker);
}

/* Text Opacity Utilities */
.text-opacity-80 {
    opacity: 0.8;
}

.text-opacity-30 {
    opacity: 0.3;
}

.text-opacity-20 {
    opacity: 0.2;
}

/* --------------------------------------------
               UTILITY CLASSES - Colors & Backgrounds
               -------------------------------------------- */
/* Background Color Utilities */
.bg-color-light {
    background-color: var(--color-background-light);
}

.bg-color-dark {
    background-color: var(--color-background-dark);
}

.bg-color-stone-100 {
    background-color: var(--color-stone-100);
}

.bg-color-stone-300 {
    background-color: var(--color-stone-300);
}

.bg-color-primary-5 {
    background-color: var(--color-primary-5);
}

.bg-color-primary-30 {
    background-color: var(--color-primary-30);
}

.bg-color-paper {
    background-color: var(--color-paper);
}

/* Book Background Color Utilities */
.bg-book-old-sea {
    background-color: var(--color-book-old-sea);
}

.bg-book-forest {
    background-color: var(--color-book-forest);
}

.bg-book-midnight {
    background-color: var(--color-book-midnight);
}

.bg-book-harvest {
    background-color: var(--color-book-harvest);
}

.bg-book-dust {
    background-color: var(--color-book-dust);
}

.bg-book-cloud {
    background-color: var(--color-book-cloud);
}

/* Background Opacity Utilities */
.bg-opacity-10 {
    background-color: rgba(245, 245, 244, 0.1);
}

.bg-opacity-20 {
    background-color: rgba(0, 0, 0, 0.2);
}

/* --------------------------------------------
               UTILITY CLASSES - Borders
               -------------------------------------------- */
/* Border Width Utilities */
.border-thin {
    border-width: 1px;
}

.border-medium {
    border-width: 4px;
}

/* Border Style Utilities */
.border-style-solid {
    border-style: solid;
}

/* Border Color Utilities */
.border-color-wood {
    border-color: var(--color-wood-dark);
}

.border-color-primary-40 {
    border-color: var(--color-primary-40);
}

.border-color-stone-300 {
    border-color: var(--color-stone-300);
}

/* Border Position Utilities */
.border-right {
    border-right-style: solid;
    border-right-width: 1px;
}

.border-left {
    border-left-style: solid;
    border-left-width: 1px;
}

.border-left-thick {
    border-left-style: solid;
    border-left-width: 2px;
}

.border-x {
    border-left-style: solid;
    border-right-style: solid;
    border-left-width: 1px;
    border-right-width: 1px;
}

/* Border Radius Utilities */
.rounded-sm {
    border-radius: var(--radius-sm);
}

.rounded-md {
    border-radius: var(--radius-md);
}

.rounded-lg {
    border-radius: var(--radius-lg);
}

.rounded-full {
    border-radius: var(--radius-full);
}

.rounded-bottom-lg {
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}

.rounded-left-sm {
    border-top-left-radius: var(--radius-sm);
    border-bottom-left-radius: var(--radius-sm);
}

.rounded-right-sm {
    border-top-right-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
}

/* --------------------------------------------
               UTILITY CLASSES - Effects & Visual
               -------------------------------------------- */
/* Box Shadow Utilities */
.shadow-sm {
    box-shadow: var(--shadow-sm);
}

.shadow-md {
    box-shadow: var(--shadow-md);
}

.shadow-lg {
    box-shadow: var(--shadow-lg);
}

.shadow-xl {
    box-shadow: var(--shadow-xl);
}

/* Blur Effect Utilities */
.blur-xl {
    filter: blur(24px);
}

.blur-3xl {
    filter: blur(64px);
}

/* Pointer Events Utilities */
.pointer-events-none {
    pointer-events: none;
}

/* Overflow Utilities */
.overflow-hidden {
    overflow: hidden;
}

/* Transform Utilities */
.transform-center-x {
    left: 50%;
    transform: translateX(-50%);
}

.transform-center {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.transform-tag {
    transform: rotate(-3deg);
}

/* --------------------------------------------
               COMPONENT CLASSES - Custom Bookshop Elements
               -------------------------------------------- */
/* Wood Texture Shelf Component */
.wood-texture {
    background: linear-gradient(to bottom, var(--color-wood-medium) 0%, var(--color-wood-dark) 100%);
    box-shadow: var(--shadow-wood-inner), var(--shadow-wood-outer);
    width: 100%;
    height: 48px;
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    position: relative;
}

/* Shelf Top Edge Component */
.shelf-top {
    background: linear-gradient(to bottom, var(--color-wood-light) 0%, var(--color-wood-medium) 100%);
    height: 12px;
    width: 105%;
    margin-left: -2.5%;
    border-radius: 4px;
    position: absolute;
    top: -12px;
}

/* Book Spine Component */
.book-spine {
    transition: transform var(--transition-default), box-shadow var(--transition-default);
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.book-spine:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--shadow-book-hover);
    z-index: 20;
}

/* Gold Foil Text Effect Component */
.gold-foil {
    color: var(--color-gold-foil);
    text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.2);
}

/* Paper Tag Component */
.paper-tag {
    background-color: var(--color-paper);
    box-shadow: var(--shadow-paper);
    transform: rotate(-3deg) translateY(20px);
    padding: var(--space-4) var(--space-3);
    border-left: 2px solid var(--color-primary-40);
    position: absolute;
    z-index: 30;
    opacity: 0;
    pointer-events: none;
    bottom: auto;
    top: 20px;
    left: 50%;
    transform-origin: bottom center;

    /* Clip path animation from bottom to top */
    clip-path: inset(100% 0 0 0);
    transition: opacity 0.4s ease,
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        clip-path 0.4s ease;
}

/* Show paper tag when hovering its parent book spine */
.book-spine:hover .paper-tag {
    opacity: 1;
    pointer-events: auto;
    transform: rotate(-3deg) translateY(0);
    clip-path: inset(0 0 0 0);
}

/* Copy Button in Paper Tag */
.paper-tag .copy-btn {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    color: var(--color-wood-dark);
    opacity: 0.6;
    transition: opacity var(--transition-default), color var(--transition-default);
    z-index: 31;
}

.paper-tag .copy-btn:hover {
    opacity: 1;
    color: var(--color-primary);
}

/* Toast notification for copy feedback */
.copy-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-wood-dark);
    color: var(--color-stone-100);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-default);
    z-index: 100;
}

.copy-toast.show {
    opacity: 1;
}

/* Decorative Tag Pin Component */
.tag-pin {
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background-color: var(--color-stone-300);
}

/* Floor Shadow Component */
.floor-shadow {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    height: 16px;
    background-color: rgba(0, 0, 0, 0.1);
    filter: blur(24px);
    border-radius: var(--radius-full);
    margin-top: var(--space-2);
}

/* Background Decoration Container */
.bg-decoration {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -10;
    pointer-events: none;
    overflow: hidden;
    opacity: 0.2;
}

/* Background Decorative Blob - Primary Color */
.bg-decoration-blob-primary {
    position: absolute;
    top: 40px;
    left: 40px;
    width: 256px;
    height: 256px;
    border-radius: var(--radius-full);
    background-color: var(--color-primary-5);
    filter: blur(64px);
}

/* Background Decorative Blob - Stone Color */
.bg-decoration-blob-stone {
    position: absolute;
    bottom: 80px;
    right: 80px;
    width: 384px;
    height: 384px;
    border-radius: var(--radius-full);
    background-color: rgba(214, 211, 209, 0.2);
    filter: blur(64px);
}

/* --------------------------------------------
               LAYOUT COMPONENT CLASSES
               -------------------------------------------- */
/* Page Wrapper - Main Body Container */
.page-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-left: 4rem;
    padding-right: 4rem;
    background-color: var(--color-background-light);

    /* padding: var(--space-4) */
    /*  */
}

body.dark-mode .page-wrapper {
    background-color: var(--color-background-dark);
}

/* Main Content Container */
.main-container {
    position: relative;
    width: 100%;
    max-width: 56rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Hanging Sign Section */
.hanging-sign-section {
    position: relative;
    margin-bottom: var(--space-20);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Sign Chains Container */
.sign-chains {
    display: flex;
    gap: var(--space-24);

    /* position: absolute */
    top: 0px;

    /* transform: translateY(-100%) */
}

/* Individual Sign Chain */
.sign-chain {
    width: 4px;
    height: 48px;
    background: linear-gradient(to bottom, var(--color-cappuccino-dark), var(--color-cappuccino-medium), var(--color-cappuccino-light));
    border-radius: var(--radius-full);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Sign Board Component - Glass Effect */
.sign-board {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.4) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-top: 1px solid rgba(255, 255, 255, 0.95);
    border-left: 1px solid rgba(255, 255, 255, 0.95);
    padding: var(--space-6) var(--space-12);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px rgba(156, 130, 102, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Glass shine effect overlay */
.sign-board::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    border-radius: var(--radius-lg);
}

/* Sign Title Text */
.sign-title {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--color-wood-darker);
    letter-spacing: -0.025em;
    font-style: italic;
}

/* Sign Subtitle Row Container */
.sign-subtitle-row {
    margin-top: var(--space-1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    color: var(--color-primary);
}

/* Sign Divider Line */
.sign-divider {
    height: 1px;
    width: 32px;
    background-color: var(--color-primary-30);
}

/* Sign Subtitle Text */
.sign-subtitle {
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.8;
}

/* Bookshelf Unit Container */
.bookshelf-unit {
    position: relative;
    width: 100%;
}

/* Books Container - Holds all book spines */
.books-container {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-left: var(--space-8);
    padding-right: var(--space-8);
    gap: var(--space-1);
    min-height: 320px;
}

/* Shelf Drawer Handles Container */
.shelf-handles {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 12rem;
}

/* Individual Shelf Handle */
.shelf-handle {
    width: 32px;
    height: 4px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-full);
}

/* Navigation Footer */
.nav-footer {
    margin-top: var(--space-24);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-8);
    color: rgba(61, 36, 34, 0.6);
}

.nav-buttons__container {
    display: flex;
    column-gap: 3rem;
}

body.dark-mode .nav-footer {
    color: var(--color-stone-400);
}

/* Navigation Button */
.nav-button {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: none;
    border: none;
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 500;
    color: inherit;
    cursor: pointer;
    transition: color var(--transition-default);
}

.nav-button:hover {
    color: var(--color-primary);
}

/* Navigation Button Icon */
.nav-button-icon {
    font-size: 1.35rem;
}

/* --------------------------------------------
               RESPONSIVE BREAKPOINTS
               -------------------------------------------- */
@media (min-width: 768px) {
    /* Larger screens - bigger typography */
    .sign-title {
        font-size: 3rem;
    }

    /* Adjust tag position for larger screens */
    .stitch-pick-tag {
        bottom: 128px;
        left: 32%;
    }
}

@media (max-width: 767px) {
    /* Mobile adjustments */
    .sign-chains {
        gap: 6rem;
    }

    .sign-board {
        padding: var(--space-4) var(--space-6);
    }

    .sign-title {
        font-size: 1.875rem;
    }

    .shelf-handles {
        gap: 6rem;
    }

    .nav-footer {
        flex-direction: column;
        gap: var(--space-4);
    }

    /* Adjust book heights for mobile */
    .book-spine {
        max-height: 240px;
    }
}

/* --------------------------------------------
               INLINE STYLES MAPPED TO CLASSES
               (Specific element positioning)
               -------------------------------------------- */
/* Stitch's Pick Tag Positioning */
.stitch-pick-tag {
    position: absolute;
    bottom: 128px;
    left: 32%;
    z-index: 30;
}

/* Dark Mode Text Color Override */
body.dark-mode .text-color-wood-dark {
    color: var(--color-stone-400);
}

.nav-footer__credits {
    margin-top: 5rem;
}

.nav-footer__credits a {
    color: inherit;
}