/* Keep the Z mark square and reserve a separate row for compact header controls. */
.brand-mark{box-sizing:border-box;aspect-ratio:1/1;flex:none!important;padding:0!important;line-height:1;min-width:0;min-height:0}
.gateway-brand .brand-mark{width:50px!important;height:50px!important;font-size:39px!important}
.topbar .brand-mark{width:44px!important;height:44px!important;font-size:35px!important}
.topbar .brand{min-width:0;gap:10px;letter-spacing:.025em}
.topbar .brand .brand-copy{max-width:none!important;min-width:0;line-height:1.3;white-space:nowrap}
.topbar .brand .brand-copy small{font-size:11px;letter-spacing:.025em;line-height:1.4;margin-top:2px}
@media(max-width:1100px){
 .topbar .nav{grid-template-columns:minmax(0,1fr);grid-template-areas:"controls" "brand" "links";gap:10px;padding:8px 0}
 .topbar #language-control{justify-self:end;flex-direction:row!important}
 .topbar .brand{justify-self:start;font-size:clamp(13px,2.6vw,19px)}
 .topbar .brand .brand-copy small{font-size:11px}
 .topbar .navlinks{grid-column:1;width:100%;min-width:0}
 .topbar .nav:not(:has(#language-control)){padding-top:64px}
}
@media(max-width:520px){
 .topbar .brand{font-size:clamp(12px,3.55vw,17px);gap:9px}
 .topbar .brand-mark{width:42px!important;height:42px!important;font-size:34px!important}
 .topbar .brand .brand-copy small{font-size:10px;letter-spacing:.02em}
 .gateway-brand .brand-mark{width:46px!important;height:46px!important;font-size:37px!important}
}
/* Native pickers retain full option names; a compact caption shows the current choice. */
#language-control>label{display:none!important}
.compact-control{position:relative;display:inline-flex;align-items:center;flex:none;height:40px;border:1px solid var(--line);border-radius:3px;background:var(--bg);color:var(--text);min-width:0}
.compact-language{width:64px}.compact-theme{width:78px}
.compact-control-caption{font:500 13px/1.2 Arial,sans-serif;padding-left:10px;pointer-events:none}
.compact-control::after{content:'⌄';position:absolute;right:8px;top:10px;font-size:13px;pointer-events:none}
html body #language-control .compact-control.compact-control.compact-control select#site-language,html body #language-control .compact-control.compact-control.compact-control select#site-theme{position:absolute;inset:0;width:100%!important;max-width:100%!important;min-width:0!important;height:100%!important;min-height:0!important;margin:0!important;opacity:0;cursor:pointer}
.compact-control:focus-within{outline:2px solid var(--gold);outline-offset:2px}
#language-control:has(.compact-control){gap:4px!important;padding:3px!important}

/* Compact controls share the brand row on the gateway and listing headers. */
.compact-control{height:32px}.compact-language{width:42px}.compact-theme{width:52px}
.compact-control-caption{font-size:11px;padding-left:5px}
.compact-control::after{right:4px;top:8px;font-size:10px}
#language-control:has(.compact-control){gap:2px!important;padding:2px!important;min-width:0}
.gateway-brand{width:100%;gap:9px}
.gateway-brand .brand-copy{min-width:0}
.gateway-brand #language-control{position:static;flex-direction:row!important;margin:0 0 0 auto;flex:none;box-shadow:none;z-index:auto}
.topbar #language-control{position:static;flex-direction:row!important;justify-self:end;margin:0;box-shadow:none}
.topbar .nav{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"brand links controls";padding:8px 0;gap:12px;align-items:center}
.topbar .brand{grid-area:brand}.topbar .navlinks{grid-area:links}.topbar #language-control{grid-area:controls}
@media(max-width:1100px){
 .topbar .nav,.topbar .nav:not(:has(#language-control)){grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand controls" "links links";padding:8px 0;gap:8px 6px}
 .topbar .navlinks{grid-column:1/-1}
}
@media(max-width:520px){
 .topbar .brand,.gateway-brand{font-size:12px!important;letter-spacing:0;gap:7px}
 .topbar .brand .brand-copy small,.gateway-brand .brand-copy small{font-size:9px;letter-spacing:0}
 .topbar .brand-mark,.gateway-brand .brand-mark{width:36px!important;height:36px!important;font-size:29px!important}
 .gateway-brand #language-control{max-width:none;right:auto;top:auto}
 .gateway{padding-top:20px}
}
@media(max-width:350px){
 .topbar .brand,.gateway-brand{font-size:10px!important;gap:5px}
 .topbar .brand .brand-copy small,.gateway-brand .brand-copy small{font-size:8px}
 .topbar .brand-mark,.gateway-brand .brand-mark{width:32px!important;height:32px!important;font-size:26px!important}
 .compact-language{width:37px}.compact-theme{width:47px}.compact-control-caption{font-size:10px;padding-left:4px}
}
@media(max-width:1100px){
 .topbar .nav>.btn{grid-column:1/-1;justify-self:center}
 .topbar .navlinks{max-width:100%;overflow-x:auto;overflow-y:hidden;justify-content:flex-start;flex-wrap:nowrap}
}
#language-control:has(.compact-control){width:max-content!important;max-width:none!important}
/* Fit larger lettering into the space left by the square mark and fixed controls. */
.gateway-brand .brand-copy{flex:1;min-width:0}
.topbar .brand{width:100%;min-width:0}
.topbar .brand .brand-copy{flex:1;min-width:0}
.brand-copy .brand-name{display:block;font-weight:800;letter-spacing:0;white-space:nowrap;line-height:1.18}
.brand-copy small{white-space:nowrap}
@media(min-width:1101px){.topbar .brand{font-size:26px}.topbar .navlinks{overflow-x:auto;min-width:0;max-width:100%;white-space:nowrap}}
/* Anchor the homepage brand row close to the page top. */
#gateway{align-items:flex-start;padding-top:10px}
#gateway .gateway-inner{margin:0 auto}
#gateway .gateway-brand{margin-top:0;margin-bottom:24px}
@media(max-width:520px){#gateway{padding-top:8px}#gateway .gateway-brand{margin-bottom:20px}}

/* Homepage uses the same full-width, sticky brand bar as the collection page. */
#gateway{display:flex;flex-direction:column;align-items:stretch;padding-top:0}
.gateway-topbar{width:100%;flex:none;position:sticky;top:0;z-index:9000;margin-bottom:24px}
.gateway-topbar .gateway-header-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand controls";gap:12px;padding:8px 0}
#gateway .gateway-topbar .gateway-brand{margin:0;justify-content:flex-start;gap:10px}
.gateway-topbar .gateway-brand .brand-mark{width:44px!important;height:44px!important;font-size:35px!important}
.gateway-topbar #language-control{margin:0;grid-area:controls}
@media(max-width:520px){
 .gateway-topbar{margin-bottom:20px}
 .gateway-topbar .gateway-header-row{gap:6px}
 #gateway .gateway-topbar .gateway-brand{gap:7px}
 .gateway-topbar .gateway-brand .brand-mark{width:36px!important;height:36px!important;font-size:29px!important}
}
@media(max-width:350px){#gateway .gateway-topbar .gateway-brand{gap:5px}.gateway-topbar .gateway-brand .brand-mark{width:32px!important;height:32px!important;font-size:26px!important}}

#gateway-search-controls:empty{display:none}
@media(max-width:520px){
 .gateway-topbar{margin-bottom:10px}
 .gateway-topbar .gateway-header-row{grid-template-columns:minmax(0,1fr);grid-template-areas:"brand";padding:6px 0}
 #gateway .gateway-topbar .gateway-brand{width:max-content;max-width:100%;justify-self:center;justify-content:center}
 .gateway-topbar .gateway-brand .brand-copy{flex:none;width:clamp(230px,60vw,310px);max-width:calc(92vw - 43px)!important}
 .gateway-name-search{grid-template-columns:minmax(0,1fr) 104px;gap:8px}
 .gateway-name-search>.field{display:contents}
 .gateway-name-search label{grid-row:1;grid-column:1;align-self:center;margin:0;font-size:11px;letter-spacing:0;line-height:1.35}
 #gateway-search-controls{grid-row:1;grid-column:2;justify-self:end}
 #gateway-search-controls #language-control{position:static;margin:0;right:auto;top:auto;box-shadow:none;flex-direction:row}
 .gateway-name-search input{grid-row:2;grid-column:1}
 .gateway-name-search>.btn{grid-row:2;grid-column:2}
}
/* The outer homepage header handles stickiness; the brand needs no old control clearance. */
#gateway .gateway-topbar .gateway-brand{position:static;padding:0;background:transparent}
@media(max-width:520px){#gateway .gateway-topbar .gateway-header-row{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"brand"!important;padding:6px 0!important}}

/* Reserve enough desktop space for the full-size website name. */
@media(min-width:1101px){
 .topbar .brand{width:clamp(390px,36vw,520px)}
 .gateway-topbar .gateway-brand{width:100%}
}