/* Vimeo click-to-load placeholder */
.vimeo-consent { position:absolute; top:0; left:0; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:16px; box-sizing:border-box; background:rgba(0,0,0,.75); color:inherit; border:1px solid rgba(255,240,230,.4); font:inherit; cursor:pointer; text-align:center; }
.vimeo-consent strong { font-size:20px; font-weight:400; }
.vimeo-consent small { font-size:13px; line-height:1.4; max-width:36em; }
.vimeo-consent a { text-decoration:underline; color:inherit; }
.vimeo-consent:hover, .vimeo-consent:focus-visible { background:rgba(0,0,0,.6); outline:2px solid currentColor; outline-offset:-4px; }

/* keep aspect ratio when width/height attributes are present */
img[width][height] { height: auto; }

/* === Photo slider (same behaviour as chimericalintelligence.org) === */
.container:has(.gallery) { overflow: visible; }
.gallery { position: relative; width: calc(100vw - var(--sbw, 0px)); max-width: none; margin: 30px 0 40px calc(50% - 50vw + var(--sbw, 0px) / 2); }
.gallery-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 0 max(24px, calc((100vw - var(--sbw, 0px) - 712px) / 2)); scroll-padding: 0 max(24px, calc((100vw - var(--sbw, 0px) - 712px) / 2)); }
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-track:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.gallery-slide { flex: 0 0 auto; margin: 0; scroll-snap-align: start; }
.gallery-slide img, .gallery-slide video { display: block; height: min(70vh, 640px); width: auto; max-width: calc(100vw - 48px); object-fit: cover; margin: 0; }
.gallery-slide figcaption { width: 0; min-width: 100%; margin-top: 8px; font-size: 13px; line-height: 1.4; }
.gallery-controls { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 0 max(24px, calc((100vw - var(--sbw, 0px) - 712px) / 2)); }
.gallery-controls button { position: static; width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: inherit; border-color: currentColor; background: transparent; }
.gallery-controls button:hover:not(:disabled) { background: currentColor; }
.gallery-controls button:hover:not(:disabled) { color: inherit; }
.gallery-controls button:disabled { opacity: .3; cursor: default; }
.gallery-count { font-size: 14px; font-variant-numeric: tabular-nums; }
.gallery-slide img { cursor: zoom-in; }
@media screen and (max-width: 767px) { .gallery-slide img, .gallery-slide video { height: 52vh; } }

/* === Lightbox === */
html.lightbox-open { overflow: hidden; padding-right: var(--lightbox-scrollbar, 0px); }
.lightbox { position: fixed; inset: 0; z-index: 3000; display: flex; flex-direction: column; background: rgba(12,12,12,.96); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #f2f2f2; text-transform: none; }
.lightbox[hidden] { display: none; }
.lightbox button { position: static; right: auto; top: auto; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 40px; height: 40px; margin: 0; padding: 0 12px; border: 1px solid rgba(255,255,255,.25); border-radius: 20px; background: rgba(255,255,255,.08); color: #f2f2f2; font: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
.lightbox button:hover:not(:disabled) { background: rgba(255,255,255,.22); color: #fff; }
.lightbox button:disabled { opacity: .3; cursor: default; }
.lightbox :focus-visible { outline: 2px solid #f2f2f2; outline-offset: 2px; }
.lightbox-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 12px 16px; }
.lightbox-count { font-size: 14px; font-variant-numeric: tabular-nums; opacity: .85; }
.lightbox-tools { display: flex; gap: 8px; }
.lightbox-stage { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; }
.lightbox.is-zoomed .lightbox-stage { cursor: grab; }
.lightbox-image { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transform-origin: 50% 50%; user-select: none; -webkit-user-drag: none; will-change: transform; transition: opacity .2s ease-out; }
.lightbox.is-loading .lightbox-image { opacity: 0; }
.lightbox .lightbox-nav { position: absolute; top: 50%; z-index: 2; width: 48px; height: 48px; padding: 0; border-radius: 50%; transform: translateY(-50%); }
.lightbox .lightbox-prev { left: 12px; right: auto; }
.lightbox .lightbox-next { right: 12px; left: auto; }
.lightbox-caption { flex: none; align-self: center; box-sizing: border-box; width: 100%; max-width: 60rem; max-height: 5.6rem; margin: 0; padding: 10px 24px; overflow: auto; text-align: center; font-size: 15px; line-height: 1.4; font-weight: 300; color: #f2f2f2 !important; }
.lightbox-caption[hidden] { display: none; }
.lightbox-thumbs { flex: none; display: flex; gap: 8px; justify-content: safe center; padding: 10px 16px 14px; overflow-x: auto; scrollbar-width: thin; }
.lightbox .lightbox-thumb { flex: none; width: 88px; height: 60px; min-width: 0; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: #222; opacity: .55; }
.lightbox .lightbox-thumb:hover:not(:disabled) { background: #222; opacity: .85; }
.lightbox .lightbox-thumb[aria-current="true"] { opacity: 1; border-color: #f2f2f2; }
.lightbox-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lightbox.is-single .lightbox-nav, .lightbox.is-single .lightbox-thumbs { display: none; }
@media screen and (max-width: 767px) { .lightbox .lightbox-nav { width: 40px; height: 40px; } .lightbox .lightbox-prev { left: 6px; } .lightbox .lightbox-next { right: 6px; } .lightbox .lightbox-thumb { width: 64px; height: 44px; } }

.gallery-slide img[width][height] { height: min(70vh, 640px); width: auto; }
@media screen and (max-width: 767px) { .gallery-slide img[width][height] { height: 52vh; } }

.gallery-slide img { background: rgba(128,128,128,.15); color: transparent; }

/* === Vimeo placeholder refinement === */
.vimeo-consent { border-radius: 6px; background: rgba(12,12,12,.9); color: #f2f2f2; border: 1px solid rgba(255,255,255,.22); padding: 20px; }
.vimeo-consent strong { font-size: 18px; letter-spacing: .02em; }
.vimeo-consent small { color: rgba(242,242,242,.78); }
.vimeo-consent a { color: #f2f2f2; }
.vimeo-consent:hover, .vimeo-consent:focus-visible { background: rgba(28,28,28,.92); color: #fff; outline: 2px solid #f2f2f2; outline-offset: -5px; }


.video-container { margin-bottom: 26px; }

/* === Project header (first h2 after the title) and section headings === */
.container a.allprojects { display: inline-block; margin: 0 0 6px -5px; padding: 5px; font-size: 14px; font-weight: 500; letter-spacing: .03em; opacity: .8; text-decoration: none; }
.container a.allprojects:hover { opacity: 1; }
.container h1 { font-size: clamp(1.9rem, 4.6vw, 2.8rem); line-height: 1.08; letter-spacing: -0.02em; margin: 22px 0 14px; padding: 0; }
.container h1 + h2 { font-size: 1rem; line-height: 1.5; font-weight: 400; opacity: .8; margin: 0 0 30px; padding: 0 0 22px; border-bottom: 1px solid currentColor; border-bottom-color: color-mix(in srgb, currentColor 22%, transparent); }
.container h1 + h2 a { font-size: inherit !important; font-weight: 500 !important; text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 1px; white-space: nowrap; }
.container h2 { font-size: 1.35rem; line-height: 1.3; font-weight: 600; opacity: 1; margin: 48px 0 14px; padding: 0; border: 0; }
.container h3 { font-size: 1.1rem; line-height: 1.3; font-weight: 500; margin: 40px 0 12px !important; }

/* === Vertical rhythm === */
.container p { margin: 0 0 1.2em; line-height: 1.6; }
.container img { margin-bottom: 24px; }
.container .image-container { margin: 28px 0; }
.container .image-container img { margin-bottom: 12px; }
.container .video-container { margin: 28px auto; }
.container .subtitle-box { margin: 10px 0 28px !important; }
.container > p:last-of-type { margin-bottom: 0; }

/* === Read Mode button: icon and text centred === */
button[onclick="toggleDiv()"] { display: inline-flex; align-items: center; justify-content: center; line-height: 1; padding: 9px 16px; }
button[onclick="toggleDiv()"] .icon { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
button[onclick="toggleDiv()"] .button-text { display: inline-block; line-height: 1; }
@media screen and (max-width: 767px) { button[onclick="toggleDiv()"] { padding: 9px 11px; } }

/* section label followed by a <br/>: no extra blank line */
.container p span[style*="font-weight: 700"] + br, .container p strong + br { display: none; }
.container p span[style*="font-weight: 700"] { margin-bottom: 8px; }

/* caption never wider than its picture (table-caption sizing works in Safari too) */
.gallery-slide { display: table; }
.gallery-slide figcaption { display: table-caption; caption-side: bottom; width: auto; min-width: 0; margin: 0; padding-top: 8px; }
.gallery-slide img, .gallery-slide video { display: block; }

/* === Archive ("more projects") === */
body.archive-page .container { max-width: 1200px; }
.archive-grid { list-style: none; margin: 0; padding: 0; column-width: 230px; column-gap: 22px; }
.archive-item { break-inside: avoid; margin: 0 0 30px; }
.archive-item figure { margin: 0; }
.archive-item img { display: block; width: 100%; height: auto; margin: 0 0 10px; background: rgba(128,128,128,.15); color: transparent; }
.archive-item:not(.is-project) img { cursor: zoom-in; }
.archive-link { display: block; }
.archive-item img { transition: opacity .2s ease-out; }
.archive-item:hover img { opacity: .88; }
.archive-item figcaption, .archive-caption-link { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.4; color: inherit; text-decoration: none; background: none; padding: 0; }
.archive-caption-link:hover { background: none; color: inherit; }
.archive-caption-link:hover .archive-title { text-decoration: underline; text-underline-offset: 3px; }
.archive-kind { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.archive-item.is-project .archive-title { font-weight: 600; }
.archive-note { font-size: 13px; opacity: .75; font-style: italic; }
@media screen and (max-width: 767px) { .archive-grid { column-count: 2; column-width: auto; column-gap: 14px; } .archive-item { margin-bottom: 22px; } }
@media screen and (max-width: 420px) { .archive-grid { column-count: 1; } }

/* Rainy day: the sketch has a light background, so the text is dark there */
body.rain, body.rain .container, body.rain h1, body.rain h2, body.rain p, body.rain a.allprojects, body.rain a { color: rgba(30,30,60,1); }
body.rain a.allprojects:hover { color: rgba(255,255,231,1); }
body.rain a.allprojects { color: #5b1fa8 !important; }
body.rain a.allprojects:hover { color: rgba(255,255,231,1) !important; }

/* Archive: project slider on top, experiments below; every image shows it is clickable */
.archive-heading { margin-top: 36px; }
.gallery--projects { margin-top: 10px; }
.gallery--projects .gallery-slide img { height: min(44vh, 400px); max-width: calc(100vw - 48px); }
.gallery--projects .gallery-slide img[width][height] { height: min(44vh, 400px); }
.gallery--projects .gallery-slide a { display: block; }
.gallery--projects .gallery-slide figcaption a { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.4; color: inherit; text-decoration: none; background: none; padding: 0; }
.gallery--projects .gallery-slide figcaption a:hover .archive-title { text-decoration: underline; text-underline-offset: 3px; }
.gallery--projects .archive-title { font-weight: 600; }
.archive-item img, .archive-item a, .gallery--projects .gallery-slide img, .gallery--projects .gallery-slide a { cursor: pointer; }

/* archive: slider lines up with the wider page column; pointer cursor everywhere */
.gallery--projects .gallery-track, .gallery--projects .gallery-controls { padding-left: max(24px, calc((100vw - var(--sbw, 0px) - 1152px) / 2)); padding-right: max(24px, calc((100vw - var(--sbw, 0px) - 1152px) / 2)); }
.gallery--projects .gallery-track { scroll-padding: 0 max(24px, calc((100vw - var(--sbw, 0px) - 1152px) / 2)); }
.container .gallery-slide img { margin: 0; }
.archive-item:not(.is-project) img, .archive-item.is-project img { cursor: pointer; }

/* video placeholder: a box with a real button and a separate link */
.vimeo-consent { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; box-sizing: border-box; background: rgba(12,12,12,.9); color: #f2f2f2; border: 1px solid rgba(255,255,255,.22); border-radius: 6px; text-align: center; cursor: pointer; }
.vimeo-consent button.vimeo-consent-play { position: static; width: auto; height: auto; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; padding: 6px 10px; text-align: center; cursor: pointer; }
.vimeo-consent button.vimeo-consent-play:hover { background: none; color: #fff; }
.vimeo-consent button.vimeo-consent-play strong { font-size: 18px; font-weight: 500; letter-spacing: .02em; }
.vimeo-consent small { font-size: 13px; line-height: 1.45; max-width: 36em; color: #e4e4e4; }
.vimeo-consent a { color: #fff; text-decoration: underline; }
.vimeo-consent:hover { background: rgba(28,28,28,.92); }
/* section labels were too faint */
.container p strong, .container p span[style*="font-weight: 700"] { opacity: .85 !important; font-size: 12px !important; color: #2b333c !important; }

/* Reflow: pictures never wider than the column (zero specificity so sliders/grids keep their own sizing) */
.container img:where(:not(.gallery-slide img, .archive-item img)) { max-width: 100%; height: auto; }
.container video:where(:not(.gallery-slide video)) { max-width: 100%; height: auto; }