html,body{margin:0;padding:0;background:#0a0908;color:#e6e1d8} body{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 100;-webkit-font-smoothing:antialiased} a{color:#e6e1d8;text-decoration:none} a:hover{color:#FF7A1A} a:focus-visible,button:focus-visible{outline:2px solid #FF7A1A;outline-offset:3px;border-radius:2px} ::selection{background:#FF7A1A;color:#0a0908} *{box-sizing:border-box} /* GT-002's own light. Distinct from --ui-accent (#FF7A1A) on purpose: the flagship should not share its hue with link-hover and focus rings. */ :root{--gt002:132 214 70;--ui-accent:#FF7A1A} /* Section titles are real h2/h3 for screen-reader section-jump + document outline; these resets keep their visual treatment identical to the former divs. */ h1,h2,h3{margin:0;font-size:inherit;font-weight:inherit} /* Visually hidden but announced — used to complete "GET IN TOUCH" as one heading, since the outline-styled "TOUCH" is a separate presentational line. */ /* Skip link. This is a ~6800px single page, so without it keyboard and screen reader users tab the whole nav and hero again every time focus returns to the top. Hidden until focused, then pinned over the sticky nav. */ .skip-link{position:absolute;top:-64px;left:clamp(20px,4vw,56px);z-index:20; padding:12px 18px;background:#FF7A1A;color:#0a0908;font-weight:700;font-size:14px; letter-spacing:0.04em;transition:top 0.2s cubic-bezier(0.22,1,0.36,1)} .skip-link:focus{top:12px} @media (prefers-reduced-motion:reduce){.skip-link{transition:none}} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} @media (prefers-reduced-motion:reduce){ .hero-video{display:none} } .page{background:#0a0908;min-height:100vh;position:relative;overflow-x:clip} /* 0.5px blur softens the grain so it reads as emulsion rather than pixel noise. Blur costs ~39%% of the contrast, so the transfer slope is raised 3 -> 5 and the intercept retuned -1.2 -> -2.2 to compensate: measured POST-blur mean 128.4 (dead on overlay's 128 pivot, so exposure is unchanged) at stdDev 54.8, still 2.7x the raw texture's 20.2. */ /* Grain: overlay is the correct operator — it darkens below the 0.5 pivot and lightens above it, so blacks stay black. What was broken is the TEXTURE. Raw fractalNoise measured min 89 / max 242 / stdDev 20 — clustered right on overlay's pivot, where overlay is close to a no-op, and semi-transparent (alpha 23-232) on top of that. The feComponentTransfer below expands it to the full 0-255 range at stdDev ~70 (3.4x the contrast) with alpha locked opaque, and slope/intercept are tuned so the mean lands at ~133 — near the 128 pivot, so the grain adds texture without shifting overall exposure. */ .grain{ position:fixed;inset:0;z-index:50;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='5' intercept='-2.2'/%3E%3CfeFuncG type='linear' slope='5' intercept='-2.2'/%3E%3CfeFuncB type='linear' slope='5' intercept='-2.2'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:240px 240px;opacity:0.07;mix-blend-mode:overlay; filter:blur(0.5px); } /* Scroll reveals. Gated behind .js (set by an inline script in ) so that with JS off or broken nothing is ever left invisible - the content simply renders normally. Transform+opacity only, both compositor-friendly, so this does not cause layout work while scrolling. */ .js [data-reveal]{opacity:0;transform:translateY(22px); transition:opacity 0.9s cubic-bezier(0.16,1,0.3,1),transform 0.9s cubic-bezier(0.16,1,0.3,1); transition-delay:var(--d,0ms)} .js [data-reveal="fade"]{transform:none} /* Failsafe: script.js never announced itself, so show everything rather than leaving the page blank. */ .js.reveals-failed [data-reveal]{opacity:1;transform:none;transition:none} .js [data-reveal].is-in{opacity:1;transform:none} /* Motion is the whole point here, so reduced-motion gets no animation at all rather than a shortened one. */ @media (prefers-reduced-motion:reduce){ .js [data-reveal]{opacity:1;transform:none;transition:none} } /* Nav */ /* Sticky so Contact/About stay reachable from anywhere on a ~5500px page. Scrim + blur keeps the wordmark legible over full-bleed hero imagery. */ .filter-defs{position:absolute;width:0;height:0;overflow:hidden} /* Glass strip. The bar itself is transparent and carries no filter: the effect is built from stacked stages inside .nav-glass, each sampling the composited result beneath it. The tint has to sit ON TOP of those stages rather than on .nav, because a background on .nav paints behind its own children - the stages would then be sampling near-black and there would be nothing to refract. */ .nav{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 32px;padding:20px clamp(20px,4vw,56px);border-bottom:1px solid rgba(230,225,216,0.22);position:sticky;top:0;z-index:5;background:transparent} .nav-glass{position:absolute;inset:0;pointer-events:none} .nav-glass__stage,.nav-glass__edge{position:absolute;inset:0} /* What everyone gets before script.js runs, and what engines without SVG filters in backdrop-filter keep permanently: today's plain frosted bar. The JS upgrades this one stage to the measured filter chain and leaves it alone otherwise, so a blocked or stale script degrades to the old look rather than to clear glass. */ .nav-glass__base{backdrop-filter:blur(14px) saturate(1.7);-webkit-backdrop-filter:blur(14px) saturate(1.7)} /* 0.60, not the reference's 0.20. Measured against the brightest region of every image that scrolls under the bar - s1002.jpg, relative luminance 0.942 after a 4px blur - cream nav text needs 0.60 to clear 4.5:1 (it lands at 4.61:1). The reference value would give 1.4:1. The brief calls the tint adjustable and the displacement fixed, so this is the parameter that gives. */ .nav-glass__tint{position:absolute;inset:0;background:rgba(10,9,8,0.60)} /* The glass stages are absolutely positioned, so they paint above any static in-flow content - which is the nav's own text. pointer-events:none hides this from hit-testing, so the links still respond while the wordmark sits blurred and displaced underneath; it has to be caught by eye, not by a click test. Stating it here rather than relying on the tap-target rule further down, which lifts .logo and the links for an unrelated reason and would take the nav with it if anyone removed it. */ .nav > :not(.nav-glass){position:relative} /* Specular edges: a bright lip along the top and a catch along the bottom, the two places light collects on a real pane. */ .nav::before,.nav::after{content:"";position:absolute;left:0;right:0;height:1px;pointer-events:none} .nav::before{top:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.28) 22%,rgba(255,255,255,0.10) 62%,transparent)} .nav::after{bottom:-1px;background:linear-gradient(90deg,transparent,rgba(255,122,26,0.20) 38%,transparent 78%)} /* Anchor targets must clear the sticky nav (~62px) instead of hiding under it. */ #work,#about,#contact,#gt-002-film,#more{scroll-margin-top:72px} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} .logo{font-weight:900;font-size:15px;letter-spacing:0.14em;font-variation-settings:'wdth' 118} .spacer{flex:1} .nav-links{display:flex;gap:clamp(16px,3vw,40px);font-size:13px;letter-spacing:0.18em;font-weight:600} /* Below ~480px the logo + 3 links no longer fit one row; let the links wrap onto their own full-width row instead of clipping off-screen. */ @media (max-width:480px){ .nav{gap:10px 20px} .spacer{display:none;flex-basis:100%} .nav-links{flex-basis:100%;gap:20px} } .fill{position:absolute;inset:0} /* Placeholder for unfilled imagery — replace with real /