/* The main Menu as a drawer that rolls out from the left (penzap.com pages and the app), with the account at the top,
   and the row of main destinations under the logo. The drawer is a touch darker than the page in light mode and a
   touch lighter in dark mode. */
:root{--topbar:#e4e5ea;--topbar-line:#d3d4db;--drawer:#e6e7ec;--drawer-hover:#d9dae1;--drawer-line:#cfd0d8;--drawer-head:#1f2026;--drawer-head-2:#2c2d35}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--topbar:#191a20;--topbar-line:#2a2b33;--drawer:#1c1d24;--drawer-hover:#272832;--drawer-line:#33343e;--drawer-head:#2a2b33;--drawer-head-2:#3a3b45}}
:root[data-theme="dark"]{--topbar:#191a20;--topbar-line:#2a2b33;--drawer:#1c1d24;--drawer-hover:#272832;--drawer-line:#33343e;--drawer-head:#2a2b33;--drawer-head-2:#3a3b45}

html.dr-open,html.dr-open body{overflow:hidden}
.menu.pz-drawer{position:fixed!important;top:0!important;left:0!important;right:auto!important;bottom:0!important;width:min(280px,75vw)!important;max-width:none!important;max-height:none!important;height:100dvh;margin:0!important;
  border:0!important;border-radius:0!important;padding:0 0 28px!important;background:var(--drawer)!important;box-shadow:6px 0 30px rgba(0,0,0,.35)!important;z-index:1001!important;
  display:block!important;overflow-y:auto;overscroll-behavior:contain;text-align:left}
.menu.pz-drawer[hidden]{display:none!important}
.menu.pz-drawer:not([hidden]){animation:pzDrIn .22s cubic-bezier(.2,.8,.2,1)}
@keyframes pzDrIn{from{transform:translateX(-100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.menu.pz-drawer:not([hidden]),.dr-scrim:not([hidden]){animation:none}}

/* account header */
.pz-drawer .dr-head{background:var(--drawer-head);color:#fff;padding:14px 20px 16px;border-bottom:3px solid var(--accent)}
.pz-drawer .dr-top{display:flex;justify-content:flex-end}
.pz-drawer .dr-head a,.pz-drawer .dr-head button{color:#fff!important;background:none;border:0;padding:0;width:auto!important;display:inline-flex!important;font:inherit;cursor:pointer}
.pz-drawer .dr-acct{align-items:center;gap:8px;font-size:14px;font-weight:600!important;text-decoration:none;border-radius:8px!important;padding:4px 6px!important}
.pz-drawer .dr-acct svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round}
.pz-drawer .dr-title{margin:6px 0 10px}
.pz-drawer .dr-title small{display:block;font-size:13px;opacity:.8}
.pz-drawer .dr-title b{display:block;font-size:22px;font-weight:700;letter-spacing:-.01em;line-height:1.15}
.pz-drawer .dr-head .menu-who{border:0!important;margin:0 0 10px!important;padding:0!important;color:rgba(255,255,255,.7)!important;font-size:12px}
.pz-drawer .dr-head .menu-who b{color:#fff!important;display:inline!important;margin-left:4px;font-weight:600}
.pz-drawer .dr-acts{display:flex;flex-wrap:wrap;gap:8px}
.pz-drawer .dr-acts form{margin:0;display:inline-flex!important}
.pz-drawer .dr-acts a,.pz-drawer .dr-acts button{background:var(--drawer-head-2)!important;border-radius:999px!important;padding:6px 13px!important;font-size:13px!important;font-weight:600!important;text-decoration:none;line-height:1.2}
.pz-drawer .dr-acts a:hover,.pz-drawer .dr-acts button:hover,.pz-drawer .dr-acts a:focus-visible,.pz-drawer .dr-acts button:focus-visible,.pz-drawer .dr-acct:hover,.pz-drawer .dr-acct:focus-visible{background:var(--accent)!important;outline:none}

/* items: roomy rows and bold section headings, like a store's side menu */
.pz-drawer>a,.pz-drawer>button,.pz-drawer>form>button,.pz-drawer .menu-group>.menu-grp,.pz-drawer .menu-sub a,.pz-drawer .menu-sub button{
  display:flex!important;align-items:center;justify-content:space-between;gap:12px;width:100%;background:none;border:0;border-radius:0!important;padding:13px 20px!important;
  color:var(--fg)!important;text-decoration:none;font:inherit;font-size:15px!important;font-weight:500;line-height:1.3;text-align:left;cursor:pointer;box-shadow:none}
.pz-drawer>form{margin:0;display:block}
.pz-drawer a:hover,.pz-drawer a:focus-visible,.pz-drawer button:hover,.pz-drawer button:focus-visible{background:var(--drawer-hover)!important;outline:none}
.pz-drawer .dr-home{font-weight:700!important;font-size:17px!important;padding-block:16px!important;border-bottom:5px solid var(--drawer-line)}
.pz-drawer .dr-ic{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.pz-drawer .dr-label{padding:16px 20px 6px;font-weight:700;font-size:17px;color:var(--fg);border-top:5px solid var(--drawer-line)}
.pz-drawer .dr-home+.dr-label{border-top:0}
.pz-drawer .menu-group{display:block!important;border-bottom:1px solid var(--drawer-line)}
.pz-drawer .menu-group>.menu-grp{font-weight:700!important;font-size:16px!important;padding-block:15px!important}
.pz-drawer .menu-grp[aria-expanded="true"]{background:var(--drawer-hover)!important}
.pz-drawer .menu-sub{display:block!important;margin:0!important;padding:0 0 6px!important;border:0!important;background:var(--drawer)}
.pz-drawer .menu-sub[hidden]{display:none!important}
.pz-drawer .menu-sub a,.pz-drawer .menu-sub button{padding:11px 20px 11px 32px!important;font-size:14.5px!important}
.pz-drawer .menu-sub a:hover,.pz-drawer .menu-sub button:hover,.pz-drawer .menu-sub a:focus-visible{box-shadow:inset 4px 0 0 var(--accent)!important}
.pz-drawer a[aria-current="page"]{box-shadow:inset 4px 0 0 var(--accent)!important;font-weight:600}
.pz-drawer .sub{font-size:12px;color:var(--muted);font-weight:400}
.pz-drawer hr{border:0;border-top:5px solid var(--drawer-line);margin:6px 0}
.pz-drawer .menu-group+a,.pz-drawer .menu-group+form,.pz-drawer .menu-group+button{border-top:5px solid var(--drawer-line)}

/* the dimmed page behind, with the close X just outside the drawer */
.dr-scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1000;animation:pzFade .2s}
.dr-scrim[hidden]{display:none}
@keyframes pzFade{from{opacity:0}}
.dr-scrim .dr-x{position:absolute;top:12px;left:calc(min(280px,75vw) + 8px);width:40px;height:40px;border:0;background:none;color:#fff;font-size:34px;line-height:1;cursor:pointer;border-radius:50%;padding:0}
.dr-scrim .dr-x:hover,.dr-scrim .dr-x:focus-visible{background:rgba(255,255,255,.15);outline:none}


/* the row of main destinations under the logo: one line, swipe sideways on a phone */
.st-row{display:flex!important;flex-wrap:nowrap!important;gap:4px!important;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:0!important;padding:4px 0 2px;mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.st-row::-webkit-scrollbar{display:none}
.st-row a{flex:none;white-space:nowrap;text-decoration:none;color:var(--fg)!important;font-weight:500;font-size:14px;padding:7px 12px;border-radius:999px;border:1px solid transparent}
.st-row a:hover,.st-row a:focus-visible{background:var(--panel-2);border-color:var(--line);outline:none}
.st-row a[aria-current="page"]{background:var(--panel);border-color:var(--line);box-shadow:inset 0 -2px 0 var(--accent)}
.st-row a:last-child{margin-right:24px}
.pz-drawer [hidden]{display:none!important}
body:not(.phone-use) .pz-drawer .pu-only{display:none!important}

/* the top band with the logo: a touch darker than the page in light mode, lighter in dark mode, edge to edge on
   every screen (the content inside stays centered). The shadow paints the band past the header's sides. */
.site-top,body:not(.phone-use) .top{position:relative}
.site-top::before,body:not(.phone-use) .top::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--topbar);
  box-shadow:0 0 0 100vmax var(--topbar),0 1px 0 100vmax var(--topbar-line);clip-path:inset(0 -100vmax -1px)}
.site-top{padding-bottom:8px!important;margin-bottom:12px!important}
body:not(.phone-use) .top{padding-bottom:10px;margin-bottom:14px}

/* The top bar with the logo: a full-width band, a touch darker than the page in light mode and a touch lighter in dark
   mode; its content stays lined up with the page. */
:root{--hdr:#e5e6eb;--hdr-line:#d6d7de}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--hdr:#1a1b21;--hdr-line:#2a2b33}}
:root[data-theme="dark"]{--hdr:#1a1b21;--hdr-line:#2a2b33}
header.site-top{--wrap:1080px;max-width:none!important;padding-inline:max(16px,calc((100% - var(--wrap)) / 2 + 16px));background:var(--hdr);border-bottom:1px solid var(--hdr-line);margin-bottom:12px}
header.top{max-width:none;padding-inline:max(16px,calc((100% - 1120px) / 2 + 16px));padding-bottom:8px;background:var(--hdr);border-bottom:1px solid var(--hdr-line);margin-bottom:12px}
@media (max-width:680px){header.top{padding-inline:12px}}
.admin header.site-top,.gallery-page header.site-top,.my-studio header.site-top{--wrap:1180px}
body.phone-use header.top{background:none;border:0;margin:0;padding:0}
header.site-top .st-row a:hover,header.top .st-row a:hover{background:var(--panel)}