@font-face{font-family:Caveat;src:url('assets/Caveat.ttf') format('truetype');font-weight:400 700;font-display:swap}
@font-face{font-family:Inter;src:url('assets/Inter.ttf') format('truetype');font-weight:100 900;font-display:swap}
:root{--blue:#2454bf;--paper:#f7f5ef;--intro-paper:#ffffff;--orange:#ff901f;--ink:#16367c}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--paper);color:var(--blue)}
body{font-family:Inter,Arial,sans-serif;-webkit-font-smoothing:antialiased}
button,input{font:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible{outline:2px solid var(--blue);outline-offset:8px}
[hidden]{display:none!important}
#experience{position:relative;min-height:740px;height:100svh;overflow:hidden;isolation:isolate}
#ink{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-2}
.paper-grain{position:absolute;inset:0;pointer-events:none;opacity:.13;z-index:3;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.81' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23808080' filter='url(%23n)' opacity='.42' d='M0 0h180v180H0z'/%3E%3C/svg%3E");mix-blend-mode:multiply}
#signature{position:absolute;top:0;left:0;width:680px;transform-origin:0 0;will-change:transform;pointer-events:none}
#signature svg{display:block;width:100%;overflow:visible}
.pen{stroke-dasharray:1;stroke-dashoffset:1}
#conversation{position:relative;margin-left:13.5%;padding-top:clamp(120px,17vh,200px);width:min(700px,66%);opacity:0}
h1{margin:0;font-weight:600;letter-spacing:-.035em;line-height:.88;transform:rotate(-2deg);transform-origin:left bottom}
.handwritten{display:block;font-family:Caveat,cursive;width:max-content;max-width:100%;line-height:1.12;overflow-wrap:anywhere;clip-path:inset(-.18em 100% -.2em -.12em);padding:.08em .16em .13em 0}
.hey{font-size:clamp(95px,9.8vw,150px);font-weight:700;margin-bottom:10px}
.welcome,.here{font-size:clamp(65px,6.8vw,104px)}
.here{padding-bottom:.19em}
.invitation{position:relative;margin-top:29px;opacity:0;transform:translateY(7px)}
.invitation p{font-size:17px;font-weight:400;letter-spacing:-.025em;margin:0}
.gesture{position:absolute;right:5%;top:-26px;width:90px;height:76px;transform:rotate(-6deg);stroke:var(--blue);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.gesture path{stroke-dasharray:220;stroke-dashoffset:220}
form{margin-top:35px;max-width:600px;opacity:0;transform:translateY(9px)}
.writing-line{position:relative;display:flex;align-items:center;padding:0 0 12px}
input{border:0;background:transparent;color:var(--blue);min-width:0;width:100%;font-family:Caveat,cursive;font-size:38px;padding:0 18px 4px 2px;line-height:1.3;border-radius:0;caret-color:var(--orange)}
input::placeholder{color:#6e83af;opacity:.8}
input:focus-visible{outline:none}
.writing-line:focus-within .underline{stroke:var(--blue);opacity:1}
.underline{position:absolute;bottom:0;left:0;width:100%;height:12px;fill:none;stroke:var(--blue);stroke-width:1.4;opacity:.5;transition:opacity .2s}
.send{background:none;border:0;padding:0 4px;width:58px;height:46px;color:var(--blue);flex-shrink:0;transition:transform .2s,opacity .2s}
.send:disabled{opacity:.35;cursor:default}
.send:not(:disabled):hover{transform:translateX(5px) rotate(-5deg)}
.send svg{width:100%;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.form-foot{display:flex;justify-content:space-between;padding-top:13px;font-size:11px;color:#657393;letter-spacing:.01em}
.enter-hint{font-size:10px;letter-spacing:.06em}
#acknowledgement{font:500 34px Caveat,cursive;min-height:42px;margin:16px 0 0;opacity:0;transform:rotate(-2deg);transition:opacity .35s}
#acknowledgement.visible{opacity:1}
.corner-note{position:absolute;bottom:34px;left:42px;display:flex;align-items:center;gap:10px;font-size:10px;color:#6d7890;letter-spacing:.025em;opacity:0}
.corner-note span{width:6px;height:6px;background:var(--orange);border-radius:50%;transform:rotate(-8deg)}
.quiet-button{position:absolute;bottom:25px;right:32px;z-index:4;border:0;padding:12px 8px;background:none;font-size:11px;letter-spacing:.01em;color:var(--blue)}
.quiet-button span{font-size:17px;vertical-align:-1px;margin:0 5px}
#skip{color:var(--paper)}
.quiet-button:hover{text-decoration:underline;text-underline-offset:5px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.no-js{position:absolute;inset:0;display:grid;align-content:center;justify-content:center;background:var(--blue);color:white;padding:32px;z-index:5;gap:24px}
.no-js h1{font:600 50px Caveat,cursive}
@media(min-width:1600px){#conversation{margin-left:18%;padding-top:19vh}}
@media(max-height:800px) and (min-width:701px){#experience{min-height:640px}#conversation{padding-top:90px}.hey{font-size:105px}.welcome,.here{font-size:80px}.invitation{margin-top:14px}form{margin-top:25px}}
@media(max-width:700px){#experience{min-height:690px}#conversation{margin-left:8%;width:84%;padding-top:165px}.hey{font-size:100px;margin-bottom:9px}.welcome,.here{font-size:clamp(54px,10.8vw,75px);letter-spacing:-.03em}.invitation{margin-top:27px}.invitation p{font-size:15px}.gesture{right:0;width:65px;top:-17px}form{margin-top:35px}input{font-size:32px}.corner-note{left:24px;bottom:27px;font-size:9px;max-width:140px;line-height:1.5}.quiet-button{right:18px;bottom:16px;font-size:10px}.form-foot{font-size:10px}.enter-hint{display:none}#acknowledgement{font-size:29px}}
.memory-controls{margin:18px 0 90px;max-width:600px;font-size:10px;color:#657393;line-height:1.6}
.memory-controls label{display:inline-flex;gap:7px;align-items:center;cursor:pointer}
.memory-controls input{width:13px;height:13px;margin:0;padding:0;accent-color:var(--blue)}
.memory-controls button{border:0;background:none;color:inherit;font-size:10px;text-decoration:underline;text-underline-offset:3px;margin-left:14px;padding:6px 0}
.memory-controls p{margin:5px 0}
#conversation{padding-bottom:30px}
#experience{height:auto;min-height:max(740px,100svh)}
#acknowledgement{line-height:1.15;overflow-wrap:anywhere;max-width:600px}
.invitation p{padding-right:80px;line-height:1.5}
.hey{font-size:clamp(70px,8.5vw,130px)}
.welcome,.here{font-size:clamp(47px,5.7vw,87px);width:auto;overflow-wrap:anywhere}
@media(max-width:700px){.hey{font-size:76px}.welcome,.here{font-size:clamp(36px,8.3vw,58px)}.memory-controls{font-size:10px}#acknowledgement{font-size:29px}.memory-controls button{margin-left:10px}}
#conversation{margin-left:10.5%;width:min(900px,79%)}
#voice{color:#2454bf;max-width:850px}
#conversation.is-speaking{padding-top:250px}
#answer{font:500 clamp(34px,4.2vw,58px)/1.14 Caveat,cursive;letter-spacing:-.02em;transform:rotate(-1deg);margin:0 0 30px;overflow-wrap:anywhere}
form{max-width:850px;margin-top:30px}
.writing-line{align-items:flex-end}
#message{display:block;resize:vertical;min-height:165px;max-height:330px;width:100%;border:0;border-radius:0;background:transparent;color:#ff901f;-webkit-text-fill-color:#ff901f;font:600 clamp(32px,3.5vw,44px)/1.3 Caveat,cursive;padding:8px 24px 10px 2px;caret-color:#ff901f;outline:none}
#message::placeholder{color:#ad6a25;-webkit-text-fill-color:#ad6a25;opacity:.8}
#message:disabled{opacity:.75}
.writing-line:focus-within .underline{stroke-width:2;stroke:#ff901f}
.send{margin-bottom:9px;color:#ff901f}
.memory-controls{margin-top:28px}
@media(max-width:700px){#conversation{margin-left:8%;width:84%}#conversation.is-speaking{padding-top:205px}#message{font-size:34px;padding-right:10px}#answer{font-size:36px}.send{width:45px}.invitation p{padding-right:65px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}

/* Pigment reveal: the logo keeps the colour after the ink leaves. */
#signature{z-index:1}
#ink{z-index:0}
#conversation{z-index:2}
#conversation.is-speaking{padding-top:180px}
@media(max-width:700px){#conversation.is-speaking{padding-top:150px}}

#tagline{display:flex;justify-content:center;align-items:baseline;gap:.25em;white-space:nowrap;color:#191919;font:500 30px/1.25 Inter,Arial,sans-serif;letter-spacing:-.015em;margin-top:15px;opacity:0}#concept{display:inline-block;transition:opacity .18s,transform .18s}#concept.changing{opacity:0;transform:translateY(3px)}

/* The final paper is painted in by the clearing drop, not cross-faded. */
#experience{background:var(--intro-paper)}