/* Banfi Software v2. Mobile first: 4 columns, 8 at 48em, 12 at 64em.
   Chapters: ink (hero, work, receipt), ember (principles), paper (about, contact, legal). */
@font-face{font-family:"Archivo";src:url(/assets/fonts/archivo.woff2) format("woff2");font-weight:400 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url(/assets/fonts/geist.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/assets/fonts/geist-mono.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@view-transition { navigation: auto; }
:root{
  --ink:#121110; --ink-2:#1B1A18; --paper:#F2EFE8; --slip:#E9E4D9; --ember:#E8492B; --ember-text:#C43D1B;
  --mute-ink:#A39E95; --mute-paper:#6B6760; --rule-ink:rgba(242,239,232,.14); --rule-paper:rgba(18,17,16,.14);
  --col-ink:rgba(242,239,232,.06); --wire:rgba(242,239,232,.16); --wire-fill:rgba(242,239,232,.05);
  --teal:#2F5D62; --sage:#A8C3B5; --cream:#F6F3EE;
  --ease-out:cubic-bezier(0.16,1,0.3,1); --ease-in-out:cubic-bezier(0.87,0,0.13,1); --ease-back:cubic-bezier(0.34,1.56,0.64,1);
  --t-hover:240ms; --t-small:600ms; --t-line:900ms; --stagger:80ms;
  --display:"Archivo","Arial Narrow",ui-sans-serif,system-ui,sans-serif;
  --text:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --m:20px; --g:16px; --N:4; --hdr:56px; --rul:8px;
  color-scheme:dark;
}
@media (min-width:48em){:root{--m:32px;--g:20px;--N:8}}
@media (min-width:64em){:root{--m:48px;--g:24px;--N:12;--hdr:64px}}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{background:var(--ink)}
body{margin:0}
.b2{--bg:var(--ink);position:relative;display:flex;flex-direction:column;min-height:100svh;background-color:var(--bg);color:var(--paper);font-family:var(--text);font-size:1.0625rem;line-height:1.55;font-weight:400;font-kerning:normal;font-variant-numeric:lining-nums;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden;overflow-x:clip;transition:background-color .9s var(--ease-in-out)}
.b2 > main{flex:1 0 auto}
.b2.is-init,.is-init .hdr,.is-init .ind{transition:none}
.b2 ::selection{background:var(--ember);color:var(--ink)}
.b2 .on-ember ::selection{background:var(--ink);color:var(--paper)}
:where(.b2) :where(h1,h2,h3,p,ul,ol,dl,dd,figure){margin:0;padding:0}
:where(.b2) :where(ul,ol){list-style:none}
:where(.b2) a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
:where(.b2) button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.b2 h1,.b2 h2,.b2 h3{text-wrap:balance}
.b2 p,.b2 dd{text-wrap:pretty}
.b2 :focus-visible{outline:2px solid var(--ember);outline-offset:4px;border-radius:2px}
.b2 .on-ember :focus-visible{outline-color:var(--ink)}
.b2 :focus:not(:focus-visible){outline:none}
:root:has(.has-cursor),.has-cursor,.has-cursor *{cursor:none}
.b2 [id]{scroll-margin-top:calc(var(--hdr) + var(--rul))}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;z-index:80;left:var(--m);top:8px;padding:12px 16px;background:var(--paper);color:var(--ink);font-weight:500;transform:translateY(-200%);transition:transform var(--t-hover) var(--ease-out)}
.skip:focus-visible{transform:none}
.wrap{padding-inline:var(--m)}
.cols{display:grid;grid-template-columns:repeat(var(--N),minmax(0,1fr));column-gap:var(--g)}
.mono{font-family:var(--mono);font-size:.8125rem;line-height:1.55;font-variant-numeric:tabular-nums}
.lbl{font-family:var(--mono);font-size:.75rem;line-height:1.5;font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.ln{display:block;overflow:hidden;overflow:clip;padding-bottom:.14em;margin-bottom:-.14em}
.ln > span{display:inline-block}
.hero h1 .ln > span{white-space:nowrap}
.stop{color:var(--ember)}

/* Chapters: each has its own colors; the header, ruler and indicator cross-fade to the chapter beneath them */
.ch{position:relative;background-color:var(--cbg);color:var(--cfg)}
.ch--ink{--cbg:var(--ink);--cfg:var(--paper);--cmute:var(--mute-ink);--crule:var(--rule-ink)}
.ch--ember{--cbg:var(--ember);--cfg:var(--ink);--cmute:var(--ink);--crule:rgba(18,17,16,.24)}
.ch--paper{--cbg:var(--paper);--cfg:var(--ink);--cmute:var(--mute-paper);--crule:var(--rule-paper)}
.ch--teal{--cbg:var(--teal);--cfg:var(--cream);--cmute:var(--cream);--crule:rgba(246,243,238,.2)}
.ch--ink2{--cbg:var(--ink-2);--cfg:var(--paper);--cmute:var(--mute-ink);--crule:var(--rule-ink)}
.has-cols::before{content:"";position:absolute;top:0;bottom:0;left:var(--m);right:var(--m);pointer-events:none;box-shadow:inset -1px 0 var(--col-ink);background-image:repeating-linear-gradient(to right,var(--col-ink) 0 1px,transparent 1px calc((100% - (var(--N) - 1) * var(--g)) / var(--N) + var(--g)))}

/* Film grain over everything */
.grain{position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.05;background-image:url(/assets/img/grain.svg);background-size:220px 220px}

/* Links: underline draws left to right, retracts to the right */
.tl{display:inline-flex;align-items:center;min-height:44px}
.ul{position:relative;display:inline-block}
.ul::after{content:"";position:absolute;left:0;right:0;bottom:-.14em;height:1px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform var(--t-hover) var(--ease-out)}
a:hover > .ul::after,a:focus-visible > .ul::after,button:hover > .ul::after,button:focus-visible > .ul::after,[aria-current="page"] > .ul::after{transform:scaleX(1);transform-origin:0 50%}
.ul--rest::after{transform:scaleX(1)}
a:hover > .ul--rest::after{animation:redraw .6s var(--ease-out)}
.mag{display:inline-block}
.il{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;transition:color var(--t-hover) var(--ease-out)}
.il:hover{color:var(--ember-text)}
@keyframes redraw{0%{transform:scaleX(1);transform-origin:100% 50%}45%{transform:scaleX(0);transform-origin:100% 50%}46%{transform:scaleX(0);transform-origin:0 50%}100%{transform:scaleX(1);transform-origin:0 50%}}

/* Header: wordmark, Budapest clock, navigation; the ruler below fills with scroll */
.hdr{position:sticky;top:0;z-index:40;background-color:var(--bg);color:var(--hfg,var(--paper));transition:background-color .9s var(--ease-in-out),color .45s var(--ease-in-out)}
.t-ember .hdr,.t-paper .hdr{--hfg:var(--ink)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;column-gap:16px;min-height:var(--hdr);padding-inline:var(--m)}
.mark{display:inline-flex;align-items:center;min-height:44px;font-family:var(--display);font-weight:900;font-stretch:68%;font-size:1.75rem;line-height:1;letter-spacing:-.01em;margin-left:-.045em}
.hdr__clock{display:none}
.nav{display:flex;column-gap:14px}
.nav a{font-size:.875rem;font-weight:500}
.ruler{position:relative;margin-inline:var(--m);height:var(--rul);display:grid;grid-template-columns:repeat(var(--N),minmax(0,1fr));column-gap:var(--g)}
.ruler::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:currentColor;opacity:.22;transform-origin:0 50%}
.ruler::after{content:"";position:absolute;right:0;top:0;width:1px;height:100%;background:currentColor;opacity:.4}
.ruler span{display:block;width:1px;height:100%;background:currentColor;opacity:.4;transform-origin:50% 0;transition:background-color var(--t-hover) var(--ease-out),opacity var(--t-hover) var(--ease-out),transform var(--t-hover) var(--ease-out)}
.ruler span.on{background:var(--ember);opacity:1;transform:scaleY(1.75)}
.t-ember .ruler span.on{background:var(--ink)}
.t-ember .mark .stop{color:var(--ink)}
.ruler span:nth-child(n+5){display:none}
@media (min-width:48em){
  .ruler span:nth-child(n+5){display:block}.ruler span:nth-child(n+9){display:none}
  .hdr__in{display:grid;grid-template-columns:1fr auto 1fr}
  .hdr__clock{display:block;justify-self:center}
  .nav{justify-self:end;column-gap:24px}
  .nav a{font-size:.9375rem}
}
@media (min-width:64em){
  .ruler span:nth-child(n+9){display:block}
  .hdr__in{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g)}
  .mark{grid-column:1/span 3;justify-self:start}
  .hdr__clock{grid-column:5/span 4;justify-self:start}
  .nav{grid-column:9/-1;column-gap:32px}
}

/* Section indicator, bottom left, kept current by script */
.ind{position:fixed;left:var(--m);bottom:20px;z-index:45;display:none;color:var(--hfg,var(--paper));transition:color .45s var(--ease-in-out),opacity var(--t-hover) var(--ease-out)}
.ind-off .ind{opacity:0}
.ind[data-tone="ember"],.ind[data-tone="paper"]{color:var(--ink)}
.ind[data-tone="ember"] b{color:var(--ink)}
.ind b{font-weight:500;color:var(--ember)}
.ind span{margin-left:14px}
@media (min-width:64em){.has-ind .ind{display:block}}

/* Hero: the full stop */
.hero{min-height:calc(100svh - var(--hdr) - var(--rul));display:flex;flex-direction:column;justify-content:space-between;gap:40px;padding:28px var(--m) 40px}
.hero__dots{position:absolute;top:0;bottom:0;left:var(--m);right:var(--m);pointer-events:none;opacity:0;transition:opacity var(--t-small) var(--ease-out);background-image:radial-gradient(circle at 1px 1px,rgba(242,239,232,.6) 1.1px,transparent 1.6px);background-size:calc((100% - (var(--N) - 1) * var(--g)) / var(--N) + var(--g)) 24px;-webkit-mask-image:radial-gradient(circle 260px at var(--mx,50%) var(--my,40%),#000 0,rgba(0,0,0,.35) 45%,transparent 72%);mask-image:radial-gradient(circle 260px at var(--mx,50%) var(--my,40%),#000 0,rgba(0,0,0,.35) 45%,transparent 72%)}
.has-light.is-ptr .hero__dots{opacity:1}
.hero__h{position:relative;container-type:inline-size}
.hero h1{font-family:var(--display);font-weight:900;line-height:.84;letter-spacing:-.01em;font-stretch:62%;font-size:calc(100cqw / 3.6)}
.hl1{margin-left:-.025em}.hl2{margin-left:-.010em}.hl3{margin-left:-.033em}
.w3{position:relative;display:inline-block;color:transparent;-webkit-text-stroke:max(1.5px,.011em) var(--paper)}
.w3::after{content:attr(data-t);content:attr(data-t) / "";position:absolute;left:0;top:0;color:var(--paper);-webkit-text-stroke:0;clip-path:inset(0 0 0 0)}
.hero .stop{display:inline-block;transition:color .5s var(--ease-out)}
.hero .stop.is-lifted{color:var(--paper)}
.hero__foot{position:relative;row-gap:24px}
.hero__lbl{grid-column:1/-1;color:var(--mute-ink)}
.hero__sub{grid-column:1/-1;max-width:34ch;font-size:1.125rem;line-height:1.55}
.hero__spec{grid-column:1/-1}
@media (min-width:48em){
  .hero h1{font-stretch:68%;font-size:calc(100cqw / 3.9)}
  .hl1{margin-left:-.028em}.hl2{margin-left:-.013em}.hl3{margin-left:-.037em}
  .hero__sub{grid-column:1/span 4}
  .hero__spec{grid-column:5/-1}
}
@media (min-width:64em){
  .hero{padding-top:24px}
  /* The headline fills the width, but never so tall that the hero runs past the first screen.
     Wider screens get wider letters (the width axis) instead of taller ones; --hd is the widest line in em at that width.
     The height cap: header, padding, the foot (label, sentence, spec) and the bottom padding, over the headline's height per em. */
  .hero h1{--hd:5.28;font-stretch:95.06%;font-size:min(calc(100cqw / var(--hd)),calc((100svh - var(--hdr) - var(--rul) - var(--hfoot,12rem)) / 2.62))}
  .hl1{margin-left:-.041em}.hl2{margin-left:-.025em}.hl3{margin-left:-.056em}
  .hero__foot{align-items:start}
  .hero__lbl{grid-column:1/span 2}
  .hero__sub{grid-column:5/span 4}
  .hero__spec{grid-column:9/-1}
}
/* --hfoot: the hero's foot plus paddings; the spec's lines wrap less as the screen widens */
@media (min-width:64em){:root{--hfoot:16.75rem}}
@media (min-width:94em){:root{--hfoot:15.5rem}}
@media (min-width:64em) and (min-aspect-ratio:8/5){
  .hero h1{--hd:5.77;font-stretch:105%}
  .hl1{margin-left:-.043em}.hl2{margin-left:-.028em}.hl3{margin-left:-.06em}
}
@media (min-width:64em) and (min-aspect-ratio:7/4){.hero h1{--hd:6.26;font-stretch:115%}}
@media (min-width:64em) and (min-aspect-ratio:15/8){.hero h1{--hd:6.75;font-stretch:125%}}

/* Spec sheet: label and value per row, hairline between rows */
.spec{border-top:1px solid var(--crule,var(--rule-ink))}
.spec__row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:16px;align-items:baseline;padding-block:9px;border-bottom:1px solid var(--crule,var(--rule-ink))}
.spec__row dt{color:var(--cmute,var(--mute-ink))}
.spec__row dd{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:.8125rem;line-height:1.55;font-variant-numeric:tabular-nums}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ember);margin-right:8px;transform:translateY(-1px)}

/* Load choreography (home), all within 1.2 s */
.intro .ruler::before{animation:draw .3s var(--ease-out) both}
.intro .ruler span{animation:tick .12s var(--ease-out) both}
.intro .ruler span:nth-child(2){animation-delay:20ms}.intro .ruler span:nth-child(3){animation-delay:40ms}.intro .ruler span:nth-child(4){animation-delay:60ms}.intro .ruler span:nth-child(5){animation-delay:80ms}.intro .ruler span:nth-child(6){animation-delay:100ms}.intro .ruler span:nth-child(7){animation-delay:120ms}.intro .ruler span:nth-child(8){animation-delay:140ms}.intro .ruler span:nth-child(9){animation-delay:160ms}.intro .ruler span:nth-child(10){animation-delay:180ms}.intro .ruler span:nth-child(11){animation-delay:200ms}.intro .ruler span:nth-child(12){animation-delay:220ms}
.intro .hdr__in{animation:fadeup var(--t-small) var(--ease-out) .65s both}
.intro.hero .ln > span{animation:rise .65s var(--ease-out) both}
.intro.hero .hl1{animation-delay:.15s}.intro.hero .hl2{animation-delay:.23s}.intro.hero .hl3{animation-delay:.31s}
.intro.hero .w3::after{animation:fill .38s var(--ease-out) .62s both}
.intro.hero .stop{animation:land .22s var(--ease-back) .96s both}
.intro.hero .hero__foot{animation:fadeup var(--t-small) var(--ease-out) .6s both}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes tick{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes rise{from{transform:translateY(118%)}to{transform:translateY(0)}}
@keyframes fill{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes land{0%{opacity:0;transform:translateY(-.55em)}70%{opacity:1}100%{opacity:1;transform:translateY(0)}}
@keyframes fadeup{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* Scroll reveals; hidden only once script has run */
.js .rv{opacity:0;transform:translateY(20px)}
.js .rv.is-in{opacity:1;transform:translateY(0);transition:opacity var(--t-small) var(--ease-out),transform var(--t-line) var(--ease-out)}
.js .rl .ln > span{transform:translateY(118%)}
.js .rl.is-in .ln > span{transform:translateY(0);transition:transform var(--t-line) var(--ease-out)}
.js .rl.is-in .ln:nth-child(2) > span{transition-delay:80ms}
.js .rl.is-in .ln:nth-child(3) > span{transition-delay:160ms}

/* Work index */
.work{padding-block:56px 72px}
.work__head{padding-bottom:20px;color:var(--mute-ink)}
.work__head .lbl:first-child{grid-column:1/span 2;color:var(--paper)}
.work__head .lbl:last-child{grid-column:-3/-1;justify-self:end}
.work__list{border-bottom:1px solid var(--rule-ink)}
.item{transition:opacity var(--t-hover) var(--ease-out)}
.has-active .item:not(.is-active){opacity:.3}
.row{position:relative;display:grid;grid-template-columns:repeat(var(--N),minmax(0,1fr));column-gap:var(--g);row-gap:16px;align-content:center;min-height:min(40svh,26rem);padding:28px var(--m);border-top:1px solid var(--rule-ink)}
.row__idx{grid-column:1/span 2;grid-row:1;color:var(--paper)}
.row__year{grid-column:3/-1;grid-row:1;justify-self:end;color:var(--mute-ink)}
.row__nm{grid-column:1/-1;grid-row:2;container-type:inline-size}
.row__name{display:inline-block;white-space:nowrap;font-family:var(--display);font-weight:900;line-height:.84;letter-spacing:-.01em;font-stretch:68%;font-size:calc(100cqw * .92 / var(--fit));margin-left:calc(var(--lsb) * -1em);transition:font-stretch var(--t-hover) var(--ease-out)}
.is-active .row__name{font-stretch:74%}
.row__spec{grid-column:1/span 2;grid-row:3;align-self:start;display:flex;flex-direction:column}
.row__spec > span{display:block;color:var(--mute-ink);padding-block:2px}
.row__spec > span:first-child{color:var(--paper)}
.row__thumb{grid-column:3/-1;grid-row:3;justify-self:end;width:100%;max-width:150px}
/* Project names: --fit is the name's width in em at Archivo 900, width 68%; --lsb trims the first letter's side bearing;
   --dsc reserves room under a name with a descender (g, j, p, q, y) on its case page (README) */
.nm-stillcount{--fit:3.645;--lsb:.028;view-transition-name:nm-stillcount}
.nm-threadhelm{--fit:4.505;--lsb:.016;view-transition-name:nm-threadhelm}
.nm-keyhold{--fit:3.043;--lsb:.045;--dsc:.2;view-transition-name:nm-keyhold}
.nm-fivefold{--fit:3.003;--lsb:.045;view-transition-name:nm-fivefold}
.nm-ballast{--fit:2.662;--lsb:.045;view-transition-name:nm-ballast}
.cs-hero h1{padding-bottom:calc(var(--dsc,0) * 1em)}
@media (min-width:64em){
  .row{grid-template-columns:repeat(12,minmax(0,1fr));align-items:center}
  .row__idx{grid-column:1/span 2;grid-row:1;align-self:start}
  .row__year{grid-column:1/span 2;grid-row:1;justify-self:start;align-self:start;margin-top:22px}
  .row__nm{grid-column:3/span 7;grid-row:1}
  .row__spec{grid-column:10/-1;grid-row:1;align-self:center}
  .row__thumb{grid-column:10/-1;grid-row:2;justify-self:start;max-width:170px}
}

/* Device frames */
.phone{position:relative;display:block;aspect-ratio:780/1688;width:100%;border-radius:16% / 7.4%;padding:3.2%;background:#2A2926;box-shadow:0 0 0 1px rgba(242,239,232,.12),0 24px 60px -24px rgba(0,0,0,.6)}
.phone img{display:block;width:100%;height:100%;object-fit:cover;border-radius:13.5% / 6.3%;background:var(--cream)}
.win{position:relative;width:100%;aspect-ratio:16/10;display:grid;grid-template-rows:auto minmax(0,1fr);border-radius:8px;overflow:hidden;background:var(--ink-2);box-shadow:0 0 0 1px var(--wire),0 24px 60px -24px rgba(0,0,0,.6)}
.win__bar{display:flex;align-items:center;gap:6px;padding:9px 11px;border-bottom:1px solid var(--wire)}
.win__bar span{width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--wire)}
.win__bar .win__url{width:auto;flex:0 1 46%;height:14px;margin-left:12px;border-radius:7px;background:var(--wire-fill)}
.win__body{display:grid;grid-template-columns:24% minmax(0,1fr) minmax(0,1fr);min-height:0}
/* A window holding a real screen (16:10) instead of the outline */
.win--img,.pv.is-win.has-shot .win{display:block;aspect-ratio:auto}
.win--img > img,.pv .win__shot{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;background:var(--ink-2)}
.pv .win__shot,.pv.has-shot .win__body{display:none}
.pv.has-shot .win__shot{display:block}
.win__side{display:flex;flex-direction:column;gap:8px;padding:12px 10px;border-right:1px solid var(--wire)}
.win__side span{display:block;height:20px;border-radius:3px;box-shadow:inset 0 0 0 1px var(--wire)}
.win__side span:first-child{background:var(--wire-fill)}
.win__pane{display:flex;flex-direction:column;gap:7px;padding:12px;min-width:0}
.win__pane + .win__pane{border-left:1px solid var(--wire)}
.win__pane i{display:block;height:6px;border-radius:3px;background:var(--wire)}
.win__pane i.h{height:12px;width:55%;margin-bottom:6px;background:rgba(242,239,232,.22)}
.win__pane i.s{width:62%}
.win__pane i.m{width:84%}
.win__pane b{display:block;flex:1;min-height:20px;border-radius:4px;box-shadow:inset 0 0 0 1px var(--wire);background:var(--wire-fill)}

/* Hover preview on fine pointers: follows with lag, tilts with velocity, wipes in */
.pv{display:none;position:absolute;left:0;top:0;z-index:5;width:220px;pointer-events:none;will-change:transform}
.pv .win{display:none}
.pv.is-win{width:440px}
.pv.is-win .phone{display:none}
.pv.is-win .win{display:grid}
.pv__clip{overflow:hidden;padding:2px;transform:translateY(101%);transition:transform var(--t-small) var(--ease-out)}
.pv__in{transform:translateY(-101%);transition:transform var(--t-small) var(--ease-out)}
.pv.is-on .pv__clip,.pv.is-on .pv__in{transform:translateY(0)}
@media (hover:hover) and (pointer:fine) and (min-width:64em){
  .row__thumb{display:none}
  .pv{display:block}
}

/* Principles: ember flood, pinned while the statements replace each other */
.pr{padding:40px var(--m) 72px}
.pr__lbl{margin-bottom:40px}
.pr__list{container-type:inline-size;display:grid;row-gap:56px}
.pr__st{font-family:var(--display);font-weight:900;line-height:.84;letter-spacing:-.01em;font-stretch:62%;font-size:calc(100cqw / 3.44)}
.pr__st .ln > span{margin-left:-.05em;white-space:nowrap}
.pr__st{padding-bottom:.2em}
.pr__proof{margin-top:16px;max-width:52ch;font-family:var(--mono);font-size:.8125rem;line-height:1.55;color:var(--ink)}
.pr__progress{display:none;position:relative;height:1px;background:rgba(18,17,16,.24)}
.pr__progress span{position:absolute;left:0;top:-.5px;width:100%;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:0 50%}
@media (min-width:48em){.pr__st{font-size:calc(100cqw / 6.45)}}
.pr.is-pin{height:calc((100svh - var(--hdr) - var(--rul)) * 3.2);padding:0}
.pr.is-pin .pr__stage{position:sticky;top:calc(var(--hdr) + var(--rul));height:min(calc(100svh - var(--hdr) - var(--rul)),56rem);display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:32px var(--m) 40px}
.pr.is-pin .pr__lbl{margin:0}
.pr.is-pin .pr__list{display:grid;row-gap:0;align-self:center}
.pr.is-pin .pr__item{grid-area:1/1}
/* Pinned: as wide as the column allows, but never taller than the stage (two lines, the proof and the label) */
.pr.is-pin .pr__st{font-stretch:100%;font-size:min(calc(100cqw / 5.30),calc((min(100svh - var(--hdr) - var(--rul),56rem) - 12rem) / 1.9));transition:font-stretch var(--t-line) var(--ease-out) .18s}
@media (min-width:48em){.pr.is-pin .pr__st{font-stretch:125%;font-size:min(calc(100cqw / 6.45),calc((min(100svh - var(--hdr) - var(--rul),56rem) - 12rem) / 1.9))}}
.pr.is-pin .pr__item.is-current .pr__st,.pr.is-pin .pr__item.is-past .pr__st{font-stretch:62%}
.pr.is-pin .pr__st .ln > span{transform:translateY(118%);transition:transform .7s var(--ease-out)}
.pr.is-pin .is-current .pr__st .ln > span{transform:translateY(0)}
.pr.is-pin .is-current .pr__st .ln:nth-child(2) > span{transition-delay:80ms}
.pr.is-pin .is-past .pr__st .ln > span{transform:translateY(-118%)}
.pr.is-pin .pr__proof{opacity:0;transform:translateY(8px);transition:opacity .3s var(--ease-out),transform .3s var(--ease-out)}
.pr.is-pin .is-current .pr__proof{opacity:1;transform:translateY(0);transition:opacity var(--t-small) var(--ease-out) .5s,transform var(--t-small) var(--ease-out) .5s}
.pr.is-pin .pr__progress{display:block}
@media (min-width:64em){
  .pr{padding-block:56px 120px}
  .pr__proof{font-size:.875rem}
}

/* Receipt for your visit: printed from what the browser measured */
.rc{padding:56px var(--m) 96px}
.rc__in{row-gap:24px;align-items:start}
.rc__lbl{grid-column:1/-1}
.rc__printer{grid-column:1/-1;position:relative;width:100%;max-width:27rem}
.rc__slot{position:relative;z-index:2;height:16px;border-radius:8px;background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--rule-ink)}
.rc__slot::after{content:"";position:absolute;left:14px;right:14px;top:7px;height:2px;border-radius:1px;background:#0A0908}
.rc__feed{position:relative;margin:-8px 12px 0;padding-top:8px;overflow:hidden}
.rc__slip{position:relative;padding:30px 22px 34px;background:var(--slip);color:var(--ink);font-family:var(--mono);font-size:.8125rem;line-height:1.65;font-variant-numeric:tabular-nums;-webkit-mask:radial-gradient(circle 5px at 50% 0,transparent 96%,#000) 0 0/14px 51% repeat-x,radial-gradient(circle 5px at 50% 100%,transparent 96%,#000) 0 100%/14px 51% repeat-x;mask:radial-gradient(circle 5px at 50% 0,transparent 96%,#000) 0 0/14px 51% repeat-x,radial-gradient(circle 5px at 50% 100%,transparent 96%,#000) 0 100%/14px 51% repeat-x}
.rc__slip ::selection{background:var(--ink);color:var(--slip)}
.rc__head{display:flex;justify-content:space-between;gap:12px;font-weight:500;letter-spacing:.04em}
.rc__head span:first-child{text-transform:uppercase}
.rc__head span:last-child{font-weight:400;letter-spacing:0}
.rc__cut{height:0;margin:12px 0;border:0;border-top:1px dashed rgba(18,17,16,.45)}
.rc__row{display:flex;align-items:baseline;gap:8px}
.rc__row dt{display:flex;flex:1;align-items:baseline;gap:8px;min-width:0;white-space:nowrap}
.rc__row dt::after{content:"";flex:1;min-width:16px;border-bottom:1px dotted rgba(18,17,16,.5);transform:translateY(-4px)}
.rc__row dd{text-align:right;overflow-wrap:anywhere}
.rc__row.is-cont dt::after{border-bottom-color:transparent}
.rc__note{margin-top:2px}
.rc__stamp{display:flex;justify-content:flex-end;margin-top:20px}
.rc__stamp > span{display:inline-block;padding:6px 12px;border:2px solid var(--ember);border-radius:4px;color:var(--ember);font-size:1.5rem;font-weight:600;letter-spacing:.08em;line-height:1.2;transform:rotate(-6deg)}
.rc__again{margin-top:20px;display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--paper)}
.rc__again .ul::after{bottom:-.25em}
.js .rc__slip{transform:translateY(-101%)}
.js .rc__slip.is-feed{transform:translateY(0);transition:transform 1s steps(10,end)}
.js .rc__slip .p{opacity:0}
.js .rc__slip .p.on{opacity:1}
.js .rc__stamp > span{opacity:0;transform:rotate(-14deg) scale(1.7)}
.js .rc__stamp.on > span{opacity:1;transform:rotate(-6deg) scale(1);transition:transform .32s var(--ease-back),opacity .12s linear}
@media (min-width:48em){.rc__printer{grid-column:3/span 5}}
@media (min-width:64em){
  .rc{padding-block:72px 140px}
  .rc__lbl{grid-column:1/span 2}
  .rc__printer{grid-column:5/span 4;max-width:none}
}

/* About and colophon */
.ab{padding:72px var(--m)}
.ab__in{row-gap:24px}
.ab__in > .lbl{grid-column:1/-1;color:var(--mute-paper)}
.ab__body{grid-column:1/-1}
.ab__p{font-family:var(--display);font-stretch:100%;font-weight:500;font-size:clamp(1.5rem,2.6vw,2.5rem);line-height:1.25;letter-spacing:-.012em;max-width:30ch}
.ab__links{margin-top:20px}
.ab__colo{grid-column:1/-1;margin-top:16px}
.ab__colo-lbl{grid-column:1/-1;color:var(--mute-paper);margin-top:40px}
.ab__colo .spec__row{grid-template-columns:minmax(0,1fr) minmax(0,3fr)}
.ab__colo .spec__row dd{display:block}
@media (min-width:64em){
  .ab{padding-block:140px 96px}
  .ab__in > .lbl{grid-column:1/span 2;padding-top:12px}
  .ab__body{grid-column:5/span 7}
  .ab__colo{grid-column:5/span 6;margin-top:72px}
  .ab__colo-lbl{grid-column:1/span 2;margin-top:72px;padding-top:10px}
}

/* Contact */
.ct{padding:56px var(--m) 96px;border-top:1px solid var(--rule-paper)}
.ct__lbl{color:var(--mute-paper);margin-bottom:24px}
.ct__mail{container-type:inline-size}
/* The address fills the width: the size divides by its widest line in em ("banfi.software" 5.11, "hello@banfi.software" 7.49); re-measure if it changes */
.email{display:inline-block;font-family:var(--display);font-weight:900;font-stretch:62%;line-height:.84;letter-spacing:-.01em;font-size:calc(100cqw / 5.13)}
.email .mag{position:relative;margin-left:-.033em}
.email .ln{display:block}
.email .mag::after{content:"";position:absolute;left:.033em;right:0;bottom:-.06em;height:max(2px,.025em);background:var(--ink);transform:scaleX(0);transform-origin:100% 50%;transition:transform var(--t-small) var(--ease-out)}
.email:hover .mag::after,.email:focus-visible .mag::after{transform:scaleX(1);transform-origin:0 50%}
.ct__actions{margin-top:32px;align-items:center;row-gap:12px}
.btn{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 20px;border-radius:24px;box-shadow:inset 0 0 0 1px var(--ink);font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;transition:background-color var(--t-hover) var(--ease-out),color var(--t-hover) var(--ease-out)}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn .dot{margin:0;transition:transform var(--t-hover) var(--ease-out)}
.btn.is-done .dot{transform:scale(1.4)}
@media (min-width:64em){
  .ct{padding-block:96px 140px}
  .email{font-size:calc(100cqw / 7.51)}
  .email .ln{display:inline-block}
  .ct__actions .btn{grid-column:5/span 4}
}

/* Footer: giant wordmark cropped by the bottom edge */
.ft{position:relative;container-type:inline-size;padding-inline:var(--m);overflow:hidden}
.ft__row{row-gap:6px;padding-block:28px 32px;border-top:1px solid var(--rule-ink);align-items:center}
.ft__row > *{grid-column:1/-1}
.ft__note{color:var(--paper)}
.ft__links{display:flex;column-gap:20px}
.ft__meta{display:flex;flex-wrap:wrap;column-gap:20px;color:var(--mute-ink);padding-block:10px}
.ft__acts{display:flex;flex-wrap:wrap;column-gap:20px}
.ft__mark{height:calc(100cqw / 2.149 * .71);font-family:var(--display);font-weight:900;font-stretch:68%;font-size:calc(100cqw / 2.149);line-height:1;letter-spacing:-.01em;user-select:none}
.ft__mark span{display:block;margin:-.07em 0 0 -.045em}
@media (min-width:64em){
  .ft__note{grid-column:1/span 4}
  .ft__links{grid-column:5/span 2}
  .ft__meta{grid-column:7/span 3;padding:0}
  .ft__acts{grid-column:10/-1;justify-content:flex-end}
}

/* Cursor: ember dot, ring over links, disc with a label over work rows */
.cur{display:none;position:fixed;left:0;top:0;z-index:90;width:0;height:0;pointer-events:none;opacity:0;transition:opacity .2s var(--ease-out)}
.cur.is-seen{opacity:1}
.has-cursor .cur{display:block}
.has-cursor.is-kbd .cur{display:none}
.cur__dot,.cur__ring,.cur__disc{position:absolute;left:0;top:0;border-radius:50%}
.cur__dot{width:10px;height:10px;margin:-5px 0 0 -5px;background:var(--ember);transition:transform var(--t-hover) var(--ease-out)}
.cur__ring{width:40px;height:40px;margin:-20px 0 0 -20px;box-shadow:inset 0 0 0 1.5px var(--ember);opacity:0;transform:scale(.25);transition:transform var(--t-hover) var(--ease-out),opacity var(--t-hover) var(--ease-out)}
.cur__disc{width:88px;height:88px;margin:-44px 0 0 -44px;display:grid;place-items:center;background:var(--ember);color:var(--ink);opacity:0;transform:scale(.12);transition:transform .32s var(--ease-out),opacity .2s var(--ease-out)}
.cur.is-link .cur__ring{opacity:1;transform:scale(1)}
.cur.is-link .cur__dot{transform:scale(.6)}
.cur.is-open .cur__disc{opacity:1;transform:scale(1)}
.cur.is-open .cur__dot{transform:scale(0)}
.cur.on-ember .cur__dot{background:var(--ink)}
.cur.on-ember .cur__ring{box-shadow:inset 0 0 0 1.5px var(--ink)}

/* Case page */
.cs-hero{padding:32px var(--m) 48px}
.cs-hero__in{row-gap:24px}
.cs-hero__lbl{grid-column:1/-1;color:var(--paper)}
.cs-hero__nm{grid-column:1/-1;container-type:inline-size}
.cs-hero h1,.next__name{display:inline-block;white-space:nowrap;font-family:var(--display);font-weight:900;font-stretch:68%;line-height:.84;letter-spacing:-.01em;font-size:calc(100cqw / var(--fit));margin-left:calc(var(--lsb) * -1em)}
.cs-hero h1 .ln > span{animation:rise .65s var(--ease-out) .1s both}
.cs-hero__desc{grid-column:1/-1;max-width:36ch;font-size:1.25rem;line-height:1.45;animation:fadeup var(--t-small) var(--ease-out) .35s both}
.cs-hero__spec{grid-column:1/-1;animation:fadeup var(--t-small) var(--ease-out) .45s both}
.stage{padding:56px 0 48px}
.stage__row{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-inline:var(--m);scroll-padding-inline:var(--m);scrollbar-width:none}
.shot{flex:none;width:68vw;max-width:300px;scroll-snap-align:start}
.shot figcaption{margin-top:14px;color:var(--cfg)}
.stage__note{margin-top:28px;padding-inline:var(--m);color:var(--cfg)}
.stage--win .stage__row{display:block;overflow:visible}
.stage--win .shot{width:100%;max-width:none}
.stage--win .shot + .shot{margin-top:40px}
.chs{padding:64px var(--m)}
.chs__in{row-gap:48px}
.chp{grid-column:1/-1;display:grid;grid-template-columns:subgrid;row-gap:10px;padding-top:16px;border-top:1px solid var(--rule-paper)}
.chp > .chp__n{grid-column:1/-1;color:var(--mute-paper)}
.chp h2{grid-column:1/-1;font-family:var(--display);font-stretch:75%;font-weight:800;font-size:1.75rem;line-height:1;letter-spacing:-.005em}
.chp p{grid-column:1/-1;max-width:62ch;font-size:1.0625rem;line-height:1.55}
.prod{padding:0 var(--m) 80px}
.prod__line{font-family:var(--display);font-stretch:75%;font-weight:800;font-size:clamp(1.75rem,4.4vw,4rem);line-height:1.05;letter-spacing:-.01em}
.prod__line .ul::after{height:max(2px,.04em);bottom:-.08em}
.prod__line .ul--pending::after{transform:scaleX(1);background:none;border-bottom:max(2px,.04em) dotted currentColor;height:0}
.next{display:block;padding:40px var(--m) 72px}
.next__lbl{display:block;color:var(--mute-ink);margin-bottom:20px}
.next__nm{container-type:inline-size}
.next__link{display:block}
.next__link .next__name{transition:font-stretch var(--t-hover) var(--ease-out)}
.next__link:hover .next__name,.next__link:focus-visible .next__name{font-stretch:74%}
@media (min-width:48em){.shot{width:40vw}}
@media (min-width:64em){
  .cs-hero{padding-block:40px 72px}
  .cs-hero__lbl{grid-column:1/span 2}
  .cs-hero__desc{grid-column:5/span 4;font-size:1.375rem}
  .cs-hero__spec{grid-column:9/-1}
  .stage{padding-block:96px 72px}
  .stage__row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);overflow:visible;padding-inline:var(--m)}
  .shot{width:auto;max-width:none}
  .shot:nth-child(1){grid-column:4/span 3}
  .shot:nth-child(2){grid-column:7/span 3;margin-top:72px}
  .shot:nth-child(3){grid-column:10/span 3;margin-top:24px;transform:translateX(calc(var(--m) * .75))}
  .stage__note{padding-left:calc(var(--m) + (100% - 2 * var(--m) - 11 * var(--g)) / 12 * 3 + 3 * var(--g))}
  .stage--win .stage__row{display:grid}
  .stage--win .shot{grid-column:4/-1;transform:translateX(calc(var(--m) * .75))}
  .stage--win .shot + .shot{margin-top:112px}
  .stage--win .shot:nth-child(2){grid-column:1/span 9;transform:none}
  .chs{padding-block:112px}
  .chp{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);padding-top:20px}
  .chp > .chp__n{grid-column:1/span 1}
  .chp h2{grid-column:2/span 3}
  .chp p{grid-column:6/span 6;font-size:1.125rem}
  .prod{padding-left:calc(var(--m) + (100% - 2 * var(--m) - 11 * var(--g)) / 12 * 5 + 5 * var(--g));padding-bottom:120px}
  .next{padding-block:48px 96px}
}

/* Imprint and privacy: a paper spec sheet of what is true */
.lg{padding:40px var(--m) 72px}
.lg__in{row-gap:24px}
.lg__lbl{grid-column:1/-1;color:var(--mute-paper)}
.lg h1{grid-column:1/-1;font-family:var(--display);font-weight:900;font-stretch:62%;line-height:.84;letter-spacing:-.01em;font-size:clamp(4.5rem,21vw,15rem)}
.lg h1 .ln > span{margin-left:-.03em;animation:rise .65s var(--ease-out) .1s both}
.lg__lead{grid-column:1/-1;max-width:34ch;font-size:1.25rem;line-height:1.45;margin-top:16px}
.lg__spec{grid-column:1/-1;margin-top:16px}
.lg__spec .spec__row{grid-template-columns:minmax(0,1fr);gap:6px;padding-block:16px}
.lg__spec .spec__row dd{display:block;max-width:62ch;font-family:var(--text);font-size:1.0625rem;line-height:1.55;font-variant-numeric:normal}
.lg__upd{grid-column:1/-1;color:var(--mute-paper);margin-top:8px}
@media (min-width:48em){
  .lg__spec .spec__row{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:20px}
}
@media (min-width:64em){
  .lg{padding-block:56px 140px}
  .lg__lbl{grid-column:1/span 2;margin-bottom:8px}
  .lg__lead{grid-column:5/span 6;margin-top:48px}
  .lg__spec{grid-column:5/-1;margin-top:48px}
  .lg__lead + .lg__spec{margin-top:16px}
  .lg__upd{grid-column:5/-1}
}

/* 404 */
.nf{display:flex;flex-direction:column;justify-content:flex-end;min-height:calc(min(100svh,52rem) - var(--hdr) - var(--rul));padding:40px var(--m) 72px}
.nf__nm{container-type:inline-size}
.nf h1{font-family:var(--display);font-weight:900;font-stretch:62%;line-height:.84;letter-spacing:-.01em;font-size:calc(100cqw / 4.569)}
.nf h1 .ln > span{margin-left:-.02em;animation:rise .65s var(--ease-out) both}
.nf h1 .ln:nth-child(2) > span{animation-delay:80ms}
.nf h1 .stop{display:inline-block;animation:land .22s var(--ease-back) .7s both}
.nf__code{color:var(--mute-ink);margin-bottom:24px}
.nf__link{margin-top:28px;font-size:1.375rem;font-weight:500}
@media (min-width:64em){
  .nf h1{font-size:calc(100cqw / 8.05)}
  .nf h1 .ln{display:inline-block}
}

/* View transitions: a short crossfade, and the project name shared between pages */
::view-transition-old(root),::view-transition-new(root){animation-duration:300ms;animation-timing-function:var(--ease-out)}
::view-transition-group(nm-stillcount),::view-transition-group(nm-threadhelm){animation-duration:.55s;animation-timing-function:var(--ease-out)}

/* Reduced motion: no intro, no pin, receipt complete, no cursor, no pointer light, no pull */
@media (prefers-reduced-motion:reduce){
  .b2,.b2 .hdr,.b2 .ind{transition:none}
  .b2 .intro .ruler::before,.b2 .intro .ruler span,.b2 .intro .hdr__in,.b2 .intro.hero .ln > span,.b2 .intro.hero .w3::after,.b2 .intro.hero .stop,.b2 .intro.hero .hero__foot,.b2 .cs-hero h1 .ln > span,.b2 .cs-hero__desc,.b2 .cs-hero__spec,.b2 .lg h1 .ln > span,.b2 .nf h1 .ln > span,.b2 .nf h1 .stop,.b2 .ul::after{animation:none !important}
  .b2 .rv,.b2 .rv.is-in,.b2 .rl .ln > span,.b2 .rl.is-in .ln > span{opacity:1 !important;transform:none !important;transition:none !important}
  .b2 .rc__slip,.b2 .rc__slip .p,.b2 .rc__stamp > span{opacity:1 !important;transform:none !important;transition:none !important}
  .b2 .rc__stamp > span{transform:rotate(-6deg) !important}
  .b2 .pr.is-pin{height:auto}
  .b2 .cur,.b2 .hero__dots{display:none !important}
  .b2 .row__name,.b2 .next__name,.b2 .pv__clip,.b2 .pv__in,.b2 .item{transition:none !important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
}