.play-chapter-link {
    display: inline-block;
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: max-content;
    max-width: calc(100% - 40px);
    z-index: 100;
    margin-top: 20px;
    padding: 10px 16px;
    background: #f4f3edeb;
    border-radius: 12px;
    color: #414b36;
    font-size: 14px;
    text-decoration: none;
    border-bottom: 1px solid #9da38f;
    pointer-events: auto;
}
.play-chapter-link span { display: block; font-size: 11px; margin-top: 5px; }
.play-chapter-link:focus-visible { outline: 2px solid #5b6e45; outline-offset: 6px; }
.about-play-link {
    color: #888;
    text-decoration: none;
    pointer-events: none;
}
.about-play-link.is-ready { pointer-events: auto; cursor: pointer; }
.about-play-link:focus-visible { outline: 2px solid #888; outline-offset: 5px; }

/* About Page New Layout */
.about-hero {
    position: relative; /* Changed from fixed to relative for natural scrolling */
    width: 100%;
    height: 100vh;
    z-index: 50;
    transition: opacity 0.5s ease, visibility 0.5s;
}

/* Invisible snap target for hero */
.hero-snap-target {
    height: 100vh;
    width: 100%;
    scroll-snap-align: start;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

/* Adjust existing about-container to fit inside hero */
.about-hero .about-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.scroll-indicator {
    position: absolute;
    bottom: 50px;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 60;
    pointer-events: none;
}

.scroll-indicator p {
    font-family: 'Space Mono', monospace;
    font-size: 0.9rem;
    color: #000;
    opacity: 0.6;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { opacity: 0.4; transform: translateY(0); }
    50% { opacity: 0.8; transform: translateY(5px); }
    100% { opacity: 0.4; transform: translateY(0); }
}

.about-content {
    position: relative;
    z-index: 60;
    /* margin-top: 100vh; Removed for about.html direct use */
    min-height: 100vh;
    height: 100vh; /* Force full height for snap */
    background: #F4F3ED;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0; /* Remove padding to fill screen */
    box-sizing: border-box;
    scroll-snap-align: start; /* Snap point */
}

.content-columns {
    display: flex;
    width: 100%;
    /* max-width: 1400px;  Removed max-width constraint */
    padding: 0 var(--site-padding); /* Align with nav padding */
    height: 100vh; /* Fill full height */
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

.col-left, .col-right {
    width: 25%; /* Slightly narrower to push to sides */
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /* Will override for specific alignment */
    position: relative;
    padding-top: 120px; /* Space for title */
    box-sizing: border-box;
}

/* Left Column Alignment */
.col-left {
    align-items: flex-start; /* Align bubbles to left */
}

/* Right Column Alignment */
.col-right {
    align-items: flex-end; /* Align bubbles to right */
}

.col-center {
    width: 40%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.col-title {
    font-family: 'Space Mono', monospace;
    font-size: 1.2rem;
    margin-bottom: 20px;
    font-weight: normal; /* Remove bold */
    position: absolute;
    top: 80px; /* Fixed position from top */
    width: auto; /* Allow width to fit content */
}

/* Left Column Title Alignment */
.col-left .col-title {
    left: 0;
    text-align: left;
}

/* Right Column Title Alignment */
.col-right .col-title {
    right: 0;
    text-align: right;
}

.bubbles-list {
    width: 100%;
    height: 100%; /* Fill remaining height */
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    display: flex;
    flex-direction: column;
    padding: 20px 0;
    gap: 20px; /* Reduced gap to fit more */
    /* Mask to fade out top/bottom edges slightly */
    mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
}

/* Align items inside the list */
.col-left .bubbles-list {
    align-items: flex-start; /* Left align bubbles */
}
.col-right .bubbles-list {
    align-items: flex-end; /* Right align bubbles */
}

.bubbles-list::-webkit-scrollbar {
    display: none;
}

.list-bubble {
    width: 180px; /* Increased size */
    height: 180px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease;
    cursor: pointer;
    flex-shrink: 0;
}

.list-bubble:hover {
    transform: scale(1.15);
}

.list-bubble-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
}

.list-bubble-content {
    position: relative;
    z-index: 2;
    font-family: 'Space Mono', monospace;
    font-size: 0.9rem;
    text-align: center;
    pointer-events: none;
}

.center-rect {
    width: 360px; /* Increased size */
    height: 480px;
    background-color: #E5EEE7;
    margin-bottom: 60px; /* Increased margin */
}

.center-text {
    text-align: center;
    font-family: 'Space Mono', monospace;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #333;
}

/* --- New About Page Styles --- */
.new-about-body {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    position: relative;
    background-color: #F4F3ED;
}

.big-bowl-wrapper {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 400px); /* 200px margin on each side */
    max-width: 1400px;
    min-width: calc(100% - 200px);
    height: 150vh; /* Very tall to push top off-screen */
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Align image to bottom */
    pointer-events: none;
    z-index: 10;
}

.big-bowl-mask {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
    opacity: 0.7;
}

@media (max-width: 768px) {
    .big-bowl-wrapper {
        width: calc(100% - 40px);
        min-width: auto;
        height: 80vh; /* Smaller height on mobile */
    }
}

.big-bowl-mask {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.35;
}

.about-bubbles-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: none; /* Allow clicks to pass through to text */
}

.about-bubble {
    position: absolute;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: auto; /* Re-enable clicks on bubbles */
    /* Animation will be handled by GSAP */
}

.about-bubble img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* About Page Text Layer */
.about-text-layer {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 4; /* Behind bubbles (5) */
    width: 90%;
    max-width: 900px;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 6rem; /* Increased gap for better spacing */
}

/* Allow text selection on children, but disable for specific elements if needed */
.about-text-layer p, .about-text-layer h1 {
    pointer-events: auto;
    user-select: none; /* Disable selection as requested */
}

.about-text-title {
    font-family: 'Space Mono', monospace;
    font-size: 1.1rem;
    font-weight: 400;
    color: #1a1a1a;
    margin: 0;
}

.about-text-small {
    font-family: 'Space Mono', monospace;
    font-size: 1rem;
    line-height: 1.6;
    color: #1a1a1a;
    margin: 0;
    word-wrap: break-word;
}

/* Hint Text Styles */
.about-hint {
    color: #888 !important;
    margin-top: -5.5rem !important; /* Pull closer to previous element */
    font-size: 0.9rem !important;
}

/* Floating Animation */
@keyframes floatText {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.floating-text {
    display: inline-block;
    animation: floatText 3s ease-in-out infinite;
    transition: scale 0.3s ease, text-shadow 0.3s ease;
}

.floating-text:not(.about-hint):hover {
    scale: 1.15; /* Smooth scale using property */
    color: #000;
    text-shadow: 0 0 8px rgba(255,255,255,0.8);
    cursor: default;
}

@media (max-width: 768px) {
    .about-text-title {
        font-size: 2rem;
    }
    .about-text-small {
        font-size: 0.8rem;
    }
}


/* Typewriter Cursor Customization */
.about-text-title .cursor {
    width: 10px; /* Thinner than the default 18px */
    height: 1.1em;
    background-color: #000;
    margin-left: 5px;
    display: inline-block;
    animation: none; /* Solid during typing */
    vertical-align: -0.1em;
}

@keyframes blink-twice-vanish {
    0% { opacity: 1; }
    25% { opacity: 0; }
    50% { opacity: 1; }
    75% { opacity: 0; }
    100% { opacity: 0; }
}

.about-text-title .cursor {
    animation: blink-cursor 1s step-end infinite;
}
@keyframes blink-cursor {
    0%, 45% { opacity: 1; }
    46%, 100% { opacity: 0; }
}

/* Poem Section */
.poem-section {
    position: relative;
    z-index: 60;
    /* margin-top: 100vh; Removed margin-top since hero is now relative */
    background-color: #F1F2EC; /* Adjusted background color */
    min-height: 100vh;
    padding-bottom: 0; /* Reduced padding to 0 */
}

.poem-container {
    /* 23 items * 700px = 15400px. + 400px buffer = 15800px */
    height: 16200px;
    position: relative;
}

.poem-sticky-content {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Align to top */
    align-items: center;
    overflow: hidden;
    padding-top: 150px; /* Fixed position from top (Nav + 50px approx) */
    z-index: 150; /* Ensure text container is above visuals */
    pointer-events: none; /* Allow clicks to pass through to visuals */
}

.poem-line {
    /* position: absolute; Removed to allow stacking */
    text-align: center;
    opacity: 0;
    font-family: 'Space Mono', 'Courier New', monospace;
    font-size: 1.1rem;
    color: #000000; /* Using black for visibility on light background */
    letter-spacing: 1px; /* Reduced letter spacing */
    font-weight: 400;
    width: auto; /* Changed from 100% to auto */
    max-width: 80%; /* Prevent full width blocking */
    margin: 0 auto; /* Center the text */
    padding: 2px 20px; /* Reduced vertical padding */
    box-sizing: border-box;
    line-height: 1.4;
    pointer-events: none; /* Ensure clicks pass through */
    z-index: 150; /* Ensure text is on top of everything */
    position: relative; /* Ensure z-index works */
}

.poem-visuals {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100; /* Lower z-index to be below text */
}

/* New Layer for Overlays (Above Text) */
.poem-overlays-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 200; /* Highest z-index */
}

.poem-overlay-unit {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.poem-overlay-wrapper {
    width: 300px; /* Default fallback width */
    height: 400px; /* Match image height */
    position: absolute;
    pointer-events: none;
    /* Transform will be synced via JS */
}

/* Layout variations for overlay wrapper */
.poem-overlay-unit.layout-left .poem-overlay-wrapper {
    left: 95px;
    right: auto;
}
.poem-overlay-unit.layout-right .poem-overlay-wrapper {
    right: 95px;
    left: auto;
}

.poem-unit {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100vh; /* Occupy full viewport height to center content */
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.poem-image {
    width: auto; /* Allow auto width */
    height: 400px; /* Fixed height as requested base size */
    background-color: transparent; /* Removed placeholder color */
    position: absolute;
    /* Top/transform removed as flexbox handles centering */
    /* object-fit: cover; Removed since we use img tag now */
    transition: transform 0.3s ease;
    cursor: pointer; /* Indicate interactivity */
    pointer-events: auto; /* Enable interaction */
}

.poem-image img {
    display: block;
    height: 100%;
    width: auto;
    object-fit: contain;
}

/* Hover effect is now handled in JS to respect custom transforms */
/* .poem-image:hover { ... } removed */

.poem-bubble {
    width: 242px; /* Increased size 1.1x (220 * 1.1) */
    height: 242px;
    position: absolute;
    /* pointer-events: none;  Removed to allow interaction */
    /* animation: bubbleFloat 6s ease-in-out infinite; Removed for JS physics */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: grab; /* Indicate draggable */
    pointer-events: auto; /* Enable interaction */
}

.poem-bubble:active {
    cursor: grabbing;
}

.poem-bubble-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 2; /* Background on top */
    pointer-events: none; /* Prevent image drag */
}

.poem-bubble-content {
    position: relative;
    z-index: 1; /* Content behind background */
    width: 154px; /* Fixed size to keep element unchanged (70% of 220px) */
    height: 154px;
    object-fit: contain;
    pointer-events: none; /* Prevent image drag */
}

/* Specific adjustment for flow.svg */
.poem-bubble-content.is-flow {
    width: 50%; /* Reduced size as requested */
    height: 50%;
    border-radius: 50%; /* Clip to circle */
    overflow: hidden; /* Clip content */
    object-fit: contain; /* Changed to contain to ensure full visibility */
    transform: none; /* Reset any transform */
    display: block;
}

/* Target the image itself if needed, but since is-flow is ON the img tag */
img.poem-bubble-content.is-flow {
    transform: none; /* Remove scale */
}

/* Image Overlay - Updated to match reference */
.poem-overlay {
    position: absolute;
    top: 50%;
    /* left/right set by specific layout rules below */
    transform: translateY(-50%); /* Center vertically */
    width: auto;
    min-width: auto; /* Removed fixed min-width to adapt to content */
    max-width: 680px; /* Increased max-width (1.7x of 400) */
    padding: 12px 24px; /* Increased horizontal padding */
    background: #F1F2EC; /* Updated background color */
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    box-sizing: border-box;
    text-align: left;
    pointer-events: none;
    border: 1px dashed #000; /* Dashed border as requested */
    z-index: 10;
    white-space: nowrap; /* Prevent wrapping for short titles */
}

/* When image is on the left, overlay goes to the right */
.poem-overlay-unit.layout-left .poem-overlay {
    left: 105%; /* Push out to the right */
    right: auto;
}

/* When image is on the right, overlay goes to the left */
.poem-overlay-unit.layout-right .poem-overlay {
    right: 105%; /* Push out to the left */
    left: auto;
    text-align: right; /* Align text to image */
}

/* .poem-image:hover .poem-overlay removed - handled by JS */

.overlay-title {
    font-family: 'Space Mono', monospace;
    font-size: 1.1rem; /* Increased from 0.85rem */
    font-weight: 400;
    color: #000;
    margin-bottom: 4px;
    display: block;
    text-decoration: none; /* Removed underline */
    text-transform: none;
    letter-spacing: 0;
}

.overlay-subtitle {
    font-family: 'Space Mono', monospace;
    font-size: 0.95rem; /* Increased from 0.8rem */
    color: #000;
    font-style: italic; /* Italic subtitle */
    display: block;
}

/* Layout variations - Base positions, JS will add randomness */
.poem-unit.layout-left .poem-image {
    left: 95px; /* Align with nav padding */
    right: auto;
}
.poem-unit.layout-left .poem-bubble {
    right: 15%;
}

.poem-unit.layout-right .poem-image {
    right: 95px; /* Align with nav padding */
    left: auto;
}
.poem-unit.layout-right .poem-bubble {
    left: 15%;
}

/* Homepage Specific Styles */
.about-text .about-hint {
    margin-top: 5px !important; /* Reduced margin */
    display: block; /* Ensure it takes width */
    font-size: 1.1rem !important; /* Increased font size */
}

.scroll-down-arrow {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: rotate(90deg) scaleX(0.6) !important;
    display: block;
    margin: -20px auto 0; /* Adjusted margin as requested */
    opacity: 0.5;
    animation: floatArrow 2s ease-in-out infinite;
    background: none; /* Ensure no background */
    border: none; /* Ensure no border */
    padding: 0; /* Reset padding */
    width: auto; /* Reset width */
}

.scroll-down-arrow:hover {
    transform: rotate(90deg) scaleX(0.6) scale(1.2) !important;
    opacity: 1;
}

@keyframes floatArrow {
    0%, 100% { transform: rotate(90deg) scaleX(0.6) translateY(0); }
    50% { transform: rotate(90deg) scaleX(0.6) translateY(10px); }
}

/* View My Works Button */
.view-works-btn {
    position: absolute;
    bottom: 20px; /* Positioned closer to bottom */
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Space Mono', monospace;
    font-size: 1.1rem; /* Reduced size */
    color: #000;
    text-decoration: none;
    border-bottom: 1px solid #000; /* Thinner border */
    padding-bottom: 5px;
    transition: opacity 0.3s ease; /* Removed transform transition */
    opacity: 0;
    z-index: 200;
    cursor: pointer;
}

.view-works-btn:hover {
    opacity: 0.6 !important;
    /* transform removed to prevent movement */
}