/* ============================================ Film grain overlay — canvas sits above all content including lightGallery (z-index 9999). ============================================ */ .grain-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; image-rendering: pixelated; z-index: 10000; mix-blend-mode: overlay; } /* ---------- Text above grain ---------- Grain canvas uses mix-blend-mode: overlay at z-index 10000, so any text below it gets blended (less legible). These rules lift every readable copy element above the canvas so grain textures imagery only, not text. grain.css loads last on every page, so these win by cascade. */ /* Already positioned in their own stylesheets — just bump z-index. */ .logo, .nav, .license-content, body.license-page > .footer, .error-404, .error-goback-link, .error-headline, .error-subtitle, .error-container .footer, .contact-social-row { z-index: 10001; } /* Statically positioned — add position:relative so z-index takes effect. */ .scroll-indicator, .footer, .section-title, .about-text, .writings-longform-title, .writings-shortform-title { position: relative; z-index: 10001; } /* ---------- Lightbox-open override ---------- lightGallery toggles .lg-on on (not body) while a gallery is open. The lifts above sit at z-index 10001, which would keep page text floating on top of the lightbox (photo/video at ~9999). Drop them back to auto while .lg-on is set so the lightbox container covers all page text. Grain stays at 10000 — still above the lightbox, still texturing the photo/video imagery. */ .lg-on .logo, .lg-on .nav, .lg-on .license-content, .lg-on .error-404, .lg-on .error-goback-link, .lg-on .error-headline, .lg-on .error-subtitle, .lg-on .error-container .footer, .lg-on .contact-social-row, .lg-on .scroll-indicator, .lg-on .footer, .lg-on .section-title, .lg-on .about-text, .lg-on .writings-longform-title, .lg-on .writings-shortform-title, .lg-on .grain-toggle { z-index: auto; } /* ---------- Grain on/off toggle ---------- Placed inside .cover-inner by grain.js. Styling mirrors .scroll-text (same size/weight/letter-spacing). ON/OFF suffix is red like the nav "s" and logo accents. Position is a first pass — easy to nudge. */ .grain-toggle { position: absolute; top: 40.86vw; /* Anchor to the right edge with a consistent 0.5vw gap — easier to reason about than a left position that shifts depending on content width. white-space:nowrap below guarantees the button never wraps regardless of label length. */ right: 0.5vw; bottom: auto; left: auto; z-index: 10001; background: #000; /* Subtle border gives the text a shape — enough to read as a button without competing with the nav / logo typography. Brightens slightly on hover to confirm it's interactive. clamp() keeps the border at 2px on every desktop viewport (≥1428px) so the box looks identical to the static-2px original. Below ~1428px it scales down via the 0.14vw middle value, so mobile no longer reads as chunky-bordered. Floor at 0.5px just so the border never disappears. */ border: clamp(0.5px, 0.14vw, 2px) solid rgba(255, 255, 255, 0.45); border-radius: clamp(0.3px, 0.09vw, 1.33px); /* Asymmetric y-padding — uppercase Futura with line-height:1 sits visually low because the line-box has more leading above cap-height than below the baseline. Less on top, more on bottom = optically centered. */ padding: 0.13vw 0.335vw 0.2vw 0.265vw; margin: 0; cursor: pointer; color: var(--text); font-family: "futura-pt", "Futura", sans-serif; font-size: 0.76vw; font-weight: 800; font-style: normal; line-height: 1; letter-spacing: -0.05vw; text-transform: uppercase; white-space: nowrap; transition: transform 0.08s ease, background-color 0.08s ease, border-color 0.15s ease; } .grain-toggle:hover { border-color: rgba(255, 255, 255, 0.8); } /* Press state — scale down + background dip makes it feel tactile. :active holds while the mouse is down (lamp-string "pull"). The .grain-toggle-pressed class is added by JS on click and removed after a short timer, so a quick tap still lingers at the bottom of the travel before springing back — like a pull-string settling. */ .grain-toggle:active, .grain-toggle-pressed { transform: scale(0.95); background: #222; } .grain-toggle-state { color: var(--red); }