/* ============================================================ workwithAMA.io · site styles Sections: base · nav · hero · present · record · company · stubs · footer · pixel icons · responsive ============================================================ */ *{box-sizing:border-box;margin:0;padding:0} /* text-size-adjust: iOS Safari silently inflates text inside wide blocks, and the boost scales with block width — so Claim 5's 460px tiles (the widest on the site) rendered their captions noticeably larger than Claim 3's 330px ones, from identical CSS. AMA caught it on the will-it tiles, Aug 4 2026. 100% turns the guessing off. */ html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%} body{background:var(--canvas);color:var(--ink);font:16px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden} img{max-width:100%} a{color:inherit;text-decoration:none;cursor:pointer} section{scroll-margin-top:76px} .shell{max-width:1280px;margin:0 auto;padding:0 clamp(22px,5vw,64px)} /* --edge · the gutter a FULL-BLEED element needs so its contents land on the same grid as a centred .shell. Two elements run full width on purpose (the sticky nav bar, whose background must span the window, and the hero, whose aura bleeds off the edges) — but their CONTENTS still belong in the 1280 column. Below 1280 this collapses to the plain .shell padding. Fixes a misalignment found on the live preview Aug 4 2026: on a 1920 screen the hero copy sat 320px left of every section heading, and the portrait pulled away to the window edge leaving a dead gap in the middle. */ :root{--edge:calc(max(0px, (100% - 1280px) / 2) + clamp(22px,5vw,64px))} /* reveals share the daisy's ease */ [data-rv]{opacity:0;transform:translateY(16px);transition:opacity .7s ease var(--d,0s),transform .7s var(--ease-out) var(--d,0s)} [data-rv].on{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ [data-rv]{opacity:1;transform:none;transition:none} *{animation:none!important} } /* section headers, one recipe sitewide */ .sec-kick{display:flex;align-items:center;gap:10px;font:500 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;margin-bottom:24px} .sec-kick::before{content:"";height:1px;width:26px;background:var(--grad-quote)} .sec-h{font:500 clamp(34px,4.4vw,58px)/1.02 var(--disp);letter-spacing:-.045em;max-width:19ch} .sec-lead{color:var(--mist);font-size:17.5px;line-height:1.6;letter-spacing:-.015em;margin:18px 0 0;max-width:58ch;text-wrap:pretty} /* ============ NAV ============ */ /* NOTE: the nav stays FULL-BLEED on purpose — do not pull it into --edge. The daisy signal is positioned by alignSignal() in main.js to line up with this bar's Say Hi button. Aligning the nav to the 1280 column moves that button ~320px inward on a wide screen, which drags the daisy off the aura and onto AMA's face. Tried it Aug 4 2026; she caught it immediately. */ .nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px clamp(22px,5vw,64px);border-bottom:1px solid var(--line);background:rgba(17,18,26,.88);backdrop-filter:blur(10px)} .nav .links{display:flex;gap:34px;font:500 9.5px/1 var(--mono);letter-spacing:.1em;color:var(--faint);text-transform:uppercase} .nav .links a{transition:color .2s} .nav .links a:hover,.nav .links a:focus-visible{color:var(--ink)} /* the one nav item that is an offer, not a place */ .nav .links a.nav-free{color:var(--sky)} .nav .links a.nav-free:hover,.nav .links a.nav-free:focus-visible{color:var(--ink)} .hexuse{display:block} /* ============ BUTTONS (grammar 3) ============ */ .btn{--cut:11px;--off:6px;position:relative;isolation:isolate;display:inline-block;font:600 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#14161B;padding:16px 30px;transition:color .2s,transform .15s} .btn.small{--cut:9px;--off:5px;font-size:10.5px;letter-spacing:.09em;padding:11px 20px} .btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--pink);clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%);transition:background .2s} .btn::after{content:"";position:absolute;inset:0;z-index:-2;transform:translate(var(--off),var(--off));border:1.5px solid var(--sky);clip-path:polygon(-2px -2px,calc(100% + 2px) -2px,calc(100% + 2px) calc(100% - var(--cut)),calc(100% - var(--cut)) calc(100% + 2px),-2px calc(100% + 2px))} .btn .diag{position:absolute;z-index:-2;right:calc(var(--off)*-1);bottom:calc(var(--off)*-1);width:var(--cut);height:var(--cut);background:linear-gradient(135deg,transparent calc(50% - .8px),var(--sky) 0,var(--sky) calc(50% + .8px),transparent 0)} .btn:hover,.btn:focus-visible{color:#FFFFFF;transform:translateY(-2px)} .btn.small:hover,.btn.small:focus-visible{transform:translateY(-1px)} .btn:hover::before,.btn:focus-visible::before{background:var(--purple)} /* ============ HERO (v11, verbatim behavior) ============ */ .hero{position:relative;display:flex;align-items:center;padding:0 var(--edge);min-height:min(clamp(430px,46vw,620px),calc(100svh - 96px));overflow:hidden} .hero-copy{position:relative;z-index:5;max-width:700px;padding:clamp(20px,3vw,40px) 0 clamp(36px,5vw,60px)} .hero-kick{font:500 10.5px/1 var(--mono);letter-spacing:.16em;color:var(--sky);text-transform:uppercase;margin-bottom:28px;display:flex;align-items:center;gap:10px} .hero-kick::before{content:"";height:1px;width:26px;background:linear-gradient(90deg,var(--royal),var(--purple))} .hero-h{font:500 clamp(30px,5.2vw,66px)/0.95 var(--disp);letter-spacing:-.05em;text-shadow:0 2px 26px rgba(13,14,20,.85),0 0 60px rgba(13,14,20,.6)} .hero-h>span{display:block} .hero-h .accent{color:var(--sky);margin-top:.08em} .hero-h .keep{white-space:nowrap} .hero-sub{max-width:575px;color:var(--mist);font-size:clamp(16px,1.35vw,18.9px);letter-spacing:-.02em;line-height:1.6;margin-top:34px} .hero-actions{margin-top:40px} .hero-shuttle{margin-top:30px;font:400 12px/2 var(--mono);color:var(--faint);letter-spacing:.02em} .hero-shuttle a{color:var(--ink);border-bottom:1px solid var(--purple);padding-bottom:2px;white-space:nowrap;transition:border-color .2s,color .2s} .hero-shuttle a:hover,.hero-shuttle a:focus-visible{color:var(--sky);border-color:var(--sky)} .hero-shuttle .chev{display:inline-block;vertical-align:-1px;margin-right:5px} .hero-rule{position:absolute;left:0;right:0;bottom:0;height:clamp(8px,1vw,12px);z-index:4;background:var(--grad-brand)} .hero-photo{position:absolute;right:calc(clamp(22px,5vw,64px)*-.4);bottom:0;width:min(63%,805px);z-index:1} .echo{position:absolute;inset:-16% -8% 0 -60%;z-index:1;pointer-events:none} .echo canvas{width:100%;height:100%;display:block} .hero-photo .stage{position:relative;z-index:2;width:100%;margin:0;filter:drop-shadow(-14px 21px 28px rgba(0,0,0,.25))} .hero-photo .stage img{display:block;width:100%;height:auto} /* daisy signal */ .signal{position:absolute;z-index:4;top:5%;right:2%;display:grid;justify-items:center;gap:11px;pointer-events:none} .signal-box{display:grid;place-items:center;width:63px;height:63px;border:1px solid rgba(119,168,255,.3);background:rgba(23,25,31,.6);backdrop-filter:blur(10px)} .signal-label{color:var(--sky);font:8.5px/1.25 var(--mono);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;writing-mode:vertical-rl} .signal-cursor{display:inline-block;width:7px;height:7px;margin-top:6px;border:1px solid var(--purple);background:rgba(141,35,181,.2);box-shadow:0 0 7px rgba(239,71,130,.35);animation:blink .9s steps(2,end) infinite} @keyframes blink{50%{opacity:.16}} .pixel-daisy{position:relative;display:block;width:30px;height:30px;transform-origin:center} .pixel-daisy-center,.pixel-daisy-petal{position:absolute;top:12px;left:12px;width:6px;height:6px} .pixel-daisy-center{background:#FFFFFF} .pixel-daisy-petal{background:var(--pixel-color);transform:translate(var(--x),var(--y))} .petal-n{--x:0px;--y:-11px;--inner-x:0px;--inner-y:-4px;--pixel-color:var(--sky)} .petal-ne{--x:8px;--y:-8px;--inner-x:3px;--inner-y:-3px;--pixel-color:#FFFFFF} .petal-e{--x:11px;--y:0px;--inner-x:4px;--inner-y:0px;--pixel-color:var(--sky)} .petal-se{--x:8px;--y:8px;--inner-x:3px;--inner-y:3px;--pixel-color:var(--pink)} .petal-s{--x:0px;--y:11px;--inner-x:0px;--inner-y:4px;--pixel-color:var(--purple)} .petal-sw{--x:-8px;--y:8px;--inner-x:-3px;--inner-y:3px;--pixel-color:var(--iris)} .petal-w{--x:-11px;--y:0px;--inner-x:-4px;--inner-y:0px;--pixel-color:var(--sky)} .petal-nw{--x:-8px;--y:-8px;--inner-x:-3px;--inner-y:-3px;--pixel-color:var(--iris)} @keyframes pixel-daisy-rotate{0%{transform:rotate(0)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}} @keyframes pixel-daisy-think{0%,100%{transform:translate(var(--x),var(--y))}50%{transform:translate(var(--inner-x),var(--inner-y))}} @keyframes pixel-daisy-core{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.72;transform:scale(.72)}} .thinking-daisy{animation:pixel-daisy-rotate var(--spin) linear infinite} .thinking-daisy .pixel-daisy-petal{animation:pixel-daisy-think var(--breath) var(--ease-breath) infinite} .thinking-daisy .pixel-daisy-center{animation:pixel-daisy-core var(--breath) steps(2,end) infinite} /* ============ THE PRESENT (v11 modules, grammar 4) ============ */ .present{padding:clamp(40px,6vw,72px) 0 clamp(48px,6vw,80px);background:linear-gradient(180deg,var(--panel),var(--raised-2));border-bottom:1px solid var(--line-strong);position:relative;z-index:5} .present h2{font:500 clamp(28px,3.6vw,44px)/1.08 var(--disp);letter-spacing:-.04em} .present .lead{color:var(--mist);font-size:16px;letter-spacing:-.015em;margin:10px 0 34px} .present-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px} .mod{--bc:var(--sky);--cut:20px;clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%);background:var(--bc);padding:1.5px;transition:transform .2s} .mod.cut-tl{clip-path:polygon(var(--cut) 0,100% 0,100% 100%,0 100%,0 var(--cut))} .mod.b-vio{--bc:var(--purple)} .mod>.in{position:relative;clip-path:polygon(0 0,100% 0,100% calc(100% - 19px),calc(100% - 19px) 100%,0 100%);background:linear-gradient(160deg,var(--raised),var(--canvas) 70%);padding:clamp(20px,2.6vw,30px);height:100%} .mod.cut-tl>.in{clip-path:polygon(19px 0,100% 0,100% 100%,0 100%,0 19px)} .mod:hover{background:var(--grad-border);transform:translateY(-3px)} .mod h3{font:500 clamp(18px,1.9vw,22px)/1.2 var(--cardface);letter-spacing:.002em;margin-bottom:12px;padding-right:26px} .mod .px{position:absolute;top:15px;right:17px;width:6px;height:6px;background:var(--bc);box-shadow:0 0 7px 1.5px color-mix(in srgb,var(--bc) 70%,transparent);animation:px-glow var(--breath) ease-in-out infinite} @keyframes px-glow{0%,100%{opacity:.45}50%{opacity:1}} .mod p{color:var(--mist);font-size:14.5px;letter-spacing:-.01em;line-height:1.62} .mod p a{color:var(--ink);border-bottom:1px solid color-mix(in srgb,var(--bc) 60%,transparent);padding-bottom:1px;transition:color .2s,border-color .2s} .mod p a:hover,.mod p a:focus-visible{color:var(--sky);border-color:var(--sky)} /* ============ FOR THE RECORD ============ */ .record{position:relative;padding:clamp(70px,8vw,110px) 0 clamp(80px,9vw,130px)} .record>.shell{position:relative;z-index:1} .record-echo{position:absolute;top:0;right:0;width:min(66%,900px);height:clamp(380px,44vw,640px);pointer-events:none;z-index:0;-webkit-mask-image:radial-gradient(112% 112% at 90% 5%,#000 38%,transparent 80%);mask-image:radial-gradient(112% 112% at 90% 5%,#000 38%,transparent 80%)} .record-echo canvas{width:100%;height:100%;display:block} .record-echo-b{position:absolute;bottom:0;right:0;width:min(62%,820px);height:clamp(260px,28vw,420px);pointer-events:none;z-index:0;-webkit-mask-image:radial-gradient(115% 115% at 92% 96%,#000 36%,transparent 78%);mask-image:radial-gradient(115% 115% at 92% 96%,#000 36%,transparent 78%)} .record-echo-b canvas{width:100%;height:100%;display:block} @media (max-width:640px){.record-echo{width:80%;height:240px;top:8px}.record-echo-b{width:80%;height:200px}} .record .sec-kick{color:var(--sky)} .claims{display:flex;flex-direction:column;gap:14px;margin-top:52px} .claim{--era:var(--sky);--era-t:var(--sky);background:linear-gradient(150deg,color-mix(in srgb,var(--era) 34%,transparent),var(--raised) 44%);padding:1.5px;display:flex;min-width:0;clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%)} .claim>.claim-in{position:relative;flex:1;min-width:0;background:linear-gradient(155deg,color-mix(in srgb,var(--era) 13%,transparent),var(--canvas) 40%);clip-path:polygon(0 0,100% 0,100% calc(100% - 21px),calc(100% - 21px) 100%,0 100%)} .claim-head{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:start;padding:30px 36px 28px;cursor:pointer;width:100%;background:none;border:0;text-align:left;color:inherit;font:inherit} /* Hover tint is gated to real hover devices (AMA, Aug 5 2026: "takes two taps to expand a claim on mobile"). A tap target that restyles on :hover makes mobile Chrome and Safari deliver hover on the first tap and click only on the second. focus-visible stays outside the query so keyboard users keep the cue. */ @media (hover:hover){.claim-head:hover .claim-title{color:var(--era-t)}} .claim-head:focus-visible .claim-title{color:var(--era-t)} .claim-icon-box{display:grid;place-items:center;width:56px;height:56px;margin-top:3px;border:1px solid color-mix(in srgb,var(--era) 40%,transparent);background:rgba(23,25,31,.6)} .claim-title{font:500 clamp(22px,2.4vw,31px)/1.14 var(--disp);letter-spacing:-.01em;max-width:26ch;transition:color .2s} .claim-sup{color:var(--mist);font-size:15.5px;line-height:1.62;margin:12px 0 0;max-width:72ch} .claim-meta{display:flex;align-items:center;gap:16px} .claim-est{font:500 10.5px/1 var(--mono);letter-spacing:.08em;color:var(--era-t);border:1px solid color-mix(in srgb,var(--era) 50%,transparent);border-radius:99px;padding:8px 14px;white-space:nowrap} /* the hover invite: daisy-style typing, era-colored, block cursor, tucked in the bottom-right corner clear of the headline */ .claim-invite{position:absolute;right:30px;bottom:15px;display:flex;align-items:center;gap:3px;width:104px;font:500 8.5px/1.25 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--era-t);white-space:nowrap;pointer-events:none} .claim-invite i{display:none;width:7px;height:9px;border:1px solid var(--era);background:color-mix(in srgb,var(--era) 20%,transparent);box-shadow:0 0 7px color-mix(in srgb,var(--era) 35%,transparent);animation:blink .9s steps(2,end) infinite} .claim-invite.typing i{display:inline-block} .claim.open .claim-invite{visibility:hidden} .claim-tog{font:400 20px/1 var(--mono);color:var(--era-t);width:14px;text-align:center;transition:transform .3s var(--ease-out)} .claim.open .claim-tog{transform:rotate(45deg)} .claim-body{display:grid;grid-template-rows:0fr;grid-template-columns:minmax(0,1fr);transition:grid-template-rows .55s var(--ease-out)} .claim.open .claim-body{grid-template-rows:1fr} .claim-body>div{overflow:hidden;min-height:0} /* once the open transition settles, release the clip so the rail can pin */ .claim.settled .claim-body>div{overflow:visible} .claim-origin{border-top:1px solid var(--line);padding:34px 36px 36px} .origin-grid{display:grid;grid-template-columns:1fr 300px;gap:36px;align-items:start} .origin-label{font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:14px} .origin-story{color:var(--bright);font-size:16.5px;line-height:1.66;max-width:64ch;text-wrap:pretty} .origin-links{display:flex;gap:16px;margin-top:14px;font:500 10.5px/1 var(--mono);color:var(--era-t)} .origin-links a{transition:color .2s} .origin-links a:hover,.origin-links a:focus-visible{color:var(--ink)} .origin-voice{margin-top:26px;border-left:2px solid var(--era);padding-left:18px;max-width:58ch} .origin-voice p{font-style:italic;color:var(--ink);font-size:16.5px;line-height:1.55} .origin-voice .who{font:400 10.5px/1.5 var(--mono);color:var(--faint);margin-top:9px;font-style:normal} /* her reply to the quote (AMA, Aug 1 2026 — first use: "Social Media Queen"), set in the era tint so it reads as her voice answering back, not more citation */ .origin-voice .aside{font:400 11.5px/1.55 var(--mono);color:var(--era-t);margin:9px 0 0;font-style:normal;max-width:46ch} .origin-voice .aside::before{content:"\21B3\00a0";opacity:.7} .origin-photo{height:250px;background:repeating-linear-gradient(45deg,var(--hatch-a),var(--hatch-a) 8px,var(--hatch-b) 8px,var(--hatch-b) 16px);border:1px solid color-mix(in srgb,var(--era) 30%,transparent);display:flex;align-items:flex-end;padding:12px} /* placeholder chip only — scoped so it never leaks onto spans inside a placed hero (it was painting .shotplate as a dark bordered box around the frame) */ .origin-photo:not(.has-img) span{font:400 9.5px/1.45 var(--mono);color:var(--era-t);background:var(--canvas);border:1px solid var(--line);padding:6px 8px} /* follower hold: while a rail is pinned and panning, everything after the open claim parks under it so the next claim never sits a screen away. Scroll-driven (compositor) because a per-frame JS transform trails the scroll and reads as a jump. The shorthand resets timeline/range, so those must be declared after it. */ @keyframes rail-hold{from{transform:translateY(var(--hold,0px))}to{transform:translateY(0)}} @supports (animation-timeline:scroll(root block)){ .rail-held{animation:rail-hold linear both;animation-timeline:scroll(root block);animation-range:var(--hold-a,0px) var(--hold-b,0px)} } @media (prefers-reduced-motion:reduce){.rail-held{animation:none}} /* --- the evidence rail: pinned pan --- */ .rail-stage{position:relative} .rail-pin{position:sticky;top:86px} .rail-head{display:flex;align-items:center;justify-content:space-between;margin:34px 0 14px} .rail-head .lab{font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)} .rail-tools{display:flex;align-items:center;gap:18px} .rail-arrows{display:flex;gap:8px} .rail-arrows button{display:grid;place-items:center;width:28px;height:28px;background:none;border:1px solid color-mix(in srgb,var(--era) 40%,transparent);color:var(--era-t);cursor:pointer;padding:0;transition:border-color .2s,background .2s} .rail-arrows button svg{fill:currentColor;display:block} .rail-arrows button:hover,.rail-arrows button:focus-visible{background:color-mix(in srgb,var(--era) 15%,transparent);border-color:var(--era)} /* one-time nudge when a claim opens: the rail shows it pans */ @keyframes rail-nudge{0%{transform:translate3d(0,0,0)}45%{transform:translate3d(-54px,0,0)}100%{transform:translate3d(0,0,0)}} .rail-track.nudge{animation:rail-nudge 1.1s var(--ease-breath) 1} .rail-hint{font:400 10px/1 var(--mono);letter-spacing:.1em;color:var(--era-t)} .rail-window{position:relative;overflow:hidden} .rail-ghost{position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:0;font:700 clamp(120px,17vw,230px)/1 var(--mono);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--era) 22%,transparent);pointer-events:none;user-select:none;white-space:nowrap} .rail-track{position:relative;z-index:1;display:flex;gap:14px;padding:2px 2px 18px;will-change:transform} .rail-progress{display:flex;align-items:center;gap:16px;margin-top:4px} .rail-progress .track{position:relative;flex:1;height:2px;background:var(--line)} .rail-progress .fill{position:absolute;left:0;top:0;height:2px;width:0;background:linear-gradient(90deg,var(--royal),var(--era))} .rail-progress .dot{position:absolute;top:-2px;left:0;width:6px;height:6px;background:var(--era-t);box-shadow:0 0 7px 1.5px color-mix(in srgb,var(--era) 70%,transparent);animation:px-glow var(--breath) ease-in-out infinite} .rail-progress .cap{font:400 9.5px/1 var(--mono);letter-spacing:.1em;color:var(--faint);white-space:nowrap} .rail-year{font:500 10px/1 var(--mono);letter-spacing:.14em;color:var(--era-t)} /* fallback: native swipe when unpinned (touch, small screens, reduced motion) */ .rail-stage.free .rail-pin{position:static} .rail-stage.free .rail-window{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab} .rail-stage.free .rail-window::-webkit-scrollbar{display:none} .rail-stage.free .rail-track{width:max-content} .rail-stage.free .tile{scroll-snap-align:start} /* tiles (grammar 4, quiet version) */ .tile{flex:0 0 300px;display:flex;min-width:0;background:var(--raised);padding:1.5px;clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%);transition:transform .2s,background .2s} .tile>.in{flex:1;min-width:0;background:linear-gradient(160deg,var(--raised),var(--canvas) 72%);clip-path:polygon(0 0,100% 0,100% calc(100% - 15px),calc(100% - 15px) 100%,0 100%);padding:20px 20px 30px;display:flex;flex-direction:column;gap:9px} .tile:hover{background:color-mix(in srgb,var(--era) 60%,var(--raised));transform:translateY(-3px)} .tile b{font:500 17px/1.2 var(--disp)} .tile .yrs{font:400 9.5px/1.5 var(--mono);color:var(--faint)} .tile p{color:var(--mist);font-size:13.5px;line-height:1.58} .tile .tk{color:var(--era-t);font-size:13px;line-height:1.55;margin-top:auto;border-top:1px solid var(--line);padding-top:11px} /* rail image tile: same portrait treatment as the origin hero */ .tile.shot{flex-basis:330px;background:transparent;clip-path:none;padding:0} .tile.shot>.in{background:none;clip-path:none;padding:2px 0;gap:9px;justify-content:center;position:relative} .tile.shot .in::before{content:"";position:absolute;inset:0 -7%;background:radial-gradient(58% 60% at 50% 42%,color-mix(in srgb,var(--era) 46%,transparent),color-mix(in srgb,var(--royal) 28%,transparent) 52%,transparent 78%);filter:blur(24px)} .tile.shot .who{position:relative;z-index:1;font:400 9.5px/1.6 var(--mono);color:var(--faint)} .tile.shot .who a{color:var(--ink);border-bottom:1px solid color-mix(in srgb,var(--era) 55%,transparent);transition:color .2s,border-color .2s} .tile.shot .who a:hover,.tile.shot .who a:focus-visible{color:var(--sky);border-color:var(--sky)} .tile.shot:hover{background:transparent;transform:translateY(-3px)} /* rail work shots: thin era outline (no pixel frame), B&W that blooms to color on rollover */ .railshot{position:relative;z-index:1;display:block;border:1px solid color-mix(in srgb,var(--era) 45%,transparent)} .railshot img{display:block;width:100%;height:auto;filter:grayscale(1) contrast(1.08) brightness(.97);transition:filter .45s ease} .tile.shot:hover .railshot img,.tile.shot:focus-within .railshot img{filter:none} @media (hover:none){.railshot img{filter:none}} /* in-tile portrait: pre-treated cutout (B&W + baked aura) sits inside a text tile, right-aligned and bleeding to the tile edge — no CSS filters on baked art */ .tile .shelf-photo{display:block;margin:auto 0 -9px;width:100%;aspect-ratio:1.6;overflow:hidden;border:1px solid color-mix(in srgb,var(--era) 45%,transparent)} .tile .shelf-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 28%;filter:grayscale(1) contrast(1.08) brightness(.97);transition:filter .45s ease} .tile:hover .shelf-photo img{filter:none} @media (hover:none){.tile .shelf-photo img{filter:none}} .tile .shelf-photo+.tk{margin-top:0} /* flip variant: stacked frames, JS cycles .on while hovered (gif feel, crisper). frames overscan the box by 1px so no white edge slivers survive the cover crop */ .railshot.flip{aspect-ratio:4/3;overflow:hidden;background:var(--deep);cursor:pointer} .railshot.flip img{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);object-fit:cover;opacity:0} .railshot.flip img.on{opacity:1} .railshot.flip:focus-visible{outline:2px solid var(--era);outline-offset:-2px} /* click-to-advance: nudge the frame down a hair on press so the tap registers physically, not just visually. Kept off reduced-motion, like the cycle itself. */ @media (prefers-reduced-motion:no-preference){.railshot.flip:active img.on{transform:translateY(1px)}} /* mosaic variant: contact-sheet grid of small frames, one outline */ /* filmed: the still is the resting state; on rollover it blooms to colour and, a beat later, the clip fades in over it and plays silently. Engine in main.js [data-film]. */ .railshot.filmed{overflow:hidden;background:var(--deep)} .railshot.filmed video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease;pointer-events:none} /* fitw: clip whose shape differs from its still — fit the full frame to the tile width rather than filling the box, so nothing is cropped off the sides */ .railshot.filmed.fitw video{object-fit:contain;background:var(--deep)} /* same idea for a flip whose frames aren't all one shape: fit each whole frame rather than cropping detail (search listings, contact sheets) off the edges */ .railshot.flip.fitw img{object-fit:contain} .railshot.filmed.rolling video{opacity:1} /* TOUCH: a filmed tile is hover-driven, and a phone has no hover — so until now a phone visitor got one frozen frame off three tiles with no clue there was a video under them (the small corner hint is hidden on touch for non-flip tiles, correctly, since it would be describing something that cannot happen). AMA's call, Aug 4 2026: "we skip the main visual and start on the video with a large play button that needs to be tapped to play." So on touch the tile presents as a player: the still is the poster, a real 56px button sits on it, and a tap starts the clip in place. .playing hides the button; .rolling keeps the video visible, so pausing leaves the frame you stopped on rather than snapping back to the still. */ .railshot.filmed .playtap{display:none} @media (hover:none){ .railshot.filmed .playtap{ display:grid;place-items:center;position:absolute;inset:0;z-index:3; background:radial-gradient(closest-side,rgba(13,14,20,.5),transparent 76%); border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent} .railshot.filmed .playtap i{display:grid;place-items:center;width:56px;height:56px; background:rgba(13,14,20,.84);border:1px solid var(--era); box-shadow:0 0 18px 2px color-mix(in srgb,var(--era) 30%,transparent)} .railshot.filmed .playtap:active i{transform:translateY(1px)} .railshot.filmed.playing .playtap{display:none} } /* scroller: a tall shot shown top-first, panning through its full length on rollover */ .railshot.scroller{height:var(--win,250px);overflow:hidden;background:var(--deep)} .railshot.scroller img{transition:transform var(--pan,9s) linear,filter .45s ease} .tile.shot:hover .railshot.scroller img,.tile.shot:focus-within .railshot.scroller img{transform:translateY(calc(-100% + var(--win,250px)))} @media (prefers-reduced-motion:reduce){ .railshot.scroller img{transition:none} .tile.shot:hover .railshot.scroller img,.tile.shot:focus-within .railshot.scroller img{transform:none} } /* reader (AMA, Aug 1 2026): a long page you scroll YOURSELF. An auto-pan turns a story into a slideshow nobody can pause — the Pass App site is 1:6.7, which is a 17-second crawl on hover. Wheel, drag, touch and keyboard all work here, and overscroll deliberately CHAINS, so once the image bottoms out the page carries on and the pinned rail never traps the reader. The box is the viewport; the inner .page does the scrolling, so the corner hint stays put instead of scrolling away. */ .railshot.reader{height:var(--win,300px);overflow:hidden;background:var(--deep)} .railshot.reader .page{display:block;height:100%;overflow-y:auto;overflow-x:hidden;cursor:grab} /* NOTE: do NOT set scrollbar-width/scrollbar-color here. Chrome honours the standard properties INSTEAD of ::-webkit-scrollbar, and on macOS that means an overlay bar that is invisible until you already scroll — useless as an affordance. Styling the pseudo-elements alone opts back into a classic, always-visible, space-taking bar. Firefox has no pseudo-elements, so it gets the standard props via @supports below. */ .railshot.reader .page.dragging{cursor:grabbing} /* AMA, Aug 1: no corner glyph on these — the scrollbar IS the affordance, so it is drawn on purpose and always visible (styling ::-webkit-scrollbar opts out of macOS overlay bars) in the era hue, square like everything else here. Its length also tells you how much page is under there before you touch it. */ .railshot.reader .page::-webkit-scrollbar{width:7px} .railshot.reader .page::-webkit-scrollbar-track{background:color-mix(in srgb,var(--era) 14%,transparent)} .railshot.reader .page::-webkit-scrollbar-thumb{background:var(--era);border:1px solid var(--deep)} .railshot.reader .page::-webkit-scrollbar-thumb:hover{background:var(--ink)} @supports not selector(::-webkit-scrollbar){ .railshot.reader .page{scrollbar-width:thin;scrollbar-color:var(--era) color-mix(in srgb,var(--era) 14%,transparent)} } .railshot.reader .page:focus-visible{outline:2px solid var(--era);outline-offset:-2px} .railshot.reader img{display:block;width:100%;height:auto;-webkit-user-drag:none;user-select:none} .railshot.mosaic{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:2px;background:var(--deep)} /* height is deliberately auto — do NOT put height:100% back (AMA, Aug 5 2026: "the caption is sitting over the image and the image is sitting too low"). height:100% on a grid item whose row is content-sized is a circular reference: the row needs the image to know its height, the image needs the row. Chrome breaks the loop with aspect-ratio and looks correct, which is why this never reproduced on desktop. WebKit — what Chrome on iOS runs underneath — can resolve it against the image's intrinsic height instead, so every row grew, the grid overflowed the tile, and the frames painted over the caption. width + aspect-ratio alone is unambiguous in every engine. */ .railshot.mosaic img{display:block;width:100%;height:auto;aspect-ratio:349/243;object-fit:cover} /* Belt and braces: a flex item defaults to min-height:auto and will not shrink below its content, but if any engine ever miscomputes a row again, clip it rather than let it paint over the caption underneath. */ .railshot.mosaic{overflow:hidden} /* On a phone each mosaic cell is only ~145px wide, and cover-cropping a 16:9 still into that box zooms hard enough to lose the picture — the WOW Challenge sheet became a close-up of Ze Frank's face. Show the whole frame instead and let it letterbox on --deep. Same reasoning as the .fitw modifier on filmed tiles. */ @media (max-width:640px){.railshot.mosaic img{object-fit:contain}} /* Shot tiles top-align on phones (AMA, Aug 5 2026: "the samsung wow image sits too low"). .tile.shot > .in centers its content, but a flex row stretches every tile to the height of the TALLEST tile — here a text tile, "Prologue: The Web, 1997". The mosaic's own content is ~401px against a 440px row, so centering pushed it down by half the slack. On iOS that text tile wraps taller still, so the drop was bigger than anything reproducible in Chrome. Top-aligning collects the slack under the caption instead, and lines every image in the rail up along one edge. Kept inside the phone breakpoint on purpose — the centered desktop look is approved. */ @media (max-width:640px){.tile.shot>.in{justify-content:flex-start}} /* roll-over hint (AMA, Aug 1): tiles with something hidden under them were being missed — nothing on a still frame says a video or six more images are waiting. A pixel glyph in the bottom-right names the behavior: stacked cards, a play button, arrows that keep going. It stays put while you hover (AMA's call), so it reads as a label on the tile rather than a prompt that vanishes when used. Placed only on flip / filmed / scroller — mosaics show every frame already. Hidden where the behavior cannot happen at all: touch, and reduced motion. */ .railshot .hint{position:absolute;right:7px;bottom:7px;z-index:2;display:flex;padding:3px 4px; line-height:0;pointer-events:none;background:rgba(13,14,20,.78); border:1px solid color-mix(in srgb,var(--era) 40%,transparent)} .railshot .hint svg{display:block} /* Touch: hide the roll-over hint for behaviors that can't run without a pointer. Flip tiles are the exception since Aug 1 2026 — a tap advances them, so the glyph is still telling the truth there and stays put. */ @media (hover:none){.railshot:not(.flip) .hint{display:none}} @media (prefers-reduced-motion:reduce){.railshot .hint{display:none}} /* origin hero: same color-on-rollover as rail shots */ .origin-photo.has-img .pxframe img{transition:filter .45s ease} .origin-photo.has-img:hover .pxframe img{filter:none} @media (hover:none){.origin-photo.has-img .pxframe img{filter:none}} .tile.quote{flex-basis:280px;background:var(--grad-quote);clip-path:polygon(16px 0,100% 0,100% 100%,0 100%,0 16px)} /* origin hero image: portrait-style treatment — B&W photo, era pxframe, aura behind */ .origin-photo.has-img{height:auto;background:none;border:0;padding:0;flex-direction:column;align-items:stretch;gap:9px;position:relative} .origin-photo.has-img::before{content:"";position:absolute;inset:-6% -9% 8%;background:radial-gradient(58% 60% at 50% 42%,color-mix(in srgb,var(--era) 52%,transparent),color-mix(in srgb,var(--royal) 30%,transparent) 52%,transparent 78%);filter:blur(24px)} .pxframe.shotimg{--u:4px;position:relative;z-index:1;padding:2px;background:var(--era)} .pxframe.shotimg img{width:100%;height:auto;filter:grayscale(1) contrast(1.12) brightness(.96)} .origin-photo.has-img .cap{position:relative;z-index:1;font:400 9.5px/1.6 var(--mono);color:var(--faint);background:none;border:0;padding:0} /* offset ruled drop shadow behind claim heroes — pink hairline echoing the pixel-frame silhouette, per AMA's mock (Aug 1, v4). Button line weight (1.5px), 5px down-right. Drawn as ONE plain polygon: only the visible L-strip (right band, bottom band, stepped corner tips, cut where the photo sits). Nothing is hidden behind anything, so no z-order, evenodd, or cover-plate tricks — same render in every engine. Lives on the unclipped .shotplate wrapper because the pxframe's clip-path swallows its own pseudos. */ .origin-photo.has-img .shotplate{position:relative;display:block;z-index:1} .origin-photo.has-img .shotplate::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--pink);transform:translate(5px,5px); clip-path:polygon( calc(100% - 5px) 4px,calc(100% - 4px) 4px,calc(100% - 4px) 8px,100% 8px, 100% calc(100% - 8px),calc(100% - 4px) calc(100% - 8px),calc(100% - 4px) calc(100% - 4px),calc(100% - 8px) calc(100% - 4px),calc(100% - 8px) 100%, 8px 100%,8px calc(100% - 4px),4px calc(100% - 4px),4px calc(100% - 5px), 9.5px calc(100% - 5px),9.5px calc(100% - 1.5px),calc(100% - 9.5px) calc(100% - 1.5px),calc(100% - 9.5px) calc(100% - 5.5px),calc(100% - 5.5px) calc(100% - 5.5px),calc(100% - 5.5px) calc(100% - 9.5px),calc(100% - 1.5px) calc(100% - 9.5px), calc(100% - 1.5px) 9.5px,calc(100% - 5px) 9.5px)} .origin-photo.has-img .cap{margin-top:6px} .tile.quote>.in{background:var(--deep);clip-path:polygon(15px 0,100% 0,100% 100%,0 100%,0 15px);padding:22px 22px 30px;justify-content:center;gap:12px} .tile.quote p{font-style:italic;color:var(--ink);font-size:15px;line-height:1.5} .tile.quote .who{font:400 9.5px/1.5 var(--mono);color:var(--faint)} .tile.quote.warm{background:var(--grad-closer)} /* xpost: the closer quote dressed as a minimal post card in site language */ .tile.xpost>.in{justify-content:center;gap:14px} .xpost .xhead{display:flex;align-items:center;gap:10px} .xpost .xavatar{flex:none;display:grid;place-items:center} .xpost .xid{display:flex;flex-direction:column;gap:3px} .xpost .xid b{font:500 12.5px/1 var(--body);color:var(--ink);letter-spacing:.01em} .xpost .xhandle{font:400 9.5px/1 var(--mono);color:var(--faint)} .xpost .xmeta{font:400 9px/1 var(--mono);letter-spacing:.06em;color:var(--faint);border-bottom:1px solid transparent;width:fit-content;transition:color .2s,border-color .2s} .xpost .xmeta:hover,.xpost .xmeta:focus-visible{color:var(--sky);border-color:var(--sky)} .xpost span.xmeta{pointer-events:none} /* pre-archive posts with no saved URL: plain timestamp, no link affordance */ .xpost .xreply{font:italic 400 11.5px/1.4 var(--body);color:var(--era-t);border-left:2px solid color-mix(in srgb,var(--era) 55%,transparent);padding-left:10px} .xpost .who{margin-top:2px} .tile.visual{flex-basis:234px;background:repeating-linear-gradient(45deg,var(--hatch-a),var(--hatch-a) 8px,var(--hatch-b) 8px,var(--hatch-b) 16px);border:1px solid color-mix(in srgb,var(--era) 30%,transparent);clip-path:none;padding:14px;align-items:flex-end} .tile.visual span{font:400 9.5px/1.5 var(--mono);color:var(--mist);background:var(--canvas);border:1px solid var(--line);padding:7px 9px;align-self:flex-end;margin-top:auto} /* era hue wiring */ .claim[data-era="2005"]{--era:var(--era-2005);--era-t:var(--era-2005-t)} .claim[data-era="2006"]{--era:var(--era-2006);--era-t:var(--era-2006-t)} .claim[data-era="2008"]{--era:var(--era-2008);--era-t:var(--era-2008-t)} .claim[data-era="2012"]{--era:var(--era-2012);--era-t:var(--era-2012-t)} .claim[data-era="2016"]{--era:var(--era-2016);--era-t:var(--era-2016-t)} .claim[data-era="2017"]{--era:var(--era-2017);--era-t:var(--era-2017-t)} /* ============ THE COMPANY I KEEP (direction 2a) ============ */ .company{position:relative;padding:clamp(48px,5vw,68px) 0 clamp(52px,6vw,76px);background:linear-gradient(var(--deep),var(--canvas) 26%);border-top:1px solid var(--line-strong)} .company>.shell{position:relative;z-index:1} .company .sec-kick{color:var(--pink)} .company .sec-kick::before{background:linear-gradient(90deg,var(--purple),var(--pink))} .company .sec-h{font-size:clamp(28px,3.4vw,44px)} .company .sec-lead{margin-top:12px;font-size:16px} .company-head{position:relative;margin-bottom:24px} .company-head .said{font:400 10.5px/1.6 var(--mono);color:var(--faint);margin-top:10px} /* the network mark: six overlapping circles, one per era, people migrating between them */ .company-mark{position:absolute;top:-8px;right:0;width:min(56%,660px);height:170px;pointer-events:none} .company-mark canvas{position:absolute;inset:0;width:100%;height:100%} @media (max-width:960px){.company-mark{display:none}} .company-cta{margin-top:26px} .company-grid{display:grid;grid-template-columns:370px 1fr;border-top:1px solid var(--line-strong);max-width:1060px} .roster{border-right:1px solid var(--line);padding:4px 22px 4px 0} .roster-row{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:10px 14px;cursor:pointer;border-left:2px solid transparent;background:transparent;transition:background .16s ease,border-color .16s ease;width:100%;border-top:0;border-right:0;border-bottom:0;text-align:left;color:inherit;font:inherit} /* pixel-art photo frame: 8-bit stepped corners, era-color border via padding trick */ .pxframe{--u:3px;display:block;padding:2px;background:var(--line-strong);transition:background .16s ease;clip-path:polygon(calc(2*var(--u)) 0,calc(100% - 2*var(--u)) 0,calc(100% - 2*var(--u)) var(--u),calc(100% - var(--u)) var(--u),calc(100% - var(--u)) calc(2*var(--u)),100% calc(2*var(--u)),100% calc(100% - 2*var(--u)),calc(100% - var(--u)) calc(100% - 2*var(--u)),calc(100% - var(--u)) calc(100% - var(--u)),calc(100% - 2*var(--u)) calc(100% - var(--u)),calc(100% - 2*var(--u)) 100%,calc(2*var(--u)) 100%,calc(2*var(--u)) calc(100% - var(--u)),var(--u) calc(100% - var(--u)),var(--u) calc(100% - 2*var(--u)),0 calc(100% - 2*var(--u)),0 calc(2*var(--u)),var(--u) calc(2*var(--u)),var(--u) var(--u),calc(2*var(--u)) var(--u))} .pxframe img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);clip-path:inherit} .roster-row .face{width:38px;height:38px;flex:none} .roster-row .rname{font:500 17px/1.2 var(--disp);color:var(--mist);transition:color .16s ease} .roster-row .rtags{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:6px} .roster-row .rtags span{font:500 8.5px/1 var(--mono);letter-spacing:.1em;color:var(--faint);border:1px solid rgba(244,246,252,.16);padding:5px 7px;white-space:nowrap;transition:color .16s ease,border-color .16s ease} .roster-row .rtags svg{fill:var(--faint);opacity:.7;transition:fill .16s ease} .roster-row.onrow .rtags svg{fill:var(--rc);opacity:1} .roster-row.onrow{border-left-color:var(--rc);background:color-mix(in srgb,var(--rc) 12%,transparent)} .roster-row.onrow .rname{color:var(--ink)} .roster-row.onrow .face{background:var(--rc)} .roster-row.onrow .rtags span{color:var(--rc);border-color:color-mix(in srgb,var(--rc) 50%,transparent)} .roster-note{display:flex;align-items:center;gap:10px;padding:16px 16px 6px;font:400 9.5px/1.6 var(--mono);color:var(--faint)} .voice{padding:4px 44px 4px 38px;transition:background .3s ease} .voice-in{display:flex;flex-direction:column;gap:16px;padding:16px 0 20px} .voice-top{display:flex;justify-content:space-between;align-items:baseline;gap:24px} .voice-span{font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;transition:color .2s ease} .voice-counter{font:400 9.5px/1 var(--mono);color:var(--faint);white-space:nowrap} .voice-body{display:flex;gap:30px;align-items:flex-start;justify-content:space-between} .voice-quote{font-style:italic;color:var(--ink);font:400 italic clamp(20px,2vw,26px)/1.42 var(--body);max-width:min(40ch,100%)} .voice-quote.long{font-size:clamp(17px,1.75vw,21.5px)} .voice-photo{--u:6px;flex:0 0 128px;width:128px;height:128px;padding:3px} @media (max-width:820px){.voice-body{gap:18px}.voice-photo{--u:4px;flex-basis:92px;width:92px;height:92px}} .voice-attr{font:400 11px/1.65 var(--mono);color:var(--faint);border-top:1px solid var(--line);padding-top:12px;max-width:58ch} /* ============ STUBS + FOOTER ============ */ /* ============ WAYS WE CAN WORK TOGETHER ============ */ .work{position:relative;padding:clamp(52px,6vw,80px) 0 clamp(56px,6vw,84px);border-top:1px solid var(--line-strong);background:linear-gradient(var(--canvas),var(--deep))} .work>.shell{position:relative;z-index:1} /* echo frame: four corner wave fields (same construction as the record echoes) whose masks fade inward, so together they read as a border band */ .work-echo{position:absolute;inset:0;pointer-events:none;z-index:0} .work-echo>div{position:absolute;width:56%;height:52%;overflow:hidden} .work-echo canvas{position:absolute;inset:0;width:100%;height:100%} .we-tl{top:0;left:0;-webkit-mask-image:radial-gradient(120% 120% at 6% 4%,#000 34%,transparent 76%);mask-image:radial-gradient(120% 120% at 6% 4%,#000 34%,transparent 76%)} .we-tr{top:0;right:0;-webkit-mask-image:radial-gradient(120% 120% at 94% 4%,#000 34%,transparent 76%);mask-image:radial-gradient(120% 120% at 94% 4%,#000 34%,transparent 76%)} .we-bl{bottom:0;left:0;-webkit-mask-image:radial-gradient(120% 120% at 6% 96%,#000 34%,transparent 76%);mask-image:radial-gradient(120% 120% at 6% 96%,#000 34%,transparent 76%)} .we-br{bottom:0;right:0;-webkit-mask-image:radial-gradient(120% 120% at 94% 96%,#000 34%,transparent 76%);mask-image:radial-gradient(120% 120% at 94% 96%,#000 34%,transparent 76%)} .work .sec-kick{color:var(--iris-t)} .work .sec-kick::before{background:linear-gradient(90deg,var(--iris),var(--sky))} .work .sec-h{font-size:clamp(26px,3vw,38px);max-width:26ch} .work-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:32px} .wmod{grid-column:span 2} .work-grid>article:nth-child(n+5){grid-column:span 3} .lead-way{grid-column:1/-1} .mod.b-iri{--bc:var(--iris)} .wmod .idx{display:block;font:500 10px/1 var(--mono);letter-spacing:.14em;color:var(--faint);margin-bottom:12px} .lead-way>.in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr);column-gap:clamp(24px,4vw,56px);align-items:center} .lead-way .lw-head h3{font-size:clamp(22px,2.4vw,30px);margin-bottom:0} .lead-way p{max-width:62ch} .work-cta{margin-top:30px} @media (max-width:820px){ .work-grid{grid-template-columns:1fr} .wmod,.work-grid>article:nth-child(n+5),.lead-way{grid-column:1/-1} .lead-way>.in{grid-template-columns:1fr;row-gap:12px} } .stub{padding:clamp(56px,6vw,84px) 0;border-top:1px solid var(--line)} /* Everywhere carries The Present's band, same gradient and same edge. */ #everywhere{background:linear-gradient(180deg,var(--panel),var(--raised-2));border-bottom:1px solid var(--line-strong)} .stub .note{display:inline-flex;align-items:center;gap:10px;font:400 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);border:1px dashed rgba(244,246,252,.2);padding:10px 14px;margin-top:22px} .stub .note i{width:6px;height:6px;background:var(--sky);animation:px-glow var(--breath) ease-in-out infinite} /* prose variant: the placeholder that speaks in her voice rather than labelling a state. Uppercase + .12em tracking is right for a three-word status chip and wrong for a sentence — it turns 78 characters into a shouted banner. */ .stub .note.prose{text-transform:none;letter-spacing:.01em;font-size:11.5px;line-height:1.5;max-width:52ch;align-items:flex-start} .stub .note.prose i{flex:0 0 auto;margin-top:4px} .footer{border-top:1px solid var(--line);padding:26px clamp(22px,5vw,64px);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font:400 11px/1.7 var(--mono);color:var(--faint)} .footer a{transition:color .2s} .footer a:hover,.footer a:focus-visible{color:var(--ink)} /* ============ PIXEL CLAIM ICONS ============ One element each; pixels are box-shadows on a 5x5 grid of 6px cells. Frames advance in hard steps on the daisy clock. The base element is the top-left cell, kept transparent. */ .pxi{position:relative;display:block;width:30px;height:30px} .pxi::after{content:"";position:absolute;top:0;left:0;width:6px;height:6px;background:transparent} /* 2005 · The Eye: looks, then blinks */ .pxi-eye::after{animation:pxi-eye var(--spin) steps(1,end) infinite} @keyframes pxi-eye{ 0%,100%{box-shadow:6px 6px var(--sky),12px 6px var(--sky),18px 6px var(--sky),0 12px var(--sky),24px 12px var(--sky),6px 18px var(--sky),12px 18px var(--sky),18px 18px var(--sky),12px 12px #FFFFFF} 22%{box-shadow:6px 6px var(--sky),12px 6px var(--sky),18px 6px var(--sky),0 12px var(--sky),24px 12px var(--sky),6px 18px var(--sky),12px 18px var(--sky),18px 18px var(--sky),6px 12px #FFFFFF} 44%{box-shadow:6px 6px var(--sky),12px 6px var(--sky),18px 6px var(--sky),0 12px var(--sky),24px 12px var(--sky),6px 18px var(--sky),12px 18px var(--sky),18px 18px var(--sky),18px 12px #FFFFFF} 66%{box-shadow:6px 6px var(--sky),12px 6px var(--sky),18px 6px var(--sky),0 12px var(--sky),24px 12px var(--sky),6px 18px var(--sky),12px 18px var(--sky),18px 18px var(--sky),12px 12px #FFFFFF} 88%{box-shadow:0 12px var(--sky),6px 12px var(--sky),12px 12px var(--sky),18px 12px var(--sky),24px 12px var(--sky)} } /* 2006 · The Threshold: one pixel goes in first, the door lights */ .pxi-door::after{animation:pxi-door var(--spin) steps(1,end) infinite} @keyframes pxi-door{ 0%{box-shadow:18px 0 var(--purple),24px 0 var(--purple),24px 6px var(--purple),24px 12px var(--purple),24px 18px var(--purple),18px 24px var(--purple),24px 24px var(--purple),0 12px #FFFFFF} 20%{box-shadow:18px 0 var(--purple),24px 0 var(--purple),24px 6px var(--purple),24px 12px var(--purple),24px 18px var(--purple),18px 24px var(--purple),24px 24px var(--purple),6px 12px #FFFFFF,0 12px var(--purple-t)} 40%{box-shadow:18px 0 var(--purple),24px 0 var(--purple),24px 6px var(--purple),24px 12px var(--purple),24px 18px var(--purple),18px 24px var(--purple),24px 24px var(--purple),12px 12px #FFFFFF,6px 12px var(--purple-t)} 60%{box-shadow:18px 0 var(--purple),24px 0 var(--purple),24px 6px var(--purple),24px 12px var(--purple),24px 18px var(--purple),18px 24px var(--purple),24px 24px var(--purple),18px 12px #FFFFFF,12px 12px var(--purple-t),6px 12px var(--purple-t)} 80%,100%{box-shadow:18px 0 #FFFFFF,24px 0 #FFFFFF,24px 6px #FFFFFF,24px 12px #FFFFFF,24px 18px #FFFFFF,18px 24px #FFFFFF,24px 24px #FFFFFF,18px 12px var(--purple-t),12px 12px var(--purple-t)} } /* 2008 · The Ring: members drift, the circle holds */ .pxi-ring::after{animation:pxi-ring var(--spin) steps(1,end) infinite} @keyframes pxi-ring{ 0%,100%{box-shadow:12px 0 var(--pink),21px 3px var(--pink),24px 12px var(--pink),21px 21px var(--pink),12px 24px var(--pink),3px 21px var(--pink),0 12px var(--pink),3px 3px var(--pink)} 25%{box-shadow:12px 0 #FFFFFF,24px 0 var(--pink),24px 12px var(--pink),21px 21px var(--pink),12px 24px var(--pink),3px 21px var(--pink),0 12px var(--pink),3px 3px var(--pink)} 50%{box-shadow:12px 0 var(--pink),21px 3px var(--pink),24px 12px var(--pink),24px 24px #FFFFFF,12px 24px var(--pink),3px 21px var(--pink),0 12px var(--pink),3px 3px var(--pink)} 75%{box-shadow:12px 0 var(--pink),21px 3px var(--pink),24px 12px var(--pink),21px 21px var(--pink),12px 24px var(--pink),0 24px #FFFFFF,0 12px var(--pink),3px 3px var(--pink)} } /* 2012 · The Network: work flows center-out AND peer to peer around the edges; the white pulse travels corner to corner without a gatekeeper */ .pxi-orch::after{animation:pxi-orch var(--spin) steps(1,end) infinite} @keyframes pxi-orch{ 0%,100%{box-shadow:12px 12px #FFFFFF,0 0 var(--iris),24px 0 var(--iris),0 24px var(--iris),24px 24px var(--iris)} 12%{box-shadow:12px 12px #FFFFFF,0 0 #FFFFFF,24px 0 var(--iris),0 24px var(--iris),24px 24px var(--iris),6px 6px var(--iris-t)} 25%{box-shadow:12px 12px #FFFFFF,0 0 var(--iris),24px 0 #FFFFFF,0 24px var(--iris),24px 24px var(--iris),12px 0 var(--iris-t)} 37%{box-shadow:12px 12px #FFFFFF,0 0 var(--iris),24px 0 var(--iris),0 24px var(--iris),24px 24px #FFFFFF,24px 12px var(--iris-t)} 50%{box-shadow:12px 12px #FFFFFF,0 0 var(--iris),24px 0 var(--iris),0 24px var(--iris),24px 24px var(--iris),18px 18px #FFFFFF} 62%{box-shadow:12px 12px #FFFFFF,0 0 var(--iris),24px 0 var(--iris),0 24px #FFFFFF,24px 24px var(--iris),6px 18px var(--iris-t)} 75%{box-shadow:12px 12px #FFFFFF,0 0 var(--iris),24px 0 var(--iris),0 24px #FFFFFF,24px 24px #FFFFFF,12px 24px var(--iris-t)} 87%{box-shadow:12px 12px #FFFFFF,0 0 #FFFFFF,24px 0 var(--iris),0 24px var(--iris),24px 24px var(--iris),0 12px var(--iris-t)} } /* 2016 · The Dollar: the line builds itself down through the S to one solid stroke, exhales back in steps, then breathes in the classic pose */ .pxi-dollar::after{animation:pxi-dollar var(--spin) steps(1,end) infinite} @keyframes pxi-dollar{ 0%{box-shadow:6px 0px var(--royal-t),18px 0px var(--royal-t),0px 6px var(--royal-t),6px 12px var(--royal-t),18px 12px var(--royal-t),24px 18px var(--royal-t),6px 24px var(--royal-t),18px 24px var(--royal-t),12px 0px var(--royal-t),12px 12px var(--royal-t),12px 24px var(--royal-t),12px -6px #FFFFFF} 5%{box-shadow:6px 0px var(--royal-t),18px 0px var(--royal-t),0px 6px var(--royal-t),6px 12px var(--royal-t),18px 12px var(--royal-t),24px 18px var(--royal-t),6px 24px var(--royal-t),18px 24px var(--royal-t),12px 0px #FFFFFF,12px 12px var(--royal-t),12px 24px var(--royal-t),12px -6px #FFFFFF} 10%{box-shadow:6px 0px var(--royal-t),18px 0px var(--royal-t),0px 6px var(--royal-t),6px 12px var(--royal-t),18px 12px var(--royal-t),24px 18px var(--royal-t),6px 24px var(--royal-t),18px 24px var(--royal-t),12px 0px #FFFFFF,12px 12px var(--royal-t),12px 24px var(--royal-t),12px -6px #FFFFFF,12px 6px #FFFFFF} 15%{box-shadow:6px 0px var(--royal-t),18px 0px var(--royal-t),0px 6px var(--royal-t),6px 12px var(--royal-t),18px 12px var(--royal-t),24px 18px var(--royal-t),6px 24px var(--royal-t),18px 24px var(--royal-t),12px 0px #FFFFFF,12px 12px #FFFFFF,12px 24px var(--royal-t),12px -6px #FFFFFF,12px 6px #FFFFFF} 20%{box-shadow:6px 0px var(--royal-t),18px 0px var(--royal-t),0px 6px var(--royal-t),6px 12px var(--royal-t),18px 12px var(--royal-t),24px 18px var(--royal-t),6px 24px var(--royal-t),18px 24px var(--royal-t),12px 0px #FFFFFF,12px 12px #FFFFFF,12px 24px var(--royal-t),12px -6px #FFFFFF,12px 6px #FFFFFF,12px 18px #FFFFFF} 25%{box-shadow:6px 0px var(--royal-t),18px 0px var(--royal-t),0px 6px var(--royal-t),6px 12px var(--royal-t),18px 12px var(--royal-t),24px 18px var(--royal-t),6px 24px var(--royal-t),18px 24px var(--royal-t),12px 0px #FFFFFF,12px 12px #FFFFFF,12px 24px #FFFFFF,12px -6px #FFFFFF,12px 6px #FFFFFF,12px 18px #FFFFFF} 30%{box-shadow:6px 0px var(--royal-t),18px 0px var(--royal-t),0px 6px var(--royal-t),6px 12px var(--royal-t),18px 12px var(--royal-t),24px 18px var(--royal-t),6px 24px var(--royal-t),18px 24px var(--royal-t),12px 0px #FFFFFF,12px 12px #FFFFFF,12px 24px #FFFFFF,12px -6px #FFFFFF,12px 6px #FFFFFF,12px 18px #FFFFFF,12px 30px #FFFFFF} 44%{box-shadow:6px 0px var(--royal-t),18px 0px var(--royal-t),0px 6px var(--royal-t),6px 12px var(--royal-t),18px 12px var(--royal-t),24px 18px var(--royal-t),6px 24px var(--royal-t),18px 24px var(--royal-t),12px 0px #FFFFFF,12px 12px #FFFFFF,12px 24px #FFFFFF,12px 6px #FFFFFF,12px 18px #FFFFFF} 50%{box-shadow:6px 0px var(--royal-t),18px 0px var(--royal-t),0px 6px var(--royal-t),6px 12px var(--royal-t),18px 12px var(--royal-t),24px 18px var(--royal-t),6px 24px var(--royal-t),18px 24px var(--royal-t),12px 0px var(--royal-t),12px 12px #FFFFFF,12px 24px var(--royal-t),12px 6px #FFFFFF,12px 18px #FFFFFF} 56%{box-shadow:6px 0px var(--royal-t),18px 0px var(--royal-t),0px 6px var(--royal-t),6px 12px var(--royal-t),18px 12px var(--royal-t),24px 18px var(--royal-t),6px 24px var(--royal-t),18px 24px var(--royal-t),12px 0px var(--royal-t),12px 12px var(--royal-t),12px 24px var(--royal-t),12px 6px #FFFFFF,12px 18px #FFFFFF} 68%{box-shadow:6px 0px var(--royal-t),18px 0px var(--royal-t),0px 6px var(--royal-t),6px 12px var(--royal-t),18px 12px var(--royal-t),24px 18px var(--royal-t),6px 24px var(--royal-t),18px 24px var(--royal-t),12px 0px var(--royal-t),12px 12px var(--royal-t),12px 24px var(--royal-t),12px -6px #FFFFFF,12px 6px #FFFFFF,12px 18px #FFFFFF,12px 30px #FFFFFF} 82%{box-shadow:6px 0px var(--royal-t),18px 0px var(--royal-t),0px 6px var(--royal-t),6px 12px var(--royal-t),18px 12px var(--royal-t),24px 18px var(--royal-t),6px 24px var(--royal-t),18px 24px var(--royal-t),12px 0px var(--royal-t),12px 12px var(--royal-t),12px 24px var(--royal-t),12px 6px #FFFFFF,12px 18px #FFFFFF} 90%,100%{box-shadow:6px 0px var(--royal-t),18px 0px var(--royal-t),0px 6px var(--royal-t),6px 12px var(--royal-t),18px 12px var(--royal-t),24px 18px var(--royal-t),6px 24px var(--royal-t),18px 24px var(--royal-t),12px 0px var(--royal-t),12px 12px var(--royal-t),12px 24px var(--royal-t),12px -6px #FFFFFF,12px 6px #FFFFFF,12px 18px #FFFFFF,12px 30px #FFFFFF} } /* 2017 · The Route: the wander, then the straight line */ .pxi-route::after{animation:pxi-route var(--spin) steps(1,end) infinite} @keyframes pxi-route{ 0%{box-shadow:0 18px var(--sky)} 10%{box-shadow:0 18px var(--sky),6px 6px var(--sky)} 20%{box-shadow:0 18px var(--sky),6px 6px var(--sky),12px 18px var(--sky)} 30%{box-shadow:0 18px var(--sky),6px 6px var(--sky),12px 18px var(--sky),18px 6px var(--sky)} 40%,55%{box-shadow:0 18px var(--sky),6px 6px var(--sky),12px 18px var(--sky),18px 6px var(--sky),24px 12px var(--pink)} 62%,90%{box-shadow:0 12px var(--sky),6px 12px var(--sky),12px 12px var(--sky),18px 12px var(--sky),24px 12px var(--pink)} 95%{box-shadow:24px 12px var(--pink)} } /* ============ SAY HI · the contact form ============ Follows the interaction grammar: panel = module (rule 4, minus the lift, because a form is not a card you click), submit = button (rule 3), the two escape-hatch links = inline link (rule 2). No fifth treatment invented. */ .sayhi{position:relative;overflow:hidden;padding:clamp(56px,6vw,88px) 0 clamp(82px,8vw,126px);border-top:1px solid var(--line)} /* pulsing pixel wave across the bottom, same construction as the Ways We Work echo frame: two corner fields with radial masks, so the texture is densest at the two bottom corners and thins toward the middle. */ .sh-echo{position:absolute;inset:0;pointer-events:none;z-index:0} .sh-echo>div{position:absolute;bottom:0;width:70%;height:92%;overflow:hidden} .sh-echo canvas{position:absolute;inset:0;width:100%;height:100%} .she-l{left:0;-webkit-mask-image:radial-gradient(130% 130% at 3% 100%,#000 26%,transparent 88%);mask-image:radial-gradient(130% 130% at 3% 100%,#000 26%,transparent 88%)} .she-r{right:0;-webkit-mask-image:radial-gradient(130% 130% at 97% 100%,#000 26%,transparent 88%);mask-image:radial-gradient(130% 130% at 97% 100%,#000 26%,transparent 88%)} .sayhi .shell{position:relative;z-index:1} .sh-grid{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);gap:clamp(30px,4.4vw,64px);align-items:start} .sh-intro .sec-h{max-width:15ch} .sh-lead{color:var(--mist);font-size:16.5px;line-height:1.62;letter-spacing:-.012em;margin-top:18px;max-width:40ch;text-wrap:pretty} .sh-alt{color:var(--faint);font-size:13.5px;line-height:1.6;margin-top:20px} .sh-alt a{color:var(--ink);border-bottom:1px solid var(--pink);padding-bottom:2px;transition:color .2s,border-color .2s} .sh-alt a:hover,.sh-alt a:focus-visible{color:var(--sky);border-color:var(--sky)} .hiform{--bc:var(--purple);--cut:20px;background:var(--bc);padding:1.5px;clip-path:polygon(var(--cut) 0,100% 0,100% 100%,0 100%,0 var(--cut))} .hiform>.in{position:relative;background:linear-gradient(160deg,var(--raised),var(--canvas) 70%);padding:clamp(22px,2.7vw,32px);clip-path:polygon(19px 0,100% 0,100% 100%,0 100%,0 19px)} .hiform .px{position:absolute;top:15px;right:17px;width:6px;height:6px;background:var(--bc);box-shadow:0 0 7px 1.5px color-mix(in srgb,var(--bc) 70%,transparent);animation:px-glow var(--breath) ease-in-out infinite} .hf-legend,.hf-field>label{display:block;font:500 10px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--faint);margin-bottom:11px} /* min-inline-size:0 overrides the UA's fieldset min-content floor, which otherwise sets the whole form's min width to the unwrapped chip row and pushes the panel past the viewport on phones. */ .hf-topics{display:flex;flex-wrap:wrap;gap:8px;border:0;margin:0 0 22px;padding:0;min-inline-size:0} .hf-topics label{position:relative;cursor:pointer} .hf-topics input{position:absolute;opacity:0;width:0;height:0} .hf-topics span{display:inline-block;font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mist);background:var(--deep);border:1px solid var(--line-strong);padding:11px 15px;transition:color .2s,border-color .2s,background .2s} .hf-topics label:hover span{color:var(--ink);border-color:var(--purple-t)} .hf-topics input:checked+span{color:var(--ink);background:var(--raised-2);border-color:var(--pink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pink) 35%,transparent)} .hf-topics input:focus-visible+span{outline:1.5px solid var(--sky);outline-offset:3px} .hf-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .hf-field{margin-bottom:18px} .hf-field .opt{text-transform:none;letter-spacing:.01em;color:var(--faint);font-family:var(--body);font-size:11.5px} .hiform input[type=text],.hiform input[type=email],.hiform textarea{width:100%;font:400 14.5px/1.55 var(--body);letter-spacing:-.01em;color:var(--ink);background:var(--deep);border:1px solid var(--line-strong);padding:12px 14px;transition:border-color .2s,background .2s} .hiform textarea{resize:vertical;min-height:132px} .hiform input::placeholder,.hiform textarea::placeholder{color:#5F6573} .hiform input:hover,.hiform textarea:hover{border-color:rgba(244,246,252,.22)} .hiform input:focus,.hiform textarea:focus{outline:none;border-color:var(--sky);background:var(--raised-2)} .hiform input:focus-visible,.hiform textarea:focus-visible{outline:1.5px solid var(--sky);outline-offset:2px} .hf-pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .hf-foot{display:flex;flex-wrap:wrap;align-items:center;gap:18px 24px;margin-top:26px} /* a