/* The brand at the top of every page: the app icon beside "Order Your Day", with the page's name
   on the line under it (the home page has the name alone). One size everywhere, set here. */
.appicon{display:block;aspect-ratio:1;flex:none}
.appicon img{display:block;width:100%;height:100%}
.appicon .ic-dark{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .appicon .ic-light{display:none}:root:not([data-theme="light"]) .appicon .ic-dark{display:block}}
:root[data-theme="dark"] .appicon .ic-light{display:none}
:root[data-theme="dark"] .appicon .ic-dark{display:block}

.lockup{display:flex;align-items:center;gap:clamp(16px,1.8vw,24px);margin:0 0 clamp(12px,1.8vw,24px)}
.lockup .lockup-icon{width:clamp(84px,8.4vw,120px);margin:0 0 0 -4px;filter:drop-shadow(0 16px 26px rgba(16,64,28,.24))}
.lockup .lockup-name{margin:0;font:600 clamp(32px,3.5vw,48px)/1.04 var(--serif);letter-spacing:-.015em;color:var(--ink);text-align:left}
.lockup .lockup-name span{display:block;white-space:nowrap}
.lockup .lockup-name .lockup-page{color:var(--ink-2)}
@media (max-width:860px){
  .lockup{gap:14px}
  .lockup .lockup-icon{width:60px;margin:0}
  .lockup .lockup-name{font-size:clamp(26px,7vw,32px)}
}