/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'VT323', 'Courier Prime', 'Courier New', monospace;
    color: #8B4513;
    overflow-x: hidden;
    min-height: 100vh;
    margin: 0;
    
    /* Grid background layers (fainter) */
    background:
        /* dotted nodes */
        radial-gradient(circle at 12px 12px, rgba(240, 217, 174, 0.35) 2px, transparent 3px) 0 0 / 48px 48px,
        /* horizontal grid lines */
        linear-gradient(rgba(230, 199, 146, 0.25) 2px, transparent 2px) 0 0 / 48px 48px,
        /* vertical grid lines */
        linear-gradient(90deg, rgba(230, 199, 146, 0.25) 2px, transparent 2px) 0 0 / 48px 48px,
        /* base color */
        linear-gradient(#fdeed2, #fdeed2);
}

/* Header */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 28px;
    background-color: transparent;
    max-width: 1200px;
    margin: 0 auto;
}

.logo {
    font-family: 'Press Start 2P', 'Courier Prime', monospace;
    font-weight: 400;
    font-size: 14px;
    color: #8B4513;
    letter-spacing: 2px;
    position: fixed;
    left: 16px;
    top: 16px;
    z-index: 40;
}

.nav-right {
    display: flex;
    gap: 30px;
}

.nav-link {
    text-decoration: none;
    color: #8B4513;
    font-family: 'VT323', 'Courier Prime', monospace;
    font-weight: 400;
    font-size: 18px;
    letter-spacing: 1px;
    transition: opacity 0.2s;
}

.nav-link:hover {
    opacity: 0.7;
}

/* Main content layout */
.main-content {
    position: relative;
    padding: 16px;
    padding-bottom: 16px; /* keep inner padding small */
    min-height: calc(100vh - 140px);
    max-width: 1200px;
    margin: 0 auto;
}

/* Bottom spacer element (desktop default) */
.bottom-spacer {
    height: 600px;
    width: 100%;
}

/* Page-end spacer removed - now handled by padding-bottom */

/* Browser window base styles */
.browser-window {
    background-color: #FFF8F0;
    border: 3px solid #D4A574;
    border-radius: 12px;
    position: absolute;
    min-width: 280px;
    min-height: 180px;
    box-shadow: 
        0 12px 40px rgba(139, 69, 19, 0.25),
        0 4px 16px rgba(139, 69, 19, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease, z-index 0.1s ease;
    cursor: pointer;
}

.browser-window:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 
        0 20px 60px rgba(139, 69, 19, 0.35),
        0 8px 24px rgba(139, 69, 19, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Dragging state temporarily disabled
.browser-window.dragging {
    transition: none;
    cursor: move;
    opacity: 0.98;
}
*/

/* Resize handle temporarily disabled
.browser-window .resize-handle {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 14px;
    height: 14px;
    border-right: 2px solid rgba(0,0,0,0.2);
    border-bottom: 2px solid rgba(0,0,0,0.2);
    border-radius: 2px;
    cursor: nwse-resize;
}
*/

.browser-header {
    background-color: #E8D5B7;
    border-bottom: 2px solid #D4A574;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    border-radius: 9px 9px 0 0;
}

.browser-controls {
    display: flex;
    gap: 8px;
}

.control {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(139, 69, 19, 0.3);
}

.control.red {
    background-color: #FF6B6B;
}

.control.yellow {
    background-color: #FFD93D;
}

.control.green {
    background-color: #6BCF7F;
}

.address-bar {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.address-bar input {
    flex: 1;
    background-color: white;
    border: 2px solid #D4A574;
    border-radius: 6px;
    padding: 8px 12px;
    font-family: 'Courier Prime', monospace;
    font-size: 13px;
    color: #8B4513;
}

.go-button {
    background-color: #D4A574;
    border: none;
    border-radius: 6px;
    padding: 8px 12px;
    font-family: 'VT323', monospace;
    font-size: 16px;
    font-weight: 400;
    color: white;
    cursor: pointer;
    letter-spacing: 1px;
}

.browser-tabs {
    display: flex;
    align-items: center;
    gap: 0; /* explicit margins per item to match exact gaps */
    font-size: 13px;
    font-weight: 700;
    color: #8B4513;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
.browser-tabs .tab,
.browser-tabs .tab-divider {
    display: inline-block;
    height: 32px;
    line-height: 32px; /* vertical align to 32px height measured */
    opacity: 0.9;
}
/* Responsive inter-label gaps that scale with viewport */
.browser-tabs .tab { margin-right: max(1px, 0.07vw); }
.browser-tabs .tab-divider { margin-right: max(19px, 1.3vw); }
.browser-tabs .tab-divider:last-child { margin-right: 0; }

/* Slightly tighter header for work window so the 32px labels feel centered */
.work-window .browser-header { padding-top: 10px; padding-bottom: 10px; }

/* Exact tab metrics (no custom font family) */
.work-window .browser-tabs {
    gap: 0;
    font-size: clamp(14px, 1.25vw, 18px);
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0;
    text-transform: none;
    color: rgb(182, 71, 7);
}

.work-window .browser-tabs .tab,
.work-window .browser-tabs .tab-divider {
    height: 32px;
    line-height: 24px;
    padding: 0;
    border: 0;
}

/* Responsive inter-label gaps for work window */
.work-window .browser-tabs .tab { margin-right: max(1px, 0.07vw); }
.work-window .browser-tabs .tab-divider { margin-right: max(19px, 1.3vw); }
.work-window .browser-tabs .tab-divider:last-child { margin-right: 0; }

.window-title {
    font-size: 14px;
    font-weight: 600;
    color: #8B4513;
    text-align: center;
    flex: 1;
}

/* Not-Design page accents */
.ndw .browser-content { padding: 22px; }
.ndw .nd-title { font-size: 18px; color: #8B4513; margin-bottom: 8px; }
.ndw .nd-desc { font-size: 14px; margin-bottom: 12px; }
.ndw-orange { border-color: #d59a6c; }
.ndw-green { border-color: #7bbf74; }
.ndw-blue { border-color: #6aa4d9; }

/* Make not-design headers look like tabbed windows */
.ndw .browser-header { background-color: #f2e3cd; }
.ndw-orange .browser-header { background-color: #f1d3bb; }
.ndw-green .browser-header { background-color: #d7f2d3; }
.ndw-blue .browser-header { background-color: #d1e6fb; }

.browser-content {
    padding: 30px;
    line-height: 1.6;
}

.work-window .browser-content {
    padding: 32px;
    padding-bottom: 240px; /* space for larger avatar under the text */
    position: relative;    /* anchor avatar inside content */
}

/* About Me Window */
.about-window {
    top: 7vh;
    left: 36.5vw;
    width: min(655px, 45.5vw);
    height: min(342px, 25vh);
    z-index: 12;
}

.about-window h1 {
    font-family: 'VT323', 'Courier Prime', monospace;
    font-size: 42px;
    font-weight: 400;
    color: #8B4513;
    margin-bottom: 20px;
    letter-spacing: 2px;
}

.about-window p {
    font-size: 18px;
    color: #8B4513;
    margin-bottom: 25px;
    line-height: 1.5;
}

.action-buttons {
    display: flex;
    gap: 15px;
}

.btn {
    border: 2px solid #8B4513;
    border-radius: 6px;
    padding: 10px 20px;
    font-family: 'VT323', 'Courier Prime', monospace;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    letter-spacing: 1px;
}

.btn.primary {
    background-color: #8B4513;
    color: white;
}

.btn.secondary {
    background-color: #D4A574;
    color: white;
    border-color: #D4A574;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(139, 69, 19, 0.2);
}

/* Button links */
.btn[href] {
    text-decoration: none;
    display: inline-block;
}

/* Work Window */
.work-window {
    top: 23vh;
    left: -12vw;
    width: min(700px, 48.5vw);
    height: min(952px, 68vh);
    z-index: 8;
}

.work-window h2 {
    font-family: 'VT323', 'Courier Prime', monospace;
    font-size: 38px;
    font-weight: 400;
    color: #8B4513;
    margin-bottom: 24px;
    letter-spacing: 1px;
}

.work-window p {
    font-size: 20px;
    color: #8B4513;
    margin-bottom: 20px;
    line-height: 1.7;
}

.link {
    color: #D2691E;
    text-decoration: underline;
    font-weight: 600;
}

.link:hover {
    color: #8B4513;
}

.avatar {
    position: absolute;
    bottom: 88px;
    left: 0;
    width: 200px;
    height: 200px;
    z-index: 6;
}

.avatar img {
    width: 100%;
    height: 100%;
    border-radius: 0;
    border: none;
    object-fit: cover;
}

/* Links Window */
.links-window {
    top: 36vh;
    left: 60vw;
    width: min(561px, 39vw);
    height: min(284px, 20vh);
    z-index: 10;
}

.links-window h3 {
    font-size: 24px;
    font-weight: 700;
    color: #8B4513;
    margin-bottom: 20px;
}

.links-window p {
    font-size: 14px;
    color: #8B4513;
    margin-bottom: 25px;
    line-height: 1.5;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-link {
    display: block;
    width: 50px;
    height: 50px;
}

.social-icon {
    width: 100%;
    height: 100%;
    border: 3px solid #D4A574;
    border-radius: 12px;
    background-color: #F5E6D3;
    position: relative;
}

.social-icon:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(139, 69, 19, 0.2);
}

.social-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.social-icon.instagram::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23D2691E' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2c3.2 0 3.6 0 4.8.1 1.2.1 1.8.2 2.2.4.6.2 1 .5 1.4.9.4.4.7.8.9 1.4.2.4.3 1 .4 2.2.1 1.2.1 1.6.1 4.8s0 3.6-.1 4.8c-.1 1.2-.2 1.8-.4 2.2-.2.6-.5 1-.9 1.4-.4.4-.8.7-1.4.9-.4.2-1 .3-2.2.4-1.2.1-1.6.1-4.8.1s-3.6 0-4.8-.1c-1.2-.1-1.8-.2-2.2-.4-.6-.2-1-.5-1.4-.9-.4-.4-.7-.8-.9-1.4-.2-.4-.3-1-.4-2.2-.1-1.2-.1-1.6-.1-4.8s0-3.6.1-4.8c.1-1.2.2-1.8.4-2.2.2-.6.5-1 .9-1.4.4-.4.8-.7 1.4-.9.4-.2 1-.3 2.2-.4 1.2-.1 1.6-.1 4.8-.1zm0-2.2c-3.3 0-3.7 0-5 .1s-2.2.2-3 .5c-.8.3-1.5.7-2.2 1.4-.7.7-1.1 1.4-1.4 2.2-.3.8-.4 1.7-.5 3s-.1 1.7-.1 5 0 3.7.1 5 .2 2.2.5 3c.3.8.7 1.5 1.4 2.2.7.7 1.4 1.1 2.2 1.4.8.3 1.7.4 3 .5s1.7.1 5 .1 3.7 0 5-.1 2.2-.2 3-.5c.8-.3 1.5-.7 2.2-1.4.7-.7 1.1-1.4 1.4-2.2.3-.8.4-1.7.5-3s.1-1.7.1-5 0-3.7-.1-5-.2-2.2-.5-3c-.3-.8-.7-1.5-1.4-2.2-.7-.7-1.4-1.1-2.2-1.4-.8-.3-1.7-.4-3-.5s-1.7-.1-5-.1z'/%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3Ccircle cx='18.4' cy='5.6' r='1.4'/%3E%3C/svg%3E");
}

.social-icon.twitter::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23D2691E' viewBox='0 0 24 24'%3E%3Cpath d='M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z'/%3E%3C/svg%3E");
}

.social-icon.linkedin::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23D2691E' viewBox='0 0 24 24'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E");
}

.social-icon.email::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23D2691E' viewBox='0 0 24 24'%3E%3Cpath d='M24 5.457v13.909c0 .904-.732 1.636-1.636 1.636h-3.819V11.73L12 16.64l-6.545-4.91v9.273H1.636A1.636 1.636 0 0 1 0 19.366V5.457c0-.904.732-1.636 1.636-1.636h3.819l6.545 4.91 6.545-4.91h3.819A1.636 1.636 0 0 1 24 5.457z'/%3E%3C/svg%3E");
}

/* Popup Window */
.popup-window {
    top: 81vh;
    left: 23.8vw;
    width: min(470px, 32.6vw);
    height: min(320px, 23vh);
    z-index: 15;
    background-color: #E6F3FF;
    border-color: #4A90E2;
    box-shadow: 
        0 16px 48px rgba(74, 144, 226, 0.3),
        0 8px 24px rgba(74, 144, 226, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.popup-window:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 
        0 24px 72px rgba(74, 144, 226, 0.4),
        0 12px 32px rgba(74, 144, 226, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.popup-header {
    background-color: #B8D4F0;
    border-bottom-color: #4A90E2;
}

.popup-content {
    background-color: #E6F3FF;
}

.popup-content h3 {
    font-size: 24px;
    font-weight: 700;
    color: #2C5282;
    margin-bottom: 15px;
}

.popup-content p {
    font-size: 18px;
    color: #2C5282;
    margin-bottom: 20px;
    line-height: 1.5;
}

.popup-btn {
    background-color: #4A90E2;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

/* Office Hours Window */
.office-window {
    top: 90vh;
    left: 82vw;
    width: min(246px, 17vw);
    height: min(216px, 15vh);
    z-index: 11;
}

/* Quotes Window */
.quotes-window {
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: 1200px;
    height: auto;
    min-height: 1000px;
    z-index: 15;
    /* Disable global browser-window transition for this window */
    transition: none;
}

/* Keep quotes window static on hover */
.quotes-window:hover {
    transform: translateX(-50%);
    box-shadow: 
        0 12px 40px rgba(139, 69, 19, 0.25),
        0 4px 16px rgba(139, 69, 19, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* Books Window */
.books-window {
    top: 100px;
    left: 0;
    right: 0;
    width: 100%;
    height: 800px;
    z-index: 15;
    transition: none;
    margin: 0 20px;
}

.books-window:hover {
    box-shadow: 
        0 12px 40px rgba(139, 69, 19, 0.25),
        0 4px 16px rgba(139, 69, 19, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.books-table-container {
    max-height: 600px;
    overflow-y: auto;
    padding: 20px;
    border: 2px solid #D4A574;
    border-radius: 8px;
    background-color: #FFF8F0;
}

.books-table {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.book-row {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background-color: #FFF8F0;
    border: 2px solid #D4A574;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.book-row:hover {
    background-color: #F5E6D3;
}

.book-image {
    flex-shrink: 0;
    width: 80px;
    height: 120px;
    position: relative;
    border: 2px solid #D4A574;
    border-radius: 6px;
    overflow: hidden;
    background-color: #F5E6D3;
}

.book-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.book-placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    color: #D4A574;
}

.book-info {
    flex: 1;
    min-width: 0;
}

.book-info h4 {
    font-size: 20px;
    color: #8B4513;
    margin-bottom: 8px;
    font-family: 'VT323', 'Courier Prime', monospace;
    letter-spacing: 1px;
}

.finish-date {
    font-size: 16px;
    color: #A0522D;
    font-weight: 400;
    font-family: 'Courier Prime', monospace;
    letter-spacing: 0.5px;
}

.book-info .one-liner {
    font-size: 16px;
    color: #8B4513;
    line-height: 1.6;
    text-decoration: underline;
    cursor: pointer;
    margin: 0;
}

.book-info .one-liner:hover {
    color: #D2691E;
}

/* Scrollbar styling */
.books-table-container::-webkit-scrollbar {
    width: 12px;
}

.books-table-container::-webkit-scrollbar-track {
    background: #F5E6D3;
    border-radius: 6px;
}

.books-table-container::-webkit-scrollbar-thumb {
    background: #D4A574;
    border-radius: 6px;
    border: 2px solid #F5E6D3;
}

.books-table-container::-webkit-scrollbar-thumb:hover {
    background: #8B4513;
}

.quotes-tabs {
    display: flex;
    gap: 0;
    flex: 1;
    justify-content: center;
}

.quote-tab {
    padding: 8px 16px;
    margin: 0 4px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.2s ease;
    color: white;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.quote-tab:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.quote-tab.active {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Quote Grid Layout */
.quotes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    padding: 24px;
}

.quote-square {
    background-color: #FFF8F0;
    border: 3px solid #D4A574;
    border-radius: 12px;
    padding: 36px;
    text-align: center;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
    /* No transitions - completely static */
}

/* Removed gradient overlay to prevent any visual movement */

/* Remove all hover effects that cause movement - quotes are completely static */

/* Individual Quote Square Colors */
.quote-1 {
    border-color: #FF6B6B;
    background-color: #FFF5F5;
}

.quote-2 {
    border-color: #4ECDC4;
    background-color: #F0FFFD;
}

.quote-3 {
    border-color: #45B7D1;
    background-color: #F0F8FF;
}

.quote-4 {
    border-color: #96CEB4;
    background-color: #F0FFF0;
}

.quote-5 {
    border-color: #FFB74D;
    background-color: #FFF8F0;
}

.quote-6 {
    border-color: #BA68C8;
    background-color: #FDF0FF;
}

.quote-7 {
    border-color: #8D6E63;
    background-color: #FFF3E0;
}



/* Quote Content */
.quote-content {
    display: none;
}

.quote-content.active {
    display: block;
}

.quote-content h1 {
    font-family: 'VT323', 'Courier Prime', monospace;
    font-size: 42px;
    font-weight: 400;
    color: #8B4513;
    margin-bottom: 30px;
    letter-spacing: 2px;
    text-align: center;
}

.quote-square blockquote {
    font-size: 18px;
    color: #8B4513;
    margin-bottom: 15px;
    line-height: 1.5;
    font-style: italic;
    quotes: """ """;
}

.quote-square blockquote::before {
    content: open-quote;
    font-size: 28px;
    color: #D4A574;
    margin-right: 8px;
}

.quote-square blockquote::after {
    content: close-quote;
    font-size: 28px;
    color: #D4A574;
    margin-left: 8px;
}

.quote-square cite {
    font-size: 14px;
    color: #A0522D;
    font-weight: 600;
    font-style: normal;
}

.book-card h4 {
    font-size: 20px;
    color: #8B4513;
    margin-bottom: 10px;
    font-family: 'VT323', 'Courier Prime', monospace;
    letter-spacing: 1px;
}

.book-card .one-liner {
    font-size: 16px;
    color: #8B4513;
    line-height: 1.6;
    text-decoration: underline;
    cursor: pointer;
}

/* Modal (Books summaries) */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 50;
    padding: 16px;
}

.modal-overlay.open { display: flex; }

.modal {
    background-color: #FFF8F0;
    border: 3px solid #D4A574;
    border-radius: 12px;
    width: min(720px, 100%);
    box-shadow: 0 16px 48px rgba(139, 69, 19, 0.35), 0 8px 24px rgba(139, 69, 19, 0.25);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #E8D5B7;
    border-bottom: 2px solid #D4A574;
    padding: 12px 16px;
    border-radius: 9px 9px 0 0;
}

.modal-header h3 {
    font-size: 20px;
    color: #8B4513;
    font-weight: 700;
}

.modal-close {
    background: transparent;
    border: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: #8B4513;
}

.modal-body {
    padding: 20px;
}

.modal-body p {
    font-size: 16px;
    color: #8B4513;
    line-height: 1.7;
}

.office-window h3 {
    font-size: 18px;
    font-weight: 700;
    color: #8B4513;
    margin-bottom: 15px;
}

.office-window p {
    font-size: 14px;
    color: #8B4513;
    margin-bottom: 20px;
}

.office-buttons {
    display: flex;
    gap: 10px;
}

.btn.outline {
    background-color: transparent;
    color: #8B4513;
    border: 2px solid #8B4513;
}

/* Ticker */
.ticker {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #8B4513;
    color: white;
    height: 40px;
    overflow: hidden;
    z-index: 20;
}

.ticker-content {
    display: flex;
    align-items: center;
    height: 100%;
    white-space: nowrap;
    animation: scroll 60s linear infinite;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

@keyframes scroll {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* Responsive Design */
@media (max-width: 1200px) {
    .main-content {
        padding: 15px;
    }
    
    .browser-window {
        position: absolute;
    }
    
    /* Maintain responsive positioning but adjust for smaller screens */
    .about-window {
        top: 6vh;
        left: 32vw;
        width: min(500px, 42vw);
        height: min(320px, 24vh);
    }
    
    .work-window {
        top: 20vh;
        left: -8vw;
        width: min(600px, 46vw);
        height: min(800px, 60vh);
    }
    
    .links-window {
        top: 32vh;
        left: 55vw;
        width: min(450px, 38vw);
        height: min(260px, 19vh);
    }
    
    .popup-window {
        top: 70vh;
        left: 20vw;
        width: min(380px, 30vw);
        height: min(280px, 20vh);
    }
    
    .office-window {
        top: 80vh;
        left: 75vw;
        width: min(220px, 18vw);
        height: min(190px, 14vh);
    }
    
    .avatar {
        position: absolute;
        bottom: -40px;
        left: 30px;
    }
    
    /* Quotes responsive for medium screens */
    .quotes-window {
        width: 90%;
        left: 5%;
        transform: none;
    }
    .books-window {
        width: 90%;
        left: 5%;
        transform: none;
    }
    
    .books-table-container {
        max-height: 500px;
    }
    
    .quotes-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 15px;
    }
}

/* Stack layout earlier for tablets and small laptops */
@media (max-width: 1100px) {
    body {
        padding-bottom: 56px;
    }

    .logo {
        position: static;
        left: auto;
        top: auto;
    }

    .main-content {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .browser-window {
        position: static;
        width: 100%;
        height: auto;
        max-width: 100%;
    }

    .browser-window:hover {
        transform: none;
        box-shadow: 
            0 12px 40px rgba(139, 69, 19, 0.25),
            0 4px 16px rgba(139, 69, 19, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }

    .work-window .browser-content {
        padding-bottom: 20px;
    }

    .avatar {
        position: static;
        width: 180px;
        height: 180px;
        margin: 10px auto 0;
    }

    .social-links {
        justify-content: center;
    }

    .bottom-spacer {
        height: 160px;
    }

    /* Typography scale for tablets */
    .about-window h1 { font-size: 36px; }
    .about-window p { font-size: 16px; }
    .work-window h2 { font-size: 32px; }
    .work-window p { font-size: 18px; }
    .links-window h3 { font-size: 20px; }
    .links-window p { font-size: 13px; }
}

@media (max-width: 768px) {
    body {
        /* Prevent content from hiding behind the fixed ticker */
        padding-bottom: 56px;
    }

    .header {
        padding: 15px 20px;
        flex-direction: column;
        gap: 15px;
    }

    /* Make the fixed logo behave normally on phones */
    .logo {
        position: static;
        left: auto;
        top: auto;
    }
    
    .nav-right {
        gap: 20px;
    }
    
    /* Stack windows in normal document flow */
    .main-content {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .browser-window {
        position: static;
        width: 100%;
        height: auto;
    }

    /* Disable hover lift on touch devices to avoid layout jumps */
    .browser-window:hover {
        transform: none;
        box-shadow: 
            0 12px 40px rgba(139, 69, 19, 0.25),
            0 4px 16px rgba(139, 69, 19, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }

    .browser-content {
        padding: 20px;
    }

    /* Reduce extra bottom padding used for desktop avatar layout */
    .work-window .browser-content {
        padding-bottom: 20px;
    }
    
    .social-links {
        justify-content: center;
    }
    
    /* Make avatar fluid and centered */
    .avatar {
        position: static;
        width: 160px;
        height: 160px;
        margin: 12px auto 0;
    }

    .office-buttons {
        flex-direction: column;
    }
    
    .ticker-content {
        font-size: 10px;
    }

    /* Smaller bottom spacer on phones */
    .bottom-spacer {
        height: 120px;
    }

    /* Typography scale for phones */
    .about-window h1 { font-size: 30px; }
    .about-window p { font-size: 15px; }
    .work-window h2 { font-size: 28px; }
    .work-window p { font-size: 16px; }
    .links-window h3 { font-size: 18px; }
    .links-window p { font-size: 12px; }
    
    /* Quotes responsive */
    .quotes-window {
        width: 95%;
        height: auto;
        min-height: 500px;
        left: 2.5%;
        transform: none;
    }
    /* Books responsive */
    .books-window {
        width: 100%;
        height: auto;
        min-height: 400px;
        left: 0;
        right: 0;
        margin: 0 10px;
        top: 80px;
    }
    
    .books-table-container {
        max-height: 300px;
        padding: 12px;
        margin: 0;
    }
    
    .book-row {
        padding: 12px;
        gap: 12px;
        flex-direction: column;
        align-items: flex-start;
        text-align: center;
    }
    
    .book-image {
        width: 80px;
        height: 120px;
        margin: 0 auto 8px;
    }
    
    .book-info {
        width: 100%;
        text-align: center;
    }
    
    .book-info h4 {
        font-size: 18px;
        margin-bottom: 6px;
    }
    
    .finish-date {
        font-size: 14px;
    }
    
    .book-info .one-liner {
        font-size: 14px;
        text-align: center;
        margin: 0;
    }
    
    .quotes-tabs {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .quote-tab {
        font-size: 12px;
        padding: 6px 12px;
    }
    
    .quotes-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 15px;
    }
    .quote-square {
        padding: 25px 20px;
        min-height: 180px;
    }
    
    .quote-content h1 {
        font-size: 32px;
    }
    
    /* Extra small phone improvements */
    @media (max-width: 480px) {
        .books-window {
            width: 100%;
            left: 0;
            right: 0;
            margin: 0 5px;
            top: 60px;
        }
        
        .books-table-container {
            max-height: 250px;
            padding: 10px;
        }
        
        .book-row {
            padding: 10px;
            gap: 8px;
        }
        
        .book-image {
            width: 70px;
            height: 105px;
        }
        
        .book-info h4 {
            font-size: 16px;
        }
        
        .finish-date {
            font-size: 12px;
        }
        
        .book-info .one-liner {
            font-size: 13px;
            line-height: 1.4;
        }
        
        .browser-content h1 {
            font-size: 28px;
            margin-bottom: 15px;
        }
    }
}