/* rtfx.space — site CSS, generated from RT/FX design system (brand kit v0.4, P1 Signal) */ /* fonts are linked from each page (preconnect + stylesheet) rather than @imported here - an @import can only start after this file has arrived, which put the font files a full round trip behind first paint */ :root{ --c-bg:#000000;--c-panel:#0A0A0A;--c-raise:#141414; --c-rule:#262626;--c-rule-soft:#1A1A1A; --c-ink:#FAFAFA;--c-ink-2:#A3A3A3;--c-ink-3:#6E6E6E; --c-accent:#FFB020;--c-accent-2:#FFD9A0;--c-live:#FF8A00;--c-on-accent:#000000; --c-ok:#3DDC6B;--c-no:#FF4D4D; --f-display:'Martian Mono',ui-monospace,monospace; --f-body:'Space Grotesk',system-ui,sans-serif; --t-display-xl:clamp(38px,7vw,88px);--t-display-l:clamp(28px,4.4vw,54px);--t-display-m:clamp(21px,2.9vw,34px); --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px; --gutter:clamp(20px,4vw,64px);--measure:64ch; --chamfer:12px;--chamfer-sm:7px; --m-snap:160ms;--m-draw:340ms;--e-snap:steps(3);--e-draw:cubic-bezier(.16,1,.3,1); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background:var(--c-bg);color:var(--c-ink);font-family:var(--f-body);font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased} a{color:var(--c-accent)} a:hover{color:var(--c-accent-2)} ::selection{background:var(--c-accent);color:var(--c-on-accent)} :focus-visible{outline:2px solid var(--c-accent);outline-offset:3px} img,video{max-width:100%;display:block} .ph{display:block;position:relative} @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important}html{scroll-behavior:auto}} /* type */ .display-xl{font-family:var(--f-display);font-weight:700;font-size:var(--t-display-xl);letter-spacing:-.055em;line-height:.9;text-wrap:balance} .display-l{font-family:var(--f-display);font-weight:700;font-size:var(--t-display-l);letter-spacing:-.05em;line-height:1;text-wrap:balance} .display-m{font-family:var(--f-display);font-weight:600;font-size:var(--t-display-m);letter-spacing:-.045em;line-height:1.08;text-wrap:balance} .heading{font-family:var(--f-display);font-weight:600;font-size:18px;letter-spacing:-.035em} .body-s{font-size:13px;line-height:1.6;color:var(--c-ink-2)} .data{font-family:var(--f-display);font-size:12.5px;letter-spacing:-.01em} .label{font-family:var(--f-display);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--c-ink-3)} .micro{font-family:var(--f-display);font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--c-ink-3)} p{text-wrap:pretty} /* geometry */ .chamfer{clip-path:polygon(var(--chamfer) 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%,0 var(--chamfer))} .chamfer-sm{clip-path:polygon(var(--chamfer-sm) 0,100% 0,100% calc(100% - var(--chamfer-sm)),calc(100% - var(--chamfer-sm)) 100%,0 100%,0 var(--chamfer-sm))} .cham-box{background:var(--c-rule);padding:1px} .cham-box>.in{background:var(--c-panel);height:100%} .tickrule{height:14px;background-image:repeating-linear-gradient(90deg,var(--c-ink-3) 0 1px,transparent 1px 8px),repeating-linear-gradient(90deg,var(--c-accent) 0 1px,transparent 1px 40px);background-size:100% 5px,100% 10px;background-repeat:repeat-x} .inline-fx{position:relative} .inline-fx::after{content:"";position:absolute;inset:5px;border:1px solid rgba(255,255,255,.22);pointer-events:none;opacity:0;transition:opacity var(--m-snap)} .inline-fx:hover::after,.inline-fx:focus-visible::after{opacity:1} .bg-grid{background-image:linear-gradient(to right,rgba(255,255,255,.026) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.026) 1px,transparent 1px);background-size:64px 64px} /* layout */ .wrap{max-width:1320px;margin:0 auto;padding:0 var(--gutter);position:relative;z-index:1} .row{display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:center} .skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--c-accent);color:var(--c-on-accent);font-family:var(--f-display);font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:12px 22px;text-decoration:none} .skip:focus{left:0;color:var(--c-on-accent)} section{padding:var(--s-8) 0;border-bottom:1px solid var(--c-rule-soft)} /* anchor targets clear the sticky topbar instead of sliding under it */ main [id]{scroll-margin-top:72px} section:last-of-type{border-bottom:none} .sec-head{margin-bottom:var(--s-7);display:flex;gap:var(--s-4);align-items:baseline;flex-wrap:wrap} .sec-num{font-family:var(--f-display);font-size:11px;letter-spacing:.2em;color:var(--c-accent);font-weight:600} .sec-head h2{flex-basis:100%;max-width:24ch} .sec-head .sec-t{display:flex;gap:var(--s-4);align-items:baseline;flex-wrap:wrap;flex:1;min-width:min(100%,420px)} /* centered against the kicker+heading block — baseline (the parent default) would hang the note off the kicker's cap line, reading as misaligned */ .sec-note{color:var(--c-ink-2);font-size:13px;max-width:66ch;margin-top:var(--s-2);align-self:center} .sec-side{margin-left:auto} /* topbar */ .topbar{position:sticky;top:0;z-index:60;background:rgba(0,0,0,.92);backdrop-filter:blur(14px)} .topbar-in{max-width:1320px;margin:0 auto;padding:13px var(--gutter);display:flex;align-items:flex-end;gap:var(--s-5);flex-wrap:wrap} .tb-logo img{height:22px;width:auto} .tb-logo{padding-bottom:9px} .topbar nav{display:flex;gap:var(--s-4);flex-wrap:wrap;justify-content:center} .topbar nav a{font-family:var(--f-display);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--c-ink-2);text-decoration:none;padding:8px 0} .topbar nav a:hover{color:var(--c-ink)} .topbar nav a[aria-current]{color:var(--c-accent)} .tb-right{margin-left:auto} /* phones: one bar, one row. The nav becomes a horizontal strip that scrolls under a fade instead of wrapping - wrapped, the sticky bar was eating a quarter of the viewport on every page. The count chip goes; it is décor. */ @media (max-width:640px){ .topbar-in{flex-wrap:nowrap;align-items:center;gap:var(--s-4);padding:6px var(--gutter)} .tb-logo{padding-bottom:0;flex:none;display:flex} .tb-logo img{height:18px} .topbar nav{flex:1;min-width:0;flex-wrap:nowrap;justify-content:flex-start;gap:10px;overflow-x:auto;scrollbar-width:none;padding-right:28px;mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)} .topbar nav::-webkit-scrollbar{display:none} .topbar nav a{font-size:10.5px;letter-spacing:.08em;padding:12px 0;white-space:nowrap} .topbar .tb-right{display:none} .topbar-in>nav:only-child{margin:0} } /* status + tags + buttons */ .status{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-display);font-size:10px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none} .status .dot{width:7px;height:7px;background:currentColor;flex:none} .st-live{color:var(--c-live)}.st-ok{color:var(--c-accent-2)}.st-idle{color:var(--c-ink-3)} .tag{font-family:var(--f-display);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;background:var(--c-raise);color:var(--c-ink-2);clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)} .tag--accent{background:transparent;color:var(--c-accent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c-accent) 45%,transparent)} .btn{font-family:var(--f-display);font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;padding:12px 22px;border:1px solid var(--c-accent);background:transparent;color:var(--c-accent);cursor:pointer;transition:background var(--m-snap),color var(--m-snap),border-color var(--m-snap);display:inline-flex;align-items:center;gap:8px;text-decoration:none;clip-path:polygon(var(--chamfer-sm) 0,100% 0,100% calc(100% - var(--chamfer-sm)),calc(100% - var(--chamfer-sm)) 100%,0 100%,0 var(--chamfer-sm))} .btn:hover{background:var(--c-accent);color:var(--c-on-accent)} .btn--fill{background:var(--c-accent);color:var(--c-on-accent)} .btn--fill:hover{background:var(--c-accent-2);color:var(--c-on-accent)} .btn--ghost{border-color:var(--c-rule);color:var(--c-ink-2)} .btn--ghost:hover{background:transparent;border-color:var(--c-ink);color:var(--c-ink)} /* hero */ .hero{padding:var(--s-9) 0 var(--s-8)} .hero .label{display:block;margin-bottom:var(--s-6)} .hero .sub{max-width:var(--measure);margin-top:var(--s-5);color:var(--c-ink-2);font-size:17px} .hero .row{margin-top:var(--s-6)} .hero .tickrule{margin-top:var(--s-7)} /* work cards */ .grid-work{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--s-5)} .work{--signal-angle:-45deg;display:block;text-decoration:none;color:inherit;background:var(--c-rule);padding:1px;position:relative;isolation:isolate;clip-path:polygon(var(--chamfer) 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%,0 var(--chamfer));transition:background var(--m-snap),transform var(--m-draw) var(--e-draw)} .work[data-signal-corner="rt"]{--signal-angle:45deg}.work[data-signal-corner="rb"]{--signal-angle:135deg}.work[data-signal-corner="lb"]{--signal-angle:225deg} .work::before{content:"";position:absolute;inset:0;z-index:4;padding:1px;pointer-events:none;opacity:0;background:conic-gradient(from var(--signal-angle),transparent 0 42%,rgba(255,176,32,.1) 55%,var(--c-accent) 70%,#fff4df 73%,var(--c-accent) 77%,transparent 90%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude} .work:hover,.work:focus-visible{background:var(--c-accent);color:inherit;transform:translateY(-2px)} .work:hover::before,.work:focus-visible::before{animation:xroute-border 680ms var(--e-draw) both} .work .inner{display:block;background:var(--c-panel);height:100%;position:relative;z-index:1;clip-path:polygon(var(--chamfer) 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%,0 var(--chamfer))} .work .thumb{display:block;aspect-ratio:16/10;background:repeating-linear-gradient(135deg,#0E0E0E 0 12px,#121212 12px 24px);position:relative;overflow:hidden} .work .thumb img{width:100%;height:100%;object-fit:cover;transition:transform 720ms var(--e-draw),filter 520ms var(--e-draw)} .work:hover .thumb img,.work:focus-visible .thumb img{transform:scale(1.025);filter:saturate(.82) contrast(1.15) brightness(.7)} .work .signal-layer{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;background-image:linear-gradient(rgba(255,176,32,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,176,32,.06) 1px,transparent 1px);background-size:24px 24px;transition:opacity 180ms ease} .work .signal-layer svg{width:100%;height:100%;display:block;overflow:visible;filter:drop-shadow(0 0 5px rgba(255,176,32,.42))} .work .signal-trace,.work .signal-mark{fill:none;stroke:var(--c-accent);stroke-linecap:square;stroke-linejoin:miter;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1} .work .signal-trace{stroke-width:1;opacity:.82}.work .signal-mark{stroke-width:1.6;stroke:#fff4df} .work .signal-node{fill:var(--c-accent);stroke:#fff4df;stroke-width:.45;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;transform:scale(0)} .work .signal-scan{position:absolute;z-index:3;pointer-events:none;top:0;bottom:0;width:12%;left:-18%;opacity:0;transform:skewX(-16deg);background:linear-gradient(90deg,transparent,rgba(255,217,160,.2),rgba(255,255,255,.48),rgba(255,176,32,.16),transparent);mix-blend-mode:screen;filter:blur(.2px)} .work:hover .signal-layer,.work:focus-visible .signal-layer{opacity:1} .work:hover .signal-trace,.work:focus-visible .signal-trace{animation:xroute-draw 560ms var(--e-draw) forwards} .work:hover .signal-mark,.work:focus-visible .signal-mark{animation:xroute-draw 420ms 160ms var(--e-draw) forwards} .work:hover .signal-node,.work:focus-visible .signal-node{animation:xroute-node 380ms var(--signal-delay,260ms) var(--e-draw) forwards} .work:hover .signal-scan,.work:focus-visible .signal-scan{animation:xroute-scan 760ms 70ms var(--e-draw) forwards} .work .idx{position:absolute;top:12px;left:14px;font-family:var(--f-display);font-size:9.5px;letter-spacing:.18em;color:var(--c-ink);text-shadow:0 1px 4px rgba(0,0,0,.8)} .work .st{position:absolute;top:10px;right:14px;text-shadow:0 1px 4px rgba(0,0,0,.8)} .work .meat{display:block;padding:var(--s-4)} .work .cat{display:block;margin-bottom:8px} .work .wt{display:block;font-family:var(--f-display);font-size:15px;font-weight:600;letter-spacing:-.04em;margin-bottom:6px} .work .wd{display:block;font-size:12.5px;color:var(--c-ink-3);line-height:1.55;margin-bottom:var(--s-3)} .work .go{display:block;margin-top:var(--s-3);font-family:var(--f-display);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--c-accent);transition:color var(--m-snap),text-shadow var(--m-snap)} .work .arrow{display:inline-block;transition:transform var(--m-snap) var(--e-snap)} .work:hover .arrow{transform:translateX(4px)} .work:hover .go,.work:focus-visible .go{color:var(--c-accent-2);text-shadow:0 0 12px rgba(255,176,32,.32)} @keyframes xroute-border{0%{opacity:0;filter:brightness(.6)}34%{opacity:1}72%{opacity:1;filter:brightness(1.45)}100%{opacity:.72;filter:brightness(1)}} @keyframes xroute-draw{to{stroke-dashoffset:0}} @keyframes xroute-node{0%{transform:scale(0)}65%{transform:scale(1.65)}100%{transform:scale(1)}} @keyframes xroute-scan{0%{left:-18%;opacity:0}18%{opacity:1}72%{opacity:.72}100%{left:112%;opacity:0}} /* teaser strip */ .teaser{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s-3)} .teaser figure{margin:0} .teaser .ph{aspect-ratio:16/10;overflow:hidden;background:var(--c-panel)} .teaser img{width:100%;height:100%;object-fit:cover} .teaser figcaption{margin-top:8px} /* practice */ /* cell grids draw their own dividers (a 1px shadow off each cell's top and left edge, the outer ones clipped by the container) instead of showing a filled gap - the gap trick left a blank "ghost cell" wherever a row did not fill, most visibly on phones where three cells sit in two columns */ .grid-practice{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0;border:1px solid var(--c-rule-soft);overflow:hidden;margin-bottom:var(--s-5)} .grid-practice>div{background:var(--c-panel);padding:var(--s-5);box-shadow:-1px 0 0 0 var(--c-rule-soft),0 -1px 0 0 var(--c-rule-soft)} .grid-practice .label{display:block;margin-bottom:var(--s-3);color:var(--c-accent)} .grid-practice .heading{display:block;margin-bottom:8px} /* experience */ .xp-group{margin-bottom:var(--s-6)} .xp-group>.label{display:block;margin-bottom:var(--s-3);color:var(--c-accent-2)} .xp{list-style:none} .xp li{border-bottom:1px solid var(--c-rule-soft)} .xp .xrow{display:grid;grid-template-columns:34px 1fr auto;gap:var(--s-3);align-items:baseline;padding:13px 0;color:inherit;text-decoration:none} a.xrow:hover .xt{color:var(--c-accent-2)} .xp .xn{font-family:var(--f-display);font-size:9.5px;letter-spacing:.18em;color:var(--c-ink-3)} .xp .xt{font-family:var(--f-display);font-size:13px;font-weight:600;letter-spacing:-.03em;color:var(--c-ink);transition:color var(--m-snap)} .xp .xr{display:block;font-size:12px;color:var(--c-ink-3);margin-top:2px} .xp .xgo{font-family:var(--f-display);font-size:10px;color:var(--c-accent);white-space:nowrap} /* contact + form */ .contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:var(--s-7);align-items:start} form .field{display:grid;gap:7px;margin-bottom:var(--s-4)} input,textarea{width:100%;background:var(--c-panel);border:1px solid var(--c-rule);color:var(--c-ink);font-family:var(--f-body);font-size:14px;padding:12px 14px;transition:border-color var(--m-snap)} input:hover,textarea:hover{border-color:var(--c-ink-3)} input:focus,textarea:focus{outline:none;border-color:var(--c-accent)} textarea{min-height:120px;resize:vertical} .hp{position:absolute;left:-9999px} .spec-inline{margin-top:var(--s-6)} /* spec grid */ .csh-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:0;overflow:hidden} .csh-cell{background:var(--c-bg);padding:var(--s-4) var(--s-4) var(--s-4) 0;box-shadow:-1px 0 0 0 var(--c-rule-soft),0 -1px 0 0 var(--c-rule-soft)} .csh-cell .k{font-family:var(--f-display);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--c-ink-3);display:block;margin-bottom:7px} .csh-cell .v{font-family:var(--f-display);font-size:13px;letter-spacing:-.03em;color:var(--c-ink);font-weight:500} /* case pages */ .case-hero{padding:var(--s-7) 0 var(--s-8);border-bottom:1px solid var(--c-rule-soft)} .case-hero .crumb{display:block;margin-bottom:var(--s-5)} .case-hero .crumb a{color:var(--c-ink-3);text-decoration:none} .case-hero .crumb a:hover{color:var(--c-ink)} .case-hero h1{margin-bottom:var(--s-3)} .case-hero .tagline{color:var(--c-ink-2);font-family:var(--f-display);font-size:15px;letter-spacing:-.02em;margin-bottom:var(--s-5)} .case-hero .tickrule{margin:var(--s-5) 0} .hero-media{margin-top:var(--s-6)} .hero-media .ph{aspect-ratio:16/8.4;overflow:hidden;background:var(--c-panel)} .hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover} .hero-media figcaption{margin-top:8px} .lede{font-size:clamp(17px,2vw,22px);line-height:1.45;color:var(--c-ink);max-width:52ch;text-wrap:pretty} .ovw{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s-5);margin-top:var(--s-7)} .ovw .k{display:block;margin-bottom:var(--s-2);color:var(--c-accent)} .ovw p{font-size:13.5px;color:var(--c-ink-2)} .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;border:1px solid var(--c-rule-soft);overflow:hidden;margin-top:var(--s-7)} .stats>div{background:var(--c-panel);padding:var(--s-4);box-shadow:-1px 0 0 0 var(--c-rule-soft),0 -1px 0 0 var(--c-rule-soft)} .stats b{display:block;font-family:var(--f-display);font-size:clamp(20px,2.4vw,30px);font-weight:700;letter-spacing:-.05em;color:var(--c-accent);margin-bottom:4px} .stats span{font-family:var(--f-display);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-ink-3)} /* galleries */ .gal{position:relative} .gal .track{display:flex;gap:var(--s-3);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px} .gal .track::-webkit-scrollbar{display:none} .gal figure{flex:0 0 min(720px,86%);scroll-snap-align:start;margin:0} .gal .ph{aspect-ratio:16/9;overflow:hidden;background:var(--c-panel)} .gal img,.gal video{width:100%;height:100%;object-fit:cover} .gal figcaption{margin-top:8px} .gnav{display:flex;gap:var(--s-2)} .gnav button{font-family:var(--f-display);font-size:12px;width:38px;height:32px;background:transparent;border:1px solid var(--c-rule);color:var(--c-ink-2);cursor:pointer;clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);transition:border-color var(--m-snap),color var(--m-snap)} .gnav button:hover{border-color:var(--c-accent);color:var(--c-accent)} /* video figure */ .vid{position:relative;margin:0} .vid .vplay{position:absolute;left:12px;bottom:12px;z-index:2;font-family:var(--f-display);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;padding:8px 14px;background:rgba(0,0,0,.72);border:1px solid var(--c-rule);color:var(--c-ink);cursor:pointer;clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)} .vid .vplay:hover{border-color:var(--c-accent);color:var(--c-accent)} .vid .ph{position:relative} /* grids of figures */ .fig-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:var(--s-5)} .fig-grid figure{margin:0} .fig-grid .ph{aspect-ratio:16/9;overflow:hidden;background:var(--c-panel)} .fig-grid img,.fig-grid video{width:100%;height:100%;object-fit:cover} .fig-grid figcaption{margin-top:8px;font-size:12px;color:var(--c-ink-3);font-style:italic} figcaption em,figcaption i{color:var(--c-ink-3)} /* rules list */ .rules{list-style:none;counter-reset:rule} .rules li{counter-increment:rule;padding:var(--s-4) 0 var(--s-4) 52px;border-bottom:1px solid var(--c-rule-soft);position:relative} .rules li::before{content:"0" counter(rule);position:absolute;left:0;top:var(--s-4);font-family:var(--f-display);font-size:11px;letter-spacing:.18em;color:var(--c-accent)} .rules b{display:block;font-family:var(--f-display);font-size:14px;font-weight:600;letter-spacing:-.03em;margin-bottom:4px} .rules p{font-size:13px;color:var(--c-ink-2)} /* diagram */ .diag{border:1px solid var(--c-rule-soft);background:var(--c-panel);padding:var(--s-6);display:grid;gap:0;justify-items:center} .diag .node{border:1px solid var(--c-rule);background:var(--c-bg);padding:12px 18px;text-align:center;min-width:min(100%,240px);clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)} .diag .node b{display:block;font-family:var(--f-display);font-size:12.5px;font-weight:600;letter-spacing:-.02em} .diag .node span{font-family:var(--f-display);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--c-ink-3)} .diag .node.hot{border-color:color-mix(in srgb,var(--c-accent) 45%,transparent)} .diag .down{font-family:var(--f-display);font-size:10px;letter-spacing:.14em;color:var(--c-ink-3);padding:10px 0;text-transform:uppercase} .diag .split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5);width:100%;justify-items:center} @media (max-width:640px){.diag .split{grid-template-columns:1fr}} /* prev / next */ .pn{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)} @media (max-width:640px){.pn{grid-template-columns:1fr}} .pn a{background:var(--c-rule);padding:1px;text-decoration:none;color:inherit;transition:background var(--m-snap)} .pn a:hover{background:var(--c-accent)} .pn .in{display:block;background:var(--c-panel);padding:var(--s-5);height:100%;clip-path:polygon(var(--chamfer) 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%,0 var(--chamfer))} .pn .micro{display:block;margin-bottom:10px} .pn .t{font-family:var(--f-display);font-size:16px;font-weight:600;letter-spacing:-.04em} .pn .next .in{text-align:right} .pn .c{display:block;font-size:12px;color:var(--c-ink-3);margin-top:4px} /* archive */ .chips{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-bottom:var(--s-6)} .chip{font-family:var(--f-display);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;padding:8px 14px;background:var(--c-raise);color:var(--c-ink-2);border:none;cursor:pointer;clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);transition:background var(--m-snap),color var(--m-snap)} .chip:hover{color:var(--c-ink)} .chip[aria-pressed="true"]{background:var(--c-accent);color:var(--c-on-accent)} .arch{columns:3;column-gap:var(--s-4)} /* extra width buys the gallery more columns, not just bigger frames (the breakout itself is in the wide-screen block at the end of the file) */ @media (min-width:1500px){.arch{columns:4}} @media (min-width:2100px){.arch{columns:5}} @media (max-width:960px){.arch{columns:2}} @media (max-width:600px){.arch{columns:1}} .ai{break-inside:avoid;margin:0 0 var(--s-4);background:var(--c-rule-soft);padding:1px} /* display:block is load-bearing — this is a , and Chrome derives a clip-path's reference box from the inline box, which does not cover the block content inside. Left inline, the whole card clips away to a corner. */ .ai .in{display:block;background:var(--c-panel);clip-path:polygon(var(--chamfer) 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%,0 var(--chamfer))} .ai .ph{position:relative;background:var(--c-raise)} .ai img,.ai video{width:100%;height:auto} .ai video{aspect-ratio:16/9;object-fit:cover} .ai figcaption{padding:var(--s-4)} .ai .micro{display:block;margin-bottom:6px} .ai b{display:block;font-family:var(--f-display);font-size:13.5px;font-weight:600;letter-spacing:-.03em;margin-bottom:4px} .ai p{font-size:12.5px;color:var(--c-ink-2);line-height:1.55} /* footer */ footer{border-top:1px solid var(--c-rule);padding:var(--s-7) 0;margin-top:0} .foot{display:flex;gap:var(--s-5);align-items:center;flex-wrap:wrap} .foot img{height:14px;width:auto} .foot .note{color:var(--c-ink-3);font-size:12.5px} .foot .links{margin-left:auto;display:flex;gap:var(--s-4);flex-wrap:wrap} .foot .links a{font-family:var(--f-display);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--c-ink-2);text-decoration:none} .foot .links a:hover{color:var(--c-accent)} /* misc */ .center{min-height:70vh;display:grid;place-content:center;text-align:center;gap:var(--s-5);padding:var(--s-8) var(--gutter)} .mt-3{margin-top:var(--s-3)}.mt-5{margin-top:var(--s-5)}.mt-6{margin-top:var(--s-6)}.mt-7{margin-top:var(--s-7)}.mb-5{margin-bottom:var(--s-5)} .maxm{max-width:var(--measure)} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .fieldh{display:block;width:100%;height:clamp(44px,6.4vw,72px);cursor:crosshair} .sec-head .fieldh{height:clamp(72px,10vw,116px)} .sec-head h2.fh{flex-basis:100%;max-width:none;position:relative} .sub-h{display:block;margin:var(--s-7) 0 var(--s-5);color:var(--c-accent)} .sub-h:first-of-type{margin-top:0} .xp-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:var(--s-6);align-items:start} .xp-cols .xp li:first-child{border-top:1px solid var(--c-rule-soft)} .xp-cols .xrow{padding:10px 0} .field-wrap{margin-top:var(--s-7)} .field-wrap canvas{display:block;width:100%;height:clamp(140px,22vw,220px);cursor:crosshair} .caplist{list-style:none;display:grid;gap:6px;font-size:12.5px;color:var(--c-ink-2);line-height:1.5} /* lightbox — work pages. Click a figure image to view it full size. */ .lb-open{cursor:zoom-in} .lb{border:0;padding:0;margin:0;max-width:100vw;max-height:100dvh;width:100vw;height:100dvh;background:transparent;color:var(--c-ink);overflow:hidden} .lb::backdrop{background:rgba(0,0,0,.94);backdrop-filter:blur(14px)} .lb-in{position:absolute;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:var(--s-3);padding:var(--s-4) var(--gutter) var(--s-5)} .lb-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4)} .lb-count{font-family:var(--f-display);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--c-ink-3)} .lb-count b{color:var(--c-accent);font-weight:500} .lb-x{appearance:none;background:transparent;border:1px solid var(--c-rule);color:var(--c-ink-2);font-family:var(--f-display);font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:7px 12px;cursor:pointer;clip-path:polygon(var(--chamfer-sm) 0,100% 0,100% calc(100% - var(--chamfer-sm)),calc(100% - var(--chamfer-sm)) 100%,0 100%,0 var(--chamfer-sm));transition:color var(--m-snap) var(--e-snap),border-color var(--m-snap) var(--e-snap)} .lb-x:hover,.lb-x:focus-visible{color:var(--c-ink);border-color:var(--c-ink-2)} .lb-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:0} .lb-stage img,.lb-stage video{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;background:var(--c-panel)} /* display:block above outranks the UA [hidden] rule; restate it */ .lb-stage img[hidden],.lb-stage video[hidden]{display:none} .lb-nav{position:absolute;top:50%;transform:translateY(-50%);appearance:none;background:rgba(0,0,0,.55);border:1px solid var(--c-rule);color:var(--c-ink-2);font-size:18px;line-height:1;width:44px;height:60px;cursor:pointer;transition:color var(--m-snap) var(--e-snap),border-color var(--m-snap) var(--e-snap),background var(--m-snap) var(--e-snap)} .lb-nav:hover,.lb-nav:focus-visible{color:var(--c-accent);border-color:var(--c-accent);background:rgba(0,0,0,.8)} .lb-nav[disabled]{opacity:.25;cursor:default} .lb-prev{left:0}.lb-next{right:0} .lb-cap{text-align:center;min-height:1.2em} .lb-cap .t{display:block;font-size:13px;color:var(--c-ink-2);line-height:1.55} .lb-cap .m{display:block;font-family:var(--f-display);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--c-ink-3);margin-top:6px} .lb[open] .lb-stage img,.lb[open] .lb-stage video{animation:lb-in var(--m-draw) var(--e-draw) both} @keyframes lb-in{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}} @media (max-width:640px){.lb-nav{width:38px;height:52px}.lb-in{padding:var(--s-3) var(--s-3) var(--s-4)}} @media (prefers-reduced-motion:reduce){.lb[open] .lb-stage img,.lb[open] .lb-stage video{animation:none}.lb-x,.lb-nav{transition:none}} /* hero background field — v1 particle-feedback effect, behind the hero copy */ .hero{position:relative;overflow:hidden} #bgfield{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} .hero .wrap{position:relative} .filters{display:grid;gap:var(--s-2);margin-bottom:var(--s-6)} .filters .fl{margin-top:var(--s-2)} .filters .chips{display:flex;flex-wrap:wrap;gap:8px} .chip[aria-pressed="true"]{background:var(--c-accent);color:var(--c-on-accent)} #filter-count{margin-top:var(--s-2);color:var(--c-accent-2)} /* heading particle fields + tick rules */ .sec-head{position:relative} .sec-head>canvas.bgfield{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0} .sec-head>:not(.bgfield){position:relative;z-index:1} .fh-rule{flex-basis:100%;margin-top:var(--s-3)} .hero>canvas.bgfield{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} /* X-Route hover on gallery frames and home gallery teasers */ .ai,.teaser [data-p]{--signal-angle:-45deg} .ai[data-signal-corner="rt"],.teaser [data-p][data-signal-corner="rt"]{--signal-angle:45deg} .ai[data-signal-corner="rb"],.teaser [data-p][data-signal-corner="rb"]{--signal-angle:135deg} .ai[data-signal-corner="lb"],.teaser [data-p][data-signal-corner="lb"]{--signal-angle:225deg} .ai{position:relative;isolation:isolate;clip-path:polygon(var(--chamfer) 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%,0 var(--chamfer));transition:background var(--m-snap),transform var(--m-draw) var(--e-draw)} .ai:hover{background:var(--c-accent);transform:translateY(-2px)} .ai::before,.teaser [data-p] .ph::before{content:"";position:absolute;inset:0;z-index:4;padding:1px;pointer-events:none;opacity:0;background:conic-gradient(from var(--signal-angle),transparent 0 42%,rgba(255,176,32,.1) 55%,var(--c-accent) 70%,#fff4df 73%,var(--c-accent) 77%,transparent 90%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude} .ai:hover::before,.teaser [data-p]:hover .ph::before{animation:xroute-border 680ms var(--e-draw) both} .ai .in{position:relative;z-index:1} .ph .signal-layer{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;background-image:linear-gradient(rgba(255,176,32,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,176,32,.06) 1px,transparent 1px);background-size:24px 24px;transition:opacity 180ms ease} .ph .signal-layer svg{width:100%;height:100%;display:block;overflow:visible;filter:drop-shadow(0 0 5px rgba(255,176,32,.42))} .ph .signal-trace,.ph .signal-mark{fill:none;stroke:var(--c-accent);stroke-linecap:square;stroke-linejoin:miter;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1} .ph .signal-trace{stroke-width:1;opacity:.82}.ph .signal-mark{stroke-width:1.6;stroke:#fff4df} .ph .signal-node{fill:var(--c-accent);stroke:#fff4df;stroke-width:.45;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;transform:scale(0)} .ph .signal-scan{position:absolute;z-index:3;pointer-events:none;top:0;bottom:0;width:12%;left:-18%;opacity:0;transform:skewX(-16deg);background:linear-gradient(90deg,transparent,rgba(255,217,160,.2),rgba(255,255,255,.48),rgba(255,176,32,.16),transparent);mix-blend-mode:screen;filter:blur(.2px)} .ai:hover .signal-layer,.teaser [data-p]:hover .signal-layer{opacity:1} .ai:hover .signal-trace,.teaser [data-p]:hover .signal-trace{animation:xroute-draw 560ms var(--e-draw) forwards} .ai:hover .signal-mark,.teaser [data-p]:hover .signal-mark{animation:xroute-draw 420ms 160ms var(--e-draw) forwards} .ai:hover .signal-node,.teaser [data-p]:hover .signal-node{animation:xroute-node 380ms var(--signal-delay,260ms) var(--e-draw) forwards} .ai:hover .signal-scan,.teaser [data-p]:hover .signal-scan{animation:xroute-scan 760ms 70ms var(--e-draw) forwards} .ai .ph{overflow:hidden} .ai .ph img,.ai .ph video,.teaser [data-p] .ph img{transition:transform 720ms var(--e-draw),filter 520ms var(--e-draw)} .ai:hover .ph img,.ai:hover .ph video,.teaser [data-p]:hover .ph img{transform:scale(1.025);filter:saturate(.82) contrast(1.15) brightness(.7)} /* hero: natural height, centered composition */ .hero-full{text-align:center} .hero-full h1.display-xl{font-size:clamp(27px,4.9vw,62px)} .hero-full .maxm,.hero-full .sub{margin-left:auto;margin-right:auto} .hero-full .hero-cta{justify-content:center;margin-top:var(--s-6)} /* particle wordmark in the hero */ .hero-full{padding-top:var(--s-5)} #wordfield{display:block;width:100%;height:clamp(90px,13vw,150px);margin:var(--s-5) auto var(--s-6);cursor:crosshair} .hero-full .label{color:var(--c-accent)} .topbar-in>nav:only-child{margin:0 auto} /* phones: filter facets become single scroll rows (stacked, the two chip blocks pushed the first photo two screens down); inputs go to 16px so iOS stops zooming the contact form on focus; chips get a legibility bump */ @media (max-width:640px){ .filters .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:6px;margin-bottom:0} .filters .chips::-webkit-scrollbar{display:none} .filters .chip{flex:none;white-space:nowrap} .filters{margin-bottom:var(--s-5)} .chip{font-size:10.5px;padding:10px 14px} input,textarea{font-size:16px} } /* wide screens: copy keeps the reading column, media breaks out of it toward the screen edges. Text wants a measure; pictures do not - at 1180px a big monitor was 40% black. Widths are capped so cards grow into more columns rather than ballooning. margin-left works because .wrap is centred, so 50% of it is the viewport centre. */ @media (min-width:1440px){ .grid-work,.fig-grid,.art-grid,.teaser,.arch{width:min(96vw,1760px);margin-left:calc(50% - min(48vw,880px))} .hero-media{width:min(96vw,1500px);margin-left:calc(50% - min(48vw,750px))} .grid-work{grid-template-columns:repeat(auto-fit,minmax(360px,1fr))} } /* touch devices have no hover: the card effects are keyed to :hover and would otherwise stick on whatever was last tapped (dimmed frame, drawn circuit) until something else is touched. Neutralise them where hover cannot occur. */ @media (hover:none){ .work:hover{background:var(--c-rule);transform:none} .ai:hover{background:var(--c-rule-soft);transform:none} .work:hover::before,.ai:hover::before,.teaser [data-p]:hover .ph::before{animation:none} .work:hover .thumb img,.ai:hover .ph img,.ai:hover .ph video,.teaser [data-p]:hover .ph img{transform:none;filter:none} .work:hover .signal-layer,.ai:hover .signal-layer,.teaser [data-p]:hover .signal-layer{opacity:0} .work:hover .signal-trace,.work:hover .signal-mark,.work:hover .signal-node,.work:hover .signal-scan, .ai:hover .signal-trace,.ai:hover .signal-mark,.ai:hover .signal-node,.ai:hover .signal-scan, .teaser [data-p]:hover .signal-trace,.teaser [data-p]:hover .signal-mark,.teaser [data-p]:hover .signal-node,.teaser [data-p]:hover .signal-scan{animation:none} .work:hover .go{color:var(--c-accent);text-shadow:none} .work:hover .arrow{transform:none} }