/* Auteur — one short page. Paper, ink, the green; a monolith of dots that the scroll turns, then pours into the mark. */
:root{
  --paper:#eef5f3; --ink:#0b1a18; --acc:#2f6f62; --soft:#5d6e69; --mute:#86958f; --hair:#c9d8d3;
  --d:"Red Hat Display",system-ui,-apple-system,sans-serif; --m:"Red Hat Mono",ui-monospace,Menlo,monospace;
  --pad:72px; --paper0:rgba(238,245,243,0);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--paper)}
body{background:var(--paper);color:var(--ink);font-family:var(--d);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--acc);outline-offset:4px;border-radius:6px}

/* nav */
.nav{position:fixed;left:0;right:0;top:0;z-index:5;height:92px;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.nav a{pointer-events:auto}
.nav:before{content:"";position:absolute;inset:0 0 -28px;background:linear-gradient(var(--paper) 58%,var(--paper0));opacity:0;transition:opacity .4s;z-index:-1}
.below .nav:before{opacity:1}
.brand{display:flex;align-items:center;gap:12px;font-weight:600;font-size:17px;letter-spacing:-.01em}
.navr{display:flex;align-items:center;gap:30px}
.quiet svg{width:10px;height:10px;transition:transform .4s cubic-bezier(.16,.84,.12,1)}
.quiet.ext:hover svg{transform:translate(2px,-2px)}
.ndot{width:6px;height:6px;border-radius:50%;background:var(--acc);margin-right:2px;flex:none}

.brand svg{height:21px;width:auto;display:block;color:var(--ink)}
.quiet{position:relative;display:flex;align-items:center;gap:7px;height:38px;font-size:15px;font-weight:500;color:var(--ink);transition:color .6s}
.quiet svg{width:11px;height:11px}
.quiet:hover{color:var(--acc)}
.quiet:after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;background:radial-gradient(circle,var(--acc) .9px,transparent 1.2px) 0 0/6px 2px repeat-x;clip-path:inset(0 100% 0 0);transition:clip-path .5s cubic-bezier(.16,.84,.12,1)}
.quiet:hover:after,.quiet:focus-visible:after,.quiet.on:after{clip-path:inset(0 0 0 0)}

/* the stage: pinned while the monolith turns and becomes the mark */
.stage-wrap{position:relative;height:500vh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
#mono{position:absolute;inset:0;width:100%;height:100%}
/* the fusion: a flash of light where the slab collapses into the mark */
.flash{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at var(--fx,50%) var(--fy,42%),#fff 0,rgba(255,255,255,.96) 7%,rgba(220,240,234,.78) 20%,rgba(159,208,196,.3) 42%,rgba(238,245,243,0) 72%)}
.lines{position:absolute;inset:0;pointer-events:none}
.line{position:absolute;inset:0}
.line .l,.line .r{position:absolute;margin:0;font-weight:500;font-size:clamp(44px,5.4vw,80px);line-height:1;letter-spacing:-.035em;white-space:nowrap}
.line .l{right:calc(50% + var(--gap,190px));top:36%;text-align:right}
.line .r{left:calc(50% + var(--gap,190px));top:57%;color:var(--acc)}
.line[data-i="1"] .l,.line[data-i="1"] .r,.line[data-i="2"] .l,.line[data-i="2"] .r{font-size:clamp(34px,3.9vw,58px);line-height:1.04}
.line[data-i="1"] .r{color:var(--soft)}
/* words rise out of their own line, and leave the way you're scrolling */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .14em;margin:0 -.04em -.14em}
.w>span{display:inline-block;transform:translateY(112%);transition:transform .5s cubic-bezier(.5,0,.75,0)}
.line.past .w>span{transform:translateY(-112%)}
.line.on .w>span{transform:none;transition:transform 1.05s cubic-bezier(.16,.84,.12,1) calc(.08s + var(--i,0) * 55ms)}
.line .r .w>span{transition-delay:calc(.2s + var(--i,0) * 55ms)}
.line:not(.on) .r .w>span{transition-delay:0s}

/* the master mark's name, set under it once the dots have settled */
.lock{position:absolute;left:0;right:0;top:70%;text-align:center;font-weight:600;font-size:var(--lk,88px);letter-spacing:-.045em;line-height:1;pointer-events:none}
.lock .w{padding:0 .01em .16em;margin:0 -.01em -.16em}
.lock .w>span{transform:translateY(115%);transition:transform .45s cubic-bezier(.5,0,.75,0)}
.lockon .lock .w>span{transform:none;transition:transform 1.25s cubic-bezier(.16,.84,.12,1) calc(.12s + var(--i,0) * 45ms)}
.brand{transition:opacity .6s ease}
.lockon .brand{opacity:0;pointer-events:none}

/* progress: one quiet dot per stop */
.pips{position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);list-style:none;display:flex;flex-direction:column;gap:14px;transition:opacity .6s}
.pips li{width:5px;height:5px;border-radius:50%;background:var(--hair);transition:background .4s,transform .4s}
.pips li.on{background:var(--acc);transform:scale(1.5)}
.hint{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font-family:var(--m);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);opacity:0;transition:opacity 1s ease 2.6s}
.hint i{width:2px;height:34px;background:radial-gradient(circle,var(--acc) .9px,transparent 1.2px) 0 0/2px 6px repeat-y;animation:drip 1.6s linear infinite}
@keyframes drip{to{background-position:0 6px}}
.in .hint{opacity:1}
.scrolled .hint{opacity:0;transition-delay:0s;transition-duration:.4s}

/* the end: Muster on the night ground (the About page's), its mark made from the Auteur mark's own dots, and what it is */
.mfin{position:absolute;left:var(--mfx,56%);top:50%;width:var(--mfw,440px);transform:translateY(-50%);pointer-events:none}
.js .mfin>*{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .6s ease}
.mfon .mfin{pointer-events:auto}
.js.mfon .mfin>*{opacity:1;transform:none;transition:opacity 1s ease,transform 1.2s cubic-bezier(.16,.84,.12,1)}
.js.mfon .mfin>*:nth-child(2){transition-delay:.08s}.mfon .mfin>*:nth-child(3){transition-delay:.18s}.mfon .mfin>*:nth-child(4){transition-delay:.28s}.mfon .mfin>*:nth-child(5){transition-delay:.36s}.mfon .mfin>*:nth-child(6){transition-delay:.44s}
.cap{font-family:var(--m);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);font-weight:400}
.mfin{color:#eef5f3}
.mfin .cap{color:rgba(238,245,243,.62)}
.mfin h2{margin-top:14px;font-weight:500;font-size:clamp(60px,6.4vw,100px);line-height:.92;letter-spacing:-.05em}
.soon{margin-top:14px;display:flex;align-items:center;gap:12px;font-weight:500;font-size:clamp(22px,2vw,30px);letter-spacing:-.025em;color:#9fd0c4}
.mfin .lede{margin-top:22px;font-size:clamp(17px,1.3vw,19px);line-height:1.55;color:rgba(238,245,243,.8);text-wrap:pretty}
.mfin .dev{color:rgba(238,245,243,.55)}
.dev{margin-top:16px;font-family:var(--m);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.live{flex:none;display:inline-block;width:8px;height:8px;border-radius:50%;background:#9fd0c4;box-shadow:0 0 0 0 rgba(159,208,196,.5);animation:live 2.2s ease-out infinite}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(159,208,196,.5)}70%,100%{box-shadow:0 0 0 10px rgba(159,208,196,0)}}
.btn{margin-top:32px;display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 28px;border-radius:999px;border:2px dotted var(--acc);font-size:16px;font-weight:500;color:var(--ink);transition:background .35s,color .35s,border-color .35s}
.btn svg{width:11px;height:11px;transition:transform .4s cubic-bezier(.16,.84,.12,1)}
.btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.mfin .btn{background:#eef5f3;color:#040b0b;border:0}
.mfin .btn:hover{background:#9fd0c4;color:#040b0b}
.btn:hover svg{transform:translate(2px,-2px)}

.legal{position:absolute;left:var(--pad);right:var(--pad);bottom:34px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
  padding-top:18px;background:radial-gradient(circle,var(--hair) .9px,transparent 1.15px) 0 0/7px 2px repeat-x}
.legal a:hover{color:var(--ink)}
.js .stage .legal{opacity:0;transition:opacity .6s}
.js.mfon .stage .legal{opacity:1;transition:opacity 1.2s ease .6s}
.stage .legal{color:rgba(238,245,243,.55);background:radial-gradient(circle,rgba(238,245,243,.3) .9px,transparent 1.15px) 0 0/7px 2px repeat-x}
.stage .legal a:hover{color:#eef5f3}
.brand svg,.brand,.quiet,.pips li{transition:color .6s,background .6s,opacity .6s,transform .4s}


/* About: its own page, at night, one screen, centred in a field of dots — what we believe, who we are, and an open door */
:root.night{--paper:#040b0b;--ink:#eef5f3;--acc:#9fd0c4;--soft:#86958f;--mute:#5a6964;--hair:#1c2a27;--paper0:rgba(4,11,11,0)}
.one{position:relative;height:100vh;height:100svh;min-height:540px;overflow:hidden}
#limb{position:absolute;inset:0;width:100%;height:100%}
.ewrap{position:relative;height:100%;max-width:1080px;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(72px,10vh,104px) var(--pad) clamp(64px,10vh,100px)}
.estate{margin-top:clamp(14px,2.7vh,24px);max-width:21em;font-weight:500;font-size:clamp(26px,min(3.2vw,5.1vh),48px);line-height:1.16;letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
.estate em{font-style:normal;color:var(--acc)}
.estate .w{padding-bottom:.14em;margin-bottom:-.14em}
.js .estate .w>span{transform:translateY(108%);transition:transform 1.1s cubic-bezier(.16,.84,.12,1) calc(.3s + var(--i,0) * 45ms)}
.in .estate .w>span{transform:none}
.erow{margin-top:clamp(30px,7.5vh,72px);width:min(980px,100%);display:grid;grid-template-columns:1fr 2px 1fr 2px 1.3fr;gap:clamp(20px,2.8vw,40px);align-items:end}
.est b{display:block;font-weight:500;font-size:clamp(40px,min(4.4vw,7.1vh),64px);line-height:1;letter-spacing:-.05em;color:var(--ink);font-variant-numeric:tabular-nums}
.est b.wd{font-size:clamp(20px,min(2.1vw,3.35vh),30px);line-height:1.2;letter-spacing:-.03em}
.est span{display:block;margin-top:clamp(8px,1.35vh,12px);font-size:clamp(13px,1.65vh,14.5px);line-height:1.5;color:var(--soft)}
.evr{align-self:stretch;width:2px;background:radial-gradient(circle,rgba(159,208,196,.34) 1px,transparent 1.3px) 0 0/2px 8px repeat-y}
.ejoin{margin-top:clamp(26px,6.6vh,64px);justify-content:center;align-items:center;gap:8px 18px;font-size:clamp(14px,1.75vh,15.5px);font-weight:400}
.ejoin>span{color:var(--soft)}
.ejoin a{font-weight:500}
.clinks{display:flex;flex-wrap:wrap}
.clinks a{display:inline-flex;align-items:center;gap:7px;color:var(--ink);background:radial-gradient(circle,var(--acc) .9px,transparent 1.2px) 0 100%/6px 2px repeat-x;padding-bottom:3px;transition:color .3s}
.clinks a:hover{color:var(--acc)}
.clinks svg{width:10px;height:10px}
.one .legal{z-index:1;bottom:clamp(16px,3vh,32px)}
/* everything arrives once: the label, the words, then the three facts one by one, their dotted rules drawn down, then the door */
.js .one .cap,.js .est,.js .ejoin{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform 1.2s cubic-bezier(.16,.84,.12,1)}
.js .evr{transform:scaleY(0);transform-origin:50% 0;transition:transform 1.1s cubic-bezier(.16,.84,.12,1)}
.in .one .cap{opacity:1;transform:none;transition-delay:.15s}
.in .est{opacity:1;transform:none;transition-delay:1.05s}
.in .est:nth-child(3){transition-delay:1.2s}
.in .est:nth-child(5){transition-delay:1.35s}
.in .evr{transform:none;transition-delay:1.25s}
.in .evr:nth-child(4){transition-delay:1.4s}
.in .ejoin{opacity:1;transform:none;transition-delay:1.7s}

/* 404 */
.end{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px var(--pad) 150px}
.end .name{font-weight:500;font-size:clamp(32px,3.2vw,46px);letter-spacing:-.035em}
.end .what{margin-top:14px;color:var(--soft)}
.lost{min-height:100vh;min-height:100svh}
.lost .what a{color:var(--ink);background:radial-gradient(circle,var(--acc) .9px,transparent 1.2px) 0 100%/6px 2px repeat-x;padding-bottom:4px}
.lost .what a:hover{color:var(--acc)}

@media (max-width:760px){
  :root{--pad:22px}
  .nav{height:68px}
  .line .l,.line .r{left:var(--pad)!important;right:var(--pad)!important;white-space:normal;text-align:center!important;font-size:clamp(34px,10vw,46px)}
  .line .l{top:17%}
  .line .r{top:auto;bottom:15%}
  .line[data-i="1"] .l,.line[data-i="1"] .r,.line[data-i="2"] .l,.line[data-i="2"] .r{font-size:clamp(26px,7.4vw,34px)}
  .pips{right:12px}
  .mfin{left:var(--pad);right:var(--pad);width:auto;top:var(--mfy,52%);transform:none;text-align:center}
  .mfin h2{font-size:clamp(48px,14vw,64px)}
  .soon{justify-content:center;font-size:21px}
  .mfin .lede{margin-top:14px;font-size:15.5px;line-height:1.5}
  .mfin .dev{display:none}
  .btn{margin-top:20px;height:50px}
  .navr{gap:20px}
  .legal{justify-content:center;text-align:center;font-size:9.5px;letter-spacing:.1em}
  .ewrap{padding:76px var(--pad) 70px}
  .estate{font-size:clamp(25px,min(7.4vw,4.1vh),31px);line-height:1.16;max-width:13em}
  .erow{grid-template-columns:1fr 2px 1fr;gap:16px 18px;margin-top:clamp(26px,5vh,40px)}
  .evr:nth-child(4){display:none}
  .est:nth-child(5){grid-column:1/-1;padding-top:16px;background:radial-gradient(circle,rgba(159,208,196,.34) 1px,transparent 1.3px) 50% 0/8px 2px repeat-x}
  .est b{font-size:clamp(38px,min(11vw,6.4vh),48px)}
  .est b.wd{font-size:clamp(19px,min(5.6vw,3.3vh),23px);padding-top:0}
  .est span{margin-top:6px;font-size:13px;line-height:1.4}
  .ejoin{margin-top:clamp(24px,5vh,40px);flex-direction:column;gap:8px;font-size:14.5px}
  .one .legal{bottom:calc(4.6vh + 10px);font-size:8.5px;padding-top:10px;gap:6px 16px}
  .one .legal span{text-wrap:balance}
}
@media (max-width:760px) and (max-height:740px){
  .ewrap{padding:66px var(--pad) 54px}
  .estate{margin-top:10px}
  .erow{margin-top:20px;gap:12px 16px}
  .est:nth-child(5){padding-top:12px}
  .est span{font-size:12.5px}
  .ejoin{margin-top:20px;gap:6px}
  .one .legal{bottom:calc(4.4vh + 6px)}
}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
  .w>span{transform:none!important}
  .line:not(.on),:root:not(.lockon) .lock{visibility:hidden}
  .hint,.js .estate .w>span,.js .one .cap,.js .est,.js .evr,.js .ejoin{transform:none!important;opacity:1!important}
  :root:not(.mfon) .mfin{visibility:hidden}
  .flash{display:none}
}