/* xsite.css - lane network: the cross-site rows in every footer ("Explore" + the family strip).
   Black ground, brass labels, gold hairline grid, radius 0, 48px tap targets with 12px between (playbook "The Session"
   section 6), no fonts or urls of its own. Tokens come from site.css / deco.css. */
.xsite{display:grid;gap:1.6rem;justify-items:center;width:100%;margin:1.2rem auto .4rem;text-align:center}
.xsite__row{display:grid;gap:.75rem;justify-items:center;width:100%;max-width:52rem;min-width:0}
.xsite__label,.xfam__label{display:flex;align-items:center;gap:.8rem;width:100%;margin:0;font:500 .86rem/1.2 var(--mono);letter-spacing:.2em;text-transform:uppercase;font-variant-caps:all-small-caps;color:var(--brass-night)}
.xsite__label::before,.xsite__label::after,.xfam__label::before,.xfam__label::after{content:"";flex:1;height:0;border-top:var(--hair)}
.xsite__arches{display:block;width:min(100%,600px);height:auto;opacity:.9}
.xsite__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;margin:0;padding:0;list-style:none}
.xsite__list>li{display:flex;min-width:0}
.xsite__row--explore .xsite__list>li:last-child:nth-child(odd){grid-column:1/-1}
.xsite__list a{position:relative;display:flex;flex:1;align-items:center;justify-content:center;min-width:0;min-height:48px;padding:.6rem .75rem;font:500 .8rem/1.25 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--bone-night);text-decoration:none;overflow-wrap:break-word;border:1px solid rgba(184,151,90,.42);border-radius:0;background:var(--night);transition:color var(--m-dur-fast) var(--m-ease-out),background-color var(--m-dur-fast) var(--m-ease-out)}
.xsite__list a:hover,.xfam__site a:hover{color:var(--night);background:var(--brass-night)}
.xsite__list a:focus-visible,.xfam__site a:focus-visible{outline:2px solid var(--brass-night);outline-offset:2px}
.xsite__list a:active,.xfam__site a:active{color:var(--night);background:var(--gold)}
.xfam{display:grid;gap:.75rem;width:100%}
.xfam__list{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin:0;padding:0;list-style:none;counter-reset:fam}
.xfam__site{display:flex;min-width:0}
.xfam__site>a,.xfam__site>span{display:flex;flex:1;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.65rem 1rem;font:700 1.02rem/1.1 var(--display);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--bone-night);border:1px solid rgba(184,151,90,.42);background:var(--night);transition:color var(--m-dur-fast) var(--m-ease-out),background-color var(--m-dur-fast) var(--m-ease-out)}
.xfam__site.is-here{flex-direction:column;gap:.35rem;padding:.6rem 1rem;border:1px solid var(--brass-night);box-shadow:inset 0 -3px 0 var(--brass-night);background:linear-gradient(180deg,rgba(226,167,44,.1),transparent 70%)}
.xfam__site.is-here>span{min-height:0;padding:0;border:0;background:none;color:var(--brass-night)}
.xfam__here{font:500 .78rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--bone-night)}
.xfam__site.is-soon>span{color:var(--mute-night);border-style:dashed}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (min-width:40rem){
.xsite__row--explore .xsite__list{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.xsite__row--explore .xsite__list>li:last-child:nth-child(odd){grid-column:auto}
.xfam__list{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){.xsite__list a,.xfam__site>a{transition:none}}
/* the language picker: a tab in the phone's bottom bar, a quiet control in the desktop header (it was a bare white native box) */
.nav .locale-picker{display:flex;align-items:center;justify-content:center;min-width:0;margin:0 0 0 .4rem}
.nav .locale-picker select{-webkit-appearance:none;appearance:none;min-height:48px;max-width:100%;padding:0 .6rem;border:1px solid rgba(184,151,90,.42);border-radius:0;background:var(--night);color:var(--bone-night);font:500 .72rem/1.1 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-align:center;text-align-last:center;text-overflow:ellipsis;cursor:pointer}
.nav .locale-picker select:hover{border-color:var(--brass-night)}
.nav .locale-picker select:focus-visible{outline:2px solid var(--brass-night);outline-offset:2px}
@media (max-width:760px){
.nav .locale-picker{margin:0;min-height:48px}
.nav .locale-picker select{width:100%;padding:0 .2rem;border:0;background:transparent;color:var(--mute-night);font-size:.62rem;letter-spacing:.07em}
.nav .locale-picker select:focus-visible{outline-offset:-4px}
}