/* Wayside Foundry. One stylesheet, every page. Lifted verbatim out of the original single-page index.html so nothing drifts: same ground, same paper, same Jost, same wide-tracked caps. Anything new below reuses these tokens rather than inventing a value. No gradients, no shadows, no accent colour. */ :root{ --ground:#08090b; --paper:#ffffff; --soft:#b9c0c8; --faint:#7b838d; --rule:#20252c; --rule-strong:#333b45; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} /* The lit black. Three fixed layers: a cool highlight falling from above, a tighter bloom behind the centre, and a vignette pulling the corners down. Fixed attachment so the light stays put while the page moves under it. */ body{ margin:0; color:var(--paper); background-color:var(--ground); background-image: radial-gradient(120% 62% at 50% -8%, rgba(150,175,205,.16) 0%, rgba(120,145,175,.05) 34%, rgba(0,0,0,0) 62%), radial-gradient(58% 34% at 50% 30%, rgba(190,215,245,.10) 0%, rgba(0,0,0,0) 70%), radial-gradient(130% 100% at 50% 40%, rgba(0,0,0,0) 42%, rgba(0,0,0,.55) 100%); background-attachment:fixed; background-repeat:no-repeat; font:400 17px/1.65 "Jost",system-ui,-apple-system,"Segoe UI",sans-serif; /* Deliberately NOT -webkit-font-smoothing:antialiased. On a dark ground it thins light text and is what made an earlier draft of this site look blurry. */ text-rendering:optimizeLegibility; } img,svg{display:block} a{color:var(--paper);text-decoration:none} a:focus-visible{outline:1px solid var(--paper);outline-offset:5px} .wrap{max-width:820px;margin:0 auto;padding:0 30px} .label{font-size:11px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--faint)} /* ---------- the mark, and its breathing ---------- */ .markwrap{--size:clamp(210px,34vw,320px); position:relative;width:var(--size);height:var(--size);display:grid;place-items:center} .bloom{position:absolute;inset:calc(var(--size) * -0.3);border-radius:50%; background:radial-gradient(circle, rgba(200,222,255,.20) 0%, rgba(200,222,255,.06) 42%, rgba(0,0,0,0) 70%); animation:bloom 7s ease-in-out infinite} .mark{width:100%;height:100%;animation:breathe 7s ease-in-out infinite} .mark polygon{stroke:var(--paper)} .mark path{fill:var(--paper)} @keyframes breathe{0%,100%{transform:scale(0.965)}50%{transform:scale(1.075)}} @keyframes bloom {0%,100%{opacity:.45} 50%{opacity:1}} @media (prefers-reduced-motion:reduce){.mark,.bloom{animation:none}.bloom{opacity:.7}} /* ---------- wordmark ---------- */ /* text-indent cancels the trailing letter-space so the run stays optically centred. */ .wordmark{text-align:center} .wordmark .a{display:block;font-size:clamp(30px,6.6vw,46px);font-weight:400;letter-spacing:.30em; text-indent:.30em;line-height:1} .wordmark .b{display:block;font-size:clamp(13px,2.5vw,17px);font-weight:400;letter-spacing:.52em; text-indent:.52em;color:var(--soft);margin-top:14px} /* ---------- home ---------- */ .hero{min-height:86vh;display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;padding:80px 30px 60px} .homenav{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap; margin-top:64px;font-size:14px;letter-spacing:.22em;text-transform:uppercase;font-weight:500} .homenav a{color:var(--paper);padding-bottom:6px;border-bottom:1px solid transparent} .homenav a:hover{border-bottom-color:var(--paper)} .homenav .sep{color:var(--faint)} /* Four links, one line, at every width. Contact moved to the Founders page, so the row is Work, Build, Notes, Founders and there is no forced break and no hidden separator. It steps down in three sizes instead, each measured against the widest the row gets at that size with the hero's gutters taken off the viewport: 581 and up 14px .22em gap16 row 392.3px 68.7px spare at 521 391 to 520 12px .16em gap10 row 299.2px 31.8px spare at 391 390 and down 11px .10em gap8 row 252.4px 31.6px spare at 320, 11.6px at 300 The last step also pulls the hero's side gutters in from 30px to 18px, which is what buys the final 24px without dropping below 11px type. 11px is already the site's small size, on .label and .legal, so nothing new is introduced. Measured at 23 widths from 1440 down to 290: one line throughout, nothing clipped, no stranded separator. It wraps at 280px, narrower than any mainstream phone. A fifth link does not fit at any of these sizes, so adding one means working this out again rather than putting a break back in. */ @media(max-width:520px){.homenav{font-size:12px;letter-spacing:.16em;gap:10px}} @media(max-width:390px){ .homenav{font-size:11px;letter-spacing:.10em;gap:8px} .hero{padding-left:18px;padding-right:18px} } /* One line, never wrapping. It is a legal identity, not a sentence. */ .legal{margin-top:38px;white-space:nowrap;font-size:11px;font-weight:500;letter-spacing:.24em; text-transform:uppercase;color:var(--faint)} @media(max-width:400px){.legal{letter-spacing:.14em;font-size:10px}} /* Founders HQ sits on its own centred line under the identity rather than inside it. It was appended to the legal line on 4 Oct, which took that line to 450.4px. The line is nowrap, so from 449px down it was wider than the viewport and the home page could be dragged sideways: 401 to 449 (iPhone 14 and 15 Pro Max at 430, 14 Plus at 428, 11 and XR at 414) and 358 and below (SE at 320). The identity on its own is 325.7px and clears every width. This is its own line at every size, desktop included, rather than a wrap that only shows up on a phone. The inline styles that used to sit on the anchor live here now. */ .hqlink{margin-top:12px;text-align:center;font-size:11px;font-weight:500;letter-spacing:.24em; text-transform:uppercase;color:var(--faint)} .hqlink a{color:inherit;border-bottom:1px solid currentColor;padding-bottom:3px} .hqlink a:hover{color:var(--paper)} @media(max-width:400px){.hqlink{letter-spacing:.14em;font-size:10px}} /* ---------- home layout, 14 Oct 2026 ---------- Three rows filling the screen: links top right, mark and title in the middle, identity and Founders HQ pinned to the bottom. The old .homenav row under the title is no longer used. */ .home{min-height:100vh;min-height:100svh;display:flex;flex-direction:column} .homelinks{display:flex;justify-content:flex-end;align-items:center;gap:12px;padding:22px 28px 0; font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase} .homelinks a{color:var(--paper);padding-bottom:4px;border-bottom:1px solid transparent} .homelinks a:hover{border-bottom-color:var(--paper)} .homelinks .sep{color:var(--faint)} .home .hero{flex:1;min-height:0;padding:40px 30px} .homefoot{text-align:center;padding:0 18px 26px} .homefoot .legal{margin-top:0} @media(max-width:400px){.homelinks{font-size:11px;letter-spacing:.10em;gap:8px;padding:18px 16px 0}} /* About: a closed details element under the title, left justified on the title's column. The caret turns when open; the body is plain reading text. */ .about{margin-top:40px;width:100%;max-width:520px;text-align:left} .about summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px; font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);padding:6px 0} .about summary::-webkit-details-marker{display:none} .about summary:hover,.about[open] summary{color:var(--paper)} .about summary:focus-visible{outline:1px solid var(--paper);outline-offset:5px} .about .caret{width:10px;height:6px;fill:none;stroke:currentColor;stroke-width:1.4;transition:transform .2s ease} .about[open] .caret{transform:rotate(180deg)} .aboutbody{margin-top:10px;padding-top:14px;border-top:1px solid var(--rule); font-size:15px;line-height:1.7;color:var(--soft)} .aboutbody p{margin:0 0 12px} .aboutbody .creed{color:var(--paper);margin:18px 0 18px;padding-left:14px;border-left:1px solid var(--rule-strong);line-height:1.6} .aboutbody .creed span{display:block;margin-bottom:10px} .aboutbody .creed span:last-child{margin-bottom:0} .aboutbody a{color:var(--paper);border-bottom:1px solid var(--rule-strong)} .aboutbody a:hover{border-bottom-color:var(--paper)} @media(max-width:400px){.about summary{letter-spacing:.14em;font-size:10px}.aboutbody{font-size:14px}} @media (prefers-reduced-motion:reduce){.about .caret{transition:none}} /* ---------- inner-page nav ---------- */ .topnav{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap; padding:34px 0 0} .topnav .lock{display:flex;align-items:center;gap:14px} .topnav .lock svg{width:38px;height:38px} .topnav .lock .nm{font-size:15px;font-weight:400;letter-spacing:.26em;text-indent:.26em; text-transform:uppercase} .back{font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)} .back:hover{color:var(--paper)} /* A lone label now. The h1s came out, so this padding is the whole separation between the nav and the content and is set to look deliberate on its own. */ .pagehead{padding:64px 0 40px} /* ---------- work ---------- */ /* A list, not a grid. One product today and adding the next needs no redesign: another .app block and nothing else changes. The row is a div rather than a link because the store badge is its own link, and nesting one anchor inside another is invalid HTML that browsers silently unpick, usually by breaking the inner one. */ .apps{display:flex;flex-direction:column;border-top:1px solid var(--rule)} .app{padding:34px 0;border-bottom:1px solid var(--rule)} .app .nm{display:block;font-size:clamp(21px,3.4vw,27px);font-weight:400;letter-spacing:-.015em} .app .nm:hover{border-bottom:1px solid var(--paper)} .app .ds{color:var(--soft);font-size:16px;margin:9px 0 0;max-width:46ch} .app .go{display:inline-block;margin-top:14px;font-size:12px;font-weight:500;letter-spacing:.2em; text-transform:uppercase;color:var(--faint);white-space:nowrap} .app .go:hover{color:var(--paper)} /* Google's badge is used as shipped. Their guidelines permit self-hosting it and forbid recolouring, cropping or redrawing it, so width is the only thing set here. */ .stores{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px} .playbadge img{width:168px;height:auto} /* Not Apple's badge, on purpose. Theirs may only point at a live product page. */ .soon{font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase; color:var(--faint);border:1px solid var(--rule);padding:11px 16px} /* ---------- founders ---------- */ /* Paul left, Alejandro right, as asked. On narrow screens they stack and source order puts Paul first, so no ordering trickery is needed. */ .founders{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding-bottom:20px} @media(max-width:760px){.founders{grid-template-columns:1fr;gap:22px}} .card{border:1px solid var(--rule);padding:28px 26px 26px;display:flex;flex-direction:column} .portrait{width:104px;height:104px;border-radius:50%;object-fit:cover;filter:grayscale(1);margin-bottom:20px} .card h2{font-size:22px;font-weight:400;letter-spacing:-.01em;margin:0 0 4px} .role{font-size:11px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--faint)} /* Both founders have a bio now. The grid stretches both cards to the taller row, so any difference in length shows as empty space at the bottom of the shorter one. */ .bio{color:var(--soft);font-size:16px;margin:16px 0 0;max-width:42ch;flex:1 0 auto} /* Contact lives on this page now rather than in the home nav. The two cards above are the founders' own; this is the company address, for anyone who does not need either of us by name. Baseline aligned so the label sits on the same line as the address it labels. */ .contactline{border-top:1px solid var(--rule);margin-top:14px;padding:26px 0 2px; display:flex;align-items:baseline;gap:16px;flex-wrap:wrap} .contactline a{font-size:17px;border-bottom:1px solid var(--rule-strong);padding-bottom:2px} .contactline a:hover{border-bottom-color:var(--paper)} /* No plate. The code is drawn in --soft on nothing, so the card is its background and its quiet zone both. Give it no border, no radius and no fill: anything here would put the white square back by another name. */ .qr{margin:26px 0 0;width:184px;max-width:100%} .qr img{width:100%;height:auto;display:block} .save{display:inline-block;margin:22px 0 0;font-size:12px;font-weight:500;letter-spacing:.2em; text-transform:uppercase;padding:14px 24px;border:1px solid var(--rule-strong)} .save:hover{border-color:var(--paper)} footer{padding:56px 0 74px;text-align:center} /* ---------- how we work ---------- Two rules run this page. The three cards ARE the path field, so the question is asked once. And the rest of the form does not exist until a card is chosen, so nothing is ever waiting silently below the fold for the visitor to discover by scrolling. The motion is the mark's. breathe and bloom are the same 7s pair the logo uses on the home page, reused here rather than redrawn, so a card coming alive under the cursor reads as the same object family. */ .vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} .lead{color:var(--soft);font-size:17px;line-height:1.7;margin:0;max-width:46ch} /* ---------- the three cards ---------- */ .tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:36px 0 0; padding:0;border:0;min-width:0} @media(max-width:720px){.tiers{grid-template-columns:1fr;gap:14px}} .tier{position:relative;display:flex;flex-direction:column;cursor:pointer; border:1px solid var(--rule);padding:30px 26px 28px; transition:border-color .55s cubic-bezier(.22,.61,.36,1), background-color .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1), opacity .55s cubic-bezier(.22,.61,.36,1); animation:rise .7s cubic-bezier(.22,.61,.36,1) backwards} .tier:nth-of-type(1){animation-delay:.05s} .tier:nth-of-type(2){animation-delay:.14s} .tier:nth-of-type(3){animation-delay:.23s} @keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} .tier:hover{border-color:var(--rule-strong);transform:translateY(-3px)} .tier input{position:absolute;top:50%;left:50%;width:1px;height:1px;opacity:0;margin:0; pointer-events:none} .tier:has(input:focus-visible){outline:1px solid var(--paper);outline-offset:5px} /* Once something is chosen the other two step back rather than disappear, so switching is still one click and the set still reads as a set. */ .tiers.any .tier,.tiers:has(input:checked) .tier{opacity:.34} .tiers.any .tier:hover,.tiers:has(input:checked) .tier:hover{opacity:.62} .tiers .tier.on,.tiers:has(input:checked) .tier:has(input:checked){opacity:1; border-color:var(--paper);background:rgba(255,255,255,.05)} /* ---------- the icon, breathing ---------- */ .tier .ico{position:relative;width:46px;height:46px;display:block;margin-bottom:22px} .tier .ico svg{position:relative;width:100%;height:100%;display:block; transition:transform .6s cubic-bezier(.22,.61,.36,1)} .tier .ico polygon{fill:none;stroke:var(--faint);stroke-width:2;transition:stroke .55s ease} .tier .ico circle{fill:var(--faint);transition:fill .55s ease} /* The same bloom that sits behind the mark on the home page, scaled to the icon. */ .tier .glow{position:absolute;inset:-80%;border-radius:50%;opacity:0; background:radial-gradient(circle, rgba(200,222,255,.22) 0%, rgba(200,222,255,.07) 42%, rgba(0,0,0,0) 70%); transition:opacity .8s ease} .tier:hover .ico svg,.tier.on .ico svg, .tier:has(input:checked) .ico svg{animation:breathe 7s ease-in-out infinite} .tier:hover .glow,.tier.on .glow, .tier:has(input:checked) .glow{opacity:1;animation:bloom 7s ease-in-out infinite} .tier:hover .ico polygon,.tier.on .ico polygon, .tier:has(input:checked) .ico polygon{stroke:var(--paper)} .tier:hover .ico circle,.tier.on .ico circle, .tier:has(input:checked) .ico circle{fill:var(--paper)} /* ---------- the corner mark, and the way back out ---------- */ .tier .mk{position:absolute;top:24px;right:24px;width:21px;height:21px;border-radius:50%; border:1px solid var(--rule-strong);display:grid;place-items:center; transition:border-color .5s ease,background-color .5s ease} .tier .mk svg{grid-area:1/1;width:13px;height:13px;fill:none;stroke-width:2.4; stroke-linecap:round;stroke-linejoin:round;opacity:0; transition:opacity .35s ease;stroke:var(--ground)} .tier.on .mk,.tier:has(input:checked) .mk{border-color:var(--paper);background:var(--paper)} .tier.on .mk .ck,.tier:has(input:checked) .mk .ck{opacity:1} /* Hovering the card you already chose turns the tick into an x. That is the whole affordance for backing out: no button, no label, and Escape does it too. */ .tier.on:hover .mk .ck,.tier:has(input:checked):hover .mk .ck{opacity:0} .tier.on:hover .mk .xx,.tier:has(input:checked):hover .mk .xx{opacity:1} .tier .nm{display:block;font-size:16px;font-weight:500;letter-spacing:.2em;text-transform:uppercase; padding-right:30px} .tier .who{display:block;font-size:10px;font-weight:500;letter-spacing:.16em;white-space:nowrap; text-transform:uppercase;color:var(--faint);margin-top:8px;transition:color .55s ease} .tier.on .who,.tier:has(input:checked) .who{color:var(--soft)} .tier .ds{display:block;color:var(--soft);font-size:14px;line-height:1.6;margin:16px 0 0} /* ---------- the reveal ---------- 0fr to 1fr animates the height with no hard-coded maximum, so the form can grow or shrink later without anyone remembering to retune a number. Driven by :has, which means it opens on the checked radio alone and still works with JavaScript off. */ .reveal{display:grid;grid-template-rows:0fr;opacity:0;transform:translateY(10px); transition:grid-template-rows .72s cubic-bezier(.22,.61,.36,1), opacity .5s ease, transform .72s cubic-bezier(.22,.61,.36,1)} .reveal > .reveal-in{overflow:hidden;min-height:0} .wform.is-open .reveal, .wform:has(.tiers input:checked) .reveal{grid-template-rows:1fr;opacity:1;transform:none} .start{margin-top:52px;border-top:1px solid var(--rule);padding-top:38px} .formhead > span{display:none} .wform:has(input[value="Individual"]:checked) .formhead > span[data-for="Individual"], .wform:has(input[value="Enterprise"]:checked) .formhead > span[data-for="Enterprise"], .wform:has(input[value="Venture"]:checked) .formhead > span[data-for="Venture"], .formhead > span.on{display:inline} /* ---------- fields ---------- */ .field,.formnote{max-width:520px} .field{margin:22px 0 0} .field > label{display:block;font-size:11px;font-weight:500;letter-spacing:.22em; text-transform:uppercase;color:var(--faint);margin:0 0 9px;transition:color .35s ease} .field:focus-within > label{color:var(--paper)} .wform input:not([type=radio]),.wform textarea{width:100%; background:rgba(255,255,255,.035);border:1px solid var(--rule);color:var(--paper); font:inherit;font-size:15px;padding:14px 16px;border-radius:0;color-scheme:dark; transition:border-color .4s ease,background-color .4s ease} .wform input::placeholder,.wform textarea::placeholder{color:var(--faint)} .wform input:not([type=radio]):focus,.wform textarea:focus{outline:none; border-color:var(--paper);background:rgba(255,255,255,.06)} .wform textarea{min-height:132px;resize:vertical;display:block} .wform input:-webkit-autofill,.wform input:-webkit-autofill:focus{ -webkit-text-fill-color:var(--paper);caret-color:var(--paper); box-shadow:0 0 0 1000px #0d0e11 inset} /* The button breathes too, but only under the cursor, and only the bloom. Scaling a control the user is aiming at would be motion for its own sake. */ .send{position:relative;overflow:hidden;margin-top:30px;background:transparent; border:1px solid var(--rule-strong);color:var(--paper);font:inherit;font-size:12px; font-weight:500;letter-spacing:.2em;text-transform:uppercase;padding:16px 38px;cursor:pointer; transition:border-color .45s ease,background-color .45s ease,opacity .35s ease} .send .t{position:relative} .send .glow{position:absolute;inset:-120% -40%;opacity:0;pointer-events:none; background:radial-gradient(circle, rgba(200,222,255,.20) 0%, rgba(200,222,255,.06) 45%, rgba(0,0,0,0) 70%); transition:opacity .8s ease} .send:hover:not(:disabled){border-color:var(--paper)} .send:hover:not(:disabled) .glow{opacity:1;animation:bloom 7s ease-in-out infinite} .send:disabled{opacity:.45;cursor:default} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .formnote{color:var(--soft);font-size:13px;margin:18px 0 0} .formnote a{text-decoration:underline;text-underline-offset:3px} .done{margin-top:56px;border-top:1px solid var(--rule);padding-top:38px; opacity:0;transform:translateY(10px); transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1)} .done.in{opacity:1;transform:none} .success{color:var(--soft);font-size:17px;line-height:1.7;margin:0;max-width:46ch} @media(prefers-reduced-motion:reduce){ .tier,.reveal,.done{animation:none;transition:none} .tier:hover{transform:none} /* These have to restate the hover and checked selectors. A plainer reset loses to them on specificity and the icons keep breathing for someone who asked them not to. The glow stays lit, it just stops pulsing. */ .tier:hover .ico svg,.tier.on .ico svg,.tier:has(input:checked) .ico svg, .tier:hover .glow,.tier.on .glow,.tier:has(input:checked) .glow, .send:hover:not(:disabled) .glow{animation:none} .done{opacity:1;transform:none} html{scroll-behavior:auto} } /* ---------- the mark turns ---------- Both hexagons turn together, as one object, so the 30 degree offset between them never changes and the twelve point rosette stays a rosette at every angle. Counter-rotating them would not: the offset would pass through 0 and 60 and close the mark into a single hexagon twelve times a revolution. 51 seconds is 7.1 degrees a second, chosen by eye on a dial. The W is outside the group on purpose. It is the same glyph as the W in the wordmark and it stays upright. The 38px lockups in the inner page nav do not turn; at that size it would be a spinner rather than a mark. */ .mark .rosette{transform-box:view-box;transform-origin:center;animation:rosette 51s linear infinite} @keyframes rosette{to{transform:rotate(360deg)}} /* ---------- how we work: the card lights under the pointer ---------- The same light the page ground is made of, following the cursor across the card. Clipped by overflow, which is why the card sets it. */ .tier{overflow:hidden} .tier .lit{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .5s ease; background:radial-gradient(180px circle at var(--mx,50%) var(--my,50%), rgba(200,222,255,.13) 0%, rgba(200,222,255,.04) 45%, rgba(0,0,0,0) 72%)} .tier:hover .lit,.tier.on .lit,.tier:has(input:checked) .lit{opacity:1} /* ---------- the icons draw themselves ---------- 240 is longer than any of the three outlines, so one value covers all of them and there is no per icon number to keep in step with the artwork. */ .tier .ico polygon{stroke-dasharray:240;animation:draw 1.15s cubic-bezier(.22,.61,.36,1) backwards} .tier:nth-of-type(1) .ico polygon{animation-delay:.25s} .tier:nth-of-type(2) .ico polygon{animation-delay:.34s} .tier:nth-of-type(3) .ico polygon{animation-delay:.43s} .tier .ico circle{animation:fadein .6s ease .95s backwards} @keyframes draw{from{stroke-dashoffset:240}to{stroke-dashoffset:0}} @keyframes fadein{from{opacity:0}to{opacity:1}} /* ---------- the panel arrives in order ---------- Delay by position. The three path blocks share a delay because only one is ever on screen, so the run reads the same whichever path was picked. */ .wform.is-open .formbody > *, .wform:has(.tiers input:checked) .formbody > *{animation:riseSmall .6s cubic-bezier(.22,.61,.36,1) backwards} .formbody > *:nth-child(1){animation-delay:.26s} .formbody > *:nth-child(2), .formbody > *:nth-child(3), .formbody > *:nth-child(4){animation-delay:.34s} .formbody > *:nth-child(5){animation-delay:.42s} .formbody > *:nth-child(6){animation-delay:.50s} .formbody > *:nth-child(7){animation-delay:.58s} .formbody > *:nth-child(8){animation-delay:.66s} .formbody > *:nth-child(9){animation-delay:.74s} .formbody > *:nth-child(10){animation-delay:.82s} @keyframes riseSmall{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} /* ---------- the questions, as chips ---------- A chip is one tap. A text box is a sentence somebody has to compose, and most people answering a form on a phone will not compose three of them. Anything with a small fixed set of answers is a chip, and only the one genuinely open question stays a text area. */ .qs{margin:24px 0 0;max-width:560px} .qs[hidden]{display:none!important} /* The Venture intake: a short PRD in four parts. */ .vnote{max-width:560px;margin:0;font-size:14px;line-height:1.65;color:var(--soft)} .vsec{margin:44px 0 0;padding-top:22px;border-top:1px solid var(--rule);font-size:11px; font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--paper);max-width:560px} .vblock .qs{margin-top:22px} .chips.stack{flex-direction:column;align-items:stretch} .chips.stack .chip{line-height:1.5;padding:12px 15px} .vblock textarea{min-height:92px} .qlabel{display:block;font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase; color:var(--faint);margin:0 0 11px} .chips{display:flex;flex-wrap:wrap;gap:9px} .chip{position:relative;display:inline-flex;align-items:center;border:1px solid var(--rule); padding:10px 15px;font-size:13px;color:var(--soft);cursor:pointer; transition:border-color .4s ease,color .4s ease,background-color .4s ease} .chip:hover{border-color:var(--rule-strong);color:var(--paper)} .chip input{position:absolute;opacity:0;width:1px;height:1px} .chip:has(input:checked){border-color:var(--paper);color:var(--paper);background:rgba(255,255,255,.06)} .chip:has(input:focus-visible){outline:1px solid var(--paper);outline-offset:4px} /* ---------- the address, read back ---------- A typo in your own email address is invisible to you, because you know what you meant. Showing it back is the only check that catches one in a private domain. */ .echo{font-size:13px;color:var(--faint);margin:10px 0 0;min-height:1.2em;max-width:520px} .echo b{color:var(--soft);font-weight:400} .echo button{background:none;border:0;padding:0;color:var(--paper);font:inherit;font-size:13px; text-decoration:underline;text-underline-offset:3px;cursor:pointer} /* ---------- the attachment ---------- */ .filerow{margin:24px 0 0;max-width:560px} .filebtn{position:relative;display:inline-flex;align-items:center;gap:10px;border:1px dashed var(--rule-strong); padding:13px 17px;font-size:13px;color:var(--soft);cursor:pointer; transition:border-color .4s ease,color .4s ease} .filebtn:hover{border-color:var(--paper);color:var(--paper)} .filebtn input{position:absolute;opacity:0;width:1px;height:1px} .filename{display:block;font-size:13px;color:var(--faint);margin:10px 0 0} /* ---------- send, and the thank you ---------- */ .send .sheen{position:absolute;top:0;bottom:0;width:55%;left:-70%;z-index:1;pointer-events:none;opacity:0; background:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.16) 50%, rgba(255,255,255,0) 100%)} .send .t{z-index:2} .send:hover:not(:disabled) .sheen{opacity:1;animation:sweep 1.5s cubic-bezier(.3,.6,.3,1) infinite} @keyframes sweep{from{left:-70%}to{left:120%}} .done{display:flex;align-items:center;gap:18px} .done[hidden]{display:none} .done .tick{width:34px;height:34px;flex:0 0 auto} .done .tick circle{fill:none;stroke:var(--rule-strong);stroke-width:2} .done .tick path{fill:none;stroke:var(--paper);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .done.in .tick circle{stroke-dasharray:101;animation:draw2 .8s cubic-bezier(.22,.61,.36,1) backwards} .done.in .tick path{stroke-dasharray:24;animation:draw3 .5s cubic-bezier(.22,.61,.36,1) .55s backwards} @keyframes draw2{from{stroke-dashoffset:101}to{stroke-dashoffset:0}} @keyframes draw3{from{stroke-dashoffset:24}to{stroke-dashoffset:0}} @media(prefers-reduced-motion:reduce){ .mark .rosette{animation:none} .tier .ico polygon{stroke-dasharray:none;animation:none} .tier .ico circle,.formbody > *{animation:none} .send:hover:not(:disabled) .sheen{animation:none;opacity:0} .done.in .tick circle,.done.in .tick path{stroke-dasharray:none;animation:none} } /* ---------- notes ---------- The Work page's list, with a meta line on top. Adding a piece is one more .note block in notes.html plus its own page under notes/, and nothing here changes. No grid to rebalance. The filter buttons are built by the page's script from the data-cat values actually present, so a category used for the first time needs no rule added here. */ .standfirst{color:var(--soft);font-size:17px;margin:0 0 34px;max-width:46ch} .filter{margin:0 0 26px} .filter[hidden]{display:none} .filter .qlabel{margin-bottom:11px} /* Buttons, not chips with hidden radios. The form's chips submit a value; these only change what is on screen, so a button carrying aria-pressed is the honest control and keyboard users get it for free. The look is the chip's, deliberately. */ .catbtn{background:none;font:inherit;border:1px solid var(--rule);padding:10px 15px; font-size:13px;color:var(--soft);cursor:pointer; transition:border-color .4s ease,color .4s ease,background-color .4s ease} .catbtn:hover{border-color:var(--rule-strong);color:var(--paper)} .catbtn[aria-pressed=true]{border-color:var(--paper);color:var(--paper);background:rgba(255,255,255,.06)} .catbtn:focus-visible{outline:1px solid var(--paper);outline-offset:4px} .notes{display:flex;flex-direction:column;border-top:1px solid var(--rule)} .note{padding:30px 0;border-bottom:1px solid var(--rule)} .note[hidden]{display:none} .note .meta{font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase; color:var(--faint)} .note .nm{display:block;margin-top:10px;font-size:clamp(20px,3.1vw,25px);font-weight:400; letter-spacing:-.015em} .note .nm:hover{border-bottom:1px solid var(--paper)} .note .ds{color:var(--soft);font-size:16px;margin:9px 0 0;max-width:46ch} .note .go{display:inline-block;margin-top:14px;font-size:12px;font-weight:500;letter-spacing:.2em; text-transform:uppercase;color:var(--faint)} .note .go:hover{color:var(--paper)} /* Entries arrive as they reach the viewport. .rise is added by the script, never in the source, so a reader with no JavaScript gets the whole list rather than a blank page. */ .note.rise{opacity:0;transform:translateY(12px)} .note.in{opacity:1;transform:none; transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1)} /* ---------- a note, read ---------- 34em at 18px is about 66 characters, which is where a long read stops being work. The subheads are the site's .label at paragraph rhythm rather than headline type: the piece has one voice and the headings are signposts in it, not a second hierarchy competing with the title. */ .art{max-width:34em;padding:64px 0 10px} .art .meta{font-size:11px;font-weight:500;letter-spacing:.3em;text-transform:uppercase; color:var(--faint)} .art h1{font-size:clamp(28px,5vw,40px);font-weight:400;letter-spacing:-.02em;line-height:1.14; margin:14px 0 0} .art .deck{color:var(--soft);font-size:19px;line-height:1.6;margin:16px 0 0;max-width:30em} .art .body{font-size:18px;line-height:1.78;margin-top:36px} .art .body p{margin:0 0 1.15em} .art .body b{font-weight:500} .art .body h2{font-size:12px;font-weight:500;letter-spacing:.26em;text-transform:uppercase; color:var(--faint);margin:2.3em 0 .95em} .art .body blockquote{margin:1.7em 0;padding-left:22px;border-left:1px solid var(--rule-strong); color:var(--soft);font-size:19px;line-height:1.7} .art .body .go{margin-top:6px} .art .body a:not(.go){border-bottom:1px solid var(--rule-strong)} .art .body a:not(.go):hover{border-bottom-color:var(--paper)} .artfoot{margin-top:50px;border-top:1px solid var(--rule);padding-top:26px;display:flex; gap:28px;flex-wrap:wrap;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase} .artfoot a{color:var(--faint)} .artfoot a:hover{color:var(--paper)} @media(prefers-reduced-motion:reduce){ .note.rise{opacity:1;transform:none} .note.in{transition:none} }