style.css

/* --- Base and Resets (Keep from previous version) --- */
:root {
    --text-color: #202020; --background-color: #ffffff; --link-color: #0072BC;
    --link-hover-color: #005082; --border-color: #e8e8e8; --code-background: #f5f5f5;
    --toc-background: #fcfcfc; --toc-border: #efefef;
    --font-sans: 'Inter', sans-serif; --font-serif: 'Source Serif Pro', serif;
    --font-mono: 'Roboto Mono', monospace;
    --main-content-max-width: 800px; --toc-width: 200px; /* Increased TOC width slightly */
    --base-padding: 20px; --gap-between-toc-and-content: 40px; /* Increased gap */
    --overall-page-max-width: 90vw; --overall-page-cap-width: 1600px;
}
html { scroll-padding-top: 20px; scroll-behavior: smooth; }
body {
    font-family: var(--font-serif); font-size: 1.1rem; line-height: 1.7;
    color: var(--text-color); background-color: var(--background-color);
    margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

/* --- Overall Page Structure (Keep from previous version) --- */
.page-container { display: flex; width: var(--overall-page-max-width); max-width: var(--overall-page-cap-width); margin: 0 auto; }

/* --- Table of Contents (Keep from previous version, minor style tweaks) --- */
#table-of-contents {
    font-family: var(--font-sans); width: var(--toc-width); flex-shrink: 0;
    padding: var(--base-padding); padding-top: calc(var(--base-padding) + 20px); /* Adjusted top padding */
    height: 100vh; position: sticky; top: 0; overflow-y: auto;
    background-color: var(--toc-background); font-size: 0.85rem; line-height: 1.5;
    border-right: 1px solid var(--toc-border); /* Add a subtle border back */
}
#table-of-contents h3 { margin-top: 0; margin-bottom: 1em; font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #555; }
#table-of-contents ul { list-style: none; padding: 0; margin: 0; }
#table-of-contents ul li { margin-bottom: 0.6em; }
#table-of-contents ul li a { text-decoration: none; color: #444; display: block; padding: 3px 0; transition: color 0.2s ease, padding-left 0.2s ease; }
#table-of-contents ul li a:hover { color: var(--link-color); }
#table-of-contents ul li a.active { color: var(--link-color); font-weight: 600; border-left: 3px solid var(--link-color); padding-left: 10px; margin-left: -13px; }
#table-of-contents ul ul { padding-left: 1em; margin-top: 0.5em; }
#table-of-contents ul ul li { font-size: 0.95em; }

/* --- Main Content Column (Keep from previous version) --- */
.main-content-column {
    font-family: var(--font-serif); flex-grow: 1;
    padding: var(--base-padding) calc(var(--base-padding) * 2) var(--base-padding) var(--gap-between-toc-and-content);
    max-width: var(--main-content-max-width); margin: 0 auto; /* Centers if space available */
}
.main-content-column header { text-align: center; margin-bottom: 3rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border-color); }
.main-content-column header h1 { font-family: var(--font-sans); font-size: 2.8rem; font-weight: 700; margin-bottom: 0.3em; color: #111; line-height: 1.2; }
.main-content-column .subtitle { font-family: var(--font-sans); font-size: 1.3rem; color: #555; margin-bottom: 1em; }
.main-content-column .authors, .main-content-column .date { font-family: var(--font-sans); font-size: 0.9rem; color: #777; }

/* --- Article Elements (Keep from previous version) --- */
article h2 { font-family: var(--font-sans); font-size: 1.9rem; font-weight: 600; margin-top: 2.5rem; margin-bottom: 1rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--border-color); color: #111; line-height: 1.3; }
article h3 { font-family: var(--font-sans); font-size: 1.5rem; font-weight: 600; margin-top: 2rem; margin-bottom: 0.8rem; color: #222; line-height: 1.3; }
p, li { font-family: var(--font-serif); margin-bottom: 1.1em; }
figure { margin: 2.5rem auto; text-align: center; }
figcaption { font-family: var(--font-sans); font-size: 0.9rem; color: #666; margin-top: 0.75em; line-height: 1.4; }
video, img { max-width: 100%; height: auto; border-radius: 4px; display: block; margin: 0 auto; }
a { color: var(--link-color); text-decoration: none; }
a:hover { color: var(--link-hover-color); text-decoration: underline; }
code, pre { font-family: var(--font-mono); background-color: var(--code-background); padding: 0.15em 0.4em; border-radius: 3px; font-size: 0.9em; border: 1px solid var(--border-color); }
pre { padding: 0.8em 1em; overflow-x: auto; line-height: 1.45; }

/* Default styles for specific figures */
.figure-fig2 img {
    max-width: 50%;
    height: auto;
    border: 1px solid var(--border-color);
}

.figure-graph1 img {
    max-width: 60%;
    height: auto;
    border: 1px solid var(--border-color);
}

/* --- UPDATED: Video Comparison Slider Specifics --- */
.comparison-container {
    position: relative; /* Needed for absolute positioning of slider and top video */
    width: 100%;
    /* You might want to set a specific aspect ratio or max-height for videos */
    /* e.g., aspect-ratio: 16 / 9; or max-height: 500px; */
    overflow: hidden; /* Hide parts of the top video that go beyond its clipped width */
    margin: 2rem auto; /* Center the container if it's narrower than content width */
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

/* NEW: Wrapper for videos and slider to handle positioning context */
.video-wrapper {
    position: relative;
    width: 100%; /* Or match video aspect ratio if needed */
    /* If videos have a specific aspect ratio, apply it here to size the wrapper */
    /* e.g., aspect-ratio: 16 / 9; */ 
}

.comparison-video-under,
.comparison-video-over {
    display: block;
    width: 100%;
    height: auto; /* Maintain aspect ratio */
    border-radius: 4px; /* Match container if any rounding */
}

.comparison-video-over {
    position: absolute;
    top: 0;
    left: 0;
    /* clip-path is now controlled by JS based on support and OS */
    /* pointer-events: none; Optional: if it interferes with slider */
}

/* NEW: CSS for the overflow wrapper for mobile Safari clip-path fix */
.video-over-wrapper {
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none; /* so the slider is still draggable */
}

.comparison-slider {
    position: absolute;
    top: 0;
    left: 50%; /* Initial position */
    width: 4px; /* Width of the draggable slider handle */
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    border-left: 1px solid rgba(0,0,0,0.3);
    border-right: 1px solid rgba(0,0,0,0.3);
    cursor: ew-resize; /* East-West resize cursor */
    transform: translateX(-50%); /* Center the handle */
    z-index: 10; /* Make sure it's on top */
    touch-action: none; /* Prevent scroll interference on iOS */
    /* For touch devices, you might need to increase its effective touch area */
}
/* Optional: Add a more visible handle to the slider bar */
.comparison-slider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px; /* Wider handle for easier grabbing */
    height: 30px;
    background-color: rgba(0, 0, 0, 0.5);
    border: 2px solid white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

/* Remove previous flex styling from figure.side-by-side-video-pair if it exists */
figure.side-by-side-video-pair {
    /* display: block; /* or whatever its default should be if not flex */
    margin-bottom: 20px; /* Example margin for figures */
}

/* NEW: Styling for the video row within side-by-side figures */
.video-row {
    display: flex;
    justify-content: center; /* Center items */
    align-items: flex-start; /* Align to top if heights differ */
    gap: 2%; /* Defines a 2% gap (of parent width) between video elements */
    margin-bottom: 1em; /* Add some space below the row of videos, before the figcaption */
}

.video-row .video-left,
.video-row .video-right {
    width: 48%; /* Each video can take up to 48% of the .video-row width */
    /* height: auto; is already global for video */
}

/* NEW CSS for video items, labels, and specific row layouts */
.video-label {
    font-family: var(--font-sans);
    font-size: 0.85em;
    color: #555;
    margin-bottom: 0.3em;
    text-align: center;
    font-weight: 600;
    min-height: 3.4em;        /* one\u2011liners and two\u2011liners occupy identical space   */
    display: block;            /* makes sure the height applies even if it wraps    */
}

.video-item { /* New class to wrap video and its label */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center label and video */
}

.video-item video {
    width: 100%; /* Video takes full width of its .video-item container */
    height: auto;
    border-radius: 4px;
    border: 1px solid var(--border-color); /* Add a light border to videos */
}

/* For rows with 2 videos, used by new section */
.video-row-layout-2 .video-item {
    width: 48%;
}

/* For rows with 3 videos, used by new section */
.video-row-layout-3 .video-item {
    width: 32%;
}
/* End of NEW CSS */

/* NEW: Style for vertically constrained videos, e.g., tall boba videos */
.vertical-video-constrained {
    max-height: 400px; /* Adjust as needed */
    width: auto; /* Respect aspect ratio, overridden by HTML width if present or parent flex item width */
    display: block; /* For standalone videos to allow margin auto */
    margin-left: auto;
    margin-right: auto;
}
/* End of NEW CSS */

/* NEW: Style for standalone tall boba videos (Fig 3, Fig 10) */
.standalone-boba-video {
    height: 350px; /* Enforce a specific height */
    width: 70%; /* This is already set in HTML, but reinforcing here for clarity */
    object-fit: contain; /* Ensures video is scaled to fit within this height without cropping */
    display: block;
    margin-left: auto;
    margin-right: auto;
}
/* End of NEW CSS */

/* Styling for tall boba videos in side-by-side comparison */
.boba-video-pair .video-left {
    width: auto !important; /* Let intrinsic size dictate width */
    max-width: 45% !important; /* Ensure they don't get too wide, leave space for margin */
    max-height: 400px !important;
    margin-right: 1% !important; /* Explicit small margin for gap */
}
.boba-video-pair .video-right {
    width: auto !important;
    max-width: 45% !important;
    max-height: 400px !important;
    margin-left: 1% !important; /* Explicit small margin for gap */
}

.comparison-container figcaption { /* If you put figcaption inside comparison-container */
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0,0,0,0.5);
    color: white;
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 0.8em;
}

/* Labels for Juxtapose (if you use it alongside, or adapt styling) */
.jx-label {
    font-family: var(--font-sans) !important; /* Force font if needed */
}

/* --- Footer (Keep from previous version) --- */
.main-content-column footer { font-family: var(--font-sans); text-align: center; margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--border-color); font-size: 0.85rem; color: #777; }

/* --- Responsive adjustments (Keep from previous version) --- */
@media (max-width: 1000px) {
    .page-container { display: block; width: auto; padding: 0 var(--base-padding); }
    #table-of-contents { display: none; }
    .main-content-column { padding: var(--base-padding); margin: 0 auto; max-width: min(var(--main-content-max-width), 95vw); }
}
@media (max-width: 600px) {
    body { font-size: 1rem; }
    .main-content-column header h1 { font-size: 2rem; }
    .main-content-column .subtitle { font-size: 1.1rem; }
    article h2 { font-size: 1.5rem; }
    article h3 { font-size: 1.25rem; }
    .main-content-column { padding: 15px; }

    .figure-fig2 img,
    .figure-graph1 img {
        max-width: 95%; /* Make these images larger on mobile */
    }
}

@media (max-width: 500px){
  .video-row{
    flex-direction: column;      /* stack instead of side\u2011by\u2011side           */
    gap: 1rem;                   /* a little breathing room between videos  */
  }
  .video-row .video-item{
    width: 100%;                 /* full width in the column layout         */
  }
}

/* Ensure existing video styles don't conflict too much */
figure video.vertical-video-constrained {
    max-width: 100%; /* Still respect parent width */
}

/* If used within a video-item in a video-row */
.video-item video.vertical-video-constrained {
    /* width will be controlled by .video-item's flex-basis or width */
    /* max-height will apply */
}