/* Shared navigation: keep the nine-photo tool first and the full menu usable on small screens. */
.site-header nav a{white-space:nowrap}
.site-header nav a[href="/create/"]{font-weight:600;color:#344c2f}
@media(min-width:1241px){.site-header nav{gap:24px;margin-right:24px}}
@media(max-width:1240px){
 .site-header{height:76px;min-height:76px;padding-block:0;gap:15px;position:relative;z-index:5}
 .site-header .my-photos{font-size:0;margin-left:auto;gap:0}
 .site-header .my-photos svg{width:18px;height:18px}
 .menu-toggle{display:flex;align-items:center;gap:8px;font-size:16px;order:3;padding:8px 0}
 .menu-toggle>span{font-size:17px}
 .site-header nav{display:none;position:absolute;left:0;right:0;top:76px;margin:0;padding:18px 22px;background:var(--paper);border-bottom:1px solid var(--line);gap:0;box-shadow:0 10px 10px #00000005;flex-direction:column;flex-wrap:nowrap;align-items:stretch}
 .site-header.menu-open nav{display:flex}
 .site-header nav a{font-size:16px;line-height:1.5;padding:9px 0}
 .site-header nav a[aria-current]:after{bottom:4px;width:48px}
}

/* Keep the current identity visible outside the collapsed navigation. */
.header-account{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;padding:4px 0;color:#344b30;text-decoration:none}
.header-account-avatar{display:grid;place-items:center;width:28px;height:28px;border:1px solid #b5bfaa;border-radius:50%;background:#f1f3ec;font-size:12px;font-weight:600;flex-shrink:0}
.header-account-copy{display:grid;gap:2px;line-height:1.1}
.header-account-label{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:#727969}
.header-account-name{font-size:12px;font-weight:600;max-width:110px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.header-account-name[hidden]{display:none}
.site-header nav .nav-my-photos{display:none}
.header-account:focus-visible{outline:2px solid #526d43;outline-offset:5px;border-radius:3px}
@media(max-width:1240px){
 .site-header.has-account-link .header-account{margin-left:auto}
 .site-header.has-account-link .my-photos{display:none}
 .site-header nav .nav-my-photos{display:block}
}
@media(max-width:520px){
 .site-header.has-account-link{padding-inline:16px;gap:10px}
 .site-header.has-account-link .brand{font-size:15px;gap:6px}
 .site-header.has-account-link .brand-mark{width:24px;height:24px}
 .site-header.has-account-link .menu-toggle{font-size:14px;gap:4px}
 .header-account{gap:6px}
 .header-account-avatar{width:24px;height:24px;font-size:11px}
 .header-account-label{font-size:8px}
 .header-account-name{max-width:68px;font-size:11px}
}