/* 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;
}
*{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%,rgba(238,245,243,0));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 paragraph, white on the teal-black, above a dotted horizon */
:root.night{--paper:#040b0b;--ink:#eef5f3;--acc:#9fd0c4;--soft:#86958f;--mute:#5a6964;--hair:#1c2a27}
.story{position:relative;min-height:100vh;min-height:100svh;overflow:hidden}
#limb{position:absolute;inset:0;width:100%;height:100%}
.swrap{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;max-width:1160px;margin:0 auto;padding:130px var(--pad) 210px}
.para{margin-top:26px;max-width:24em;font-weight:400;font-size:clamp(25px,2.55vw,38px);line-height:1.34;letter-spacing:-.022em;color:var(--ink);text-wrap:pretty}
.para a{color:var(--acc);background:radial-gradient(circle,var(--acc) 1px,transparent 1.3px) 0 100%/7px 2px repeat-x;padding-bottom:4px;transition:color .3s}
.para a:hover{color:var(--ink)}
.para .w{padding-bottom:.12em;margin-bottom:-.12em}
.js .para .w>span{transform:translateY(105%);transition:transform 1.1s cubic-bezier(.16,.84,.12,1) calc(.35s + var(--i,0) * 16ms)}
.in .para .w>span{transform:none}
.js .story .cap{opacity:0;transition:opacity 1s ease .2s}.in .story .cap{opacity:1}
.story .legal{z-index:1}

/* 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}
  .para{font-size:clamp(22px,6.2vw,27px)}
  .swrap{padding:110px var(--pad) 190px}
  .legal{justify-content:center;text-align:center;font-size:9.5px;letter-spacing:.1em}
}
@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 .para .w>span,.js .story .cap{transform:none!important;opacity:1!important}
  :root:not(.mfon) .mfin{visibility:hidden}
  .flash{display:none}
}