/* The chosen gallery, with the complete style collection tucked behind a duck. */
.project-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.collection+.collection{margin-top:52px}
.collection-heading{gap:20px;padding-bottom:18px}
.collection-heading h2{font-family:var(--font);font-size:14px;font-weight:600;line-height:1.5;letter-spacing:.1em}
.brand-preview{display:flex;align-items:center;justify-content:center;gap:18px;min-height:120px}
.brand-preview img{flex-shrink:0;border-radius:22%;box-shadow:0 8px 24px #082b4f26}
.brand-preview>span{font:600 clamp(1.7rem,2.7vw,2.3rem)/1.05 var(--display);letter-spacing:-.04em}
.brand-subline{display:block;font:400 14px/1.5 var(--font);letter-spacing:.02em;margin-top:5px}
.fraction-diagram{display:block;width:100%;height:calc(100% - 40px);min-height:0}
.coming-soon{display:inline-block;font-size:12px;font-weight:400;margin-left:7px;color:var(--muted)}
.intro-copy[data-edit-field],.card-body>p[data-edit-field]{white-space:pre-line}
.coming-soon:empty{display:none}
.edit-content-link{text-decoration:none;display:inline-flex;align-items:center}
@media(min-width:541px) and (max-width:700px){.brand-preview{flex-direction:column;gap:10px}.brand-preview img{width:64px;height:64px}.brand-preview>span{font-size:1.45rem;text-align:center}.brand-subline{margin-top:2px}}
.project-number{font-size:12px}
.card-body{padding-inline:19px}
.project-card h3{font-size:1.7rem}
.ocean-project{pointer-events:auto;text-align:left}
.ocean-project .project-visual{width:100%;text-align:left;font:inherit;cursor:pointer}
.ocean-project .visual-water{--visual-bg:#27677c;--visual-ink:#f1fbff;background:linear-gradient(#09364d3b,#06334942),url('/assets/vast-ocean.png') center/cover;color:var(--visual-ink)}
.water-play{display:grid;place-items:center;width:54px;height:54px;border:1px solid #f1fbffd9;background:#123d5885;border-radius:50%;font-size:20px;align-self:center;box-shadow:0 5px 18px #082b4f45;backdrop-filter:blur(8px)}
.ocean-project .project-visual:hover .water-play{background:#e9fbff36;transform:scale(1.05)}
.water-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:0;border:0;background:none;color:inherit;text-align:left;font:inherit;cursor:pointer;min-height:34px}
.water-toggle:hover>span:first-child{text-decoration:underline;text-underline-offset:4px}
/* Ocean Alive, running: the page fades away, leaving the ocean and a small panel of water controls. */
.site-surface,.duck-switch,.tuner{transition:opacity .7s ease,visibility 0s}
[data-water-view="true"] :is(.site-surface,.duck-switch,.tuner){opacity:0;visibility:hidden;transition:opacity .7s ease,visibility 0s .7s}
[data-water-view="true"] body{overflow:hidden;touch-action:none}
.water-panel{position:fixed;top:16px;right:16px;z-index:9;width:min(290px,calc(100% - 32px));padding:15px 17px 14px;border:1px solid #e4f5ff6b;border-radius:18px;background:#0f2a40c2;color:#edf9ff;backdrop-filter:blur(18px) saturate(120%);box-shadow:0 10px 30px #051a2c4d;font:14px/1.4 "Segoe UI",Arial,sans-serif;animation:water-panel-in .6s ease .25s both}
.water-panel:focus{outline:none}
.water-panel :focus-visible{outline:2px solid #baf5ff;outline-offset:3px}
@keyframes water-panel-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.water-sliders label{display:flex;justify-content:space-between;gap:8px;align-items:baseline;font-size:13px;font-weight:600;line-height:1.4;margin-bottom:7px}
.water-sliders output{font-size:12px;font-weight:400;color:#bdd7e5}
.water-sliders input{display:block;width:100%;margin:0;height:24px;cursor:pointer;accent-color:#8fdcf3}
#water-color,#water-time{--water-thumb:#286f99;appearance:none;-webkit-appearance:none;background:transparent}
#water-color::-webkit-slider-runnable-track{height:7px;border-radius:6px;background:linear-gradient(90deg,#32b5a9,#259aba 42%,#376ccc 70%,#3d438c)}
#water-color::-moz-range-track{height:7px;border-radius:6px;background:linear-gradient(90deg,#32b5a9,#259aba 42%,#376ccc 70%,#3d438c)}
#water-time::-webkit-slider-runnable-track{height:7px;border-radius:6px;background:linear-gradient(90deg,#8fc9ea,#f4c27a 38%,#e07b52 60%,#6a4a7c 80%,#0d1633)}
#water-time::-moz-range-track{height:7px;border-radius:6px;background:linear-gradient(90deg,#8fc9ea,#f4c27a 38%,#e07b52 60%,#6a4a7c 80%,#0d1633)}
#water-color::-webkit-slider-thumb,#water-time::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:18px;height:18px;margin-top:-5.5px;border:2px solid #fff;border-radius:50%;background:var(--water-thumb);box-shadow:0 1px 5px #14364b66}
#water-color::-moz-range-thumb,#water-time::-moz-range-thumb{width:15px;height:15px;border:2px solid #fff;border-radius:50%;background:var(--water-thumb);box-shadow:0 1px 5px #14364b66}
.slider-endpoints{display:flex;justify-content:space-between;font-size:11px;color:#bdd7e5;margin:1px 0 12px}
.water-panel-bar{display:flex;gap:8px}
.water-stop,.water-fold{min-height:38px;border:1px solid #bcd9e04f;border-radius:10px;background:#e1f7ff1c;color:#effaff;font:inherit;cursor:pointer}
.water-stop{flex:1;padding:8px 12px}
.water-fold{flex:none;display:grid;place-items:center;width:38px;padding:0}
.water-fold::before{content:"";width:8px;height:8px;border:solid currentColor;border-width:2px 0 0 2px;transform:translateY(2px) rotate(45deg)}
.water-fold[aria-expanded="false"]::before{transform:translateY(-2px) rotate(225deg)}
.water-stop:hover,.water-fold:hover{background:#c9eefa38}
.water-status{font-size:12px;color:#cfe6f1;margin:10px 0 0}
.water-status:empty{display:none}
.water-sliders{margin-top:14px}
.water-tip{font-size:12px;color:#cfe6f1;margin:2px 0 0}
@media(max-width:540px){.water-panel{top:10px;right:10px;width:calc(100% - 20px);padding:12px 14px}.slider-endpoints{margin-bottom:8px}}
.duck-switch{position:fixed;right:16px;bottom:14px;z-index:8;display:grid;place-items:center;width:48px;height:48px;border:0;background:none;padding:6px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.duck-switch img{width:36px;height:36px;object-fit:contain;transform:scale(var(--duck-scale,1));transform-origin:70% 85%;filter:drop-shadow(0 3px 3px #15375140);pointer-events:auto;user-select:none}
.duck-switch:focus-visible{outline:2px solid #ffd848;outline-offset:3px;border-radius:50%}
[data-theme="vastocean"] .site-surface{background:transparent;z-index:1;pointer-events:none;min-height:100vh}
[data-theme="vastocean"] .site-surface a,[data-theme="vastocean"] .ocean-project{pointer-events:auto}
[data-theme="vastocean"] .ocean-backdrop{background:linear-gradient(#b6e0ea17,#0b537b1f),url('/assets/vast-ocean.png') center/cover}
[data-theme="vastocean"] #ocean-canvas{transition:opacity 1.1s ease}
[data-theme="vastocean"][data-water-on="false"] #ocean-canvas{opacity:0}
[data-theme="vastocean"] .ocean-controls{display:none}
[data-theme="vastocean"] .card-body{padding:23px 13px 13px}
[data-theme="vastocean"] .project-card h3{font-size:1.7rem}
.project-grid>.ocean-project .project-visual{flex-shrink:0}
@media(max-width:1000px){.project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}.project-card h3{font-size:1.8rem}}
@media(max-width:800px){.project-grid>.project-card:last-child{display:flex;grid-column:auto}.project-grid>.project-card:last-child .project-visual{height:var(--visual-height);min-height:0;border-right:0}.duck-switch{right:10px;bottom:10px}.ocean-controls{max-width:calc(100% - 86px);left:12px;transform:none}}
@media(max-width:540px){.project-grid{grid-template-columns:1fr}.collection+.collection{margin-top:38px}.collection-heading h2{font-size:13px;letter-spacing:.04em}.collection-count{flex-shrink:0;font-size:12px}.ocean-controls{width:calc(100% - 82px)}.project-grid>.project-card:last-child .project-visual{border-bottom:var(--border)}}
@media(prefers-reduced-motion:reduce){[data-theme="vastocean"] #ocean-canvas{transition:none}.ocean-project .project-visual:hover .water-play{transform:none}.site-surface,.duck-switch,.tuner,[data-water-view="true"] :is(.site-surface,.duck-switch,.tuner){transition:none}.water-panel{animation:none}}
@media(forced-colors:active){.duck-switch{background:Canvas;border:1px solid ButtonText;border-radius:50%}.water-toggle,.water-play{color:ButtonText;border:1px solid ButtonText}.water-sliders input{forced-color-adjust:auto}#water-color,#water-time{appearance:auto}.water-panel{background:Canvas;color:CanvasText;border:1px solid CanvasText;backdrop-filter:none}.water-sliders output,.slider-endpoints,.water-status,.water-tip{color:CanvasText}.water-stop,.water-fold{background:ButtonFace;color:ButtonText;border:1px solid ButtonText}}
.header-links{display:flex;align-items:center;justify-content:flex-end;gap:clamp(12px,3vw,32px);flex-wrap:wrap}
.project-card>h3{padding:20px 19px 17px;margin:0;flex-shrink:0}
/* Preserve artwork placement while hiding top and bottom image overlays. */
.project-card .project-visual :is(.visual-top,.visual-bottom){visibility:hidden;pointer-events:none}
.discovery-diagram{display:block;width:100%;height:calc(100% - 40px);min-height:0}
@media(max-width:600px){.header-links{gap:10px;font-size:.8rem}}
.visual-terminal{background:#071e18;color:#85f6a9;isolation:isolate}
.visual-terminal:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(transparent 0 3px,#0002 3px 4px);pointer-events:none;z-index:-1}
.terminal-preview{margin:14px 0;font:clamp(10px,1.1vw,13px)/1.7 Consolas,monospace;white-space:pre-wrap;text-shadow:0 0 9px #60ff9866}
.terminal-cursor{color:#e4ffe8}
.terminal-stamp{display:inline-block;color:#ffb7a5;border:2px solid currentColor;padding:5px 9px;transform:rotate(-7deg);font:800 14px/1.1 Consolas,monospace;letter-spacing:.12em;box-shadow:inset 0 0 0 2px #071e18,inset 0 0 0 3px currentColor}
.spacetime-diagram{display:block;width:100%;height:calc(100% - 40px);min-height:0}
/* Keep featured media within its card when the two-column layout collapses. */
.project-card[data-featured="true"]{min-inline-size:0;overflow:hidden}
.project-card[data-featured="true"] .project-visual{inline-size:100%;max-inline-size:100%;min-inline-size:0;box-sizing:border-box;overflow:hidden}
@media(min-width:541px){.project-grid>.project-card[data-featured="true"]{grid-column:span 2}}

/* Articles use half the desktop gallery width (1.5 normal cards), one per row on small screens. */
[aria-labelledby="media-title"]{--project-scene:url('/assets/paper-studies/captured/media.webp')}
.visual-media{background:#080d17 var(--project-scene) center/cover no-repeat}

.collection[aria-labelledby="articles-title"] .project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.collection[aria-labelledby="articles-title"] .project-card{display:flex;grid-column:auto}
.collection[aria-labelledby="articles-title"] .project-grid > .project-card .project-visual{width:100%;max-width:100%;min-width:0;height:auto;min-height:0;aspect-ratio:72/31;padding:0;box-sizing:border-box;border-right:0;overflow:hidden;background-size:cover;background-position:center}
@media(max-width:800px){.collection[aria-labelledby="articles-title"] .project-grid{grid-template-columns:minmax(0,1fr)}}

/* Cellscape is a wide window into the simulation in every lab style. */
[aria-labelledby="cellscape-title"]{--project-scene:url('/assets/paper-studies/captured/cellscape-powers-07.webp')}
[aria-labelledby="cellscape-title"] .project-visual{background:#113b5c var(--project-scene) center/cover no-repeat;aspect-ratio:16/7;height:auto;min-height:0;padding:0}
[aria-labelledby="cellscape-title"] .project-open span{text-wrap:balance}

/* Big Talk retains its conversation-card artwork across the lab. */
[aria-labelledby="bigtalk-title"]{--project-scene:url('/assets/paper-studies/remixed/bigtalk.webp')}
[aria-labelledby="bigtalk-title"] .project-visual{background:#0d0a12 var(--project-scene) center/cover no-repeat}
