@font-face{font-family:'Instrument Serif';src:url(../../fonts/concepts/instrument.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url(../../fonts/concepts/instrument-italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
.st-spa{--is:'Instrument Serif',var(--serif);background:var(--c7-bone);color:var(--c7-ink);padding-bottom:2rem;--dawn:0}
.st-spa .st-nav b{font:400 1.4rem/1 var(--is);letter-spacing:0;text-transform:none}
.st-spa .st-nav{font-size:max(11px,.76rem)}
.ms-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,10rem);padding:clamp(.5rem,2vw,4rem) var(--st-pad) 0;align-items:end}
.ms-time{font:italic 400 clamp(1.3rem,1.8vw,3.4rem)/1.1 var(--is);color:var(--c7-clay);margin:0 0 .6rem;transition:color .6s var(--ease)}
.st-spa h1{font:400 clamp(3.6rem,8vw,22vh)/.92 var(--is);letter-spacing:-.02em;margin:0 0 1.2rem}
.ms-head > p.rv{max-width:40ch;color:var(--c7-ink-2);margin:0 0 1.6rem}
/* tomorrow */
.ms-day{background:var(--c7-paper);padding:1rem 1.2rem 1.2rem}
.ms-day-h{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font:400 1.5rem/1 var(--is);margin:0 0 .8rem}
.ms-day-h span{font:500 max(11px,.78rem)/1.2 var(--body);color:var(--c7-clay);text-align:right}
.ms-cal{position:relative;--row:clamp(1.55rem,3.1vh,3.2rem)}
.ms-hr{height:var(--row);border-top:1px solid var(--c7-rule);font-size:max(11px,.68rem);color:var(--c7-ink-2)}
.ms-hr span{display:inline-block;padding-top:.15rem}
.ms-bk{position:absolute;left:2rem;right:0;top:calc(var(--at) * var(--row) + 1px);height:calc(var(--len) * var(--row) - 2px);display:flex;align-items:center;padding:0 .7rem;font-style:normal;font-size:max(11px,.72rem);background:var(--c7-bone);color:var(--c7-ink-2);overflow:hidden}
.ms-open{background:none;box-shadow:inset 0 0 0 1px var(--c7-sage);color:var(--c7-sage)}
html.motion .ms-open{animation:ms-pulse 1.8s var(--ease) infinite alternate}
@keyframes ms-pulse{to{opacity:.45}}
.ms-new{background:var(--c7-clay);color:var(--c7-paper);font-weight:500}
html.motion .ms-new{animation:ms-in .7s var(--spring) both}
@keyframes ms-in{0%{transform:scale(.8,.4);opacity:0}100%{transform:none;opacity:1}}
/* the arch: midnight, and the morning coming up behind the conversation */
.ms-arch{position:relative;aspect-ratio:4/5.2;border-radius:50vw 50vw 0 0;overflow:hidden;background:linear-gradient(180deg,var(--c7-night-a),var(--c7-night-b) 62%,var(--c7-night-c))}
.ms-arch::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--c7-night-c),var(--c7-dawn));opacity:var(--dawn);transition:opacity 1.8s var(--ease)}
.ms-arch::after{content:"";position:absolute;left:50%;bottom:-16%;width:66%;aspect-ratio:1;margin-left:-33%;border-radius:50%;background:radial-gradient(closest-side,var(--c7-paper),var(--c7-dawn) 58%,transparent);transform:translateY(calc((1 - var(--dawn)) * 42%));opacity:calc(.25 + var(--dawn) * .75);transition:transform 2s var(--ease),opacity 2s var(--ease)}
.ms-phone{position:absolute;z-index:1;left:12%;right:12%;bottom:0;height:84%;display:flex;flex-direction:column;background:var(--c7-paper);border-radius:1.6rem 1.6rem 0 0;padding:1rem 1rem 0}
.ms-log{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:.5rem;padding-bottom:.6rem;scrollbar-width:none}
.ms-log > :first-child{margin-top:auto}
.ms-b{max-width:88%;padding:.6rem .8rem;font-size:.86rem;line-height:1.38;border-radius:.9rem}
.ms-a{align-self:flex-start;background:var(--c7-bone);color:var(--c7-ink);border-bottom-left-radius:.2rem}
.ms-q{align-self:flex-end;background:var(--c7-clay);color:var(--c7-paper);border-bottom-right-radius:.2rem}
.ms-ask{display:flex;flex-wrap:wrap;gap:.3rem;padding:.6rem 0 .9rem;border-top:1px solid var(--c7-rule);min-height:3.2rem}
.ms-ask button{font:500 max(11px,.76rem)/1.1 var(--body);padding:.6em .8em;border:0;background:none;color:var(--c7-ink);box-shadow:inset 0 0 0 1px var(--c7-ink-2);border-radius:99px;cursor:pointer;transition:transform .3s var(--spring),background-color .2s var(--ease)}
.ms-ask button:hover{background:var(--c7-bone)}
.ms-ask button:active{transform:scale(.95)}
.ms-note{margin:1.4rem var(--st-pad) 0;font-size:max(11px,.78rem);color:var(--c7-ink-2);max-width:68ch}
@media (max-width:860px){.ms-grid{display:flex;flex-direction:column;align-items:stretch;gap:1rem}.ms-head{display:contents}.ms-time{order:1;margin:0}.st-spa h1{order:2;font-size:20vw;margin:0}.ms-head > p.rv{order:3;margin:0}.ms-arch{order:4;aspect-ratio:4/5.6}.ms-day{order:5}.st-spa .st-nav span,.st-spa .st-nav a{display:none}}