/* stage's box office, a business's front page. The frame's own tokens, plain and no business's, as page.css has them.
   build.mjs writes the business's paper, ink and face in one line of style in the page, and that line stands over these.
   The logo sits at the middle of the screen, both ways. The front's parts hang under it and move nothing:
   the opening days and hours, the place, and the links. The first paint is paint.css with paint.js. */
:where(:root){--paper:#faf9f5;--ink:#27323d;--sans-own:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--sans:var(--sans-own)}
:root{color-scheme:light}
*{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);-webkit-text-size-adjust:100%}
/* the screen as the phone shows it with its bars up, so the middle is the middle the guest sees */
.front{min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:24px}
/* the logo's box alone is what is centred. The lines are set outside it, so they pull it nowhere.
   On a phone held on its side the logo is smaller, so the lines still fit under it */
.mark{position:relative;width:clamp(200px,min(52vw,58vh),360px)}
.mark > svg{display:block;width:100%;height:auto;fill:currentColor}
/* a business with no drawn logo is its name, in the look's face */
.mark > .name{margin:0;font:600 clamp(26px,7vw,40px)/1.1 var(--sans);text-align:center}
.under{position:absolute;left:50%;top:100%;width:max-content;max-width:calc(100vw - 48px);transform:translateX(-50%);margin:0;padding-top:clamp(30px,5.5vh,52px);
  font:400 clamp(12px,3.3vw,14px)/1.25 var(--sans);letter-spacing:.2em;text-transform:uppercase;text-align:center}
.under p{margin:0;transition:opacity .5s ease-out,transform .5s cubic-bezier(.2,.7,.2,1)}
.under p:nth-child(2){transition-delay:.09s}
.under p:nth-child(3){transition-delay:.18s}
.under p:nth-child(4){transition-delay:.27s}
.under p:nth-child(n+5){transition-delay:.36s}
/* a line's last letter carries its spacing, so each line starts that far in and its ink sits at the middle */
.hours,.place{padding-left:.2em}
/* the days, then the hours. On a narrow phone the hours drop under their days */
.hours{display:flex;flex-wrap:wrap;justify-content:center;column-gap:1.3em;row-gap:.65em}
.hours b{font-weight:600}
.under .hours + .hours{margin-top:1.2em}
.under .place:not(:first-child){margin-top:1.15em}
/* the links: each a button a thumb can press, with its site's mark where the frame knows the site. The face sits high in its line, so the words are set a little down */
.under .follow{display:flex;flex-wrap:wrap;justify-content:center;gap:.8em}
.under .follow:not(:first-child){margin-top:1.7em}
.link{display:inline-flex;align-items:center;gap:.75em;min-height:44px;padding:0 1.1em 0 1.2em;border:1.5px solid var(--ink);border-radius:999px;color:var(--ink);font-weight:600;text-decoration:none;transition:background .18s,color .18s}
.link svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.link svg .pip{fill:currentColor;stroke:none}
.link span{padding-top:.2em}
.link:active{background:var(--ink);color:var(--paper)}
@media (hover:hover){ .link:hover{background:var(--ink);color:var(--paper)} }
.link:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* the lines wait for the dot to land, then rise one after the other. A painted page is served waiting, so they are never
   seen before the field. With no script they come by their own clock, when the field leaves */
.front-wait .under p{opacity:0;transform:translateY(8px)}
.front-wait:not(.paint-live) .under p{animation:front-come .4s 8s forwards}
@keyframes front-come{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .under p,.link{transition:none} }