/* calm.css — motion off. Applies when has the class motion-off, which is set before
the page draws (so nothing animates for even one frame) by the Motion toggle or the system
'reduce motion' setting. Nothing animates, transitions, flashes, autoplays or swaps on hover.
Every page must still make sense with all of this off. */
html.motion-off *, html.motion-off *::before, html.motion-off *::after {
animation: none !important; transition: none !important; scroll-behavior: auto !important; }
/* film headers: the still frame, not the moving glitch canvas */
html.motion-off .hgv-canvas, html.motion-off .hero-frame canvas { display: none !important; }
html.motion-off .hero-frame.hgv-live video.hero-img { visibility: visible !important; }
html.motion-off .hero-frame { cursor: default !important; }
/* the film player's screen-tearing transition */
html.motion-off .reel-shard { display: none !important; }
/* home: the drifting word cloud and its full-screen hover mosaic are replaced by a plain index */
#calmIndex { display: none; }
@media (min-width: 761px) {
html.motion-off #field, html.motion-off #tileLayer, html.motion-off #tileReveal,
html.motion-off #hoverBgLayer, html.motion-off #centerDisplay { display: none !important; }
html.motion-off #calmIndex { display: block; }
}
/* ── the still: motion-off home, frozen and composed ─────────────────────────────── */
@media (min-width: 761px) {
html.motion-off .scope-underlay, html.motion-off .grain-overlay, html.motion-off .center-name,
html.motion-off .ctag, html.motion-off a.portfolio-link { display: none !important; }
html.motion-off body .reel-bed-stack { background: transparent !important; background-image: none !important; }
}
#calmIndex { position: relative; z-index: 5; max-width: 1240px; margin: 0 auto; padding: 150px 36px 140px; }
#calmIndex .st-head { text-align: center; margin: 0 0 70px; }
#calmIndex .st-name { position: static !important; transform: none !important; display: block !important; opacity: 1 !important; margin: 0 auto; }
#calmIndex .st-name .reel-trigger { margin-top: 14px; }
#calmIndex .st-group { margin: 0 0 80px; }
#calmIndex .st-ransom { margin: 0; font-size: clamp(44px, 6vw, 84px); line-height: 1; letter-spacing: .01em; }
#calmIndex .st-ransom span { display: inline-block; }
#calmIndex .st-sub { font-family: 'Space Mono', 'JetBrains Mono', monospace; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; margin: 10px 0 26px; color: #1A1614; }
#calmIndex .st-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(0, 1fr); grid-auto-flow: dense; gap: 18px; }
#calmIndex .st-tile { aspect-ratio: 1 / 1; }
#calmIndex .st-tile.st-xl { grid-column: span 2; grid-row: span 2; }
#calmIndex .st-tile.st-wide { grid-column: span 2; aspect-ratio: 2 / 1; }
@media (max-width: 1100px) { #calmIndex .st-grid { grid-template-columns: repeat(4, 1fr); } }
#calmIndex .st-tile button { all: unset; box-sizing: border-box; position: relative; display: block; width: 100%; height: 100%; cursor: pointer;
background: #fff; border: 2px solid #1A1614; border-left: 8px solid var(--c); box-shadow: 6px 6px 0 #1A1614; overflow: hidden; }
#calmIndex .st-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
#calmIndex .st-label { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); background: #fff; border: 2px solid #1A1614;
box-shadow: 3px 3px 0 #1A1614; padding: 5px 9px; font-family: 'Space Mono', 'JetBrains Mono', monospace; font-size: 13px; line-height: 1.3; color: #1A1614; }
#calmIndex .st-label i { font-style: normal; color: var(--c); font-weight: 700; }
#calmIndex .st-label b { font-weight: 700; }
#calmIndex .st-tile button:hover, #calmIndex .st-tile button:focus-visible { outline: 4px solid var(--c); outline-offset: 4px; }
#calmIndex .st-tile button:hover .st-label b, #calmIndex .st-tile button:focus-visible .st-label b { text-decoration: underline; text-underline-offset: 3px; }
/* the animated home locks the page to one screen (overflow hidden); the still is a long page, so it must scroll */
@media (min-width: 761px) {
html.motion-off, html.motion-off body { overflow-y: auto !important; overflow-x: hidden !important; height: auto !important; min-height: 100% !important; }
}
#calmIndex .st-more { display: inline-block; margin-top: 26px; font-family: 'Space Mono', 'JetBrains Mono', monospace; font-weight: 700; font-size: 15px;
padding: 11px 18px; background: #DBFF00; color: #1A1614; border: 2px solid #1A1614; box-shadow: 4px 4px 0 #1A1614; text-decoration: none; }
#calmIndex .st-more:hover, #calmIndex .st-more:focus-visible { outline: 3px solid #1A1614; outline-offset: 3px; text-decoration: underline; }